8
0

theme.js 10 KB

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