8
0

theme.js 7.9 KB

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