theme.js 8.3 KB

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