瀏覽代碼

Other: Move some SplitButtonDropdown functionality to SplitButtonDropdown.

Maciej Gołaszewski 8 年之前
父節點
當前提交
269d9bdb9a
共有 1 個文件被更改,包括 48 次插入38 次删除
  1. 48 38
      packages/ckeditor5-highlight/src/highlightui.js

+ 48 - 38
packages/ckeditor5-highlight/src/highlightui.js

@@ -69,11 +69,10 @@ export default class HighlightUI extends Plugin {
 
 		function decorateHighlightButton( button ) {
 			button.bind( 'isEnabled' ).to( command, 'isEnabled' );
-			button.bind( 'isOn' ).to( command, 'value' );
 
 			button.iconView.extendTemplate( {
 				attributes: {
-					style: highlighter.type === 'pen' ? { color: highlighter.color } : { backgroundColor: highlighter.color }
+					style: getIconStyleForHighlighter( highlighter.type, highlighter.color )
 				}
 			} );
 		}
@@ -91,7 +90,7 @@ export default class HighlightUI extends Plugin {
 				tooltip: true
 			} );
 
-			this.listenTo( buttonView, 'execute', () => {
+			buttonView.on( 'execute', () => {
 				editor.execute( name );
 				editor.editing.view.focus();
 			} );
@@ -120,48 +119,59 @@ export default class HighlightUI extends Plugin {
 				command: firstHighlighter.name
 			} );
 
+			model.bind( 'isOn' ).to( editor.commands.get( firstHighlighter.name ), 'value' );
+
 			// TODO: bind this in model
 			const dropdownView = createSplitButtonDropdown( model, locale );
 
+			// Extend split button icon style to reflect last used button style
 			const iconView = dropdownView.buttonView.buttonView.iconView;
 			const bind = iconView.bindTemplate;
 
-			// TODO: forward event:
-			dropdownView.buttonView.buttonView.on( 'execute', () => {
-				editor.execute( model.command );
-				editor.editing.view.focus();
-			} );
-
 			iconView.extendTemplate( {
 				attributes: {
 					style: bind.to( 'style' )
 				}
 			} );
 
-			iconView.bind( 'style' )
-				.to( model, 'type', model, 'color', ( type, color ) => type === 'pen' ? 'color:' + color : 'background-color:' + color );
+			iconView.bind( 'style' ).to( model, 'type', model, 'color', getIconStyleForHighlighter );
+
+			// TODO: forward event ?:
+			// TODO: lame names buttonView/buttonView
+			dropdownView.buttonView.on( 'execute', () => {
+				editor.execute( model.command );
+				editor.editing.view.focus();
+			} );
 
 			const buttons = highlighters.map( highlighter => {
 				const buttonView = componentFactory.create( highlighter.name );
 
 				this.listenTo( buttonView, 'execute', () => {
-					model.type = highlighter.type;
-					model.color = highlighter.color;
-					model.command = highlighter.name;
-					model.icon = highlightIcon;
+					model.set( {
+						type: highlighter.type,
+						color: highlighter.color,
+						command: highlighter.name,
+						icon: highlightIcon
+					} );
+
+					model.unbind( 'isOn' );
+					model.bind( 'isOn' ).to( editor.commands.get( highlighter.name ), 'value' );
 				} );
 
 				return buttonView;
 			} );
 
-			// TODO: bind
 			const removeButton = componentFactory.create( 'removeHighlight' );
 			buttons.push( removeButton );
+
 			this.listenTo( removeButton, 'execute', () => {
-				model.type = false;
-				model.color = false;
+				model.type = 'remove';
+				model.color = undefined;
 				model.command = 'removeHighlight';
 				model.icon = highlightRemoveIcon;
+
+				model.unbind( 'isOn' );
+				model.bind( 'isOn' ).to( editor.commands.get( 'removeHighlight' ), 'value' );
 			} );
 
 			model.bind( 'isEnabled' ).to(
@@ -171,20 +181,10 @@ export default class HighlightUI extends Plugin {
 				( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
 			);
 
-			const buttonGroupView = dropdownView.buttonGroupView = new ButtonGroupView( { isVertical: model.isVertical } );
-
-			buttonGroupView.bind( 'isVertical' ).to( model, 'isVertical' );
-
-			// TODO: A bit hack-ish: Swap the split button button to executed one.
-			buttons.map( buttonView => {
-				buttonGroupView.items.add( buttonView );
-			} );
-
-			dropdownView.extendTemplate( {
-				attributes: {
-					class: 'ck-splitbutton-dropdown'
-				}
-			} );
+			// TODO: This duplicates buttonDropdown
+			// Group buttons for dropdown.
+			const buttonGroupView = dropdownView.buttonGroupView = new ButtonGroupView( { isVertical: false } );
+			buttons.map( buttonView => buttonGroupView.items.add( buttonView ) );
 
 			dropdownView.panelView.children.add( buttonGroupView );
 
@@ -192,14 +192,12 @@ export default class HighlightUI extends Plugin {
 			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;
+			// Focus button group upon opening dropdown view
+			dropdownView.buttonView.on( 'select', () => {
+				if ( dropdownView.buttonView.buttonView.isEnabled && dropdownView.isOpen ) {
 					buttonGroupView.focus();
 				}
-			} );
+			}, { priority: 'low' } );
 
 			return dropdownView;
 		} );
@@ -210,3 +208,15 @@ export default class HighlightUI extends Plugin {
 function getBindingTargets( buttons, attribute ) {
 	return Array.prototype.concat( ...buttons.map( button => [ button, attribute ] ) );
 }
+
+// Returns style definition for highlighter button
+// @param {String} type Type of highlighter. One of: "marker", "pen", "remove".
+// @param {String} color Color of highlighter.
+function getIconStyleForHighlighter( type, color ) {
+	// Only return type for defined types "marker"/"pen". Return empty style otherwise (ie. for "remove" type).
+	if ( type === 'pen' ) {
+		return 'color:' + color;
+	} else if ( type === 'marker' ) {
+		return 'background-color:' + color;
+	}
+}