theme.js 10 KB

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