theme.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  1. /**
  2. * @license Copyright (c) 2003-2017, 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 Template from '@ckeditor/ckeditor5-ui/src/template';
  11. import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
  12. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  13. import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
  14. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  15. import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
  16. import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
  17. import '../../theme/theme.scss';
  18. testUtils.createTestUIView( {
  19. 'iconPlain1': '#icon-plain-1',
  20. 'iconPlain2': '#icon-plain-2',
  21. 'iconColor1': '#icon-color-1',
  22. 'iconColor2': '#icon-color-2',
  23. 'buttonStates': '#button-states',
  24. 'buttonTypes': '#button-types',
  25. 'buttonIcon': '#button-icon',
  26. 'buttonCustom': '#button-custom',
  27. 'buttonIconCustom': '#button-icon-custom',
  28. 'buttonIconStates': '#button-icon-states',
  29. 'buttonResponsive1': '#button-responsive-1',
  30. 'buttonResponsive2': '#button-responsive-2',
  31. 'buttonResponsive3': '#button-responsive-3',
  32. dropdown: '#dropdown',
  33. 'toolbarText': '#toolbar-text',
  34. 'toolbarButton': '#toolbar-button',
  35. 'toolbarRounded': '#toolbar-rounded',
  36. 'toolbarWrap': '#toolbar-wrap',
  37. 'toolbarSeparator': '#toolbar-separator',
  38. 'toolbarMultiRow': '#toolbar-multi-row'
  39. } ).then( ui => {
  40. renderIcon( ui );
  41. renderButton( ui );
  42. renderDropdown( ui );
  43. renderToolbar( ui );
  44. } );
  45. function renderIcon( ui ) {
  46. // --- In-text ------------------------------------------------------------
  47. ui.iconPlain1.add( icon( boldIcon ) );
  48. ui.iconPlain2.add( icon( italicIcon ) );
  49. ui.iconColor1.add( icon( boldIcon ) );
  50. ui.iconColor2.add( icon( italicIcon ) );
  51. }
  52. function renderButton( ui ) {
  53. // --- States ------------------------------------------------------------
  54. ui.buttonStates.add( button( {
  55. label: 'State: normal (none)',
  56. } ) );
  57. ui.buttonStates.add( button( {
  58. label: 'State: disabled',
  59. isEnabled: false
  60. } ) );
  61. ui.buttonStates.add( button( {
  62. label: 'State: on',
  63. isOn: true
  64. } ) );
  65. // --- Types ------------------------------------------------------------
  66. const actionButton = button( { label: 'Action button' } );
  67. const roundedButton = button( { label: 'Rounded corners' } );
  68. const boldButton = button( { label: 'Bold text' } );
  69. // TODO: It requires model interface.
  70. actionButton.element.classList.add( 'ck-button-action' );
  71. // TODO: It requires model interface.
  72. roundedButton.element.classList.add( 'ck-rounded-corners' );
  73. // TODO: It requires model interface.
  74. boldButton.element.classList.add( 'ck-button-bold' );
  75. ui.buttonTypes.add( actionButton );
  76. ui.buttonTypes.add( roundedButton );
  77. ui.buttonTypes.add( boldButton );
  78. // --- Icon ------------------------------------------------------------
  79. ui.buttonIcon.add( button( {
  80. label: 'Bold',
  81. icon: boldIcon
  82. } ) );
  83. const styledButton = button( {
  84. label: 'Button with an icon and custom styles',
  85. icon: italicIcon
  86. } );
  87. // TODO: It probably requires model interface.
  88. styledButton.element.setAttribute( 'style', 'border-radius: 100px; border: 0' );
  89. ui.buttonIconCustom.add( styledButton );
  90. ui.buttonIconStates.add( button( {
  91. label: 'Disabled',
  92. icon: boldIcon,
  93. isEnabled: false
  94. } ) );
  95. const disabledActionButton = button( {
  96. label: 'Disabled action',
  97. icon: boldIcon,
  98. isEnabled: false
  99. } );
  100. // TODO: It requires model interface.
  101. disabledActionButton.element.classList.add( 'ck-button-action' );
  102. ui.buttonIconStates.add( disabledActionButton );
  103. ui.buttonIconStates.add( button( {
  104. label: 'Bold',
  105. withText: false,
  106. tooltip: true,
  107. icon: boldIcon
  108. } ) );
  109. // --- Responsive ------------------------------------------------------------
  110. for ( let i = 1; i < 4; i++ ) {
  111. ui[ `buttonResponsive${ i }` ].add( button( {
  112. label: 'A button',
  113. isEnabled: true
  114. } ) );
  115. ui[ `buttonResponsive${ i }` ].add( button( {
  116. label: 'Bold',
  117. icon: boldIcon,
  118. isEnabled: true
  119. } ) );
  120. const notextButton = button( {
  121. label: 'Bold',
  122. withText: false,
  123. tooltip: true,
  124. icon: boldIcon
  125. } );
  126. // TODO: It requires model interface.
  127. notextButton.element.classList.add( 'ck-button-action' );
  128. ui[ `buttonResponsive${ i }` ].add( notextButton );
  129. }
  130. }
  131. function renderDropdown( ui ) {
  132. // --- ListDropdown ------------------------------------------------------------
  133. const collection = new Collection( { idProperty: 'label' } );
  134. [ 'Arial', 'Tahoma', 'Georgia' ].forEach( font => {
  135. collection.add( new Model( {
  136. label: font,
  137. style: `font-family: ${ font }`
  138. } ) );
  139. } );
  140. const itemListModel = new Model( {
  141. items: collection
  142. } );
  143. ui.dropdown.add( dropdown( {
  144. label: 'Normal state',
  145. isEnabled: true,
  146. content: itemListModel
  147. } ) );
  148. ui.dropdown.add( dropdown( {
  149. label: 'Disabled',
  150. isEnabled: false,
  151. content: itemListModel
  152. } ) );
  153. }
  154. function renderToolbar( ui ) {
  155. // --- Text ------------------------------------------------------------
  156. ui.toolbarText.add( toolbar( [
  157. icon( boldIcon ),
  158. text()
  159. ] ) );
  160. // --- Button ------------------------------------------------------------
  161. ui.toolbarButton.add( toolbar( [
  162. button(),
  163. text(),
  164. button( {
  165. label: 'Button with an icon',
  166. icon: boldIcon
  167. } ),
  168. dropdown(),
  169. button()
  170. ] ) );
  171. // --- Rounded ------------------------------------------------------------
  172. ui.toolbarRounded.add( toolbar( [
  173. button( {
  174. label: 'A button which corners are also rounded because of toolbar class'
  175. } ),
  176. button( {
  177. label: 'Button with an icon',
  178. icon: boldIcon
  179. } )
  180. ] ) );
  181. // --- Wrap ------------------------------------------------------------
  182. const wrapToolbar = toolbar( [
  183. button(),
  184. button(),
  185. button()
  186. ] );
  187. wrapToolbar.element.style.width = '150px';
  188. ui.toolbarWrap.add( wrapToolbar );
  189. // --- Separator ------------------------------------------------------------
  190. ui.toolbarSeparator.add( toolbar( [
  191. button(),
  192. button(),
  193. toolbarSeparator(),
  194. button( {
  195. label: 'Foo',
  196. icon: boldIcon
  197. } ),
  198. toolbarSeparator(),
  199. button( {
  200. label: 'Bar RTL',
  201. icon: boldIcon
  202. } )
  203. ] ) );
  204. // --- Multi row ------------------------------------------------------------
  205. ui.toolbarMultiRow.add( toolbar( [
  206. button(),
  207. button(),
  208. toolbarNewLine(),
  209. button( {
  210. label: 'Foo',
  211. icon: boldIcon
  212. } ),
  213. button( {
  214. label: 'Bar',
  215. icon: boldIcon
  216. } ),
  217. button( {
  218. label: 'Baz',
  219. icon: boldIcon
  220. } )
  221. ] ) );
  222. }
  223. const TextView = class extends View {
  224. constructor() {
  225. super();
  226. this.element = document.createTextNode( 'Sample text' );
  227. }
  228. };
  229. function text() {
  230. return new TextView();
  231. }
  232. function icon( content ) {
  233. const icon = new IconView();
  234. icon.content = content;
  235. return icon;
  236. }
  237. function button( {
  238. label = 'Button',
  239. isEnabled = true,
  240. isOn = false,
  241. withText = true,
  242. tooltip,
  243. icon
  244. } = {} ) {
  245. const button = new ButtonView();
  246. button.set( { label, isEnabled, isOn, withText, icon, tooltip } );
  247. return button;
  248. }
  249. function toolbar( children = [] ) {
  250. const toolbar = new ToolbarView();
  251. children.forEach( c => toolbar.items.add( c ) );
  252. return toolbar;
  253. }
  254. function dropdown( {
  255. label = 'Dropdown',
  256. isEnabled = true,
  257. isOn = false,
  258. withText = true,
  259. items = new Collection( { idProperty: 'label' } )
  260. } = {} ) {
  261. const model = new Model( { label, isEnabled, items, isOn, withText } );
  262. const dropdown = createListDropdown( model, {} );
  263. return dropdown;
  264. }
  265. const ToolbarSeparatorView = class extends View {
  266. constructor() {
  267. super();
  268. this.template = new Template( {
  269. tag: 'span',
  270. attributes: {
  271. class: 'ck-toolbar-separator'
  272. }
  273. } );
  274. }
  275. };
  276. function toolbarSeparator() {
  277. return new ToolbarSeparatorView();
  278. }
  279. const ToolbarNewlineView = class extends View {
  280. constructor() {
  281. super();
  282. this.template = new Template( {
  283. tag: 'span',
  284. attributes: {
  285. class: 'ck-toolbar-newline'
  286. }
  287. } );
  288. }
  289. };
  290. function toolbarNewLine() {
  291. return new ToolbarNewlineView();
  292. }