8
0
Просмотр исходного кода

Code refactoring: Created ButtonDropdownModel#buttons removing an argument from createButtonDropdown helper.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
1d0f48ba2a

+ 7 - 0
packages/ckeditor5-ui/src/dropdown/button/buttondropdownmodel.jsdoc

@@ -14,6 +14,13 @@
  * @interface module:ui/dropdown/button/buttondropdownmodel~ButtonDropdownModel
  */
 
+/**
+ * List of buttons to be included in dropdown
+ *
+ * @observable
+ * @member {Array.<module:ui/button/buttonview~ButtonView>} #buttons
+ */
+
 /**
  * Fired when the button dropdown is executed. It fires when one of the buttons
  * {@link module:ui/button/buttonview~ButtonView#event:execute executed}.

+ 3 - 3
packages/ckeditor5-ui/src/dropdown/button/buttondropdownview.jsdoc

@@ -18,9 +18,9 @@
  */
 
 /**
- * A child {@link module:ui/buttongroup/buttongroupview~ButtonGroupView button group view} of the dropdown located
- * in its {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel}.
+ * A child toolbar of the dropdown located in the
+ * {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel}.
  *
  * @readonly
- * @member {module:ui/buttongroup/buttongroup~ButtonGroupView} #buttonGroupView
+ * @member {module:ui/toolbar/toolbarview~ToolbarView} #toolbarView
  */

+ 15 - 24
packages/ckeditor5-ui/src/dropdown/button/createbuttondropdown.js

@@ -25,10 +25,11 @@ import '../../../theme/components/dropdown/buttondropdown.css';
  *
  *		const model = new Model( {
  *			label: 'A button dropdown',
- *			isVertical: true
+ *			isVertical: true,
+ *			buttons
  *		} );
  *
- *		const dropdown = createButtonDropdown( model, buttons, locale );
+ *		const dropdown = createButtonDropdown( model, locale );
  *
  *		// Will render a vertical button dropdown labeled "A button dropdown"
  *		// with a button group in the panel containing two buttons.
