Ver código fonte

Other: Make createSplitButtonDropdown minimal.

Maciej Gołaszewski 8 anos atrás
pai
commit
0afd3fc754
1 arquivos alterados com 61 adições e 9 exclusões
  1. 61 9
      packages/ckeditor5-highlight/src/highlightui.js

+ 61 - 9
packages/ckeditor5-highlight/src/highlightui.js

@@ -15,8 +15,10 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import highlightIcon from '@ckeditor/ckeditor5-core/theme/icons/input.svg';
 import highlightRemoveIcon from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
 
-import Model from '../../ckeditor5-ui/src/model';
-import createSplitButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/button/createsplitbuttondropdown';
+import Model from '@ckeditor/ckeditor5-ui/src/model';
+import createSplitButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/createsplitbuttondropdown';
+import { closeDropdownOnBlur, closeDropdownOnExecute, focusDropdownItemsOnArrows } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import ButtonGroupView from '@ckeditor/ckeditor5-ui/src/buttongroup/buttongroupview';
 
 /**
  * The default Highlight UI plugin.
@@ -70,8 +72,7 @@ export default class HighlightUI extends Plugin {
 			return buttonView;
 		} );
 
-		// Add highlight dropdown
-
+		// Add highlight dropdown:
 		componentFactory.add( 'highlightDropdown', locale => {
 			const model = new Model( {
 				label: 'Highlight',
@@ -86,19 +87,64 @@ export default class HighlightUI extends Plugin {
 
 			const buttonView = componentFactory.create( 'highlight-' + highlighters[ 0 ].class );
 
-			const dropdown = createSplitButtonDropdown( model, buttons, locale, buttonView );
+			// TODO: move this out of this method (related to button only design) Make disabled when all buttons are disabled
+			model.bind( 'isEnabled' ).to(
+				// Bind to #isEnabled of each command...
+				...getBindingTargets( buttons, 'isEnabled' ),
+				// ...and set it true if any command #isEnabled is true.
+				( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
+			);
+
+			// TODO: Is this needed in UI at all?
+			const dropdownView = createSplitButtonDropdown( model, buttons, locale, buttonView );
+
+			const buttonGroupView = dropdownView.buttonGroupView = new ButtonGroupView( { isVertical: model.isVertical } );
+
+			buttonGroupView.bind( 'isVertical' ).to( model, 'isVertical' );
+
+			buttons.map( view => buttonGroupView.items.add( view ) );
+
+			dropdownView.extendTemplate( {
+				attributes: {
+					class: [
+						'ck-splitbutton-dropdown'
+					]
+				}
+			} );
+
+			dropdownView.buttonView.extendTemplate( {
+				attributes: {
+					class: [ 'ck-button-dropdown' ]
+				}
+			} );
+
+			dropdownView.panelView.children.add( buttonGroupView );
+
+			closeDropdownOnBlur( dropdownView );
+			closeDropdownOnExecute( dropdownView, buttonGroupView.items );
+			focusDropdownItemsOnArrows( dropdownView, buttonGroupView );
+
+			// TODO: weak names buttonView.buttonView
+			// TODO: could be move to createSplitButtonDropdown
+			dropdownView.buttonView.arrowView.on( 'execute', () => {
+				if ( dropdownView.buttonView.buttonView.isEnabled && !dropdownView.isOpen ) {
+					dropdownView.isOpen = true;
+					buttonGroupView.focus();
+				}
+			} );
 
+			// TODO: A bit hack-ish: Swap the split button button to executed one.
 			buttons.map( buttonView => {
 				this.listenTo( buttonView, 'execute', () => {
-					if ( dropdown.buttonView.buttonView.class !== buttonView.class ) {
-						const newButton = componentFactory.create( 'highlight-' + buttonView.class );
+					if ( dropdownView.buttonView.buttonView.class !== buttonView.class ) {
+						const newButton = componentFactory.create( buttonView.class ? 'highlight-' + buttonView.class : 'highlightRemove' );
 
-						dropdown.buttonView.swapButton( newButton );
+						dropdownView.buttonView.swapButton( newButton );
 					}
 				} );
 			} );
 
-			return dropdown;
+			return dropdownView;
 		} );
 	}
 
@@ -116,6 +162,7 @@ export default class HighlightUI extends Plugin {
 				tooltip: true,
 				class: highlighter.class
 			} );
+
 			// Bind button model to command.
 			buttonView.bind( 'isEnabled' ).to( command, 'isEnabled' );
 
@@ -137,3 +184,8 @@ export default class HighlightUI extends Plugin {
 		} );
 	}
 }
+
+// TODO: this is duplicated
+function getBindingTargets( buttons, attribute ) {
+	return Array.prototype.concat( ...buttons.map( button => [ button, attribute ] ) );
+}