Преглед на файлове

Other: Extract `addListViewToDropdown()` to own file.

Maciej Gołaszewski преди 7 години
родител
ревизия
62e1b8ebb9

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

@@ -0,0 +1,70 @@
+/**
+ * @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 );
+
+	// TODO: make this also on toolbar????
+	listView.items.delegate( 'execute' ).to( dropdownView );
+
+	return listView;
+}

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

@@ -8,72 +8,11 @@
  */
 
 import ToolbarView from '../toolbar/toolbarview';
-import ListView from '../list/listview';
-import ListItemView from '../list/listitemview';
 
 // TODO: This should be per-component import AFAIK. It will result in smaller builds that don't use dropdown with toolbar.
 import '../../theme/components/dropdown/toolbardropdown.css';
 
 /**
- * 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, 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 );
-
-	// TODO: make this also on toolbar????
-	listView.items.delegate( 'execute' ).to( dropdownView );
-
-	return listView;
-}
-
-/**
  * Creates an instance of {@link module:ui/dropdown/button/buttondropdownview~ButtonDropdownView} class using
  * a provided {@link module:ui/dropdown/button/buttondropdownmodel~ButtonDropdownModel}.
  *

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

@@ -0,0 +1,97 @@
+/**
+ * @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 createButtonForDropdown from '../../../src/dropdown/helpers/createbuttonfordropdown';
+import createDropdownView from '../../../src/dropdown/helpers/createdropdownview';
+
+import addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
+
+describe( 'addListViewToDropdown()', () => {
+	let dropdownView, buttonView, model, locale, items;
+
+	beforeEach( () => {
+		locale = { t() {} };
+		items = new Collection();
+		model = new Model( {
+			isEnabled: true,
+			items,
+			isOn: false,
+			label: 'foo'
+		} );
+
+		buttonView = createButtonForDropdown( model, locale );
+		dropdownView = createDropdownView( model, buttonView, 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' );
+		} );
+	} );
+} );

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

@@ -15,11 +15,9 @@ 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,
-	addToolbarToDropdown,
-} from '../../../src/dropdown/utils';
+import { addToolbarToDropdown } from '../../../src/dropdown/utils';
 
+import addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
 import createDropdownView from '../../../src/dropdown/helpers/createdropdownview';
 import createButtonForDropdown from '../../../src/dropdown/helpers/createbuttonfordropdown';
 import closeDropdownOnBlur from '../../../src/dropdown/helpers/closedropdownonblur';

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

@@ -5,21 +5,14 @@
 
 /* globals document */
 
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-
 import Model from '../../src/model';
 
 import ButtonView from '../../src/button/buttonview';
 import ToolbarView from '../../src/toolbar/toolbarview';
-import ListItemView from '../../src/list/listitemview';
-import ListView from '../../src/list/listview';
 import createButtonForDropdown from '../../src/dropdown/helpers/createbuttonfordropdown';
 import createDropdownView from '../../src/dropdown/helpers/createdropdownview';
 
-import {
-	addListViewToDropdown,
-	addToolbarToDropdown
-} from '../../src/dropdown/utils';
+import { addToolbarToDropdown } from '../../src/dropdown/utils';
 
 describe( 'utils', () => {
 	let dropdownView, buttonView, model, locale;
@@ -37,80 +30,6 @@ describe( 'utils', () => {
 		}
 	} );
 
-	describe( 'addListViewToDropdown()', () => {
-		let items;
-
-		beforeEach( () => {
-			items = new Collection();
-			model = new Model( {
-				isEnabled: true,
-				items,
-				isOn: false,
-				label: 'foo'
-			} );
-
-			buttonView = createButtonForDropdown( model, locale );
-			dropdownView = createDropdownView( model, buttonView, locale );
-
-			addListViewToDropdown( dropdownView, model, locale );
-
-			dropdownView.render();
-			document.body.appendChild( dropdownView.element );
-		} );
-
-		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' );
-			} );
-		} );
-	} );
-
 	describe( 'addToolbarToDropdown()', () => {
 		let buttons;