theme.js 13 KB

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