theme.js 8.1 KB

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