瀏覽代碼

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

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

+ 0 - 68
packages/ckeditor5-ui/src/dropdown/helpers/addlistviewtodropdown.js

@@ -1,68 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module ui/dropdown/helpers/addlistviewtodropdown
- */
-
-import ListView from '../../list/listview';
-import ListItemView from '../../list/listitemview';
-
-/**
- * Creates an instance of {@link module:ui/dropdown/list/listdropdownview~ListDropdownView} class using
- * a provided {@link module:ui/dropdown/list/listdropdownmodel~ListDropdownModel}.
- *
- *		const items = new Collection();
- *
- *		items.add( new Model( { label: 'First item', style: 'color: red' } ) );
- *		items.add( new Model( { label: 'Second item', style: 'color: green', class: 'foo' } ) );
- *
- *		const model = new Model( {
- *			isEnabled: true,
- *			items,
- *			isOn: false,
- *			label: 'A dropdown'
- *		} );
- *
- *		const dropdown = createListDropdown( model, locale );
- *
- *		// Will render a dropdown labeled "A dropdown" with a list in the panel
- *		// containing two items.
- *		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.
- *
- * The
- * {@link module:ui/dropdown/list/listdropdownmodel~ListDropdownModel#items items collection}
- * of the {@link module:ui/dropdown/list/listdropdownmodel~ListDropdownModel model} also controls the
- * presence and attributes of respective {@link module:ui/list/listitemview~ListItemView list items}.
- *
- * See {@link module:ui/dropdown/createdropdown~createDropdown} and {@link module:list/list~List}.
- *
- * @param {module:ui/dropdown/list/listdropdownmodel~ListDropdownModel} model Model of the list dropdown.
- * @param {module:utils/locale~Locale} locale The locale instance.
- * @returns {module:ui/dropdown/list/listdropdownview~ListDropdownView} The list dropdown view instance.
- */
-export default function addListViewToDropdown( dropdownView, model, locale ) {
-	const listView = dropdownView.listView = new ListView( locale );
-
-	// TODO: make this param of method instead of model property?
-	listView.items.bindTo( model.items ).using( itemModel => {
-		const item = new ListItemView( locale );
-
-		// Bind all attributes of the model to the item view.
-		item.bind( ...Object.keys( itemModel ) ).to( itemModel );
-
-		return item;
-	} );
-
-	dropdownView.panelView.children.add( listView );
-	listView.items.delegate( 'execute' ).to( dropdownView );
-
-	return listView;
-}

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

@@ -12,6 +12,8 @@ import DropdownView from './dropdownview';
 import SplitButtonView from '../button/splitbuttonview';
 import ButtonView from '../button/buttonview';
 import ToolbarView from '../toolbar/toolbarview';
+import ListView from '../list/listview';
+import ListItemView from '../list/listitemview';
 
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
 
@@ -147,6 +149,63 @@ export function addToolbarToDropdown( dropdownView, buttons, model ) {
 	return toolbarView;
 }
 
