浏览代码

Changed: Move `addToolbarToDropdown()` helper to ui/dropdown/utils.

Maciej Gołaszewski 7 年之前
父节点
当前提交
ac541aeae3

+ 0 - 65
packages/ckeditor5-ui/src/dropdown/helpers/addtoolbartodropdown.js

@@ -1,65 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module ui/dropdown/helpers/addtoolbartodropdown
- */
-
-import ToolbarView from '../../toolbar/toolbarview';
-
-import '../../../theme/components/dropdown/toolbardropdown.css';
-
-/**
- * Creates an instance of {@link module:ui/dropdown/button/buttondropdownview~ButtonDropdownView} class using
- * a provided {@link module:ui/dropdown/button/buttondropdownmodel~ButtonDropdownModel}.
- *
- *		const buttons = [];
- *
- *		buttons.push( new ButtonView() );
- *		buttons.push( editor.ui.componentFactory.get( 'someButton' ) );
- *
- *		const model = new Model( {
- *			label: 'A button dropdown',
- *			isVertical: true,
- *			buttons
- *		} );
- *
- *		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.
- *		dropdown.render()
- *		document.body.appendChild( dropdown.element );
- *
- * The model instance remains in control of the dropdown after it has been created. E.g. changes to the
- * {@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}.
- *
- * @param {module:ui/dropdown/button/buttondropdownmodel~ButtonDropdownModel} model Model of the list 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 addToolbarToDropdown( dropdownView, model ) {
-	const toolbarView = dropdownView.toolbarView = new ToolbarView();
-
-	toolbarView.bind( 'isVertical' ).to( model, 'isVertical' );
-
-	dropdownView.extendTemplate( {
-		attributes: {
-			class: [ 'ck-toolbar-dropdown' ]
-		}
-	} );
-
-	// TODO: make this param of method instead of model property?
-	model.buttons.map( view => toolbarView.items.add( view ) );
-
-	dropdownView.panelView.children.add( toolbarView );
-	toolbarView.items.delegate( 'execute' ).to( dropdownView );
-
-	return toolbarView;
-}

+ 55 - 0
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -11,9 +11,12 @@ import DropdownPanelView from './dropdownpanelview';
 import DropdownView from './dropdownview';
 import SplitButtonView from '../button/splitbuttonview';
 import ButtonView from '../button/buttonview';
+import ToolbarView from '../toolbar/toolbarview';
 
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
 
+import '../../theme/components/dropdown/toolbardropdown.css';
+
 /**
  * A helper which creates an instance of {@link module:ui/dropdown/dropdownview~DropdownView} class using
  * a provided {@link module:ui/dropdown/dropdownmodel~DropdownModel}.
@@ -92,6 +95,58 @@ export function createSplitButtonDropdown( model, locale ) {
 	return dropdownView;
 }
 
+/**
+ * Creates an instance of {@link module:ui/dropdown/button/buttondropdownview~ButtonDropdownView} class using
+ * a provided {@link module:ui/dropdown/button/buttondropdownmodel~ButtonDropdownModel}.
+ *
+ *		const buttons = [];
+ *
+ *		buttons.push( new ButtonView() );
+ *		buttons.push( editor.ui.componentFactory.get( 'someButton' ) );
+ *
+ *		const model = new Model( {
+ *			label: 'A button dropdown',
+ *			isVertical: true,
+ *			buttons
+ *		} );
+ *
+ *		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.
+ *		dropdown.render()
+ *		document.body.appendChild( dropdown.element );
+ *
+ * The model instance remains in control of the dropdown after it has been created. E.g. changes to the
+ * {@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}.
+ *
+ * @param {module:ui/dropdown/button/buttondropdownmodel~ButtonDropdownModel} model Model of the list dropdown.
+ * @param {module:utils/locale~Locale} locale The locale instance.
+ * @returns {module:ui/dropdown/dropdownview~DropdownView}
+ */
+export function addToolbarToDropdown( dropdownView, buttons, model ) {
+	const toolbarView = dropdownView.toolbarView = new ToolbarView();
+
+	toolbarView.bind( 'isVertical' ).to( model, 'isVertical' );
+
+	dropdownView.extendTemplate( {
+		attributes: {
+			class: [ 'ck-toolbar-dropdown' ]
+		}
+	} );
+
+	// TODO: bind buttons to items in toolbar
+	buttons.map( view => toolbarView.items.add( view ) );
+
+	dropdownView.panelView.children.add( toolbarView );
+	toolbarView.items.delegate( 'execute' ).to( dropdownView );
+
+	return toolbarView;
+}
+
 // @private
 function prepareDropdown( locale, buttonView, model ) {
 	const panelView = new DropdownPanelView( locale );

+ 0 - 84
packages/ckeditor5-ui/tests/dropdown/helpers/addtoolbartodropdown.js

@@ -1,84 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals document */
-
-import Model from '../../../src/model';
-
-import ButtonView from '../../../src/button/buttonview';
-import ToolbarView from '../../../src/toolbar/toolbarview';
-import { createDropdown } from '../../../src/dropdown/utils';
-
-import addToolbarToDropdown from '../../../src/dropdown/helpers/addtoolbartodropdown';
-
-describe( 'addToolbarToDropdown()', () => {
-	let dropdownView, model, locale, buttons;
-
-	beforeEach( () => {
-		locale = { t() {} };
-
-		buttons = [ '<svg>foo</svg>', '<svg>bar</svg>' ].map( icon => {
-			const button = new ButtonView();
-
-			button.icon = icon;
-
-			return button;
-		} );
-
-		model = new Model( {
-			isVertical: true,
-			buttons
-		} );
-
-		dropdownView = createDropdown( model, locale );
-
-		addToolbarToDropdown( dropdownView, model );
-
-		dropdownView.render();
-
-		document.body.appendChild( dropdownView.element );
-	} );
-
-	afterEach( () => {
-		dropdownView.element.remove();
-	} );
-
-	it( 'sets view#locale', () => {
-		expect( dropdownView.locale ).to.equal( locale );
-	} );
-
-	it( 'sets view class', () => {
-		expect( dropdownView.element.classList.contains( 'ck-toolbar-dropdown' ) ).to.be.true;
-	} );
-
-	describe( 'view#toolbarView', () => {
-		it( 'is created', () => {
-			const panelChildren = dropdownView.panelView.children;
-
-			expect( panelChildren ).to.have.length( 1 );
-			expect( panelChildren.get( 0 ) ).to.equal( dropdownView.toolbarView );
-			expect( dropdownView.toolbarView ).to.be.instanceof( ToolbarView );
-		} );
-
-		it( 'delegates view.toolbarView.items#execute to the view', done => {
-			dropdownView.on( 'execute', evt => {
-				expect( evt.source ).to.equal( dropdownView.toolbarView.items.get( 0 ) );
-				expect( evt.path ).to.deep.equal( [ dropdownView.toolbarView.items.get( 0 ), dropdownView ] );
-
-				done();
-			} );
-
-			dropdownView.toolbarView.items.get( 0 ).fire( 'execute' );
-		} );
-
-		it( 'reacts on model#isVertical', () => {
-			model.isVertical = false;
-			expect( dropdownView.toolbarView.isVertical ).to.be.false;
-
-			model.isVertical = true;
-			expect( dropdownView.toolbarView.isVertical ).to.be.true;
-		} );
-	} );
-} );

+ 3 - 5
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -16,8 +16,7 @@ import alignCenterIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.
 import ButtonView from '../../../src/button/buttonview';
 
 import addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
-import addToolbarToDropdown from '../../../src/dropdown/helpers/addtoolbartodropdown';
-import { createDropdown } from '../../../src/dropdown/utils';
+import { createDropdown, addToolbarToDropdown } from '../../../src/dropdown/utils';
 
 const ui = testUtils.createTestUIView( {
 	dropdown: '#dropdown',
@@ -128,13 +127,12 @@ function testButton() {
 		} );
 
 	const toolbarDropdownModel = new Model( {
-		isVertical: true,
-		buttons: buttonViews
+		isVertical: true
 	} );
 
 	const toolbarDropdown = createDropdown( toolbarDropdownModel, locale );
 
-	addToolbarToDropdown( toolbarDropdown, toolbarDropdownModel );
+	addToolbarToDropdown( toolbarDropdown, buttonViews, toolbarDropdownModel );
 
 	ui.toolbarDropdown.add( toolbarDropdown );
 

+ 65 - 1
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -14,8 +14,9 @@ import ButtonView from '../../src/button/buttonview';
 import DropdownView from '../../src/dropdown/dropdownview';
 import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 import SplitButtonView from '../../src/button/splitbuttonview';
-import { createDropdown, createSplitButtonDropdown } from '../../src/dropdown/utils';
 import View from '../../src/view';
+import ToolbarView from '../../src/toolbar/toolbarview';
+import { createDropdown, createSplitButtonDropdown, addToolbarToDropdown } from '../../src/dropdown/utils';
 
 const assertBinding = utilsTestUtils.assertBinding;
 
@@ -244,6 +245,69 @@ describe( 'utils', () => {
 		addDefaultBehaviorTests();
 	} );
 
+	describe( 'addToolbarToDropdown()', () => {
+		let model, buttons;
+
+		beforeEach( () => {
+			buttons = [ '<svg>foo</svg>', '<svg>bar</svg>' ].map( icon => {
+				const button = new ButtonView();
+
+				button.icon = icon;
+
+				return button;
+			} );
+
+			model = new Model( { isVertical: true } );
+
+			dropdownView = createDropdown( model, locale );
+			addToolbarToDropdown( dropdownView, buttons, model );
+
+			dropdownView.render();
+			document.body.appendChild( dropdownView.element );
+		} );
+
+		afterEach( () => {
+			dropdownView.element.remove();
+		} );
+
+		it( 'sets view#locale', () => {
+			expect( dropdownView.locale ).to.equal( locale );
+		} );
+
+		it( 'sets view class', () => {
+			expect( dropdownView.element.classList.contains( 'ck-toolbar-dropdown' ) ).to.be.true;
+		} );
+
+		describe( 'view#toolbarView', () => {
+			it( 'is created', () => {
+				const panelChildren = dropdownView.panelView.children;
+
+				expect( panelChildren ).to.have.length( 1 );
+				expect( panelChildren.get( 0 ) ).to.equal( dropdownView.toolbarView );
+				expect( dropdownView.toolbarView ).to.be.instanceof( ToolbarView );
+			} );
+
+			it( 'delegates view.toolbarView.items#execute to the view', done => {
+				dropdownView.on( 'execute', evt => {
+					expect( evt.source ).to.equal( dropdownView.toolbarView.items.get( 0 ) );
+					expect( evt.path ).to.deep.equal( [ dropdownView.toolbarView.items.get( 0 ), dropdownView ] );
+
+					done();
+				} );
+
+				dropdownView.toolbarView.items.get( 0 ).fire( 'execute' );
+			} );
+
+			it( 'reacts on model#isVertical', () => {
+				model.isVertical = false;
+				expect( dropdownView.toolbarView.isVertical ).to.be.false;
+
+				model.isVertical = true;
+				expect( dropdownView.toolbarView.isVertical ).to.be.true;
+			} );
+		} );
+	} );
+
 	function addDefaultBehaviorTests() {
 		describe( 'hasDefaultBehavior', () => {
 			describe( 'closeDropdownOnBlur()', () => {