theme.js 8.5 KB

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