theme.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals document */
  6. import testUtils from '@ckeditor/ckeditor5-ui/tests/_utils/utils';
  7. import Collection from '@ckeditor/ckeditor5-utils/src/collection';
  8. import Model from '@ckeditor/ckeditor5-ui/src/model';
  9. import View from '@ckeditor/ckeditor5-ui/src/view';
  10. import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
  11. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  12. import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
  13. import { createDropdown, addListToDropdown, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
  14. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  15. import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
  16. import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
  17. import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
  18. import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
  19. import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
  20. import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
  21. import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
  22. import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
  23. class TextView extends View {
  24. constructor() {
  25. super();
  26. this.element = document.createTextNode( 'Sample text' );
  27. }
  28. }
  29. class ToolbarNewlineView extends View {
  30. constructor() {
  31. super();
  32. this.setTemplate( {
  33. tag: 'span',
  34. attributes: {
  35. class: 'ck-toolbar__newline'
  36. }
  37. } );
  38. }
  39. }
  40. const ui = testUtils.createTestUIView( {
  41. 'iconPlain1': '#icon-plain-1',
  42. 'iconPlain2': '#icon-plain-2',
  43. 'iconColor1': '#icon-color-1',
  44. 'iconColor2': '#icon-color-2',
  45. 'buttonStates': '#button-states',
  46. 'buttonTypes': '#button-types',
  47. 'buttonIcon': '#button-icon',
  48. 'buttonCustom': '#button-custom',
  49. 'buttonIconCustom': '#button-icon-custom',
  50. 'buttonIconStates': '#button-icon-states',
  51. 'buttonResponsive1': '#button-responsive-1',
  52. 'buttonResponsive2': '#button-responsive-2',
  53. 'buttonResponsive3': '#button-responsive-3',
  54. 'buttonTooltip': '#button-tooltip',
  55. listDropdown: '#list-dropdown',
  56. buttonDropdown: '#button-dropdown',
  57. 'toolbarText': '#toolbar-text',
  58. 'toolbarButton': '#toolbar-button',
  59. 'toolbarRounded': '#toolbar-rounded',
  60. 'toolbarWrap': '#toolbar-wrap',
  61. 'toolbarSeparator': '#toolbar-separator',
  62. 'toolbarMultiRow': '#toolbar-multi-row',
  63. 'inputLabeled': '#input-labeled',
  64. 'inputReadOnly': '#input-read-only'
  65. } );
  66. renderIcon();
  67. renderButton();
  68. renderDropdown();
  69. renderToolbar();
  70. renderInput();
  71. function renderIcon() {
  72. // --- In-text ------------------------------------------------------------
  73. ui.iconPlain1.add( icon( boldIcon ) );
  74. ui.iconPlain2.add( icon( italicIcon ) );
  75. ui.iconColor1.add( icon( boldIcon ) );
  76. ui.iconColor2.add( icon( italicIcon ) );
  77. }
  78. function renderButton() {
  79. // --- States ------------------------------------------------------------
  80. ui.buttonStates.add( toolbar( [
  81. button( {
  82. label: 'State: normal (none)',
  83. } ),
  84. button( {
  85. label: 'State: disabled',
  86. isEnabled: false
  87. } ),
  88. button( {
  89. label: 'State: on',
  90. isOn: true
  91. } )
  92. ] ) );
  93. // --- Types ------------------------------------------------------------
  94. const actionButton = button( { label: 'Action button' } );
  95. const roundedButton = button( { label: 'Rounded corners' } );
  96. const boldButton = button( { label: 'Bold text' } );
  97. const saveButton = button( { label: 'Save', withText: false, icon: checkIcon } );
  98. const cancelButton = button( { label: 'Cancel', withText: false, icon: cancelIcon } );
  99. ui.buttonTypes.add( toolbar( [
  100. actionButton, roundedButton, boldButton, saveButton, cancelButton
  101. ] ) );
  102. // TODO: It requires model interface.
  103. actionButton.element.classList.add( 'ck-button-action' );
  104. // TODO: It requires model interface.
  105. roundedButton.element.classList.add( 'ck-rounded-corners' );
  106. // TODO: It requires model interface.
  107. boldButton.element.classList.add( 'ck-button-bold' );
  108. saveButton.element.classList.add( 'ck-button-save' );
  109. cancelButton.element.classList.add( 'ck-button-cancel' );
  110. // --- Icon ------------------------------------------------------------
  111. ui.buttonIcon.add( toolbar( [
  112. button( {
  113. label: 'Bold',
  114. icon: boldIcon
  115. } )
  116. ] ) );
  117. const styledButton = button( {
  118. label: 'Button with an icon and custom styles',
  119. icon: italicIcon
  120. } );
  121. ui.buttonIconCustom.add( toolbar( [ styledButton ] ) );
  122. // TODO: It probably requires model interface.
  123. styledButton.element.setAttribute( 'style', 'border-radius: 100px; border: 0' );
  124. const disabledActionButton = button( {
  125. label: 'Disabled action',
  126. icon: boldIcon,
  127. isEnabled: false
  128. } );
  129. ui.buttonIconStates.add( toolbar( [
  130. button( {
  131. label: 'Disabled',
  132. icon: boldIcon,
  133. isEnabled: false
  134. } ),
  135. disabledActionButton,
  136. button( {
  137. label: 'Bold',
  138. withText: false,
  139. tooltip: true,
  140. icon: boldIcon
  141. } )
  142. ] ) );
  143. // TODO: It requires model interface.
  144. disabledActionButton.element.classList.add( 'ck-button-action' );
  145. // --- Responsive ------------------------------------------------------------
  146. for ( let i = 1; i < 4; i++ ) {
  147. const notextButton = button( {
  148. label: 'Bold',
  149. withText: false,
  150. tooltip: true,
  151. icon: boldIcon
  152. } );
  153. ui[ `buttonResponsive${ i }` ].add( toolbar( [
  154. button( {
  155. label: 'A button',
  156. isEnabled: true
  157. } ),
  158. button( {
  159. label: 'Bold',
  160. icon: boldIcon,
  161. isEnabled: true
  162. } ),
  163. notextButton
  164. ] ) );
  165. // TODO: It requires model interface.
  166. notextButton.element.classList.add( 'ck-button-action' );
  167. }
  168. // --- Tooltip ------------------------------------------------------------
  169. ui.buttonTooltip.add( toolbar( [
  170. button( {
  171. label: 'This button has a tooltip (south)',
  172. withText: true,
  173. tooltip: 'The content of the tooltip',
  174. } ),
  175. button( {
  176. label: 'This one too – north',
  177. withText: true,
  178. keystroke: 'Ctrl+N',
  179. tooltip: true,
  180. tooltipPosition: 'n'
  181. } )
  182. ] ) );
  183. }
  184. function renderDropdown() {
  185. // --- ListDropdown ------------------------------------------------------------
  186. const collection = new Collection( { idProperty: 'label' } );
  187. collection.add( {
  188. type: 'switchbutton',
  189. model: new Model( {
  190. label: 'A switchable list item',
  191. withText: true
  192. } )
  193. } );
  194. collection.add( {
  195. type: 'switchbutton',
  196. model: new Model( {
  197. label: 'On with an icon',
  198. withText: true,
  199. isOn: true,
  200. icon: boldIcon
  201. } )
  202. } );
  203. collection.add( {
  204. type: 'switchbutton',
  205. model: new Model( {
  206. label: 'Disabled',
  207. withText: true,
  208. isEnabled: false
  209. } )
  210. } );
  211. collection.add( { type: 'separator' } );
  212. [ 'Arial', 'Tahoma', 'Georgia' ].forEach( font => {
  213. collection.add( {
  214. type: 'button',
  215. model: new Model( {
  216. label: `${ font } (style attr)`,
  217. style: `font-family: ${ font }`,
  218. withText: true
  219. } )
  220. } );
  221. } );
  222. collection.add( { type: 'separator' } );
  223. collection.add( {
  224. type: 'button',
  225. model: new Model( {
  226. label: 'Bold',
  227. withText: true,
  228. icon: boldIcon
  229. } )
  230. } );
  231. collection.add( {
  232. type: 'button',
  233. model: new Model( {
  234. label: 'This item is on',
  235. withText: true,
  236. icon: boldIcon,
  237. isOn: true
  238. } )
  239. } );
  240. collection.add( {
  241. type: 'button',
  242. model: new Model( {
  243. label: 'Disabled',
  244. withText: true,
  245. icon: boldIcon,
  246. isEnabled: false
  247. } )
  248. } );
  249. ui.listDropdown.add( toolbar( [
  250. listDropdown( {
  251. label: 'Normal state',
  252. isEnabled: true,
  253. items: collection
  254. } ),
  255. listDropdown( {
  256. label: 'Disabled',
  257. isEnabled: false,
  258. items: collection
  259. } )
  260. ] ) );
  261. ui.buttonDropdown.add( toolbar( [
  262. toolbarDropdown( {
  263. label: 'Normal state',
  264. isEnabled: true,
  265. buttons: [
  266. button( {
  267. withText: false,
  268. label: 'foo',
  269. icon: boldIcon
  270. } ),
  271. button( {
  272. withText: false,
  273. label: 'foo',
  274. icon: italicIcon
  275. } )
  276. ]
  277. } ),
  278. toolbarDropdown( {
  279. label: 'Disabled',
  280. isEnabled: false,
  281. buttons: [
  282. button( {
  283. withText: false,
  284. isEnabled: false,
  285. label: 'foo',
  286. icon: boldIcon
  287. } ),
  288. button( {
  289. withText: false,
  290. isEnabled: false,
  291. label: 'foo',
  292. icon: italicIcon
  293. } )
  294. ]
  295. } )
  296. ] ) );
  297. }
  298. function renderToolbar() {
  299. // --- Text ------------------------------------------------------------
  300. ui.toolbarText.add( toolbar( [
  301. icon( boldIcon ),
  302. text()
  303. ] ) );
  304. // --- Button ------------------------------------------------------------
  305. ui.toolbarButton.add( toolbar( [
  306. button(),
  307. text(),
  308. button( {
  309. label: 'Button with an icon',
  310. icon: boldIcon
  311. } ),
  312. listDropdown(),
  313. splitButtonDropdown( {
  314. label: 'Split button dropdown',
  315. withText: false,
  316. icon: boldIcon
  317. } ),
  318. button(),
  319. switchbutton( {
  320. label: 'Switchable',
  321. withText: true
  322. } )
  323. ] ) );
  324. // --- Rounded ------------------------------------------------------------
  325. ui.toolbarRounded.add( toolbar( [
  326. button( {
  327. label: 'A button which corners are also rounded because of toolbar class'
  328. } ),
  329. button( {
  330. label: 'Button with an icon',
  331. icon: boldIcon
  332. } )
  333. ] ) );
  334. // --- Wrap ------------------------------------------------------------
  335. const wrapToolbar = toolbar( [
  336. button(),
  337. button(),
  338. button()
  339. ] );
  340. ui.toolbarWrap.add( wrapToolbar );
  341. wrapToolbar.element.style.width = '150px';
  342. // --- Separator ------------------------------------------------------------
  343. ui.toolbarSeparator.add( toolbar( [
  344. button(),
  345. button(),
  346. toolbarSeparator(),
  347. button( {
  348. label: 'Foo',
  349. icon: boldIcon
  350. } ),
  351. toolbarSeparator(),
  352. button( {
  353. label: 'Bar RTL',
  354. icon: boldIcon
  355. } )
  356. ] ) );
  357. // --- Multi row ------------------------------------------------------------
  358. ui.toolbarMultiRow.add( toolbar( [
  359. button(),
  360. button(),
  361. toolbarNewLine(),
  362. button( {
  363. label: 'Foo',
  364. icon: boldIcon
  365. } ),
  366. button( {
  367. label: 'Bar',
  368. icon: boldIcon
  369. } ),
  370. button( {
  371. label: 'Baz',
  372. icon: boldIcon
  373. } )
  374. ] ) );
  375. }
  376. function renderInput() {
  377. ui.inputLabeled.add( input() );
  378. ui.inputReadOnly.add( input( {
  379. label: 'A read–only input',
  380. isReadOnly: true,
  381. value: 'Read–only input value'
  382. } ) );
  383. }
  384. function text() {
  385. return new TextView();
  386. }
  387. function icon( content ) {
  388. const icon = new IconView();
  389. icon.content = content;
  390. return icon;
  391. }
  392. function button( {
  393. label = 'Button',
  394. isEnabled = true,
  395. isOn = false,
  396. withText = true,
  397. keystroke = null,
  398. tooltip,
  399. tooltipPosition = 's',
  400. icon
  401. } = {} ) {
  402. const button = new ButtonView();
  403. button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, tooltipPosition } );
  404. return button;
  405. }
  406. function switchbutton( {
  407. label = 'Switch button',
  408. isEnabled = true,
  409. isOn = false,
  410. withText = true,
  411. keystroke = null,
  412. tooltip,
  413. tooltipPosition = 's',
  414. icon
  415. } = {} ) {
  416. const button = new SwitchButtonView();
  417. button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, tooltipPosition } );
  418. return button;
  419. }
  420. function toolbar( children = [] ) {
  421. const toolbar = new ToolbarView();
  422. children.forEach( c => toolbar.items.add( c ) );
  423. return toolbar;
  424. }
  425. function listDropdown( {
  426. label = 'Dropdown',
  427. isEnabled = true,
  428. isOn = false,
  429. withText = true,
  430. items = new Collection( { idProperty: 'label' } )
  431. } = {} ) {
  432. const dropdown = createDropdown( {} );
  433. addListToDropdown( dropdown, items );
  434. dropdown.buttonView.set( { label, isEnabled, isOn, withText } );
  435. return dropdown;
  436. }
  437. function toolbarDropdown( {
  438. label = 'Button dropdown',
  439. isEnabled = true,
  440. isOn = false,
  441. withText = true,
  442. isVertical = true,
  443. buttons = []
  444. } = {} ) {
  445. const dropdown = createDropdown( {} );
  446. addToolbarToDropdown( dropdown, buttons );
  447. dropdown.buttonView.set( { label, isEnabled, isVertical, isOn, withText } );
  448. return dropdown;
  449. }
  450. function splitButtonDropdown( {
  451. label = 'Button dropdown',
  452. icon = undefined,
  453. isEnabled = true,
  454. isOn = false,
  455. withText = true,
  456. isVertical = true,
  457. buttons = []
  458. } = {} ) {
  459. const dropdown = createDropdown( {}, SplitButtonView );
  460. addToolbarToDropdown( dropdown, buttons );
  461. dropdown.buttonView.set( { icon, label, isEnabled, isVertical, isOn, withText } );
  462. return dropdown;
  463. }
  464. function toolbarSeparator() {
  465. return new ToolbarSeparatorView();
  466. }
  467. function toolbarNewLine() {
  468. return new ToolbarNewlineView();
  469. }
  470. function input( {
  471. label = 'Labeled input',
  472. isReadOnly = false,
  473. value = 'The value of the input'
  474. } = {} ) {
  475. const labeledInput = new LabeledInputView( {}, InputTextView );
  476. labeledInput.set( { isReadOnly, label, value } );
  477. return labeledInput;
  478. }