dropdown.js 5.0 KB

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