8
0

dropdown.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. /**
  2. * @license Copyright (c) 2003-2018, 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 testUtils from '../../_utils/utils';
  9. import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
  10. import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
  11. import alignCenterIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
  12. import ButtonView from '../../../src/button/buttonview';
  13. import addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
  14. import { createDropdown, addToolbarToDropdown } from '../../../src/dropdown/utils';
  15. const ui = testUtils.createTestUIView( {
  16. dropdown: '#dropdown',
  17. listDropdown: '#list-dropdown',
  18. dropdownShared: '#dropdown-shared',
  19. dropdownLabel: '#dropdown-label',
  20. toolbarDropdown: '#dropdown-toolbar'
  21. } );
  22. function testEmpty() {
  23. const model = new Model( {
  24. label: 'Dropdown',
  25. isEnabled: true,
  26. isOn: false,
  27. withText: true
  28. } );
  29. const dropdownView = createDropdown( model, {} );
  30. ui.dropdown.add( dropdownView );
  31. dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
  32. }
  33. function testList() {
  34. const collection = new Collection( { idProperty: 'label' } );
  35. [ '0.8em', '1em', '1.2em', '1.5em', '2.0em', '3.0em' ].forEach( font => {
  36. collection.add( new Model( {
  37. label: font,
  38. style: `font-size: ${ font }`
  39. } ) );
  40. } );
  41. const model = new Model( {
  42. label: 'ListDropdown',
  43. isEnabled: true,
  44. isOn: false,
  45. withText: true,
  46. items: collection
  47. } );
  48. const dropdownView = createDropdown( model, {} );
  49. addListViewToDropdown( dropdownView, model, {} );
  50. dropdownView.on( 'execute', evt => {
  51. /* global console */
  52. console.log( 'List#execute:', evt.source.label );
  53. } );
  54. ui.listDropdown.add( dropdownView );
  55. window.listDropdownModel = model;
  56. window.listDropdownCollection = collection;
  57. window.Model = Model;
  58. }
  59. function testSharedModel() {
  60. const model = new Model( {
  61. label: 'Shared Model',
  62. isEnabled: true,
  63. isOn: false,
  64. withText: true
  65. } );
  66. const dropdownView1 = createDropdown( model, {} );
  67. const dropdownView2 = createDropdown( model, {} );
  68. ui.dropdownShared.add( dropdownView1 );
  69. ui.dropdownShared.add( dropdownView2 );
  70. dropdownView1.panelView.element.innerHTML = dropdownView2.panelView.element.innerHTML = 'Empty panel.';
  71. }
  72. function testLongLabel() {
  73. const model = new Model( {
  74. label: 'Dropdown with a very long label',
  75. isEnabled: true,
  76. isOn: false,
  77. withText: true
  78. } );
  79. const dropdownView = createDropdown( model, {} );
  80. ui.dropdownLabel.add( dropdownView );
  81. dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
  82. }
  83. function testButton() {
  84. const locale = {};
  85. const icons = { left: alignLeftIcon, right: alignRightIcon, center: alignCenterIcon };
  86. // Buttons to be obtained from factory later on.
  87. const buttons = Object.keys( icons ).map( icon => new Model( { label: icon, isEnabled: true, isOn: false, icon: icons[ icon ] } ) );
  88. const buttonViews = buttons
  89. .map( buttonModel => {
  90. const buttonView = new ButtonView( locale );
  91. buttonView.bind( 'isEnabled', 'isOn', 'icon', 'label' ).to( buttonModel );
  92. buttonView.on( 'execute', () => console.log( `Execute: ${ buttonModel.label }` ) );
  93. return buttonView;
  94. } );
  95. const toolbarDropdownModel = new Model( {
  96. isVertical: true
  97. } );
  98. const toolbarDropdown = createDropdown( toolbarDropdownModel, locale );
  99. addToolbarToDropdown( toolbarDropdown, buttonViews, toolbarDropdownModel );
  100. ui.toolbarDropdown.add( toolbarDropdown );
  101. window.buttons = buttons;
  102. window.toolbarDropdownModel = toolbarDropdownModel;
  103. }
  104. testEmpty();
  105. testList();
  106. testSharedModel();
  107. testLongLabel();
  108. testButton();