8
0
Просмотр исходного кода

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

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
9154dae1ff

+ 54 - 0
packages/ckeditor5-ui/src/dropdown/helpers/createdropdownview.js

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/dropdown/helpers/createdropdownview
+ */
+
+import DropdownPanelView from './../dropdownpanelview';
+import DropdownView from './../dropdownview';
+
+/**
+ * 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.
+ */
+export default function createDropdownView( model, buttonView, locale ) {
+	const panelView = new DropdownPanelView( locale );
+	const dropdownView = new DropdownView( locale, buttonView, panelView );
+
+	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;
+	} );
+
+	return dropdownView;
+}

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

@@ -7,8 +7,6 @@
  * @module ui/dropdown/helpers
  * @module ui/dropdown/helpers
  */
  */
 
 
-import DropdownPanelView from './dropdownpanelview';
-import DropdownView from './dropdownview';
 import ToolbarView from '../toolbar/toolbarview';
 import ToolbarView from '../toolbar/toolbarview';
 import ListView from '../list/listview';
 import ListView from '../list/listview';
 import ListItemView from '../list/listitemview';
 import ListItemView from '../list/listitemview';
@@ -16,21 +14,6 @@ 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.
 // 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';
 import '../../theme/components/dropdown/toolbardropdown.css';
 
 
