theme.js 11 KB

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