+/**
+ * Creates an instance of {@link module:ui/dropdown/list/listdropdownview~ListDropdownView} class using
+ * a provided {@link module:ui/dropdown/list/listdropdownmodel~ListDropdownModel}.
+ *
+ *		const items = new Collection();
+ *
+ *		items.add( new Model( { label: 'First item', style: 'color: red' } ) );
+ *		items.add( new Model( { label: 'Second item', style: 'color: green', class: 'foo' } ) );
+ *
+ *		const model = new Model( {
+ *			isEnabled: true,
+ *			items,
+ *			isOn: false,
+ *			label: 'A dropdown'
+ *		} );
+ *
+ *		const dropdown = createListDropdown( model, locale );
+ *
+ *		// Will render a dropdown labeled "A dropdown" with a list in the panel
+ *		// containing two items.
+ *		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.
+ *
+ * The
+ * {@link module:ui/dropdown/list/listdropdownmodel~ListDropdownModel#items items collection}
+ * of the {@link module:ui/dropdown/list/listdropdownmodel~ListDropdownModel model} also controls the
+ * presence and attributes of respective {@link module:ui/list/listitemview~ListItemView list items}.
+ *
+ * See {@link module:ui/dropdown/createdropdown~createDropdown} and {@link module:list/list~List}.
+ *
+ * @param {module:ui/dropdown/list/listdropdownmodel~ListDropdownModel} model Model of the list dropdown.
+ * @param {module:utils/locale~Locale} locale The locale instance.
+ * @returns {module:ui/dropdown/list/listdropdownview~ListDropdownView} The list dropdown view instance.
+ */
+export function addListViewToDropdown( dropdownView, listViewItems, model, locale ) {
+	const listView = dropdownView.listView = new ListView( locale );
+
+	// TODO: make this param of method instead of model property?
+	listView.items.bindTo( listViewItems ).using( itemModel => {
+		const item = new ListItemView( locale );
+
+		// Bind all attributes of the model to the item view.
+		item.bind( ...Object.keys( itemModel ) ).to( itemModel );
+
+		return item;
+	} );
+
+	dropdownView.panelView.children.add( listView );
+	listView.items.delegate( 'execute' ).to( dropdownView );
+
+	return listView;
+}
+
 // @private
 function prepareDropdown( locale, buttonView, model ) {
 	const panelView = new DropdownPanelView( locale );

+ 0 - 95
packages/ckeditor5-ui/tests/dropdown/helpers/addlistviewtodropdown.js

@@ -1,95 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals document */
-
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-
-import Model from '../../../src/model';
-
-import ListItemView from '../../../src/list/listitemview';
-import ListView from '../../../src/list/listview';
-
-import { createDropdown } from './../../../src/dropdown/utils';
-
-import addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
-
-describe( 'addListViewToDropdown()', () => {
-	let dropdownView, model, locale, items;
-
-	beforeEach( () => {
-		locale = { t() {} };
-		items = new Collection();
-		model = new Model( {
-			isEnabled: true,
-			items,
-			isOn: false,
-			label: 'foo'
-		} );
-
-		dropdownView = createDropdown( model, locale );
-
-		addListViewToDropdown( dropdownView, model, locale );
-
-		dropdownView.render();
-		document.body.appendChild( dropdownView.element );
-	} );
-
-	afterEach( () => {
-		dropdownView.element.remove();
-	} );
-
-	describe( 'view#listView', () => {
-		it( 'is created', () => {
-			const panelChildren = dropdownView.panelView.children;
-
-			expect( panelChildren ).to.have.length( 1 );
-			expect( panelChildren.get( 0 ) ).to.equal( dropdownView.listView );
-			expect( dropdownView.listView ).to.be.instanceof( ListView );
-		} );
-
-		it( 'is bound to model#items', () => {
-			items.add( new Model( { label: 'a', style: 'b' } ) );
-			items.add( new Model( { label: 'c', style: 'd' } ) );
-
-			expect( dropdownView.listView.items ).to.have.length( 2 );
-			expect( dropdownView.listView.items.get( 0 ) ).to.be.instanceOf( ListItemView );
-			expect( dropdownView.listView.items.get( 1 ).label ).to.equal( 'c' );
-			expect( dropdownView.listView.items.get( 1 ).style ).to.equal( 'd' );
-
-			items.remove( 1 );
-			expect( dropdownView.listView.items ).to.have.length( 1 );
-			expect( dropdownView.listView.items.get( 0 ).label ).to.equal( 'a' );
-			expect( dropdownView.listView.items.get( 0 ).style ).to.equal( 'b' );
-		} );
-
-		it( 'binds all attributes in model#items', () => {
-			const itemModel = new Model( { label: 'a', style: 'b', foo: 'bar', baz: 'qux' } );
-
-			items.add( itemModel );
-
-			const item = dropdownView.listView.items.get( 0 );
-
-			expect( item.foo ).to.equal( 'bar' );
-			expect( item.baz ).to.equal( 'qux' );
-
-			itemModel.baz = 'foo?';
-			expect( item.baz ).to.equal( 'foo?' );
-		} );
-
-		it( 'delegates view.listView#execute to the view', done => {
-			items.add( new Model( { label: 'a', style: 'b' } ) );
-
-			dropdownView.on( 'execute', evt => {
-				expect( evt.source ).to.equal( dropdownView.listView.items.get( 0 ) );
-				expect( evt.path ).to.deep.equal( [ dropdownView.listView.items.get( 0 ), dropdownView ] );
-
-				done();
-			} );
-
-			dropdownView.listView.items.get( 0 ).fire( 'execute' );
-		} );
-	} );
-} );

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

@@ -15,8 +15,7 @@ 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 addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
-import { createDropdown, addToolbarToDropdown } from '../../../src/dropdown/utils';
+import { createDropdown, addToolbarToDropdown, addListViewToDropdown } from '../../../src/dropdown/utils';
 
 const ui = testUtils.createTestUIView( {
 	dropdown: '#dropdown',
@@ -55,13 +54,12 @@ function testList() {
 		label: 'ListDropdown',
 		isEnabled: true,
 		isOn: false,
-		withText: true,
-		items: collection
+		withText: true
 	} );
 
 	const dropdownView = createDropdown( model, {} );
 
-	addListViewToDropdown( dropdownView, model, {} );
+	addListViewToDropdown( dropdownView, collection, model, {} );
 
 	dropdownView.on( 'execute', evt => {
 		/* global console */

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

@@ -16,7 +16,10 @@ import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 import SplitButtonView from '../../src/button/splitbuttonview';
 import View from '../../src/view';
 import ToolbarView from '../../src/toolbar/toolbarview';
-import { createDropdown, createSplitButtonDropdown, addToolbarToDropdown } from '../../src/dropdown/utils';
+import { createDropdown, createSplitButtonDropdown, addToolbarToDropdown, addListViewToDropdown } from '../../src/dropdown/utils';
+import ListItemView from '../../src/list/listitemview';
+import ListView from '../../src/list/listview';
+import Collection from '../../../ckeditor5-utils/src/collection';
 
 const assertBinding = utilsTestUtils.assertBinding;
 
@@ -308,6 +311,83 @@ describe( 'utils', () => {
 		} );
 	} );
 
+	describe( 'addListViewToDropdown()', () => {
+		let dropdownView, model, locale, items;
+
+		beforeEach( () => {
+			locale = { t() {} };
+			items = new Collection();
+			model = new Model( {
+				isEnabled: true,
+				isOn: false,
+				label: 'foo'
+			} );
+
+			dropdownView = createDropdown( model, locale );
+
+			addListViewToDropdown( dropdownView, items, model, locale );
+
+			dropdownView.render();
+			document.body.appendChild( dropdownView.element );
+		} );
+
+		afterEach( () => {
+			dropdownView.element.remove();
+		} );
+
+		describe( 'view#listView', () => {
+			it( 'is created', () => {
+				const panelChildren = dropdownView.panelView.children;
+
+				expect( panelChildren ).to.have.length( 1 );
+				expect( panelChildren.get( 0 ) ).to.equal( dropdownView.listView );
+				expect( dropdownView.listView ).to.be.instanceof( ListView );
+			} );
+
+			it( 'is bound to model#items', () => {
+				items.add( new Model( { label: 'a', style: 'b' } ) );
+				items.add( new Model( { label: 'c', style: 'd' } ) );
+
+				expect( dropdownView.listView.items ).to.have.length( 2 );
+				expect( dropdownView.listView.items.get( 0 ) ).to.be.instanceOf( ListItemView );
+				expect( dropdownView.listView.items.get( 1 ).label ).to.equal( 'c' );
+				expect( dropdownView.listView.items.get( 1 ).style ).to.equal( 'd' );
+
+				items.remove( 1 );
+				expect( dropdownView.listView.items ).to.have.length( 1 );
+				expect( dropdownView.listView.items.get( 0 ).label ).to.equal( 'a' );
+				expect( dropdownView.listView.items.get( 0 ).style ).to.equal( 'b' );
+			} );
+
+			it( 'binds all attributes in model#items', () => {
+				const itemModel = new Model( { label: 'a', style: 'b', foo: 'bar', baz: 'qux' } );
+
+				items.add( itemModel );
+
+				const item = dropdownView.listView.items.get( 0 );
+
+				expect( item.foo ).to.equal( 'bar' );
+				expect( item.baz ).to.equal( 'qux' );
+
+				itemModel.baz = 'foo?';
+				expect( item.baz ).to.equal( 'foo?' );
+			} );
+
+			it( 'delegates view.listView#execute to the view', done => {
+				items.add( new Model( { label: 'a', style: 'b' } ) );
+
+				dropdownView.on( 'execute', evt => {
+					expect( evt.source ).to.equal( dropdownView.listView.items.get( 0 ) );
+					expect( evt.path ).to.deep.equal( [ dropdownView.listView.items.get( 0 ), dropdownView ] );
+
+					done();
+				} );
+
+				dropdownView.listView.items.get( 0 ).fire( 'execute' );
+			} );
+		} );
+	} );
+
 	function addDefaultBehaviorTests() {
 		describe( 'hasDefaultBehavior', () => {
 			describe( 'closeDropdownOnBlur()', () => {