-export function createDropdownView( model, buttonView, locale ) {
-	const panelView = new DropdownPanelView( locale );
-	const dropdownView = new DropdownView( locale, buttonView, panelView );
-
-	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;
-	} );
-
-	return dropdownView;
-}
-
 export function enableModelIfOneIsEnabled( model, observables ) {
 export function enableModelIfOneIsEnabled( model, observables ) {
 	model.bind( 'isEnabled' ).to(
 	model.bind( 'isEnabled' ).to(
 		// Bind to #isEnabled of each observable...
 		// Bind to #isEnabled of each observable...
@@ -162,32 +145,3 @@ export function addToolbarToDropdown( dropdownView, model ) {
 export function getBindingTargets( buttons, attribute ) {
 export function getBindingTargets( buttons, attribute ) {
 	return Array.prototype.concat( ...buttons.map( button => [ button, 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.
- */

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/helpers/closedropdownonblur.js

@@ -7,7 +7,7 @@
 
 
 import Model from '../../../src/model';
 import Model from '../../../src/model';
 import ButtonView from '../../../src/button/buttonview';
 import ButtonView from '../../../src/button/buttonview';
-import { createDropdownView } from '../../../src/dropdown/utils';
+import createDropdownView from '../../../src/dropdown/helpers/createdropdownview';
 import closeDropdownOnBlur from '../../../src/dropdown/helpers/closedropdownonblur';
 import closeDropdownOnBlur from '../../../src/dropdown/helpers/closedropdownonblur';
 
 
 describe( 'closeDropdownOnBlur()', () => {
 describe( 'closeDropdownOnBlur()', () => {

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/helpers/closedropdownonexecute.js

@@ -7,7 +7,7 @@
 
 
 import Model from '../../../src/model';
 import Model from '../../../src/model';
 import ButtonView from '../../../src/button/buttonview';
 import ButtonView from '../../../src/button/buttonview';
-import { createDropdownView } from '../../../src/dropdown/utils';
+import createDropdownView from '../../../src/dropdown/helpers/createdropdownview';
 import closeDropdownOnExecute from '../../../src/dropdown/helpers/closedropdownonexecute';
 import closeDropdownOnExecute from '../../../src/dropdown/helpers/closedropdownonexecute';
 
 
 describe( 'closeDropdownOnExecute()', () => {
 describe( 'closeDropdownOnExecute()', () => {

+ 125 - 0
packages/ckeditor5-ui/tests/dropdown/helpers/createdropdownview.js

@@ -0,0 +1,125 @@
+/**
+ * @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 Model from '../../../src/model';
+
+import ButtonView from '../../../src/button/buttonview';
+import DropdownView from '../../../src/dropdown/dropdownview';
+import DropdownPanelView from '../../../src/dropdown/dropdownpanelview';
+import createButtonForDropdown from '../../../src/dropdown/helpers/createbuttonfordropdown';
+import createDropdownView from '../../../src/dropdown/helpers/createdropdownview';
+
+const assertBinding = utilsTestUtils.assertBinding;
+
+describe( 'createDropdownView()', () => {
+	let dropdownView, buttonView, model, locale;
+
+	beforeEach( () => {
+		locale = { t() {} };
+		model = new Model();
+		buttonView = createButtonForDropdown( model, locale );
+		dropdownView = createDropdownView( model, buttonView, locale );
+	} );
+
+	it( 'accepts locale', () => {
+		expect( dropdownView.locale ).to.equal( locale );
+		expect( dropdownView.panelView.locale ).to.equal( locale );
+	} );
+
+	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( '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;
+	} );
+
+	it( 'binds dropdown#isEnabled to the model', () => {
+		const modelDef = {
+			label: 'foo',
+			isEnabled: true,
+			withText: false,
+			tooltip: false
+		};
+
+		model = new Model( modelDef );
+		buttonView = new ButtonView();
+		dropdownView = createDropdownView( model, buttonView, locale );
+
+		assertBinding( dropdownView,
+			{ isEnabled: true },
+			[
+				[ model, { isEnabled: false } ]
+			],
+			{ isEnabled: false }
+		);
+	} );
+} );

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/helpers/focusdropdowncontentsonarrows.js

@@ -12,7 +12,7 @@ import Model from '../../../src/model';
 import ButtonView from '../../../src/button/buttonview';
 import ButtonView from '../../../src/button/buttonview';
 
 
 import focusDropdownContentsOnArrows from '../../../src/dropdown/helpers/focusdropdowncontentsonarrows';
 import focusDropdownContentsOnArrows from '../../../src/dropdown/helpers/focusdropdowncontentsonarrows';
-import { createDropdownView } from '../../../src/dropdown/utils';
+import createDropdownView from '../../../src/dropdown/helpers/createdropdownview';
 
 
 describe( 'focusDropdownContentsOnArrows()', () => {
 describe( 'focusDropdownContentsOnArrows()', () => {
 	let dropdownView;
 	let dropdownView;

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

@@ -18,9 +18,9 @@ import ButtonView from '../../../src/button/buttonview';
 import {
 import {
 	addListViewToDropdown,
 	addListViewToDropdown,
 	addToolbarToDropdown,
 	addToolbarToDropdown,
-	createDropdownView
 } from '../../../src/dropdown/utils';
 } from '../../../src/dropdown/utils';
 
 
+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';
 import closeDropdownOnExecute from '../../../src/dropdown/helpers/closedropdownonexecute';
 import closeDropdownOnExecute from '../../../src/dropdown/helpers/closedropdownonexecute';

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

@@ -6,7 +6,6 @@
 /* globals document */
 /* globals document */
 
 
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-import utilsTestUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 
 
 import Model from '../../src/model';
 import Model from '../../src/model';
 
 
@@ -14,19 +13,15 @@ import ButtonView from '../../src/button/buttonview';
 import ToolbarView from '../../src/toolbar/toolbarview';
 import ToolbarView from '../../src/toolbar/toolbarview';
 import ListItemView from '../../src/list/listitemview';
 import ListItemView from '../../src/list/listitemview';
 import ListView from '../../src/list/listview';
 import ListView from '../../src/list/listview';
-import DropdownView from '../../src/dropdown/dropdownview';
-import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 import createButtonForDropdown from '../../src/dropdown/helpers/createbuttonfordropdown';
 import createButtonForDropdown from '../../src/dropdown/helpers/createbuttonfordropdown';
+import createDropdownView from '../../src/dropdown/helpers/createdropdownview';
 
 
 import {
 import {
 	addListViewToDropdown,
 	addListViewToDropdown,
 	addToolbarToDropdown,
 	addToolbarToDropdown,
-	createDropdownView,
 	enableModelIfOneIsEnabled
 	enableModelIfOneIsEnabled
 } from '../../src/dropdown/utils';
 } from '../../src/dropdown/utils';
 
 
-const assertBinding = utilsTestUtils.assertBinding;
-
 describe( 'utils', () => {
 describe( 'utils', () => {
 	let dropdownView, buttonView, model, locale;
 	let dropdownView, buttonView, model, locale;
 
 
@@ -43,109 +38,6 @@ describe( 'utils', () => {
 		}
 		}
 	} );
 	} );
 
 
-	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;
-		} );
-
-		it( 'binds dropdown#isEnabled to the model', () => {
-			const modelDef = {
-				label: 'foo',
-				isEnabled: true,
-				withText: false,
-				tooltip: false
-			};
-
-			model = new Model( modelDef );
-			buttonView = new ButtonView();
-			dropdownView = createDropdownView( model, buttonView, locale );
-
-			assertBinding( dropdownView,
-				{ isEnabled: true },
-				[
-					[ model, { isEnabled: false } ]
-				],
-				{ isEnabled: false }
-			);
-		} );
-	} );
-
 	describe( 'enableModelIfOneIsEnabled()', () => {
 	describe( 'enableModelIfOneIsEnabled()', () => {
 		it( 'Bind to #isEnabled of each observable  and set it true if any observable #isEnabled is true', () => {
 		it( 'Bind to #isEnabled of each observable  and set it true if any observable #isEnabled is true', () => {
 			const observables = [
 			const observables = [