Procházet zdrojové kódy

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

Maciej Gołaszewski před 8 roky
rodič
revize
49e08ec1ae

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

@@ -0,0 +1,64 @@
+/**
+ * @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' ]
+		}
+	} );
+
+	dropdownView.panelView.children.add( toolbarView );
+
+	// TODO: make it as 'items', 'views' or pass them as parameter???
+	model.buttons.map( view => toolbarView.items.add( view ) );
+
+	return toolbarView;
+}

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

@@ -7,63 +7,6 @@
  * @module ui/dropdown/helpers
  * @module ui/dropdown/helpers
  */
  */
 
 
-import ToolbarView from '../toolbar/toolbarview';
-
-// 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/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 function addToolbarToDropdown( dropdownView, model ) {
-	const toolbarView = dropdownView.toolbarView = new ToolbarView();
-
-	toolbarView.bind( 'isVertical' ).to( model, 'isVertical' );
-
-	dropdownView.extendTemplate( {
-		attributes: {
-			class: [ 'ck-toolbar-dropdown' ]
-		}
-	} );
-
-	dropdownView.panelView.children.add( toolbarView );
-
-	// TODO: make it as 'items', 'views' or pass them as parameter???
-	model.buttons.map( view => toolbarView.items.add( view ) );
-
-	return toolbarView;
-}
-
 // Returns an array of binding components for
 // Returns an array of binding components for
 // {@link module:utils/observablemixin~Observable#bind} from a set of iterable
 // {@link module:utils/observablemixin~Observable#bind} from a set of iterable
 // buttons.
 // buttons.

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

@@ -0,0 +1,89 @@
+/**
+ * @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 createButtonForDropdown from '../../../src/dropdown/helpers/createbuttonfordropdown';
+import createDropdownView from '../../../src/dropdown/helpers/createdropdownview';
+
+import addToolbarToDropdown from '../../../src/dropdown/helpers/addtoolbartodropdown';
+
+describe( 'addToolbarToDropdown()', () => {
+	let dropdownView, buttonView, 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
+		} );
+
+		buttonView = createButtonForDropdown( model, locale );
+		dropdownView = createDropdownView( model, buttonView, 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.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 ] );
+
+				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;
+		} );
+	} );
+
+	describe( 'buttons', () => {
+		// TODO: test me!
+	} );
+} );

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

@@ -15,9 +15,8 @@ import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.sv
 import alignCenterIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
 import alignCenterIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
 import ButtonView from '../../../src/button/buttonview';
 import ButtonView from '../../../src/button/buttonview';
 
 
-import { addToolbarToDropdown } from '../../../src/dropdown/utils';
-
 import addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
 import addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
+import addToolbarToDropdown from '../../../src/dropdown/helpers/addtoolbartodropdown';
 import createDropdownView from '../../../src/dropdown/helpers/createdropdownview';
 import createDropdownView from '../../../src/dropdown/helpers/createdropdownview';
 import createButtonForDropdown from '../../../src/dropdown/helpers/createbuttonfordropdown';
 import createButtonForDropdown from '../../../src/dropdown/helpers/createbuttonfordropdown';
 import closeDropdownOnBlur from '../../../src/dropdown/helpers/closedropdownonblur';
 import closeDropdownOnBlur from '../../../src/dropdown/helpers/closedropdownonblur';

+ 0 - 102
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -1,102 +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 createButtonForDropdown from '../../src/dropdown/helpers/createbuttonfordropdown';
-import createDropdownView from '../../src/dropdown/helpers/createdropdownview';
-
-import { addToolbarToDropdown } from '../../src/dropdown/utils';
-
-describe( 'utils', () => {
-	let dropdownView, buttonView, model, locale;
-
-	beforeEach( () => {
-		locale = { t() {} };
-		model = new Model();
-		buttonView = createButtonForDropdown( model, locale );
-		dropdownView = createDropdownView( model, buttonView, locale );
-	} );
-
-	afterEach( () => {
-		if ( dropdownView.element ) {
-			dropdownView.element.remove();
-		}
-	} );
-
-	describe( 'addToolbarToDropdown()', () => {
-		let 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,
-				buttons
-			} );
-
-			buttonView = createButtonForDropdown( model, locale );
-			dropdownView = createDropdownView( model, buttonView, locale );
-
-			addToolbarToDropdown( dropdownView, model );
-
-			dropdownView.render();
-			document.body.appendChild( dropdownView.element );
-		} );
-
-		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.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 ] );
-
-					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;
-			} );
-		} );
-
-		describe( 'buttons', () => {
-			// TODO: test me!
-		} );
-	} );
-
-	describe( 'getBindingTargets()', () => {} );
-} );