Explorar el Código

Other: Make createSplitButtonDropdown minimal.

Maciej Gołaszewski hace 8 años
padre
commit
daaba614cb

+ 2 - 0
packages/ckeditor5-ui/src/button/splitbuttonview.js

@@ -56,6 +56,7 @@ export default class SplitButtonView extends View {
 
 
 		this.keystrokes.listenTo( this.element );
 		this.keystrokes.listenTo( this.element );
 
 
+		// Overrides toolbar focus cycling behavior
 		this.keystrokes.set( 'arrowright', ( evt, cancel ) => {
 		this.keystrokes.set( 'arrowright', ( evt, cancel ) => {
 			if ( this.focusTracker.focusedElement === this.buttonView.element ) {
 			if ( this.focusTracker.focusedElement === this.buttonView.element ) {
 				this.arrowView.focus();
 				this.arrowView.focus();
@@ -64,6 +65,7 @@ export default class SplitButtonView extends View {
 			}
 			}
 		} );
 		} );
 
 
+		// Overrides toolbar focus cycling behavior
 		this.keystrokes.set( 'arrowleft', ( evt, cancel ) => {
 		this.keystrokes.set( 'arrowleft', ( evt, cancel ) => {
 			if ( this.focusTracker.focusedElement === this.arrowView.element ) {
 			if ( this.focusTracker.focusedElement === this.arrowView.element ) {
 				this.buttonView.focus();
 				this.buttonView.focus();

+ 0 - 76
packages/ckeditor5-ui/src/dropdown/button/createsplitbuttondropdown.js

@@ -1,76 +0,0 @@
-/**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module ui/dropdown/button/createsplitbuttondropdown
- */
-
-// TODO: import createDropdown from '../createdropdown';
-import SplitButtonView from '../../button/splitbuttonview';
-import DropdownView from '../dropdownview';
-import DropdownPanelView from '../dropdownpanelview';
-
-import ButtonGroupView from '../../buttongroup/buttongroupview';
-import { closeDropdownOnBlur, closeDropdownOnExecute, focusDropdownItemsOnArrows } from '../utils';
-
-/**
- * TODO
- */
-export default function createSplitButtonDropdown( model, buttonViews, locale, startButton ) {
-	// // Make disabled when all buttons are disabled
-	model.bind( 'isEnabled' ).to(
-		// Bind to #isEnabled of each command...
-		...getBindingTargets( buttonViews, 'isEnabled' ),
-		// ...and set it true if any command #isEnabled is true.
-		( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
-	);
-
-	const splitButtonView = new SplitButtonView( locale, startButton );
-
-	splitButtonView.bind( 'label', 'isOn', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( model );
-
-	const panelView = new DropdownPanelView( locale );
-
-	const dropdownView = new DropdownView( locale, splitButtonView, panelView );
-
-	const buttonGroupView = dropdownView.buttonGroupView = new ButtonGroupView( { isVertical: model.isVertical } );
-
-	buttonGroupView.bind( 'isVertical' ).to( model, 'isVertical' );
-
-	buttonViews.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 );
-
-	splitButtonView.arrowView.on( 'execute', () => {
-		if ( splitButtonView.buttonView.isEnabled && !dropdownView.isOpen ) {
-			dropdownView.isOpen = true;
-			buttonGroupView.focus();
-		}
-	} );
-
-	return dropdownView;
-}
-
-function getBindingTargets( buttons, attribute ) {
-	return Array.prototype.concat( ...buttons.map( button => [ button, attribute ] ) );
-}

+ 28 - 0
packages/ckeditor5-ui/src/dropdown/createsplitbuttondropdown.js

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/dropdown/createsplitbuttondropdown
+ */
+
+import SplitButtonView from '../button/splitbuttonview';
+import DropdownView from './dropdownview';
+import DropdownPanelView from './dropdownpanelview';
+
+/**
+ * Create a dropdown that have a split button as button.
+ *
+ * TODO: docs
+ */
+export default function createSplitButtonDropdown( model, locale, startButton ) {
+	const splitButtonView = new SplitButtonView( locale, startButton );
+
+	// TODO: keystroke?
+	splitButtonView.bind( 'label', 'isOn', 'isEnabled', 'withText', 'keystroke', 'tooltip' ).to( model );
+
+	const panelView = new DropdownPanelView( locale );
+
+	return new DropdownView( locale, splitButtonView, panelView );
+}