@@ -39,31 +40,30 @@ import '../../../theme/components/dropdown/buttondropdown.css';
  * {@link module:ui/dropdown/dropdownmodel~DropdownModel#label `model.label`} will be reflected in the
  * dropdown button's {@link module:ui/button/buttonview~ButtonView#label} attribute and in DOM.
  *
- * See {@link module:ui/dropdown/createdropdown~createDropdown} and {@link module:ui/buttongroup/buttongroupview~ButtonGroupView}.
+ * See {@link module:ui/dropdown/createdropdown~createDropdown}.
  *
  * @param {module:ui/dropdown/button/buttondropdownmodel~ButtonDropdownModel} model Model of the list dropdown.
- * @param {Array.<module:ui/button/buttonview~ButtonView>} buttonViews List of buttons to be included in dropdown.
  * @param {module:utils/locale~Locale} locale The locale instance.
  * @returns {module:ui/dropdown/button/buttondropdownview~ButtonDropdownView} The button dropdown view instance.
  * @returns {module:ui/dropdown/dropdownview~DropdownView}
  */
-export default function createButtonDropdown( model, buttonViews, locale ) {
+export default function createButtonDropdown( model, locale ) {
 	// Make disabled when all buttons are disabled
 	model.bind( 'isEnabled' ).to(
 		// Bind to #isEnabled of each command...
-		...getBindingTargets( buttonViews, 'isEnabled' ),
+		...getBindingTargets( model.buttons, 'isEnabled' ),
 		// ...and set it true if any command #isEnabled is true.
 		( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
 	);
 
-	// If defined `staticIcon` use the `defautlIcon` without binding it to active buttonView
+	// If defined `staticIcon` use the `defautlIcon` without binding it to active a button.
 	if ( model.staticIcon ) {
 		model.bind( 'icon' ).to( model, 'defaultIcon' );
 	} else {
 		// Make dropdown icon as any active button.
 		model.bind( 'icon' ).to(
 			// Bind to #isOn of each button...
-			...getBindingTargets( buttonViews, 'isOn' ),
+			...getBindingTargets( model.buttons, 'isOn' ),
 			// ...and chose the title of the first one which #isOn is true.
 			( ...areActive ) => {
 				const index = areActive.findIndex( value => value );
@@ -73,26 +73,17 @@ export default function createButtonDropdown( model, buttonViews, locale ) {
 					return model.defaultIcon;
 				}
 
-				return buttonViews[ index < 0 ? 0 : index ].icon;
+				return model.buttons[ index < 0 ? 0 : index ].icon;
 			}
 		);
 	}
 
 	const dropdownView = createDropdown( model, locale );
+	const toolbarView = dropdownView.toolbarView = new ToolbarView();
 
-	const buttonGroupView = dropdownView.buttonGroupView = new ToolbarView();
+	toolbarView.bind( 'isVertical' ).to( model, 'isVertical' );
 
-	buttonGroupView.extendTemplate( {
-		attributes: {
-			class: [
-				buttonGroupView.bindTemplate.if( 'isVertical', 'ck-toolbar__vertical' )
-			]
-		}
-	} );
-
-	buttonGroupView.bind( 'isVertical' ).to( model, 'isVertical' );
-
-	buttonViews.map( view => buttonGroupView.items.add( view ) );
+	model.buttons.map( view => toolbarView.items.add( view ) );
 
 	dropdownView.extendTemplate( {
 		attributes: {
@@ -100,11 +91,11 @@ export default function createButtonDropdown( model, buttonViews, locale ) {
 		}
 	} );
 
-	dropdownView.panelView.children.add( buttonGroupView );
+	dropdownView.panelView.children.add( toolbarView );
 
 	closeDropdownOnBlur( dropdownView );
-	closeDropdownOnExecute( dropdownView, buttonGroupView.items );
-	focusDropdownContentsOnArrows( dropdownView, buttonGroupView );
+	closeDropdownOnExecute( dropdownView, toolbarView.items );
+	focusDropdownContentsOnArrows( dropdownView, toolbarView );
 
 	return dropdownView;
 }

+ 36 - 26
packages/ckeditor5-ui/tests/dropdown/button/createbuttondropdown.js

@@ -14,20 +14,23 @@ import ToolbarView from '../../../src/toolbar/toolbarview';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
 describe( 'createButtonDropdown', () => {
-	let view, model, locale, buttonViews;
+	let view, model, locale, buttons;
 
 	beforeEach( () => {
 		locale = { t() {} };
-		buttonViews = [ 'foo', 'bar' ].map( icon => {
+		buttons = [ 'foo', 'bar' ].map( icon => {
 			const button = new ButtonView();
 			button.icon = icon;
 
 			return button;
 		} );
 
-		model = new Model( { isVertical: true } );
+		model = new Model( {
+			isVertical: true,
+			buttons
+		} );
 
-		view = createButtonDropdown( model, buttonViews, locale );
+		view = createButtonDropdown( model, locale );
 		view.render();
 		document.body.appendChild( view.element );
 	} );
@@ -41,24 +44,24 @@ describe( 'createButtonDropdown', () => {
 			expect( view.locale ).to.equal( locale );
 		} );
 
-		describe( 'view#buttonGroupView', () => {
+		describe( 'view#toolbarView', () => {
 			it( 'is created', () => {
 				const panelChildren = view.panelView.children;
 
 				expect( panelChildren ).to.have.length( 1 );
-				expect( panelChildren.get( 0 ) ).to.equal( view.buttonGroupView );
-				expect( view.buttonGroupView ).to.be.instanceof( ToolbarView );
+				expect( panelChildren.get( 0 ) ).to.equal( view.toolbarView );
+				expect( view.toolbarView ).to.be.instanceof( ToolbarView );
 			} );
 
-			it( 'delegates view.buttonGroupView#execute to the view', done => {
+			it( 'delegates view.toolbarView#execute to the view', done => {
 				view.on( 'execute', evt => {
-					expect( evt.source ).to.equal( view.buttonGroupView.items.get( 0 ) );
-					expect( evt.path ).to.deep.equal( [ view.buttonGroupView.items.get( 0 ), view ] );
+					expect( evt.source ).to.equal( view.toolbarView.items.get( 0 ) );
+					expect( evt.path ).to.deep.equal( [ view.toolbarView.items.get( 0 ), view ] );
 
 					done();
 				} );
 
-				view.buttonGroupView.items.get( 0 ).fire( 'execute' );
+				view.toolbarView.items.get( 0 ).fire( 'execute' );
 			} );
 		} );
 
@@ -118,13 +121,13 @@ describe( 'createButtonDropdown', () => {
 		} );
 
 		describe( 'activates keyboard navigation for the dropdown', () => {
-			it( 'so "arrowdown" focuses the #buttonGroupView if dropdown is open', () => {
+			it( 'so "arrowdown" focuses the #toolbarView if dropdown is open', () => {
 				const keyEvtData = {
 					keyCode: keyCodes.arrowdown,
 					preventDefault: sinon.spy(),
 					stopPropagation: sinon.spy()
 				};
-				const spy = sinon.spy( view.buttonGroupView, 'focus' );
+				const spy = sinon.spy( view.toolbarView, 'focus' );
 
 				view.isOpen = false;
 				view.keystrokes.press( keyEvtData );
@@ -135,13 +138,13 @@ describe( 'createButtonDropdown', () => {
 				sinon.assert.calledOnce( spy );
 			} );
 
-			it( 'so "arrowup" focuses the last #item in #buttonGroupView if dropdown is open', () => {
+			it( 'so "arrowup" focuses the last #item in #toolbarView if dropdown is open', () => {
 				const keyEvtData = {
 					keyCode: keyCodes.arrowup,
 					preventDefault: sinon.spy(),
 					stopPropagation: sinon.spy()
 				};
-				const spy = sinon.spy( view.buttonGroupView, 'focusLast' );
+				const spy = sinon.spy( view.toolbarView, 'focusLast' );
 
 				view.isOpen = false;
 				view.keystrokes.press( keyEvtData );
@@ -155,37 +158,44 @@ describe( 'createButtonDropdown', () => {
 
 		describe( 'icon', () => {
 			it( 'should be set to first button\'s icon if no defaultIcon defined', () => {
-				expect( view.buttonView.icon ).to.equal( view.buttonGroupView.items.get( 0 ).icon );
+				expect( view.buttonView.icon ).to.equal( view.toolbarView.items.get( 0 ).icon );
 			} );
 
 			it( 'should be bound to first button that is on', () => {
-				view.buttonGroupView.items.get( 1 ).isOn = true;
+				view.toolbarView.items.get( 1 ).isOn = true;
 
-				expect( view.buttonView.icon ).to.equal( view.buttonGroupView.items.get( 1 ).icon );
+				expect( view.buttonView.icon ).to.equal( view.toolbarView.items.get( 1 ).icon );
 
-				view.buttonGroupView.items.get( 0 ).isOn = true;
-				view.buttonGroupView.items.get( 1 ).isOn = false;
+				view.toolbarView.items.get( 0 ).isOn = true;
+				view.toolbarView.items.get( 1 ).isOn = false;
 
-				expect( view.buttonView.icon ).to.equal( view.buttonGroupView.items.get( 0 ).icon );
+				expect( view.buttonView.icon ).to.equal( view.toolbarView.items.get( 0 ).icon );
 			} );
 
 			it( 'should be set to defaultIcon if defined and on button is on', () => {
-				const model = new Model( { defaultIcon: 'baz' } );
+				const model = new Model( {
+					defaultIcon: 'baz',
+					buttons
+				} );
 
-				view = createButtonDropdown( model, buttonViews, locale );
+				view = createButtonDropdown( model, locale );
 				view.render();
 
 				expect( view.buttonView.icon ).to.equal( 'baz' );
 			} );
 
 			it( 'should not bind icons if staticIcon is set', () => {
-				const model = new Model( { defaultIcon: 'baz', staticIcon: true } );
+				const model = new Model( {
+					defaultIcon: 'baz',
+					staticIcon: true,
+					buttons
+				} );
 
-				view = createButtonDropdown( model, buttonViews, locale );
+				view = createButtonDropdown( model, locale );
 				view.render();
 
 				expect( view.buttonView.icon ).to.equal( 'baz' );
-				view.buttonGroupView.items.get( 1 ).isOn = true;
+				view.toolbarView.items.get( 1 ).isOn = true;
 
 				expect( view.buttonView.icon ).to.equal( 'baz' );
 			} );

+ 6 - 2
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -122,8 +122,12 @@ function testButton() {
 			return buttonView;
 		} );
 
-	const buttonDropdownModel = new Model( { isVertical: true } );
-	const buttonDropdown = createButtonDropdown( buttonDropdownModel, buttonViews, {} );
+	const buttonDropdownModel = new Model( {
+		isVertical: true,
+		buttons: buttonViews
+	} );
+
+	const buttonDropdown = createButtonDropdown( buttonDropdownModel, {} );
 
 	ui.buttonDropdown.add( buttonDropdown );