theme.js 14 KB

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