theme.js 9.1 KB

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