8
0
Pārlūkot izejas kodu

Other: Move some SplitButtonDropdown functionality to SplitButtonDropdown.

Maciej Gołaszewski 8 gadi atpakaļ
vecāks
revīzija
cc67bbea4a

+ 13 - 10
packages/ckeditor5-ui/src/button/splitbuttonview.js

@@ -26,7 +26,7 @@ export default class SplitButtonView extends View {
 		this.children = this.createCollection();
 
 		this.buttonView = this._createButtonView();
-		this.arrowView = this._createArrowView();
+		this.selectView = this._createArrowView();
 
 		this.keystrokes = new KeystrokeHandler();
 		this.focusTracker = new FocusTracker();
@@ -49,17 +49,17 @@ export default class SplitButtonView extends View {
 		super.render();
 
 		this.children.add( this.buttonView );
-		this.children.add( this.arrowView );
+		this.children.add( this.selectView );
 
 		this.focusTracker.add( this.buttonView.element );
-		this.focusTracker.add( this.arrowView.element );
+		this.focusTracker.add( this.selectView.element );
 
 		this.keystrokes.listenTo( this.element );
 
 		// Overrides toolbar focus cycling behavior
 		this.keystrokes.set( 'arrowright', ( evt, cancel ) => {
 			if ( this.focusTracker.focusedElement === this.buttonView.element ) {
-				this.arrowView.focus();
+				this.selectView.focus();
 
 				cancel();
 			}
@@ -67,7 +67,7 @@ export default class SplitButtonView extends View {
 
 		// Overrides toolbar focus cycling behavior
 		this.keystrokes.set( 'arrowleft', ( evt, cancel ) => {
-			if ( this.focusTracker.focusedElement === this.arrowView.element ) {
+			if ( this.focusTracker.focusedElement === this.selectView.element ) {
 				this.buttonView.focus();
 
 				cancel();
@@ -84,21 +84,24 @@ export default class SplitButtonView extends View {
 
 		buttonView.bind( 'icon' ).to( this, 'icon' );
 
+		buttonView.delegate( 'execute' ).to( this );
+
 		return buttonView;
 	}
 
 	_createArrowView() {
-		const arrowView = new ButtonView();
+		const selectView = new ButtonView();
 
-		// TODO:
-		arrowView.icon = 'abc';
+		selectView.icon = 'TODO';
 
-		arrowView.extendTemplate( {
+		selectView.extendTemplate( {
 			attributes: {
 				class: 'ck-splitbutton-arrow'
 			}
 		} );
 
-		return arrowView;
+		selectView.delegate( 'execute' ).to( this, 'select' );
+
+		return selectView;
 	}
 }

+ 11 - 3
packages/ckeditor5-ui/src/dropdown/createsplitbuttondropdown.js

@@ -8,7 +8,7 @@
  */
 
 import SplitButtonView from '../button/splitbuttonview';
-import DropdownView from './dropdownview';
+import SplitButtonDropdownView from './splitbuttondropdownview';
 import DropdownPanelView from './dropdownpanelview';
 
 /**
@@ -19,10 +19,18 @@ import DropdownPanelView from './dropdownpanelview';
 export default function createSplitButtonDropdown( model, locale ) {
 	const splitButtonView = new SplitButtonView( locale );
 
-	// TODO: keystroke?
 	splitButtonView.bind( 'label', 'isOn', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( model );
+	splitButtonView.buttonView.bind( 'isOn' ).to( model );
 
 	const panelView = new DropdownPanelView( locale );
+	const dropdownView = new SplitButtonDropdownView( locale, splitButtonView, panelView );
 
-	return new DropdownView( locale, splitButtonView, panelView );
+	// Extend template to hide arrow from dropdown.
+	dropdownView.extendTemplate( {
+		attributes: {
+			class: 'ck-splitbutton-dropdown'
+		}
+	} );
+
+	return dropdownView;
 }

+ 31 - 0
packages/ckeditor5-ui/src/dropdown/splitbuttondropdownview.js

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/dropdown/splitbuttondropdownview
+ */
+
+import DropdownView from './dropdownview';
+
+/**
+ * The split button dropdown view class.
+ *
+ * @extends module:ui/view~View
+ */
+export default class SplitButtonDropdownView extends DropdownView {
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		// Disable default panel open on "execute"
+		this.stopListening( this.buttonView, 'execute' );
+
+		this.listenTo( this.buttonView, 'select', () => {
+			this.isOpen = !this.isOpen;
+		} );
+	}
+}