8
0

theme.js 9.2 KB

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