浏览代码

Changed: Remove `dropdown.buttonView` bindings to `dropdown`.

Maciej Gołaszewski 7 年之前
父节点
当前提交
61665178c5

+ 1 - 1
packages/ckeditor5-ui/docs/framework/guides/dropdowns.md

@@ -47,7 +47,7 @@ buttons.push( componentFactory.create( 'someExistingButton' ) );
 
 const dropdownView = createDropdown( locale, SplitButtonView );
 
-dropdownView.set( {
+dropdownView.buttonView.set( {
 	icon: 'some SVG',
 	tooltip: 'My dropdown'
 } );

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

@@ -131,70 +131,6 @@ export default class DropdownView extends View {
 		} );
 
 		/**
-		 * The label of the dropdown.
-		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
-		 *
-		 * Also see {@link module:ui/button/buttonview~ButtonView#label}.
-		 *
-		 * @observable
-		 * @member {String} #label
-		 */
-
-		/**
-		 * Controls whether the dropdown is enabled, i.e. it opens the panel when clicked.
-		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
-		 *
-		 * Also see {@link module:ui/button/buttonview~ButtonView#isEnabled}.
-		 *
-		 * @observable
-		 * @member {Boolean} #isEnabled
-		 */
-
-		/**
-		 * Controls whether the dropdown is "on". It makes sense when a feature it represents
-		 * is currently active.
-		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
-		 *
-		 * Also see {@link module:ui/button/buttonview~ButtonView#isOn}.
-		 *
-		 * @observable
-		 * @member {Boolean} #isOn
-		 */
-
-		/**
-		 * (Optional) Controls whether the label of the dropdown is visible.
-		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
-		 *
-		 * Also see {@link module:ui/button/buttonview~ButtonView#withText}.
-		 *
-		 * @observable
-		 * @member {Boolean} #withText
-		 */
-
-		/**
-		 * (Optional) Controls the icon of the dropdown.
-		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
-		 *
-		 * Also see {@link module:ui/button/buttonview~ButtonView#withText}.
-		 *
-		 * @observable
-		 * @member {Boolean} #icon
-		 */
-
-		/**
-		 * Controls dropdown's toolbar direction.
-		 * **Note**: Only supported when dropdown has list view added using {@link module:ui/dropdown/utils~addToolbarToDropdown}.
-		 *
-		 * @observable
-		 * @member {Boolean} #isVertical=false
-		 */
-
-		/**
 		 * A child {@link module:ui/list/listview~ListView list view} of the dropdown located
 		 * in its {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel}.
 		 *

+ 7 - 7
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -69,11 +69,13 @@ export function createDropdown( locale, ButtonClass = DropdownButtonView ) {
 	const panelView = new DropdownPanelView( locale );
 	const dropdownView = new DropdownView( locale, buttonView, panelView );
 
-	buttonView.bind( 'label', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( dropdownView );
+	buttonView.bind( 'isEnabled' ).to( dropdownView );
 
-	buttonView.bind( 'isOn' ).to( dropdownView, 'isOn', dropdownView, 'isOpen', ( isOn, isOpen ) => {
-		return isOn || isOpen;
-	} );
+	if ( buttonView instanceof DropdownButtonView ) {
+		buttonView.bind( 'isOn' ).to( dropdownView, 'isOpen' );
+	} else {
+		buttonView.arrowView.bind( 'isOn' ).to( dropdownView, 'isOpen' );
+	}
 
 	addDefaultBehavior( dropdownView );
 
@@ -93,7 +95,7 @@ export function createDropdown( locale, ButtonClass = DropdownButtonView ) {
  *
  *		addToolbarToDropdown( dropdown, buttons );
  *
- *		dropdown.isVertical = true;
+ *		dropdown.toolbarView.isVertical = true;
  *
  *		// Will render a vertical button dropdown labeled "A button dropdown"
  *		// with a button group in the panel containing two buttons.
@@ -108,8 +110,6 @@ export function createDropdown( locale, ButtonClass = DropdownButtonView ) {
 export function addToolbarToDropdown( dropdownView, buttons ) {
 	const toolbarView = dropdownView.toolbarView = new ToolbarView();
 
-	toolbarView.bind( 'isVertical' ).to( dropdownView, 'isVertical' );
-
 	dropdownView.extendTemplate( {
 		attributes: {
 			class: [ 'ck-toolbar-dropdown' ]

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

@@ -28,7 +28,7 @@ const ui = testUtils.createTestUIView( {
 function testEmpty() {
 	const dropdownView = createDropdown( {} );
 
-	dropdownView.set( {
+	dropdownView.buttonView.set( {
 		label: 'Dropdown',
 		isEnabled: true,
 		isOn: false,
@@ -52,7 +52,7 @@ function testList() {
 
 	const dropdownView = createDropdown( {} );
 
-	dropdownView.set( {
+	dropdownView.buttonView.set( {
 		label: 'ListDropdown',
 		isEnabled: true,
 		isOn: false,
@@ -95,7 +95,7 @@ function testSharedModel() {
 function testLongLabel() {
 	const dropdownView = createDropdown( {} );
 
-	dropdownView.set( {
+	dropdownView.buttonView.set( {
 		label: 'Dropdown with a very long label',
 		isEnabled: true,
 		isOn: false,

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

@@ -32,4 +32,4 @@ listDropdownCollection.add(
 ## Toolbar Dropdown
 1. Play with `buttons[ n ].isOn` to control buttonDropdown active icon.
 2. Play with `buttons[ n ].isEnabled` to control buttonDropdown disabled state (all buttons must be set to `false`).
-3. Play with `toolbarDropdownModel.isVertical` to control buttonDropdown vertical/horizontal alignment.
+3. Play with `toolbarDropdown.toolbarView.isVertical` to control buttonDropdown vertical/horizontal alignment.

+ 7 - 60
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -58,71 +58,27 @@ describe( 'utils', () => {
 			expect( dropdownView.buttonView ).to.be.instanceOf( SplitButtonView );
 		} );
 
-		it( 'binds button attributes to the model', () => {
-			const modelDef = {
-				label: 'foo',
-				isOn: false,
-				isEnabled: true,
-				withText: false,
-				tooltip: false
-			};
-
+		it( 'binds #isEnabled to the buttonView', () => {
 			dropdownView = createDropdown( locale );
 
-			dropdownView.set( modelDef );
-
 			assertBinding( dropdownView.buttonView,
-				modelDef,
+				{ isEnabled: true },
 				[
-					[ dropdownView, { label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true } ]
+					[ dropdownView, { isEnabled: false } ]
 				],
-				{ label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true }
+				{ isEnabled: false }
 			);
 		} );
 
-		it( 'binds button#isOn do dropdown #isOpen and model #isOn', () => {
-			const modelDef = {
-				label: 'foo',
-				isOn: false,
-				isEnabled: true,
-				withText: false,
-				tooltip: false
-			};
-
+		it( 'binds button#isOn to dropdown #isOpen', () => {
 			dropdownView = createDropdown( locale );
-			dropdownView.set( modelDef );
+			dropdownView.buttonView.isEnabled = true;
 
 			dropdownView.isOpen = false;
 			expect( dropdownView.buttonView.isOn ).to.be.false;
 
-			dropdownView.isOn = true;
-			expect( dropdownView.buttonView.isOn ).to.be.true;
-
 			dropdownView.isOpen = true;
 			expect( dropdownView.buttonView.isOn ).to.be.true;
-
-			dropdownView.isOn = false;
-			expect( dropdownView.buttonView.isOn ).to.be.true;
-		} );
-
-		it( 'binds dropdown#isEnabled to the model', () => {
-			const modelDef = {
-				label: 'foo',
-				isEnabled: true,
-				withText: false,
-				tooltip: false
-			};
-
-			dropdownView = createDropdown( locale );
-			dropdownView.set( modelDef );
-
-			assertBinding( dropdownView,
-				{ isEnabled: true },
-				[
-					[ dropdownView, { isEnabled: false } ]
-				],
-				{ isEnabled: false }
-			);
 		} );
 
 		describe( '#buttonView', () => {
@@ -279,7 +235,6 @@ describe( 'utils', () => {
 			} );
 
 			dropdownView = createDropdown( locale );
-			dropdownView.set( 'isVertical', true );
 
 			addToolbarToDropdown( dropdownView, buttons );
 
@@ -318,14 +273,6 @@ describe( 'utils', () => {
 
 				dropdownView.toolbarView.items.get( 0 ).fire( 'execute' );
 			} );
-
-			it( 'reacts on model#isVertical', () => {
-				dropdownView.isVertical = false;
-				expect( dropdownView.toolbarView.isVertical ).to.be.false;
-
-				dropdownView.isVertical = true;
-				expect( dropdownView.toolbarView.isVertical ).to.be.true;
-			} );
 		} );
 	} );
 
@@ -336,7 +283,7 @@ describe( 'utils', () => {
 			items = new Collection();
 
 			dropdownView = createDropdown( locale );
-			dropdownView.set( {
+			dropdownView.buttonView.set( {
 				isEnabled: true,
 				isOn: false,
 				label: 'foo'