Преглед изворни кода

Implemented the ToolbarView#groupedItemsUpdate event to let the world know that the geometry of the toolbar has changed.

Aleksander Nowodzinski пре 5 година
родитељ
комит
25ef08f30f

+ 28 - 0
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -304,6 +304,19 @@ export default class ToolbarView extends View {
 			}
 			}
 		} ).filter( item => item !== undefined ) );
 		} ).filter( item => item !== undefined ) );
 	}
 	}
+
+	/**
+	 * Fired when some toolbar {@link #items} were grouped or ungrouped as a result of some change
+	 * in the toolbar geometry.
+	 *
+	 * **Note**: This event is always fired **once** regardless of the number of items that were be
+	 * grouped or ungrouped at a time.
+	 *
+	 * **Note**: This event is fired only if the items grouping functionality was enabled in
+	 * the first place (see {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull}).
+	 *
+	 * @event groupedItemsUpdate
+	 */
 }
 }
 
 
 /**
 /**
@@ -418,6 +431,14 @@ class DynamicGrouping {
 	 * is added to.
 	 * is added to.
 	 */
 	 */
 	constructor( view ) {
 	constructor( view ) {
+		/**
+		 * A toolbar view this behavior belongs to.
+		 *
+		 * @readonly
+		 * @member {module:ui/toolbar~ToolbarView}
+		 */
+		this.view = view;
+
 		/**
 		/**
 		 * A collection of toolbar children.
 		 * A collection of toolbar children.
 		 *
 		 *
@@ -644,6 +665,9 @@ class DynamicGrouping {
 			return;
 			return;
 		}
 		}
 
 
+		// Remember how many items were initially grouped so at the it is possible to figure out if the number
+		// of grouped items has changed. If the number has changed, geometry of the toolbar has also changed.
+		const initialGroupedItemsCount = this.groupedItems.length;
 		let wereItemsGrouped;
 		let wereItemsGrouped;
 
 
 		// Group #items as long as some wrap to the next row. This will happen, for instance,
 		// Group #items as long as some wrap to the next row. This will happen, for instance,
@@ -672,6 +696,10 @@ class DynamicGrouping {
 				this._groupLastItem();
 				this._groupLastItem();
 			}
 			}
 		}
 		}
+
+		if ( this.groupedItems.length !== initialGroupedItemsCount ) {
+			this.view.fire( 'groupedItemsUpdate' );
+		}
 	}
 	}
 
 
 	/**
 	/**

+ 41 - 0
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -828,6 +828,47 @@ describe( 'ToolbarView', () => {
 				expect( ungroupedItems ).to.have.length( 5 );
 				expect( ungroupedItems ).to.have.length( 5 );
 				expect( groupedItems ).to.have.length( 0 );
 				expect( groupedItems ).to.have.length( 0 );
 			} );
 			} );
+
+			it( 'should fire the "groupedItemsUpdate" event on the toolbar when some item is grouped or ungrouped', () => {
+				const updateSpy = sinon.spy();
+
+				view.on( 'groupedItemsUpdate', updateSpy );
+
+				view.element.style.width = '200px';
+
+				view.items.add( focusable() );
+				view.items.add( focusable() );
+				view.items.add( focusable() );
+				view.items.add( focusable() );
+				view.items.add( focusable() );
+
+				resizeCallback( [ {
+					target: view.element,
+					contentRect: new Rect( view.element )
+				} ] );
+
+				sinon.assert.calledOnce( updateSpy );
+
+				// This 10px is not enough to ungroup an item.
+				view.element.style.width = '210px';
+
+				resizeCallback( [ {
+					target: view.element,
+					contentRect: new Rect( view.element )
+				} ] );
+
+				sinon.assert.calledOnce( updateSpy );
+
+				// But this is not enough to ungroup some items.
+				view.element.style.width = '300px';
+
+				resizeCallback( [ {
+					target: view.element,
+					contentRect: new Rect( view.element )
+				} ] );
+
+				sinon.assert.calledTwice( updateSpy );
+			} );
 		} );
 		} );
 
 
 		describe( 'destroy()', () => {
 		describe( 'destroy()', () => {