瀏覽代碼

Changed: Remove createDropdown() method.

Maciej Gołaszewski 7 年之前
父節點
當前提交
f829efe8fa

+ 0 - 44
packages/ckeditor5-ui/src/dropdown/createdropdown.js

@@ -1,44 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module ui/dropdown/createdropdown
- */
-
-import { createButtonForDropdown, createDropdownView } from './utils';
-
-/**
- * A helper which creates an instance of {@link module:ui/dropdown/dropdownview~DropdownView} class using
- * a provided {@link module:ui/dropdown/dropdownmodel~DropdownModel}.
- *
- *		const model = new Model( {
- *			label: 'A dropdown',
- *			isEnabled: true,
- *			isOn: false,
- *			withText: true
- *		} );
- *
- *		const dropdown = createDropdown( model );
- *
- *		dropdown.render();
- *
- *		// Will render a dropdown labeled "A dropdown" with an empty panel.
- *		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.
- *
- * Also see {@link module:ui/dropdown/list/createlistdropdown~createListDropdown}.
- *
- * @param {module:ui/dropdown/dropdownmodel~DropdownModel} model Model of this dropdown.
- * @param {module:utils/locale~Locale} locale The locale instance.
- * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
- *
- * TODO: only used in tests.
- */
-export default function createDropdown( model, locale ) {
-	return createDropdownView( model, createButtonForDropdown( model, locale ), locale );
-}

