8
0

dropdown.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals document, window */
  6. import Model from '../../../src/model';
  7. import Collection from '@ckeditor/ckeditor5-utils/src/collection';
  8. import createDropdown from '../../../src/dropdown/createdropdown';
  9. import createListDropdown from '../../../src/dropdown/list/createlistdropdown';
  10. import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
  11. function renderInto( selector, view ) {
  12. view.init();
  13. document.querySelector( selector ).appendChild( view.element );
  14. }
  15. function testEmpty() {
  16. const dropdownView = createDropdown( new Model( {
  17. label: 'Dropdown',
  18. isEnabled: true,
  19. isOn: false,
  20. withText: true
  21. } ) );
  22. dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
  23. renderInto( '#dropdown', dropdownView );
  24. }
  25. function testList() {
  26. const collection = new Collection( { idProperty: 'label' } );
  27. [ '0.8em', '1em', '1.2em', '1.5em', '2.0em', '3.0em' ].forEach( font => {
  28. collection.add( new Model( {
  29. label: font,
  30. style: `font-size: ${ font }`
  31. } ) );
  32. } );
  33. const model = new Model( {
  34. label: 'ListDropdown',
  35. isEnabled: true,
  36. isOn: false,
  37. withText: true,
  38. items: collection
  39. } );
  40. const dropdownView = createListDropdown( model );
  41. dropdownView.on( 'execute', evt => {
  42. /* global console */
  43. console.log( 'List#execute:', evt.source.label );
  44. } );
  45. renderInto( '#list-dropdown', dropdownView );
  46. window.listDropdownModel = model;
  47. window.listDropdownCollection = collection;
  48. window.Model = Model;
  49. }
  50. function testSharedModel() {
  51. const model = new Model( {
  52. label: 'Shared Model',
  53. isEnabled: true,
  54. isOn: false,
  55. withText: true
  56. } );
  57. const dropdownView1 = createDropdown( model );
  58. const dropdownView2 = createDropdown( model );
  59. renderInto( '#dropdown-shared', dropdownView1 );
  60. renderInto( '#dropdown-shared', dropdownView2 );
  61. dropdownView1.panelView.element.innerHTML = dropdownView2.panelView.element.innerHTML = 'Empty panel.';
  62. }
  63. function testLongLabel() {
  64. const dropdownView = createDropdown( new Model( {
  65. label: 'Dropdown with a very long label',
  66. isEnabled: true,
  67. isOn: false,
  68. withText: true
  69. } ) );
  70. renderInto( '#dropdown-label', dropdownView );
  71. dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
  72. }
  73. testEmpty();
  74. testList();
  75. testSharedModel();
  76. testLongLabel();