@neovici/cosmoz-bottom-bar 7.4.0 → 7.5.1

package/cosmoz-bottom-bar.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import {
 	PolymerElement,
 	html as polymerHtml,
@@ -7,6 +6,8 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nod
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { timeOut } from '@polymer/polymer/lib/utils/async';
 import { html } from 'lit-html';
+import { hauntedPolymer } from '@neovici/cosmoz-utils';
+import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 import template from './cosmoz-bottom-bar.html.js';
 
@@ -14,6 +15,31 @@ const BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar',
 	BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu',
 	rendered = Symbol('rendered');
 
+export const openMenu = Symbol('openMenu');
+
+const openActionsMenu = (host) => {
+		const dropdown = host.$.dropdown;
+
+		if (dropdown.hasAttribute('hidden')) return;
+
+		//TODO: Clean up when open function is implemented for cosmoz-dropdown-menu
+		dropdown.shadowRoot
+			.querySelector('cosmoz-dropdown')
+			.shadowRoot.getElementById('dropdownButton')
+			.click();
+	},
+	useBottomBar = (host) => {
+		useActivity(
+			{
+				activity: openMenu,
+				callback: () => openActionsMenu(host),
+				check: () => host.active && !host.hasAttribute('hide-actions'),
+				element: () => host.$.dropdown,
+			},
+			[host.active],
+		);
+	};
+
 /**
  * `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
  * can be used for actions.
@@ -34,13 +60,11 @@ const BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar',
  * @demo demo/bottom-bar.html Basic Demo
  * @demo demo/bottom-bar-match-parent.html match parent Demo
  */
-class CosmozBottomBar extends PolymerElement {
+class CosmozBottomBar extends hauntedPolymer(useBottomBar)(PolymerElement) {
 	static get template() {
-		// eslint-disable-line max-lines-per-function
 		return template;
 	}
 
-	// eslint-disable-next-line max-lines-per-function
 	static get properties() {
 		return {
 			/**
@@ -214,7 +238,7 @@ class CosmozBottomBar extends PolymerElement {
 		[...this._nodeObservers, this._hiddenMutationObserver].forEach((e) =>
 			e.disconnect(e),
 		);
-		this._layoutDebouncer?.cancel(); /* eslint-disable-line no-unused-expressions */
+		this._layoutDebouncer?.cancel();
 		this._resizeObserver.unobserve(this);
 	}
 
@@ -309,6 +333,18 @@ class CosmozBottomBar extends PolymerElement {
 			...elements.filter((e) => e !== topPriorityAction),
 		];
 	}
+
+	_distribute(hostWidth) {
+		const elements = this._getElements();
+
+		const tooNarrow = hostWidth <= 480,
+			toolbarElements = elements.slice(0, tooNarrow ? 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);
+	}
+
 	/**
 	 * Layout the actions available as buttons or menu items
 	 *
@@ -330,7 +366,6 @@ class CosmozBottomBar extends PolymerElement {
 	 * @returns {void}
 	 */
 	_layoutActions() {
-		// eslint-disable-line max-statements
 		const elements = this._getElements(),
 			hasActions = elements.length > 0 || this.hasExtraItems;
 		this._setHasActions(hasActions);
@@ -340,11 +375,7 @@ class CosmozBottomBar extends PolymerElement {
 			return this._setHasMenuItems(false);
 		}
 
-		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);
+		this._distribute(this.getBoundingClientRect().width);
 	}
 
 	_moveElement(element, toToolbar) {
@@ -368,6 +399,7 @@ class CosmozBottomBar extends PolymerElement {
 			this._matchHeightElement,
 			this.barHeight,
 		);
+		this._distribute(entry.contentRect?.width);
 	}
 
 	_showHideBottomBar(visible) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "7.4.0",
+	"version": "7.5.1",
 	"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
 	"keywords": [
 		"polymer",
@@ -61,7 +61,7 @@
 	"dependencies": {
 		"@neovici/cosmoz-collapse": "^1.5.0",
 		"@neovici/cosmoz-dropdown": "^4.0.0",
-		"@neovici/cosmoz-utils": "^6.8.1",
+		"@neovici/cosmoz-utils": "^6.13.1",
 		"@pionjs/pion": "^2.5.2",
 		"@polymer/polymer": "^3.3.0",
 		"lit-html": "^2.0.0 || ^3.0.0"