Przeglądaj źródła

Fix: Bound dropdown's button #isOn to DropdownView#isOpen and DropdownModel#isOn instead of manipulating the CSS in the dropdown.

Aleksander Nowodzinski 8 lat temu
rodzic
commit
d145c3eaa1

+ 4 - 1
packages/ckeditor5-ui/src/dropdown/createdropdown.js

@@ -44,8 +44,11 @@ export default function createDropdown( model, locale ) {
 	const panelView = new DropdownPanelView( locale );
 	const dropdownView = new DropdownView( locale, buttonView, panelView );
 
-	buttonView.bind( 'label', 'isOn', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( model );
 	dropdownView.bind( 'isEnabled' ).to( model );
+	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 - 1
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -128,7 +128,6 @@ export default class DropdownView extends View {
 			attributes: {
 				class: [
 					'ck-dropdown__button',
-					bind.if( 'isOpen', 'ck-on' )
 				]
 			}
 		} );

+ 45 - 10
packages/ckeditor5-ui/tests/dropdown/createdropdown.js

@@ -13,7 +13,7 @@ import ButtonView from '../../src/button/buttonview';
 const assertBinding = utilsTestUtils.assertBinding;
 
 describe( 'createDropdown', () => {
-	it( 'accepts model', () => {
+	it( 'binds button attributes to the model', () => {
 		const modelDef = {
 			label: 'foo',
 			isOn: false,
@@ -25,22 +25,57 @@ describe( 'createDropdown', () => {
 		const model = new Model( modelDef );
 		const view = createDropdown( model );
 
-		assertBinding( view,
-			{ isEnabled: true },
+		assertBinding( view.buttonView,
+			modelDef,
 			[
-				[ model, { isEnabled: false } ]
+				[ model, { label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true } ]
 			],
-			{ isEnabled: false }
+			{ label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true }
 		);
+	} );
 
-		model.isEnabled = true;
+	it( 'binds button#isOn do dropdown #isOpen and model #isOn', () => {
+		const modelDef = {
+			label: 'foo',
+			isOn: false,
+			isEnabled: true,
+			withText: false,
+			tooltip: false
+		};
 
-		assertBinding( view.buttonView,
-			modelDef,
+		const model = new Model( modelDef );
+		const view = createDropdown( model );
+
+		view.isOpen = false;
+		expect( view.buttonView.isOn ).to.be.false;
+
+		model.isOn = true;
+		expect( view.buttonView.isOn ).to.be.true;
+
+		view.isOpen = true;
+		expect( view.buttonView.isOn ).to.be.true;
+
+		model.isOn = false;
+		expect( view.buttonView.isOn ).to.be.true;
+	} );
+
+	it( 'binds dropdown#isEnabled to the model', () => {
+		const modelDef = {
+			label: 'foo',
+			isEnabled: true,
+			withText: false,
+			tooltip: false
+		};
+
+		const model = new Model( modelDef );
+		const view = createDropdown( model );
+
+		assertBinding( view,
+			{ isEnabled: true },
 			[
-				[ model, { label: 'bar', isOn: true, isEnabled: false, withText: true, tooltip: true } ]
+				[ model, { isEnabled: false } ]
 			],
-			{ label: 'bar', isOn: true, isEnabled: false, withText: true, tooltip: true }
+			{ isEnabled: false }
 		);
 	} );
 

+ 0 - 10
packages/ckeditor5-ui/tests/dropdown/dropdownview.js

@@ -105,16 +105,6 @@ describe( 'DropdownView', () => {
 						expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.true;
 					} );
 				} );
-
-				describe( 'view.buttonView#element .ck-on class to view#isOpen', () => {
-					it( 'is activated', () => {
-						view.isOpen = false;
-						expect( view.buttonView.element.classList.contains( 'ck-on' ) ).to.be.false;
-
-						view.isOpen = true;
-						expect( view.buttonView.element.classList.contains( 'ck-on' ) ).to.be.true;
-					} );
-				} );
 			} );
 		} );
 	} );