Procházet zdrojové kódy

Code refactoring: Improved docs, re-organized some methods, fixed minor code issues.

Aleksander Nowodzinski před 6 roky
rodič
revize
a582efb15f

+ 36 - 36
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -606,7 +606,7 @@ class DynamicGrouping {
 		// If none were grouped now but there were some items already grouped before,
 		// then, what the hell, maybe let's see if some of them can be ungrouped. This happens when,
 		// for instance, the toolbar is stretching and there's more space in it than before.
-		if ( !wereItemsGrouped && this.groupedItems && this.groupedItems.length ) {
+		if ( !wereItemsGrouped && this.groupedItems.length ) {
 			// Ungroup items as long as none are overflowing or there are none to ungroup left.
 			while ( this.groupedItems.length && !this._areItemsOverflowing ) {
 				this._ungroupFirstItem();
@@ -622,35 +622,6 @@ class DynamicGrouping {
 		}
 	}
 
-	/**
-	 * Enables the functionality that prevents {@link #ungroupedItems} from overflowing
-	 * (wrapping to the next row) when there is little space available. Instead, the toolbar items are moved to the
-	 * {@link #groupedItems} collection and displayed in a dropdown at the end of the space, which has its own nested toolbar.
-	 *
-	 * When called, the toolbar will automatically analyze the location of its {@link #ungroupedItems} and "group"
-	 * them in the dropdown if necessary. It will also observe the browser window for size changes in
-	 * the future and respond to them by grouping more items or reverting already grouped back, depending
-	 * on the visual space available.
-	 *
-	 * @private
-	 */
-	_enableGroupingOnResize() {
-		let previousWidth;
-
-		// TODO: Consider debounce.
-		this.resizeObserver = getResizeObserver( ( [ entry ] ) => {
-			if ( !previousWidth || previousWidth !== entry.contentRect.width ) {
-				this._updateGrouping();
-
-				previousWidth = entry.contentRect.width;
-			}
-		} );
-
-		this.resizeObserver.observe( this.viewElement );
-
-		this._updateGrouping();
-	}
-
 	/**
 	 * Returns `true` when {@link module:ui/toolbar/toolbarview~ToolbarView#element} children visually overflow,
 	 * for instance if the toolbar is narrower than its members. `false` otherwise.
@@ -687,10 +658,39 @@ class DynamicGrouping {
 	}
 
 	/**
-	 * The opposite of {@link #_ungroupFirstItem}.
+	 * Enables the functionality that prevents {@link #ungroupedItems} from overflowing (wrapping to the next row)
+	 * upon resize when there is little space available. Instead, the toolbar items are moved to the
+	 * {@link #groupedItems} collection and displayed in a dropdown at the end of the row (which has its own nested toolbar).
+	 *
+	 * When called, the toolbar will automatically analyze the location of its {@link #ungroupedItems} and "group"
+	 * them in the dropdown if necessary. It will also observe the browser window for size changes in
+	 * the future and respond to them by grouping more items or reverting already grouped back, depending
+	 * on the visual space available.
 	 *
-	 * When called it will remove the last item from {@link #ungroupedItems} and move it to the
-	 * {@link #groupedItems} collection.
+	 * @private
+	 */
+	_enableGroupingOnResize() {
+		let previousWidth;
+
+		// TODO: Consider debounce.
+		this.resizeObserver = getResizeObserver( ( [ entry ] ) => {
+			if ( !previousWidth || previousWidth !== entry.contentRect.width ) {
+				this._updateGrouping();
+
+				previousWidth = entry.contentRect.width;
+			}
+		} );
+
+		this.resizeObserver.observe( this.viewElement );
+
+		this._updateGrouping();
+	}
+
+	/**
+	 * When called, it will remove the last item from {@link #ungroupedItems} and move it back
+	 * to the {@link #groupedItems} collection.
+	 *
+	 * The opposite of {@link #_ungroupFirstItem}.
 	 *
 	 * @private
 	 */
@@ -705,11 +705,11 @@ class DynamicGrouping {
 	}
 
 	/**
-	 * The opposite of {@link #_groupLastItem}.
-	 *
-	 * Moves the very first item from the toolbar belonging to {@link #groupedItems} back
+	 * Moves the very first item belonging to {@link #groupedItems} back
 	 * to the {@link #ungroupedItems} collection.
 	 *
+	 * The opposite of {@link #_groupLastItem}.
+	 *
 	 * @private
 	 */
 	_ungroupFirstItem() {

+ 4 - 3
packages/ckeditor5-ui/theme/components/toolbar/toolbar.css

@@ -24,9 +24,10 @@
 		display: inline-block;
 
 		/*
-			* A leading or trailing separator makes no sense (separates nothing from one side).
-			* Better hide it for better look.
-			*/
+		 * A leading or trailing separator makes no sense (separates from nothing on one side).
+		 * For instance, it can happen when toolbar items (also separators) are getting grouped and one by and
+		 * moved to another toolbar in the drop–down.
+		 */
 		&:first-child,
 		&:last-child {
 			display: none;