+ 33 - 7
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -76,8 +76,6 @@ export function closeDropdownOnBlur( dropdownView ) {
 export function createButtonForDropdown( model, locale ) {
 	const buttonView = new ButtonView( locale );
 
-	buttonView.bind( 'label', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( model );
-
 	// Dropdown expects "select" event to show contents.
 	buttonView.delegate( 'execute' ).to( buttonView, 'select' );
 
@@ -87,12 +85,9 @@ export function createButtonForDropdown( model, locale ) {
 export function createSplitButtonForDropdown( model, locale ) {
 	const splitButtonView = new SplitButtonView( locale );
 
-	// TODO: check 'isOn' binding.
-	splitButtonView.bind( 'label', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( model );
-
 	// TODO: something wierd with binding
-	splitButtonView.actionView.bind( 'isOn' ).to( model );
-	splitButtonView.actionView.bind( 'tooltip' ).to( model );
+	splitButtonView.actionView.bind( 'isOn' ).to( splitButtonView );
+	splitButtonView.actionView.bind( 'tooltip' ).to( splitButtonView );
 
 	return splitButtonView;
 }
@@ -104,6 +99,7 @@ export function createDropdownView( model, buttonView, locale ) {
 	dropdownView.bind( 'isEnabled' ).to( model );
 
 	// TODO: check 'isOn' binding.
+	buttonView.bind( 'label', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( model );
 	buttonView.bind( 'isOn' ).to( model, 'isOn', dropdownView, 'isOpen', ( isOn, isOpen ) => {
 		return isOn || isOpen;
 	} );
@@ -275,3 +271,33 @@ export function getBindingTargets( buttons, attribute ) {
 	return Array.prototype.concat( ...buttons.map( button => [ button, attribute ] ) );
 }
 
+/**
+ * A helper which creates an instance of {@link module:ui/dropdown/dropdownview~DropdownView} class using
+ * a provided {@link module:ui/dropdown/dropdownmodel~DropdownModel}.
+ *
+ *		const model = new Model( {
+ *			label: 'A dropdown',
+ *			isEnabled: true,
+ *			isOn: false,
+ *			withText: true
+ *		} );
+ *
+ *		const dropdown = createDropdown( model );
+ *
+ *		dropdown.render();
+ *
+ *		// Will render a dropdown labeled "A dropdown" with an empty panel.
+ *		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.
+ *
+ * Also see {@link module:ui/dropdown/list/createlistdropdown~createListDropdown}.
+ *
+ * @param {module:ui/dropdown/dropdownmodel~DropdownModel} model Model of this dropdown.
+ * @param {module:utils/locale~Locale} locale The locale instance.
+ * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
+ *
+ * TODO: only used in tests.
+ */

+ 0 - 109
packages/ckeditor5-ui/tests/dropdown/createdropdown.js

@@ -1,109 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import utilsTestUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
-import createDropdown from '../../src/dropdown/createdropdown';
-import Model from '../../src/model';
-import DropdownView from '../../src/dropdown/dropdownview';
-import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
-import ButtonView from '../../src/button/buttonview';
-
-const assertBinding = utilsTestUtils.assertBinding;
-
-describe( 'createDropdown', () => {
-	it( 'binds button attributes to the model', () => {
-		const modelDef = {
-			label: 'foo',
-			isOn: false,
-			isEnabled: true,
-			withText: false,
-			tooltip: false
-		};
-
-		const model = new Model( modelDef );
-		const view = createDropdown( model );
-
-		assertBinding( view.buttonView,
-			modelDef,
-			[
-				[ model, { label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true } ]
-			],
-			{ label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true }
-		);
-	} );
-
-	it( 'binds button#isOn do dropdown #isOpen and model #isOn', () => {
-		const modelDef = {
-			label: 'foo',
-			isOn: false,
-			isEnabled: true,
-			withText: false,
-			tooltip: false
-		};
-
-		const model = new Model( modelDef );
-		const view = createDropdown( model );
-
-		view.isOpen = false;
-		expect( view.buttonView.isOn ).to.be.false;
-
-		model.isOn = true;
-		expect( view.buttonView.isOn ).to.be.true;
-
-		view.isOpen = true;
-		expect( view.buttonView.isOn ).to.be.true;
-
-		model.isOn = false;
-		expect( view.buttonView.isOn ).to.be.true;
-	} );
-
-	it( 'binds dropdown#isEnabled to the model', () => {
-		const modelDef = {
-			label: 'foo',
-			isEnabled: true,
-			withText: false,
-			tooltip: false
-		};
-
-		const model = new Model( modelDef );
-		const view = createDropdown( model );
-
-		assertBinding( view,
-			{ isEnabled: true },
-			[
-				[ model, { isEnabled: false } ]
-			],
-			{ isEnabled: false }
-		);
-	} );
-
-	it( 'accepts locale', () => {
-		const locale = {};
-		const view = createDropdown( new Model(), locale );
-
-		expect( view.locale ).to.equal( locale );
-		expect( view.buttonView.locale ).to.equal( locale );
-		expect( view.panelView.locale ).to.equal( locale );
-	} );
-
-	it( 'returns view', () => {
-		const view = createDropdown( new Model() );
-
-		expect( view ).to.be.instanceOf( DropdownView );
-	} );
-
-	it( 'creates dropdown#buttonView out of ButtonView', () => {
-		const view = createDropdown( new Model() );
-
-		expect( view.buttonView ).to.be.instanceOf( ButtonView );
-	} );
-
-	it( 'creates dropdown#panelView out of DropdownPanelView', () => {
-		const view = createDropdown( new Model() );
-
-		expect( view.panelView ).to.be.instanceOf( DropdownPanelView );
-	} );
-} );
-

+ 23 - 9
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -8,8 +8,6 @@
 import Model from '../../../src/model';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
-import createDropdown from '../../../src/dropdown/createdropdown';
-
 import testUtils from '../../_utils/utils';
 
 import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
@@ -17,7 +15,14 @@ import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.sv
 import alignCenterIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
 import ButtonView from '../../../src/button/buttonview';
 
-import { addDefaultBehavior, addListViewToDropdown, addToolbarToDropdown, createSingleButtonDropdown } from '../../../src/dropdown/utils';
+import {
+	addDefaultBehavior,
+	addListViewToDropdown,
+	addToolbarToDropdown,
+	createButtonForDropdown,
+	createDropdownView,
+	createSingleButtonDropdown
+} from '../../../src/dropdown/utils';
 
 const ui = testUtils.createTestUIView( {
 	dropdown: '#dropdown',
@@ -28,12 +33,15 @@ const ui = testUtils.createTestUIView( {
 } );
 
 function testEmpty() {
-	const dropdownView = createDropdown( new Model( {
+	const model = new Model( {
 		label: 'Dropdown',
 		isEnabled: true,
 		isOn: false,
 		withText: true
-	} ) );
+	} );
+
+	const buttonView = createButtonForDropdown( model, {} );
+	const dropdownView = createDropdownView( model, buttonView, {} );
 
 	ui.dropdown.add( dropdownView );
 
@@ -83,8 +91,11 @@ function testSharedModel() {
 		withText: true
 	} );
 
-	const dropdownView1 = createDropdown( model );
-	const dropdownView2 = createDropdown( model );
+	const buttonView1 = createButtonForDropdown( model, {} );
+	const buttonView2 = createButtonForDropdown( model, {} );
+
+	const dropdownView1 = createDropdownView( model, buttonView1, {} );
+	const dropdownView2 = createDropdownView( model, buttonView2, {} );
 
 	ui.dropdownShared.add( dropdownView1 );
 	ui.dropdownShared.add( dropdownView2 );
@@ -93,12 +104,15 @@ function testSharedModel() {
 }
 
 function testLongLabel() {
-	const dropdownView = createDropdown( new Model( {
+	const model = new Model( {
 		label: 'Dropdown with a very long label',
 		isEnabled: true,
 		isOn: false,
 		withText: true
-	} ) );
+	} );
+
+	const buttonView = createButtonForDropdown( model, {} );
+	const dropdownView = createDropdownView( model, buttonView, {} );
 
 	ui.dropdownLabel.add( dropdownView );
 

+ 166 - 50
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -7,6 +7,9 @@
 
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
+import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+import utilsTestUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
+
 import Model from '../../src/model';
 
 import View from '../../src/view';
@@ -21,13 +24,17 @@ import {
 	createButtonForDropdown,
 	createDropdownView,
 	createSingleButtonDropdown,
+	createSplitButtonForDropdown,
 	enableModelIfOneIsEnabled,
 	focusDropdownContentsOnArrows
 } from '../../src/dropdown/utils';
 import ListItemView from '../../src/list/listitemview';
 
 import ListView from '../../src/list/listview';
-import Collection from '../../../ckeditor5-utils/src/collection';
+import DropdownView from '../../src/dropdown/dropdownview';
+import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
+
+const assertBinding = utilsTestUtils.assertBinding;
 
 describe( 'utils', () => {
 	let dropdownView, buttonView, model, locale;
@@ -39,7 +46,7 @@ describe( 'utils', () => {
 		dropdownView = createDropdownView( model, buttonView, locale );
 	} );
 
-	describe( 'focusDropdownContentsOnArrows', () => {
+	describe( 'focusDropdownContentsOnArrows()', () => {
 		let panelChildView;
 
 		beforeEach( () => {
@@ -93,7 +100,7 @@ describe( 'utils', () => {
 		} );
 	} );
 
-	describe( 'closeDropdownOnExecute', () => {
+	describe( 'closeDropdownOnExecute()', () => {
 		beforeEach( () => {
 			closeDropdownOnExecute( dropdownView );
 
@@ -112,7 +119,7 @@ describe( 'utils', () => {
 		} );
 	} );
 
-	describe( 'closeDropdownOnBlur', () => {
+	describe( 'closeDropdownOnBlur()', () => {
 		beforeEach( () => {
 			closeDropdownOnBlur( dropdownView );
 
@@ -166,17 +173,130 @@ describe( 'utils', () => {
 		} );
 	} );
 
-	describe( 'createButtonForDropdown', () => {} );
+	describe( 'createButtonForDropdown()', () => {
+		it( 'accepts locale', () => {
+			const buttonView = createButtonForDropdown( model, locale );
+
+			expect( buttonView.locale ).to.equal( locale );
+		} );
+	} );
+
+	describe( 'createSplitButtonForDropdown()', () => {
+		it( 'accepts locale', () => {
+			const buttonView = createSplitButtonForDropdown( model, locale );
+
+			expect( buttonView.locale ).to.equal( locale );
+		} );
+	} );
+
+	describe( 'createDropdownView()', () => {
+		it( 'returns view', () => {
+			model = new Model();
+			buttonView = new ButtonView();
+			dropdownView = createDropdownView( model, buttonView, locale );
+
+			expect( dropdownView ).to.be.instanceOf( DropdownView );
+		} );
+
+		it( 'creates dropdown#panelView out of DropdownPanelView', () => {
+			model = new Model();
+			buttonView = new ButtonView();
+			dropdownView = createDropdownView( model, buttonView, locale );
+
+			expect( dropdownView.panelView ).to.be.instanceOf( DropdownPanelView );
+		} );
+
+		it( 'creates dropdown#buttonView out of buttonView', () => {
+			model = new Model();
+			buttonView = new ButtonView();
+			dropdownView = createDropdownView( model, buttonView, locale );
+
+			expect( dropdownView.buttonView ).to.equal( buttonView );
+		} );
+
+		it( 'accepts locale', () => {
+			const buttonView = new ButtonView();
+			dropdownView = createDropdownView( model, buttonView, locale );
+
+			expect( dropdownView.locale ).to.equal( locale );
+			expect( dropdownView.panelView.locale ).to.equal( locale );
+		} );
+
+		it( 'binds button attributes to the model', () => {
+			const modelDef = {
+				label: 'foo',
+				isOn: false,
+				isEnabled: true,
+				withText: false,
+				tooltip: false
+			};
+
+			model = new Model( modelDef );
+			buttonView = new ButtonView();
+			createDropdownView( model, buttonView, locale );
+
+			assertBinding( buttonView,
+				modelDef,
+				[
+					[ model, { label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true } ]
+				],
+				{ label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true }
+			);
+		} );
+
+		it( 'binds button#isOn do dropdown #isOpen and model #isOn', () => {
+			const modelDef = {
+				label: 'foo',
+				isOn: false,
+				isEnabled: true,
+				withText: false,
+				tooltip: false
+			};
+
+			model = new Model( modelDef );
+			buttonView = new ButtonView();
+			dropdownView = createDropdownView( model, buttonView, locale );
+
+			dropdownView.isOpen = false;
+			expect( buttonView.isOn ).to.be.false;
+
+			model.isOn = true;
+			expect( buttonView.isOn ).to.be.true;
+
+			dropdownView.isOpen = true;
+			expect( buttonView.isOn ).to.be.true;
+
+			model.isOn = false;
+			expect( buttonView.isOn ).to.be.true;
+		} );
 
-	describe( 'createSplitButtonForDropdown', () => {} );
+		it( 'binds dropdown#isEnabled to the model', () => {
+			const modelDef = {
+				label: 'foo',
+				isEnabled: true,
+				withText: false,
+				tooltip: false
+			};
 
-	describe( 'createDropdownView', () => {} );
+			model = new Model( modelDef );
+			buttonView = new ButtonView();
+			dropdownView = createDropdownView( model, buttonView, locale );
+
+			assertBinding( dropdownView,
+				{ isEnabled: true },
+				[
+					[ model, { isEnabled: false } ]
+				],
+				{ isEnabled: false }
+			);
+		} );
+	} );
 
-	describe( 'createSplitButtonDropdown', () => {} );
+	describe( 'createSplitButtonDropdown()', () => {} );
 
-	describe( 'createSingleButtonDropdown', () => {} );
+	describe( 'createSingleButtonDropdown()', () => {} );
 
-	describe( 'enableModelIfOneIsEnabled', () => {
+	describe( 'enableModelIfOneIsEnabled()', () => {
 		it( 'Bind to #isEnabled of each observable  and set it true if any observable #isEnabled is true', () => {
 			const observables = [
 				new Model( { isEnabled: false } ),
@@ -201,7 +321,7 @@ describe( 'utils', () => {
 		} );
 	} );
 
-	describe( 'addListViewToDropdown', () => {
+	describe( 'addListViewToDropdown()', () => {
 		let items;
 
 		beforeEach( () => {
@@ -282,7 +402,7 @@ describe( 'utils', () => {
 		} );
 	} );
 
-	describe( 'addToolbarToDropdown', () => {
+	describe( 'addToolbarToDropdown()', () => {
 		let buttons;
 
 		beforeEach( () => {
@@ -311,57 +431,53 @@ describe( 'utils', () => {
 			dropdownView.element.remove();
 		} );
 
-		describe( 'constructor()', () => {
-			it( 'sets view#locale', () => {
-				expect( dropdownView.locale ).to.equal( locale );
-			} );
-
-			describe( 'view#toolbarView', () => {
-				it( 'is created', () => {
-					const panelChildren = dropdownView.panelView.children;
+		it( 'sets view#locale', () => {
+			expect( dropdownView.locale ).to.equal( locale );
+		} );
 
-					expect( panelChildren ).to.have.length( 1 );
-					expect( panelChildren.get( 0 ) ).to.equal( dropdownView.toolbarView );
-					expect( dropdownView.toolbarView ).to.be.instanceof( ToolbarView );
-				} );
+		describe( 'view#toolbarView', () => {
+			it( 'is created', () => {
+				const panelChildren = dropdownView.panelView.children;
 
-				it.skip( '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 ] );
+				expect( panelChildren ).to.have.length( 1 );
+				expect( panelChildren.get( 0 ) ).to.equal( dropdownView.toolbarView );
+				expect( dropdownView.toolbarView ).to.be.instanceof( ToolbarView );
+			} );
 
-						done();
-					} );
+			it.skip( '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 ] );
 
-					dropdownView.toolbarView.items.get( 0 ).fire( 'execute' );
+					done();
 				} );
 
-				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;
-				} );
+				dropdownView.toolbarView.items.get( 0 ).fire( 'execute' );
+			} );
 
-				// TODO: remove?
-				it( 'reacts on model#toolbarClassName', () => {
-					expect( dropdownView.toolbarView.className ).to.be.undefined;
+			it( 'reacts on model#isVertical', () => {
+				model.isVertical = false;
+				expect( dropdownView.toolbarView.isVertical ).to.be.false;
 
-					model.set( 'toolbarClassName', 'foo' );
-					expect( dropdownView.toolbarView.className ).to.equal( 'foo' );
-				} );
+				model.isVertical = true;
+				expect( dropdownView.toolbarView.isVertical ).to.be.true;
 			} );
 
-			describe( 'buttons', () => {
-				// TODO: test me!
+			// TODO: remove?
+			it( 'reacts on model#toolbarClassName', () => {
+				expect( dropdownView.toolbarView.className ).to.be.undefined;
+
+				model.set( 'toolbarClassName', 'foo' );
+				expect( dropdownView.toolbarView.className ).to.equal( 'foo' );
 			} );
 		} );
-	} );
 
-	describe( 'addDefaultBehavior', () => {} );
+		describe( 'buttons', () => {
+			// TODO: test me!
+		} );
+	} );
 
-	describe( 'getBindingTargets', () => {} );
+	describe( 'addDefaultBehavior()', () => {} );
 
-	describe.skip( 'to sort', () => {} );
+	describe( 'getBindingTargets()', () => {} );
 } );