dropdown.js 2.5 KB

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