@neovici/cosmoz-bottom-bar - npm Package Compare versions

Comparing version 4.0.6 to 4.1.0

cosmoz-bottom-bar.html.js

@@ -85,2 +85,5 @@ import '@webcomponents/shadycss/entrypoints/apply-shim';
             padding: 0;
+            --paper-menu-button-content: {
+               max-width: 300px !important;
+            };
         }
@@ -96,4 +99,8 @@
             position: relative;
+            cursor: pointer;
             @apply --cosmoz-bottom-bar-menu-item;
         }
+        #dropdown ::slotted(:not(slot):hover) {
+           background: #eee;
+        }
     </style>
@@ -100,0 +107,0 @@

cosmoz-bottom-bar.js

@@ -13,6 +13,4 @@ /* eslint-disable max-lines */
 	BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar',
-	BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu',
+	BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu';
 
-	slotEq = slot => element => element.getAttribute('slot') === slot;
-
 /**
@@ -187,10 +185,10 @@ * `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
 
-		this._hiddenMutationObserver = new MutationObserver(() => {
-			this._overflowWidth = undefined;
-			this._debounceLayoutActions();
-		});
-		this._nodeObserver = new FlattenedNodesObserver(this.$.content, this._boundChildrenUpdated);
-		this._nodeObserverExtra = new FlattenedNodesObserver(this.$.extraSlot, info =>
-			this.set('hasExtraItems', info.addedNodes.length > 0)
-		);
+		const layoutOnRemove = info => info.removedNodes.filter(this._isActionNode) && this._debounceLayoutActions();
+		this._nodeObservers = [
+			new FlattenedNodesObserver(this.$.content, this._boundChildrenUpdated),
+			new FlattenedNodesObserver(this.$.extraSlot, info => this.set('hasExtraItems', info.addedNodes.length > 0)),
+			new FlattenedNodesObserver(this.$.bottomBarToolbar, layoutOnRemove),
+			new FlattenedNodesObserver(this.$.bottomBarMenu, layoutOnRemove)
+		];
+		this._hiddenMutationObserver = new MutationObserver(() => this._debounceLayoutActions());
 		this._resizeObserver.observe(this);
@@ -204,6 +202,3 @@ this._computedBarHeightKicker = 0;
 		this.removeEventListener('iron-closed-overlay', this._boundDropdownClosed);
-
-		this._nodeObserver.disconnect();
-		this._nodeObserverExtra.disconnect();
-		this._hiddenMutationObserver.disconnect();
+		[...this._nodeObservers, this._hiddenMutationObserver].forEach(e => e.disconnect(e));
 		this._layoutDebouncer?.cancel(); /* eslint-disable-line no-unused-expressions */
@@ -213,10 +208,2 @@ this._resizeObserver.unobserve(this);
 
-	_canAddMoreButtonToBar(width, bottomBarElements, menuElements) {
-		const hasSpace = width > this._overflowWidth || this._overflowWidth === undefined,
-			hasPlace = bottomBarElements.length < this.maxToolbarItems,
-			hasCandidates = menuElements.length > 0;
-
-		return hasSpace && hasPlace && hasCandidates;
-	}
-
 	_childrenUpdated(info) {
@@ -227,9 +214,5 @@ const addedNodes = info.addedNodes.filter(this._isActionNode),
 
-		if (addedNodes.length === 0 && removedNodes.length === 0) {
+		if (addedNodes.length === 0 && removedNodes.length === 0 || newNodes.length === 0) {
 			return;
 		}
-		if (newNodes.length === 0) {
-			return;
-		}
-
 		newNodes.forEach(node => {
@@ -243,16 +226,6 @@ this._hiddenMutationObserver.observe(node, {
 
-		const toolbarElements = this._getElements().filter(slotEq(BOTTOM_BAR_TOOLBAR_SLOT)),
-			toolbarCount = this.maxToolbarItems - toolbarElements.length;
-
-		if (toolbarCount > 0) {
-			newNodes
-				.filter(node => !node.hidden).slice(0, toolbarCount)
-				.forEach(node => this._moveElement(node, true));
-		}
-
 		this._debounceLayoutActions();
 	}
 
-	// eslint-disable-next-line no-unused-vars
-	_computeComputedBarHeight(matchElementHeight, barHeight, kicker) {
+	_computeComputedBarHeight(matchElementHeight, barHeight) {
 		if (matchElementHeight) {
@@ -281,8 +254,3 @@ return matchElementHeight.offsetHeight;
 	_fireAction(item) {
-
-		if (!item || !item.dispatchEvent) {
-			return;
-		}
-
-		item.dispatchEvent(new window.CustomEvent('action', {
+		item?.dispatchEvent?.(new window.CustomEvent('action', {
 			bubbles: true,
@@ -321,3 +289,4 @@ cancelable: true,
 			.filter(this._isActionNode)
-			.filter(element => !element.hidden);
+			.filter(element => !element.hidden)
+			.sort((a, b) => a.dataset.index - b.dataset.index);
 	}
@@ -346,52 +315,15 @@ /**
 		const elements = this._getElements(),
-			toolbar = this.$.toolbar;
+			hasActions = elements.length > 0 || this.hasExtraItems;
+		this._setHasActions(hasActions);
 
-		let fits,
-			newToolbarElement;
-
-		this._setHasActions(elements.length > 0 || this.hasExtraItems);
-		if (!this.hasActions) {
+		if (!hasActions) {
 			// No need to render if we don't have any actions
-			return;
+			return this._setHasMenuItems(false);
 		}
 
-		const currentWidth = toolbar.clientWidth;
-		fits = toolbar.scrollWidth <= currentWidth + 1;
-
-		const toolbarElements = elements.filter(slotEq(BOTTOM_BAR_TOOLBAR_SLOT)),
-			menuElements = elements.filter(slotEq(BOTTOM_BAR_MENU_SLOT));
-
+		const toolbarElements = elements.slice(0, this.maxToolbarItems),
+			menuElements = elements.slice(toolbarElements.length);
+		toolbarElements.forEach(el => this._moveElement(el, true));
+		menuElements.forEach(el => this._moveElement(el));
 		this._setHasMenuItems(menuElements.length > 0);
-
-		fits = fits && toolbarElements.length <= this.maxToolbarItems;
-		fits = fits && toolbarElements.every(element => element.scrollWidth <= element.clientWidth);
-
-
-		if (fits) {
-			if (this._canAddMoreButtonToBar(currentWidth, toolbarElements, menuElements)) {
-				newToolbarElement = menuElements[0];
-				this._moveElement(newToolbarElement, true);
-				// (pasleq) If we are moving the focused element from the menu to the toolbar
-				// while the toolbar is open, this will cause an error in iron-control-state
-				// that tries to handle lost of focus on an element that has been removed.
-				if (toolbarElements.length > 0) {
-					toolbarElements[0].focus();
-				} else {
-					newToolbarElement.focus();
-				}
-				this.$.menu.close();
-				this._debounceLayoutActions();
-			}
-			return;
-		}
-
-		this._overflowWidth = currentWidth;
-
-		if (toolbarElements.length < 1) {
-			return;
-		}
-
-		const newMenuElement = toolbarElements[toolbarElements.length - 1];
-		this._moveElement(newMenuElement, false);
-		this._debounceLayoutActions();
 	}
@@ -420,3 +352,2 @@
 		this._computedBarHeightKicker += 1;
-		this._debounceLayoutActions();
 	}
@@ -423,0 +354,0 @@

package.json

 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "4.0.6",
+	"version": "4.1.0",
 	"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

33957

decreased by-4.13%

Lines of code

560

decreased by-7.28%

No dependency changes