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

Changed: Bind dropdown behavior to `DropdownView` instead of `Model`.

Maciej Gołaszewski 7 лет назад
Родитель
Сommit
64c4c3ea51

+ 19 - 15
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -47,10 +47,10 @@ import '../../theme/components/dropdown/toolbardropdown.css';
  * @param {module:utils/locale~Locale} locale The locale instance.
  * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  */
-export function createDropdown( model, locale ) {
-	const buttonView = createButtonForDropdown( model, locale );
+export function createDropdown( locale ) {
+	const buttonView = createButtonForDropdown( locale );
 
-	const dropdownView = prepareDropdown( locale, buttonView, model );
+	const dropdownView = prepareDropdown( locale, buttonView );
 
 	addDefaultBehavior( dropdownView );
 
@@ -85,10 +85,10 @@ export function createDropdown( model, locale ) {
  * @param {module:utils/locale~Locale} locale The locale instance.
  * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  */
-export function createSplitButtonDropdown( model, locale ) {
-	const buttonView = createSplitButtonForDropdown( model, locale );
+export function createSplitButtonDropdown( locale ) {
+	const buttonView = createSplitButtonForDropdown( locale );
 
-	const dropdownView = prepareDropdown( locale, buttonView, model );
+	const dropdownView = prepareDropdown( locale, buttonView );
 
 	addDefaultBehavior( dropdownView );
 
@@ -129,10 +129,11 @@ export function createSplitButtonDropdown( model, locale ) {
  * @param {module:utils/locale~Locale} locale The locale instance.
  * @returns {module:ui/dropdown/dropdownview~DropdownView}
  */
-export function addToolbarToDropdown( dropdownView, buttons, model ) {
+export function addToolbarToDropdown( dropdownView, buttons ) {
 	const toolbarView = dropdownView.toolbarView = new ToolbarView();
 
-	toolbarView.bind( 'isVertical' ).to( model, 'isVertical' );
+	// dropdownView.set( 'isVertical' );
+	toolbarView.bind( 'isVertical' ).to( dropdownView, 'isVertical' );
 
 	dropdownView.extendTemplate( {
 		attributes: {
@@ -187,7 +188,8 @@ export function addToolbarToDropdown( dropdownView, buttons, model ) {
  * @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 ) {
+export function addListViewToDropdown( dropdownView, listViewItems ) {
+	const locale = dropdownView.locale;
 	const listView = dropdownView.listView = new ListView( locale );
 
 	// TODO: make this param of method instead of model property?
@@ -207,14 +209,16 @@ export function addListViewToDropdown( dropdownView, listViewItems, model, local
 }
 
 // @private
-function prepareDropdown( locale, buttonView, model ) {
+function prepareDropdown( locale, buttonView ) {
 	const panelView = new DropdownPanelView( locale );
 	const dropdownView = new DropdownView( locale, buttonView, panelView );
 
-	dropdownView.bind( 'isEnabled' ).to( model );
+	buttonView.bind( 'label', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( dropdownView );
 
-	buttonView.bind( 'label', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( model );
-	buttonView.bind( 'isOn' ).to( model, 'isOn', dropdownView, 'isOpen', ( isOn, isOpen ) => {
+	// TODO: buttonView.bind( 'isOn' ).to( model, 'isOn', dropdownView, 'isOpen', ( isOn, isOpen ) => {
+	dropdownView.set( 'isOn', true );
+
+	buttonView.bind( 'isOn' ).to( dropdownView, 'isOn', dropdownView, 'isOpen', ( isOn, isOpen ) => {
 		return isOn || isOpen;
 	} );
 
@@ -222,7 +226,7 @@ function prepareDropdown( locale, buttonView, model ) {
 }
 
 // @private
-function createSplitButtonForDropdown( model, locale ) {
+function createSplitButtonForDropdown( locale ) {
 	const splitButtonView = new SplitButtonView( locale );
 
 	// TODO: Check if those binding are in good place (maybe move them to SplitButton) or add tests.
@@ -233,7 +237,7 @@ function createSplitButtonForDropdown( model, locale ) {
 }
 
 // @private
-function createButtonForDropdown( model, locale ) {
+function createButtonForDropdown( locale ) {
 	const buttonView = new ButtonView( locale );
 
 	// Dropdown expects "select" event to show contents.

+ 20 - 22
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -26,15 +26,15 @@ const ui = testUtils.createTestUIView( {
 } );
 
 function testEmpty() {
-	const model = new Model( {
+	const dropdownView = createDropdown( {} );
+
+	dropdownView.set( {
 		label: 'Dropdown',
 		isEnabled: true,
 		isOn: false,
 		withText: true
 	} );
 
-	const dropdownView = createDropdown( model, {} );
-
 	ui.dropdown.add( dropdownView );
 
 	dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
@@ -50,16 +50,16 @@ function testList() {
 		} ) );
 	} );
 
-	const model = new Model( {
+	const dropdownView = createDropdown( {} );
+
+	dropdownView.set( {
 		label: 'ListDropdown',
 		isEnabled: true,
 		isOn: false,
 		withText: true
 	} );
 
-	const dropdownView = createDropdown( model, {} );
-
-	addListViewToDropdown( dropdownView, collection, model, {} );
+	addListViewToDropdown( dropdownView, collection );
 
 	dropdownView.on( 'execute', evt => {
 		/* global console */
@@ -68,21 +68,23 @@ function testList() {
 
 	ui.listDropdown.add( dropdownView );
 
-	window.listDropdownModel = model;
 	window.listDropdownCollection = collection;
 	window.Model = Model;
 }
 
 function testSharedModel() {
-	const model = new Model( {
+	const dropdownSettings = {
 		label: 'Shared Model',
 		isEnabled: true,
 		isOn: false,
 		withText: true
-	} );
+	};
 
-	const dropdownView1 = createDropdown( model, {} );
-	const dropdownView2 = createDropdown( model, {} );
+	const dropdownView1 = createDropdown( {} );
+	const dropdownView2 = createDropdown( {} );
+
+	dropdownView1.set( dropdownSettings );
+	dropdownView2.set( dropdownSettings );
 
 	ui.dropdownShared.add( dropdownView1 );
 	ui.dropdownShared.add( dropdownView2 );
@@ -91,15 +93,15 @@ function testSharedModel() {
 }
 
 function testLongLabel() {
-	const model = new Model( {
+	const dropdownView = createDropdown( {} );
+
+	dropdownView.set( {
 		label: 'Dropdown with a very long label',
 		isEnabled: true,
 		isOn: false,
 		withText: true
 	} );
 
-	const dropdownView = createDropdown( model, {} );
-
 	ui.dropdownLabel.add( dropdownView );
 
 	dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
@@ -124,18 +126,14 @@ function testButton() {
 			return buttonView;
 		} );
 
-	const toolbarDropdownModel = new Model( {
-		isVertical: true
-	} );
-
-	const toolbarDropdown = createDropdown( toolbarDropdownModel, locale );
+	const toolbarDropdown = createDropdown( locale );
+	toolbarDropdown.set( 'isVertical', true );
 
-	addToolbarToDropdown( toolbarDropdown, buttonViews, toolbarDropdownModel );
+	addToolbarToDropdown( toolbarDropdown, buttonViews );
 
 	ui.toolbarDropdown.add( toolbarDropdown );
 
 	window.buttons = buttons;
-	window.toolbarDropdownModel = toolbarDropdownModel;
 }
 
 testEmpty();

+ 34 - 40
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -31,11 +31,8 @@ describe( 'utils', () => {
 	} );
 
 	describe( 'createDropdown()', () => {
-		let model;
-
 		beforeEach( () => {
-			model = new Model();
-			dropdownView = createDropdown( model, locale );
+			dropdownView = createDropdown( locale );
 		} );
 
 		it( 'accepts locale', () => {
@@ -64,13 +61,14 @@ describe( 'utils', () => {
 				tooltip: false
 			};
 
-			model = new Model( modelDef );
-			dropdownView = createDropdown( model, locale );
+			dropdownView = createDropdown( locale );
+
+			dropdownView.set( modelDef );
 
 			assertBinding( dropdownView.buttonView,
 				modelDef,
 				[
-					[ model, { label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true } ]
+					[ dropdownView, { label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true } ]
 				],
 				{ label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true }
 			);
@@ -85,19 +83,19 @@ describe( 'utils', () => {
 				tooltip: false
 			};
 
-			model = new Model( modelDef );
-			dropdownView = createDropdown( model, locale );
+			dropdownView = createDropdown( locale );
+			dropdownView.set( modelDef );
 
 			dropdownView.isOpen = false;
 			expect( dropdownView.buttonView.isOn ).to.be.false;
 
-			model.isOn = true;
+			dropdownView.isOn = true;
 			expect( dropdownView.buttonView.isOn ).to.be.true;
 
 			dropdownView.isOpen = true;
 			expect( dropdownView.buttonView.isOn ).to.be.true;
 
-			model.isOn = false;
+			dropdownView.isOn = false;
 			expect( dropdownView.buttonView.isOn ).to.be.true;
 		} );
 
@@ -109,13 +107,13 @@ describe( 'utils', () => {
 				tooltip: false
 			};
 
-			model = new Model( modelDef );
-			dropdownView = createDropdown( model, locale );
+			dropdownView = createDropdown( locale );
+			dropdownView.set( modelDef );
 
 			assertBinding( dropdownView,
 				{ isEnabled: true },
 				[
-					[ model, { isEnabled: false } ]
+					[ dropdownView, { isEnabled: false } ]
 				],
 				{ isEnabled: false }
 			);
@@ -145,11 +143,8 @@ describe( 'utils', () => {
 	} );
 
 	describe( 'createSplitButtonDropdown()', () => {
-		let model;
-
 		beforeEach( () => {
-			model = new Model();
-			dropdownView = createSplitButtonDropdown( model, locale );
+			dropdownView = createSplitButtonDropdown( locale );
 		} );
 
 		it( 'accepts locale', () => {
@@ -178,13 +173,13 @@ describe( 'utils', () => {
 				tooltip: false
 			};
 
-			model = new Model( modelDef );
-			dropdownView = createDropdown( model, locale );
+			dropdownView = createDropdown( locale );
+			dropdownView.set( modelDef );
 
 			assertBinding( dropdownView.buttonView,
 				modelDef,
 				[
-					[ model, { label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true } ]
+					[ dropdownView, { label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true } ]
 				],
 				{ label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true }
 			);
@@ -199,19 +194,19 @@ describe( 'utils', () => {
 				tooltip: false
 			};
 
-			model = new Model( modelDef );
-			dropdownView = createDropdown( model, locale );
+			dropdownView = createDropdown( locale );
+			dropdownView.set( modelDef );
 
 			dropdownView.isOpen = false;
 			expect( dropdownView.buttonView.isOn ).to.be.false;
 
-			model.isOn = true;
+			dropdownView.isOn = true;
 			expect( dropdownView.buttonView.isOn ).to.be.true;
 
 			dropdownView.isOpen = true;
 			expect( dropdownView.buttonView.isOn ).to.be.true;
 
-			model.isOn = false;
+			dropdownView.isOn = false;
 			expect( dropdownView.buttonView.isOn ).to.be.true;
 		} );
 
@@ -223,13 +218,13 @@ describe( 'utils', () => {
 				tooltip: false
 			};
 
-			model = new Model( modelDef );
-			dropdownView = createDropdown( model, locale );
+			dropdownView = createDropdown( locale );
+			dropdownView.set( modelDef );
 
 			assertBinding( dropdownView,
 				{ isEnabled: true },
 				[
-					[ model, { isEnabled: false } ]
+					[ dropdownView, { isEnabled: false } ]
 				],
 				{ isEnabled: false }
 			);
@@ -249,7 +244,7 @@ describe( 'utils', () => {
 	} );
 
 	describe( 'addToolbarToDropdown()', () => {
-		let model, buttons;
+		let buttons;
 
 		beforeEach( () => {
 			buttons = [ '<svg>foo</svg>', '<svg>bar</svg>' ].map( icon => {
@@ -260,10 +255,10 @@ describe( 'utils', () => {
 				return button;
 			} );
 
-			model = new Model( { isVertical: true } );
+			dropdownView = createDropdown( locale );
+			dropdownView.set( 'isVertical', true );
 
-			dropdownView = createDropdown( model, locale );
-			addToolbarToDropdown( dropdownView, buttons, model );
+			addToolbarToDropdown( dropdownView, buttons );
 
 			dropdownView.render();
 			document.body.appendChild( dropdownView.element );
@@ -302,30 +297,29 @@ describe( 'utils', () => {
 			} );
 
 			it( 'reacts on model#isVertical', () => {
-				model.isVertical = false;
+				dropdownView.isVertical = false;
 				expect( dropdownView.toolbarView.isVertical ).to.be.false;
 
-				model.isVertical = true;
+				dropdownView.isVertical = true;
 				expect( dropdownView.toolbarView.isVertical ).to.be.true;
 			} );
 		} );
 	} );
 
 	describe( 'addListViewToDropdown()', () => {
-		let dropdownView, model, locale, items;
+		let items;
 
 		beforeEach( () => {
-			locale = { t() {} };
 			items = new Collection();
-			model = new Model( {
+
+			dropdownView = createDropdown( locale );
+			dropdownView.set( {
 				isEnabled: true,
 				isOn: false,
 				label: 'foo'
 			} );
 
-			dropdownView = createDropdown( model, locale );
-
-			addListViewToDropdown( dropdownView, items, model, locale );
+			addListViewToDropdown( dropdownView, items );
 
 			dropdownView.render();
 			document.body.appendChild( dropdownView.element );