8
0

theme.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  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 IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
  11. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  12. import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
  13. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  14. import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
  15. import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
  16. import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
  17. import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
  18. import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
  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.setTemplate( {
  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. 'buttonTooltip': '#button-tooltip',
  51. dropdown: '#dropdown',
  52. 'toolbarText': '#toolbar-text',
  53. 'toolbarButton': '#toolbar-button',
  54. 'toolbarRounded': '#toolbar-rounded',
  55. 'toolbarWrap': '#toolbar-wrap',
  56. 'toolbarSeparator': '#toolbar-separator',
  57. 'toolbarMultiRow': '#toolbar-multi-row',
  58. 'inputLabeled': '#input-labeled',
  59. 'inputReadOnly': '#input-read-only'
  60. } );
  61. renderIcon();
  62. renderButton();
  63. renderDropdown();
  64. renderToolbar();
  65. renderInput();
  66. function renderIcon() {
  67. // --- In-text ------------------------------------------------------------
  68. ui.iconPlain1.add( icon( boldIcon ) );
  69. ui.iconPlain2.add( icon( italicIcon ) );
  70. ui.iconColor1.add( icon( boldIcon ) );
  71. ui.iconColor2.add( icon( italicIcon ) );
  72. }
  73. function renderButton() {
  74. // --- States ------------------------------------------------------------
  75. ui.buttonStates.add( button( {
  76. label: 'State: normal (none)',
  77. } ) );
  78. ui.buttonStates.add( button( {
  79. label: 'State: disabled',
  80. isEnabled: false
  81. } ) );
  82. ui.buttonStates.add( button( {
  83. label: 'State: on',
  84. isOn: true
  85. } ) );
  86. // --- Types ------------------------------------------------------------
  87. const actionButton = button( { label: 'Action button' } );
  88. const roundedButton = button( { label: 'Rounded corners' } );
  89. const boldButton = button( { label: 'Bold text' } );
  90. ui.buttonTypes.add( actionButton );
  91. ui.buttonTypes.add( roundedButton );
  92. ui.buttonTypes.add( boldButton );
  93. // TODO: It requires model interface.
  94. actionButton.element.classList.add( 'ck-button-action' );
  95. // TODO: It requires model interface.
  96. roundedButton.element.classList.add( 'ck-rounded-corners' );
  97. // TODO: It requires model interface.
  98. boldButton.element.classList.add( 'ck-button-bold' );
  99. // --- Icon ------------------------------------------------------------
  100. ui.buttonIcon.add( button( {
  101. label: 'Bold',
  102. icon: boldIcon
  103. } ) );
  104. const styledButton = button( {
  105. label: 'Button with an icon and custom styles',
  106. icon: italicIcon
  107. } );
  108. ui.buttonIconCustom.add( styledButton );
  109. // TODO: It probably requires model interface.
  110. styledButton.element.setAttribute( 'style', 'border-radius: 100px; border: 0' );
  111. ui.buttonIconStates.add( button( {
  112. label: 'Disabled',
  113. icon: boldIcon,
  114. isEnabled: false
  115. } ) );
  116. const disabledActionButton = button( {
  117. label: 'Disabled action',
  118. icon: boldIcon,
  119. isEnabled: false
  120. } );
  121. ui.buttonIconStates.add( disabledActionButton );
  122. // TODO: It requires model interface.
  123. disabledActionButton.element.classList.add( 'ck-button-action' );
  124. ui.buttonIconStates.add( button( {
  125. label: 'Bold',
  126. withText: false,
  127. tooltip: true,
  128. icon: boldIcon
  129. } ) );
  130. // --- Responsive ------------------------------------------------------------
  131. for ( let i = 1; i < 4; i++ ) {
  132. ui[ `buttonResponsive${ i }` ].add( button( {
  133. label: 'A button',
  134. isEnabled: true
  135. } ) );
  136. ui[ `buttonResponsive${ i }` ].add( button( {
  137. label: 'Bold',
  138. icon: boldIcon,
  139. isEnabled: true
  140. } ) );
  141. const notextButton = button( {
  142. label: 'Bold',
  143. withText: false,
  144. tooltip: true,
  145. icon: boldIcon
  146. } );
  147. ui[ `buttonResponsive${ i }` ].add( notextButton );
  148. // TODO: It requires model interface.
  149. notextButton.element.classList.add( 'ck-button-action' );
  150. }
  151. // --- Tooltip ------------------------------------------------------------
  152. ui.buttonTooltip.add( button( {
  153. label: 'This button has a tooltip (south)',
  154. withText: true,
  155. tooltip: 'The content of the tooltip',
  156. } ) );
  157. ui.buttonTooltip.add( button( {
  158. label: 'This one too – north',
  159. withText: true,
  160. keystroke: 'Ctrl+N',
  161. tooltip: true,
  162. tooltipPosition: 'n'
  163. } ) );
  164. }
  165. function renderDropdown() {
  166. // --- ListDropdown ------------------------------------------------------------
  167. const collection = new Collection( { idProperty: 'label' } );
  168. [ 'Arial', 'Tahoma', 'Georgia' ].forEach( font => {
  169. collection.add( new Model( {
  170. label: font,
  171. style: `font-family: ${ font }`
  172. } ) );
  173. } );
  174. const itemListModel = new Model( {
  175. items: collection
  176. } );
  177. ui.dropdown.add( dropdown( {
  178. label: 'Normal state',
  179. isEnabled: true,
  180. content: itemListModel
  181. } ) );
  182. ui.dropdown.add( dropdown( {
  183. label: 'Disabled',
  184. isEnabled: false,
  185. content: itemListModel
  186. } ) );
  187. }
  188. function renderToolbar() {
  189. // --- Text ------------------------------------------------------------
  190. ui.toolbarText.add( toolbar( [
  191. icon( boldIcon ),
  192. text()
  193. ] ) );
  194. // --- Button ------------------------------------------------------------
  195. ui.toolbarButton.add( toolbar( [
  196. button(),
  197. text(),
  198. button( {
  199. label: 'Button with an icon',
  200. icon: boldIcon
  201. } ),
  202. dropdown(),
  203. button()
  204. ] ) );
  205. // --- Rounded ------------------------------------------------------------
  206. ui.toolbarRounded.add( toolbar( [
  207. button( {
  208. label: 'A button which corners are also rounded because of toolbar class'
  209. } ),
  210. button( {
  211. label: 'Button with an icon',
  212. icon: boldIcon
  213. } )
  214. ] ) );
  215. // --- Wrap ------------------------------------------------------------
  216. const wrapToolbar = toolbar( [
  217. button(),
  218. button(),
  219. button()
  220. ] );
  221. ui.toolbarWrap.add( wrapToolbar );
  222. wrapToolbar.element.style.width = '150px';
  223. // --- Separator ------------------------------------------------------------
  224. ui.toolbarSeparator.add( toolbar( [
  225. button(),
  226. button(),
  227. toolbarSeparator(),
  228. button( {
  229. label: 'Foo',
  230. icon: boldIcon
  231. } ),
  232. toolbarSeparator(),
  233. button( {
  234. label: 'Bar RTL',
  235. icon: boldIcon
  236. } )
  237. ] ) );
  238. // --- Multi row ------------------------------------------------------------
  239. ui.toolbarMultiRow.add( toolbar( [
  240. button(),
  241. button(),
  242. toolbarNewLine(),
  243. button( {
  244. label: 'Foo',
  245. icon: boldIcon
  246. } ),
  247. button( {
  248. label: 'Bar',
  249. icon: boldIcon
  250. } ),
  251. button( {
  252. label: 'Baz',
  253. icon: boldIcon
  254. } )
  255. ] ) );
  256. }
  257. function renderInput() {
  258. ui.inputLabeled.add( input() );
  259. ui.inputReadOnly.add( input( {
  260. label: 'A read–only input',
  261. isReadOnly: true,
  262. value: 'Read–only input value'
  263. } ) );
  264. }
  265. function text() {
  266. return new TextView();
  267. }
  268. function icon( content ) {
  269. const icon = new IconView();
  270. icon.content = content;
  271. return icon;
  272. }
  273. function button( {
  274. label = 'Button',
  275. isEnabled = true,
  276. isOn = false,
  277. withText = true,
  278. keystroke = null,
  279. tooltip,
  280. tooltipPosition = 's',
  281. icon
  282. } = {} ) {
  283. const button = new ButtonView();
  284. button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, tooltipPosition } );
  285. return button;
  286. }
  287. function toolbar( children = [] ) {
  288. const toolbar = new ToolbarView();
  289. children.forEach( c => toolbar.items.add( c ) );
  290. return toolbar;
  291. }
  292. function dropdown( {
  293. label = 'Dropdown',
  294. isEnabled = true,
  295. isOn = false,
  296. withText = true,
  297. items = new Collection( { idProperty: 'label' } )
  298. } = {} ) {
  299. const model = new Model( { label, isEnabled, items, isOn, withText } );
  300. const dropdown = createListDropdown( model, {} );
  301. return dropdown;
  302. }
  303. function toolbarSeparator() {
  304. return new ToolbarSeparatorView();
  305. }
  306. function toolbarNewLine() {
  307. return new ToolbarNewlineView();
  308. }
  309. function input( {
  310. label = 'Labeled input',
  311. isReadOnly = false,
  312. value = 'The value of the input'
  313. } = {} ) {
  314. const labeledInput = new LabeledInputView( {}, InputTextView );
  315. labeledInput.set( { isReadOnly, label, value } );
  316. return labeledInput;
  317. }