theme.js 14 KB

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