dropdown.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  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 SplitButtonView from '../../../src/dropdown/button/splitbuttonview';
  14. import { createDropdown, addToolbarToDropdown, addListToDropdown } from '../../../src/dropdown/utils';
  15. const ui = testUtils.createTestUIView( {
  16. dropdown: '#dropdown',
  17. listDropdown: '#list-dropdown',
  18. dropdownLabel: '#dropdown-label',
  19. toolbarDropdown: '#dropdown-toolbar',
  20. splitButton: '#dropdown-splitbutton'
  21. } );
  22. function testEmpty() {
  23. const dropdownView = createDropdown( {} );
  24. dropdownView.buttonView.set( {
  25. label: 'Dropdown',
  26. isEnabled: true,
  27. isOn: false,
  28. withText: true
  29. } );
  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( {
  37. type: 'button',
  38. model: new Model( {
  39. label: font,
  40. labelStyle: `font-size: ${ font }`,
  41. withText: true
  42. } )
  43. } );
  44. } );
  45. const dropdownView = createDropdown( {} );
  46. dropdownView.buttonView.set( {
  47. label: 'ListDropdown',
  48. isEnabled: true,
  49. isOn: false,
  50. withText: true
  51. } );
  52. addListToDropdown( dropdownView, collection );
  53. dropdownView.on( 'execute', evt => {
  54. /* global console */
  55. console.log( 'List#execute:', evt.source.label );
  56. } );
  57. ui.listDropdown.add( dropdownView );
  58. window.listDropdownCollection = collection;
  59. window.Model = Model;
  60. }
  61. function testLongLabel() {
  62. const dropdownView = createDropdown( {} );
  63. dropdownView.buttonView.set( {
  64. label: 'Dropdown with a very long label',
  65. isEnabled: true,
  66. isOn: false,
  67. withText: true
  68. } );
  69. ui.dropdownLabel.add( dropdownView );
  70. dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
  71. }
  72. function testToolbar() {
  73. const locale = { t: langString => langString };
  74. const icons = { left: alignLeftIcon, right: alignRightIcon, center: alignCenterIcon };
  75. // Buttons to be obtained from factory later on.
  76. const buttons = Object.keys( icons ).map( icon => new Model( { label: icon, isEnabled: true, isOn: false, icon: icons[ icon ] } ) );
  77. const buttonViews = buttons
  78. .map( buttonModel => {
  79. const buttonView = new ButtonView( locale );
  80. buttonView.bind( 'isEnabled', 'isOn', 'icon', 'label' ).to( buttonModel );
  81. buttonView.on( 'execute', () => console.log( `Execute: ${ buttonModel.label }` ) );
  82. return buttonView;
  83. } );
  84. const toolbarDropdown = createDropdown( locale );
  85. toolbarDropdown.set( 'isVertical', true );
  86. addToolbarToDropdown( toolbarDropdown, buttonViews );
  87. // This will change icon to button with `isOn = true`.
  88. toolbarDropdown.buttonView.bind( 'icon' ).toMany( buttons, 'isOn', ( ...areActive ) => {
  89. // Get the index of an active button.
  90. const index = areActive.findIndex( value => value );
  91. // If none of the commands is active, display either defaultIcon or the first button's icon.
  92. if ( index < 0 ) {
  93. return buttons[ 0 ].icon;
  94. }
  95. // Return active button's icon.
  96. return buttons[ index ].icon;
  97. } );
  98. // This will disable dropdown button when all buttons have `isEnabled = false`.
  99. toolbarDropdown.bind( 'isEnabled' ).toMany( buttons, 'isEnabled', ( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled ) );
  100. ui.toolbarDropdown.add( toolbarDropdown );
  101. window.buttons = buttons;
  102. }
  103. function testSplitButton() {
  104. const dropdownView = createDropdown( {}, SplitButtonView );
  105. dropdownView.buttonView.set( {
  106. label: 'Dropdown',
  107. icon: alignCenterIcon
  108. } );
  109. ui.splitButton.add( dropdownView );
  110. dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
  111. dropdownView.buttonView.on( 'execute', () => {
  112. /* global console */
  113. console.log( 'SplitButton#execute' );
  114. } );
  115. dropdownView.buttonView.on( 'open', () => {
  116. /* global console */
  117. console.log( 'SplitButton#open' );
  118. } );
  119. }
  120. testEmpty();
  121. testList();
  122. testLongLabel();
  123. testToolbar();
  124. testSplitButton();