Ver código fonte

Created DropdownView#isEnabled attribute. Bound DropdownView#element .ck-disabled class to the attribute.

Aleksander Nowodzinski 8 anos atrás
pai
commit
3853af40b1

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

@@ -41,10 +41,11 @@ import DropdownPanelView from './dropdownpanelview';
  */
 export default function createDropdown( model, locale ) {
 	const buttonView = new ButtonView( 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 );
 
-	const panelView = new DropdownPanelView( locale );
-
-	return new DropdownView( locale, buttonView, panelView );
+	return dropdownView;
 }

+ 12 - 1
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -78,6 +78,16 @@ export default class DropdownView extends View {
 		 */
 		this.set( 'isOpen', false );
 
+		/**
+		 * Controls whether the dropdown is enabled, i.e. it can be clicked and execute an action.
+		 *
+		 * See {@link module:ui/button/buttonview~ButtonView#isEnabled}.
+		 *
+		 * @observable
+		 * @member {Boolean} #isEnabled
+		 */
+		this.set( 'isEnabled', true );
+
 		/**
 		 * Tracks information about DOM focus in the dropdown.
 		 *
@@ -103,7 +113,8 @@ export default class DropdownView extends View {
 
 			attributes: {
 				class: [
-					'ck-dropdown'
+					'ck-dropdown',
+					bind.to( 'isEnabled', isEnabled => isEnabled ? '' : 'ck-disabled' )
 				]
 			},
 

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

@@ -25,6 +25,16 @@ describe( 'createDropdown', () => {
 		const model = new Model( modelDef );
 		const view = createDropdown( model );
 
+		assertBinding( view,
+			{ isEnabled: true },
+			[
+				[ model, { isEnabled: false } ]
+			],
+			{ isEnabled: false }
+		);
+
+		model.isEnabled = true;
+
 		assertBinding( view.buttonView,
 			modelDef,
 			[

+ 22 - 6
packages/ckeditor5-ui/tests/dropdown/dropdownview.js

@@ -40,6 +40,10 @@ describe( 'DropdownView', () => {
 			expect( view.isOpen ).to.be.false;
 		} );
 
+		it( 'sets view#isEnabled true', () => {
+			expect( view.isEnabled ).to.be.true;
+		} );
+
 		it( 'creates #focusTracker instance', () => {
 			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
 		} );
@@ -91,13 +95,25 @@ describe( 'DropdownView', () => {
 				} );
 			} );
 
-			describe( 'view#buttonView class to view#isOpen', () => {
-				it( 'is activated', () => {
-					view.isOpen = false;
-					expect( view.buttonView.element.classList.contains( 'ck-on' ) ).to.be.false;
+			describe( 'DOM', () => {
+				describe( 'view#element .ck-disabled class to view#isEnabled', () => {
+					it( 'is activated', () => {
+						view.isEnabled = true;
+						expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.false;
 
-					view.isOpen = true;
-					expect( view.buttonView.element.classList.contains( 'ck-on' ) ).to.be.true;
+						view.isEnabled = false;
+						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;
+					} );
 				} );
 			} );
 		} );