theme.js 9.5 KB

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