8
0

dropdown.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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 'ckeditor5-theme-lark/theme/theme.scss';
  11. function renderInto( selector, view ) {
  12. view.init().then( () => {
  13. document.querySelector( selector ).appendChild( view.element );
  14. } );
  15. }
  16. function testEmpty() {
  17. const dropdownView = createDropdown( new Model( {
  18. label: 'Dropdown',
  19. isEnabled: true,
  20. isOn: false,
  21. withText: true
  22. } ) );
  23. dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
  24. renderInto( '#dropdown', dropdownView );
  25. }
  26. function testList() {
  27. const collection = new Collection( { idProperty: 'label' } );
  28. [ '0.8em', '1em', '1.2em', '1.5em', '2.0em', '3.0em' ].forEach( font => {
  29. collection.add( new Model( {
  30. label: font,
  31. style: `font-size: ${ font }`
  32. } ) );
  33. } );
  34. const model = new Model( {
  35. label: 'ListDropdown',
  36. isEnabled: true,
  37. isOn: false,
  38. withText: true,
  39. items: collection
  40. } );
  41. const dropdownView = createListDropdown( model );
  42. dropdownView.on( 'execute', ( evt ) => {
  43. /* global console */
  44. console.log( 'List#execute:', evt.source.label );
  45. } );
  46. renderInto( '#list-dropdown', dropdownView );
  47. window.listDropdownModel = model;
  48. window.listDropdownCollection = collection;
  49. window.Model = Model;
  50. }
  51. function testSharedModel() {
  52. const model = new Model( {
  53. label: 'Shared Model',
  54. isEnabled: true,
  55. isOn: false,
  56. withText: true
  57. } );
  58. const dropdownView1 = createDropdown( model );
  59. const dropdownView2 = createDropdown( model );
  60. renderInto( '#dropdown-shared', dropdownView1 );
  61. renderInto( '#dropdown-shared', dropdownView2 );
  62. dropdownView1.panelView.element.innerHTML = dropdownView2.panelView.element.innerHTML = 'Empty panel.';
  63. }
  64. function testLongLabel() {
  65. const dropdownView = createDropdown( new Model( {
  66. label: 'Dropdown with a very long label',
  67. isEnabled: true,
  68. isOn: false,
  69. withText: true
  70. } ) );
  71. renderInto( '#dropdown-label', dropdownView );
  72. dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
  73. }
  74. testEmpty();
  75. testList();
  76. testSharedModel();
  77. testLongLabel();