theme.js 11 KB

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