theme.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  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 createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
  13. import createButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown';
  14. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  15. import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
  16. import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
  17. import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
  18. import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
  19. import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
  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( button( {
  78. label: 'State: normal (none)',
  79. } ) );
  80. ui.buttonStates.add( button( {
  81. label: 'State: disabled',
  82. isEnabled: false
  83. } ) );
  84. ui.buttonStates.add( button( {
  85. label: 'State: on',
  86. isOn: true
  87. } ) );
  88. // --- Types ------------------------------------------------------------
  89. const actionButton = button( { label: 'Action button' } );
  90. const roundedButton = button( { label: 'Rounded corners' } );
  91. const boldButton = button( { label: 'Bold text' } );
  92. ui.buttonTypes.add( actionButton );
  93. ui.buttonTypes.add( roundedButton );
  94. ui.buttonTypes.add( boldButton );
  95. // TODO: It requires model interface.
  96. actionButton.element.classList.add( 'ck-button-action' );
  97. // TODO: It requires model interface.
  98. roundedButton.element.classList.add( 'ck-rounded-corners' );
  99. // TODO: It requires model interface.
  100. boldButton.element.classList.add( 'ck-button-bold' );
  101. // --- Icon ------------------------------------------------------------
  102. ui.buttonIcon.add( button( {
  103. label: 'Bold',
  104. icon: boldIcon
  105. } ) );
  106. const styledButton = button( {
  107. label: 'Button with an icon and custom styles',
  108. icon: italicIcon
  109. } );
  110. ui.buttonIconCustom.add( styledButton );
  111. // TODO: It probably requires model interface.
  112. styledButton.element.setAttribute( 'style', 'border-radius: 100px; border: 0' );
  113. ui.buttonIconStates.add( button( {
  114. label: 'Disabled',
  115. icon: boldIcon,
  116. isEnabled: false
  117. } ) );
  118. const disabledActionButton = button( {
  119. label: 'Disabled action',
  120. icon: boldIcon,
  121. isEnabled: false
  122. } );
  123. ui.buttonIconStates.add( disabledActionButton );
  124. // TODO: It requires model interface.
  125. disabledActionButton.element.classList.add( 'ck-button-action' );
  126. ui.buttonIconStates.add( button( {
  127. label: 'Bold',
  128. withText: false,
  129. tooltip: true,
  130. icon: boldIcon
  131. } ) );
  132. // --- Responsive ------------------------------------------------------------
  133. for ( let i = 1; i < 4; i++ ) {
  134. ui[ `buttonResponsive${ i }` ].add( button( {
  135. label: 'A button',
  136. isEnabled: true
  137. } ) );
  138. ui[ `buttonResponsive${ i }` ].add( button( {
  139. label: 'Bold',
  140. icon: boldIcon,
  141. isEnabled: true
  142. } ) );
  143. const notextButton = button( {
  144. label: 'Bold',
  145. withText: false,
  146. tooltip: true,
  147. icon: boldIcon
  148. } );
  149. ui[ `buttonResponsive${ i }` ].add( notextButton );
  150. // TODO: It requires model interface.
  151. notextButton.element.classList.add( 'ck-button-action' );
  152. }
  153. // --- Tooltip ------------------------------------------------------------
  154. ui.buttonTooltip.add( button( {
  155. label: 'This button has a tooltip (south)',
  156. withText: true,
  157. tooltip: 'The content of the tooltip',
  158. } ) );
  159. ui.buttonTooltip.add( button( {
  160. label: 'This one too – north',
  161. withText: true,
  162. keystroke: 'Ctrl+N',
  163. tooltip: true,
  164. tooltipPosition: 'n'
  165. } ) );
  166. }
  167. function renderDropdown() {
  168. // --- ListDropdown ------------------------------------------------------------
  169. const collection = new Collection( { idProperty: 'label' } );
  170. [ 'Arial', 'Tahoma', 'Georgia' ].forEach( font => {
  171. collection.add( new Model( {
  172. label: font,
  173. style: `font-family: ${ font }`
  174. } ) );
  175. } );
  176. ui.listDropdown.add( listDropdown( {
  177. label: 'Normal state',
  178. isEnabled: true,
  179. items: collection
  180. } ) );
  181. ui.listDropdown.add( listDropdown( {
  182. label: 'Disabled',
  183. isEnabled: false,
  184. items: collection
  185. } ) );
  186. ui.buttonDropdown.add( buttonDropdown( {
  187. label: 'Normal state',
  188. isEnabled: true,
  189. buttons: [
  190. button( {
  191. withText: false,
  192. label: 'foo',
  193. icon: boldIcon
  194. } ),
  195. button( {
  196. withText: false,
  197. label: 'foo',
  198. icon: italicIcon
  199. } )
  200. ]
  201. } ) );
  202. ui.buttonDropdown.add( buttonDropdown( {
  203. label: 'Disabled',
  204. isEnabled: false,
  205. buttons: [
  206. button( {
  207. withText: false,
  208. isEnabled: false,
  209. label: 'foo',
  210. icon: boldIcon
  211. } ),
  212. button( {
  213. withText: false,
  214. isEnabled: false,
  215. label: 'foo',
  216. icon: italicIcon
  217. } )
  218. ]
  219. } ) );
  220. }
  221. function renderToolbar() {
  222. // --- Text ------------------------------------------------------------
  223. ui.toolbarText.add( toolbar( [
  224. icon( boldIcon ),
  225. text()
  226. ] ) );
  227. // --- Button ------------------------------------------------------------
  228. ui.toolbarButton.add( toolbar( [
  229. button(),
  230. text(),
  231. button( {
  232. label: 'Button with an icon',
  233. icon: boldIcon
  234. } ),
  235. listDropdown(),
  236. button()
  237. ] ) );
  238. // --- Rounded ------------------------------------------------------------
  239. ui.toolbarRounded.add( toolbar( [
  240. button( {
  241. label: 'A button which corners are also rounded because of toolbar class'
  242. } ),
  243. button( {
  244. label: 'Button with an icon',
  245. icon: boldIcon
  246. } )
  247. ] ) );
  248. // --- Wrap ------------------------------------------------------------
  249. const wrapToolbar = toolbar( [
  250. button(),
  251. button(),
  252. button()
  253. ] );
  254. ui.toolbarWrap.add( wrapToolbar );
  255. wrapToolbar.element.style.width = '150px';
  256. // --- Separator ------------------------------------------------------------
  257. ui.toolbarSeparator.add( toolbar( [
  258. button(),
  259. button(),
  260. toolbarSeparator(),
  261. button( {
  262. label: 'Foo',
  263. icon: boldIcon
  264. } ),
  265. toolbarSeparator(),
  266. button( {
  267. label: 'Bar RTL',
  268. icon: boldIcon
  269. } )
  270. ] ) );
  271. // --- Multi row ------------------------------------------------------------
  272. ui.toolbarMultiRow.add( toolbar( [
  273. button(),
  274. button(),
  275. toolbarNewLine(),
  276. button( {
  277. label: 'Foo',
  278. icon: boldIcon
  279. } ),
  280. button( {
  281. label: 'Bar',
  282. icon: boldIcon
  283. } ),
  284. button( {
  285. label: 'Baz',
  286. icon: boldIcon
  287. } )
  288. ] ) );
  289. }
  290. function renderInput() {
  291. ui.inputLabeled.add( input() );
  292. ui.inputReadOnly.add( input( {
  293. label: 'A read–only input',
  294. isReadOnly: true,
  295. value: 'Read–only input value'
  296. } ) );
  297. }
  298. function text() {
  299. return new TextView();
  300. }
  301. function icon( content ) {
  302. const icon = new IconView();
  303. icon.content = content;
  304. return icon;
  305. }
  306. function button( {
  307. label = 'Button',
  308. isEnabled = true,
  309. isOn = false,
  310. withText = true,
  311. keystroke = null,
  312. tooltip,
  313. tooltipPosition = 's',
  314. icon
  315. } = {} ) {
  316. const button = new ButtonView();
  317. button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, tooltipPosition } );
  318. return button;
  319. }
  320. function toolbar( children = [] ) {
  321. const toolbar = new ToolbarView();
  322. children.forEach( c => toolbar.items.add( c ) );
  323. return toolbar;
  324. }
  325. function listDropdown( {
  326. label = 'Dropdown',
  327. isEnabled = true,
  328. isOn = false,
  329. withText = true,
  330. items = new Collection( { idProperty: 'label' } )
  331. } = {} ) {
  332. const model = new Model( { label, isEnabled, items, isOn, withText } );
  333. const dropdown = createListDropdown( model, {} );
  334. return dropdown;
  335. }
  336. function buttonDropdown( {
  337. label = 'Button dropdown',
  338. isEnabled = true,
  339. isOn = false,
  340. withText = true,
  341. isVertical = true,
  342. buttons = []
  343. } = {} ) {
  344. const model = new Model( { label, isEnabled, buttons, isVertical, isOn, withText } );
  345. const dropdown = createButtonDropdown( model, {} );
  346. return dropdown;
  347. }
  348. function toolbarSeparator() {
  349. return new ToolbarSeparatorView();
  350. }
  351. function toolbarNewLine() {
  352. return new ToolbarNewlineView();
  353. }
  354. function input( {
  355. label = 'Labeled input',
  356. isReadOnly = false,
  357. value = 'The value of the input'
  358. } = {} ) {
  359. const labeledInput = new LabeledInputView( {}, InputTextView );
  360. labeledInput.set( { isReadOnly, label, value } );
  361. return labeledInput;
  362. }