@neovici/cosmoz-bottom-bar 4.0.6 → 4.3.0

package/cosmoz-bottom-bar-view.js

@@ -1,12 +1,8 @@
 import { component } from 'haunted';
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { ref } from '@neovici/cosmoz-utils/lib/directives/ref';
-import { useBottomBarView } from './lib/use-bottom-bar-view';
 import { bottomBarSlots } from './cosmoz-bottom-bar';
 
-
-
 /**
  * `cosmoz-bottom-bar-view` contains a content section and a bottom bar with actions.
  *
@@ -18,49 +14,41 @@ import { bottomBarSlots } from './cosmoz-bottom-bar';
 */
 
 const CosmozBottomBarView = ({
-	barHeight,
-	...pass
-}) => { /*eslint-disable no-return-assign */
-	const {
-		active,
-		info
-	} = useBottomBarView(pass);
-
-	return html`
-			<style>
-				:host {
-					position: relative;
-					display: flex;
-					flex-direction: column;
-					flex: var(--cosmoz-bottom-bar-view-flex, auto);
-					overflow: hidden;
-				}
-
-				#content {
-					display: flex;
-					flex-direction: column;
-					flex: auto;
-					-webkit-overflow-scrolling: touch;
-					overflow-y: auto;
-				}
-
-				#bar {
-					background-color: var(--cosmoz-bottom-bar-view-bar-color, rgba(230, 230, 230, 0.8));
-					box-shadow: var(--cosmoz-bottom-bar-view-bar-shadow, none);
-					position: static;
-					flex: none;
-				}
-			</style>
-			<div id="content" part="content">
-				${ ref(info) }
-				<slot name="content"></slot>
-				<slot name="scroller-content"></slot>
-			</div>
-			<cosmoz-bottom-bar id="bar" ?active=${ active } bar-height=${ ifDefined(barHeight) } part="bar">
-				<slot></slot>
-				${ bottomBarSlots }
-			</cosmoz-bottom-bar>
-		`;
-};
+	active = true,
+	barHeight
+}) => html`
+	<style>
+		:host {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			flex: var(--cosmoz-bottom-bar-view-flex, auto);
+			overflow: hidden;
+		}
+
+		#content {
+			display: flex;
+			flex-direction: column;
+			flex: auto;
+			-webkit-overflow-scrolling: touch;
+			overflow-y: auto;
+		}
+
+		#bar {
+			background-color: var(--cosmoz-bottom-bar-view-bar-color, rgba(230, 230, 230, 0.8));
+			box-shadow: var(--cosmoz-bottom-bar-view-bar-shadow, none);
+			position: static;
+			flex: none;
+		}
+	</style>
+	<div id="content" part="content">
+		<slot name="content"></slot>
+		<slot name="scroller-content"></slot>
+	</div>
+	<cosmoz-bottom-bar id="bar" ?active=${ active } bar-height=${ ifDefined(barHeight) } part="bar">
+		<slot></slot>
+		${ bottomBarSlots }
+	</cosmoz-bottom-bar>
+`;
 customElements.define('cosmoz-bottom-bar-view', component(CosmozBottomBarView));
 

package/cosmoz-bottom-bar.html.js

@@ -1,10 +1,4 @@
-import '@webcomponents/shadycss/entrypoints/apply-shim';
-
-import '@polymer/iron-icons';
-import '@polymer/paper-icon-button';
-import '@polymer/paper-menu-button';
-import '@polymer/paper-listbox';
-import '@polymer/iron-selector/iron-selector';
+import '@neovici/cosmoz-dropdown';
 
 import { html } from '@polymer/polymer/lib/utils/html-tag';
 export default html`
@@ -19,49 +13,35 @@ export default html`
             background-color: inherit;
             transition: max-height 0.3s ease;
             z-index: 10;
+						--cosmoz-dropdown-spacing: 0 0 5px 0;
         }
 
         [hidden] {
             display: none !important;
         }
 
-        #bar, #info, #toolbar, #extraToolbarSlot, #menu, #dropdown ::slotted(:not(slot)) {
-            display: flex;
-            align-items: center;
-        }
 
         #bar {
             padding: 0 3%;
+            display: flex;
+            align-items: center;
         }
 
         #info {
             min-width: 5px;
             padding-right: 3%;
+            margin-right: auto;
+            white-space: nowrap;
         }
 
-        #dropdownButton {
-            color: var(--cosmoz-bottom-bar-menubutton-color, var(--light-primary-color));
-            background-color: var(--cosmoz-bottom-bar-menubutton-background-color, var(--dark-primary-color));
-            @apply --cosmoz-bottom-bar-menubutton;
-        }
-
-        #extraToolbarSlot ::slotted(:not(slot)) {
-            @apply --cosmoz-bottom-bar-extra-toolbar-item;
-        }
-
-        #flex {
-            flex: 1 0.000000000001px;
-        }
-
-        #toolbar, #extraToolbarSlot {
-            overflow: hidden;
-        }
-        #info,
-        #menu > div {
-            white-space: nowrap;
+       ::slotted([disabled]) {
+            @apply --cosmoz-bottom-bar-toolbar-item-disabled;
         }
+				::slotted([hidden]) {
+          display: none !important;
+				}
 
-        #toolbar ::slotted(:not(slot)) {
+        #bottomBarToolbar::slotted(:not(slot)) {
             margin: 0 0.29em;
             min-width: 40px;
             min-height: 40px;
@@ -70,54 +50,39 @@ export default html`
             @apply --cosmoz-bottom-bar-toolbar-item;
         }
 
-        #toolbar ::slotted([disabled]),
-        #dropdown ::slotted([disabled]) {
-            @apply --cosmoz-bottom-bar-toolbar-item-disabled;
-        }
-
-        #toolbar ::slotted([hidden]),
-        #dropdown ::slotted([hidden]) {
-            display: none !important;
-        }
-
-        #dropdown {
-            padding: 0;
-        }
-
-        /** Seems like a shady dom scoping/slotting issue */
-        #listboxSizer {
-            max-height: 0;
-            padding: 0 !important;
-        }
-
-        #dropdown ::slotted(:not(slot)) {
+				#dropdown::part(anchor) {
+  				padding: 12px 8px;
+				}
+				#dropdown::part(dropdown) {
+					max-width: 300px;
+				}
+        #bottomBarMenu::slotted(:not(slot)) {
             position: relative;
+            cursor: pointer;
             @apply --cosmoz-bottom-bar-menu-item;
         }
+        #bottomBarMenu::slotted(:not(slot):hover) {
+           background: #eee;
+        }
+
     </style>
 
-    <div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]">
+    <div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]" part="bar">
         <div id="info">
-            <slot name="info"></slot>
+					<slot name="info"></slot>
+        </div>
+        <slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
+        <cosmoz-dropdown id="dropdown" hidden="[[ !hasMenuItems ]]" placement="[[ topPlacement ]]">
+					<svg slot="button" width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z" fill="white"/>
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z" fill="white"/>
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z" fill="white"/>
+					</svg>
+          <slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
+        </cosmoz-dropdown>
+        <div id="extraToolbarSlot">
+          <slot name="extra" id="extraSlot"></slot>
         </div>
-        <div id="flex"></div>
-        <iron-selector id="toolbar" selected-class="[[ selectedClass ]]" on-iron-select="_onActionSelected">
-            <slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
-        </iron-selector>
-        <paper-menu-button id="menu" hidden$="[[ !hasMenuItems ]]" no-animations
-            vertical-offset="[[ barHeight ]]" vertical-align="bottom" horizontal-align="right">
-
-            <paper-icon-button id="dropdownButton" class="dropdown-trigger" slot="dropdown-trigger" icon="menu" toggles raised>
-            </paper-icon-button>
-            <paper-listbox id="dropdown" class="dropdown-content" slot="dropdown-content"
-                selected-class="[[ selectedClass ]]" on-iron-select="_onActionSelected">
-                    <span id="listboxSizer"></span>
-                    <slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
-            </paper-listbox>
-        </paper-menu-button>
-        <iron-selector id="extraToolbarSlot" on-iron-select="_onActionSelected">
-            <slot name="extra" id="extraSlot"></slot>
-        </iron-selector>
     </div>
 
     <div hidden style="display:none">

package/cosmoz-bottom-bar.js

@@ -7,12 +7,11 @@ import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { timeOut } from '@polymer/polymer/lib/utils/async';
 import template from './cosmoz-bottom-bar.html.js';
 import { html } from 'haunted';
+import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 
 const
 	BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar',
-	BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu',
-
-	slotEq = slot => element => element.getAttribute('slot') === slot;
+	BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu';
 
 /**
  * `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
@@ -157,6 +156,10 @@ class CosmozBottomBar extends PolymerElement {
 			_matchHeightElement: {
 				type: Object,
 				computed: '_getHeightMatchingElement(matchParent)'
+			},
+
+			topPlacement: {
+				value: ['top-right', ...defaultPlacement]
 			}
 		};
 	}
@@ -169,7 +172,6 @@ class CosmozBottomBar extends PolymerElement {
 
 	constructor() {
 		super();
-		this._boundDropdownClosed = this._dropdownClosed.bind(this);
 		this._boundChildrenUpdated = this._childrenUpdated.bind(this);
 		this._boundLayoutActions = this._layoutActions.bind(this);
 		this._resizeObserver = new ResizeObserver((...args) => {
@@ -181,16 +183,15 @@ class CosmozBottomBar extends PolymerElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this.addEventListener('iron-closed-overlay', this._boundDropdownClosed);
 
-		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);
 		this._computedBarHeightKicker = 0;
 	}
@@ -198,35 +199,19 @@ class CosmozBottomBar extends PolymerElement {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
-		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 */
 		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) {
 		const addedNodes = info.addedNodes.filter(this._isActionNode),
 			removedNodes = info.removedNodes.filter(this._isActionNode),
 			newNodes = addedNodes.filter(node => !removedNodes.includes(node));
 
-		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 => {
 			this._hiddenMutationObserver.observe(node, {
 				attributes: true,
@@ -235,20 +220,10 @@ class CosmozBottomBar extends PolymerElement {
 			this._moveElement(node, false);
 		});
 
-		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) {
 			return matchElementHeight.offsetHeight;
 		}
@@ -267,17 +242,8 @@ class CosmozBottomBar extends PolymerElement {
 		);
 	}
 
-	_dropdownClosed() {
-		this.$.dropdownButton.active = false;
-	}
-
 	_fireAction(item) {
-
-		if (!item || !item.dispatchEvent) {
-			return;
-		}
-
-		item.dispatchEvent(new window.CustomEvent('action', {
+		item?.dispatchEvent?.(new window.CustomEvent('action', {
 			bubbles: true,
 			cancelable: true,
 			detail: {
@@ -311,7 +277,8 @@ class CosmozBottomBar extends PolymerElement {
 	_getElements() {
 		return FlattenedNodesObserver.getFlattenedNodes(this)
 			.filter(this._isActionNode)
-			.filter(element => !element.hidden);
+			.filter(element => !element.hidden)
+			.sort((a, b) => a.dataset.index - b.dataset.index);
 	}
 	/**
 	 * Layout the actions available as buttons or menu items
@@ -335,56 +302,19 @@ class CosmozBottomBar extends PolymerElement {
 	 */
 	_layoutActions() { // eslint-disable-line max-statements
 		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();
 	}
 
 	_moveElement(element, toToolbar) {
@@ -408,7 +338,6 @@ class CosmozBottomBar extends PolymerElement {
 			return;
 		}
 		this._computedBarHeightKicker += 1;
-		this._debounceLayoutActions();
 	}
 
 	_showHideBottomBar(visible) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "4.0.6",
+	"version": "4.3.0",
 	"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",
@@ -51,35 +51,28 @@
 		]
 	},
 	"dependencies": {
-		"@neovici/cosmoz-utils": "^3.12.0",
-		"@neovici/cosmoz-viewinfo": "^3.1.3",
-		"@polymer/iron-icons": "^3.0.1",
-		"@polymer/iron-selector": "^3.0.0",
-		"@polymer/paper-icon-button": "^3.0.0",
-		"@polymer/paper-listbox": "^3.0.0",
-		"@polymer/paper-menu-button": "^3.0.0",
+		"@neovici/cosmoz-dropdown": "^1.1.0",
 		"@polymer/polymer": "^3.3.1",
-		"@webcomponents/shadycss": "^1.10.2",
 		"haunted": "^4.8.0",
 		"lit-html": "^1.4.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^12.0.0",
-		"@commitlint/config-conventional": "^12.0.0",
+		"@commitlint/cli": "^15.0.0",
+		"@commitlint/config-conventional": "^15.0.0",
 		"@neovici/eslint-config": "^1.3.0",
 		"@open-wc/testing": "^2.5.0",
 		"@polymer/iron-icon": "^3.0.1",
+		"@polymer/iron-icons": "^3.0.1",
 		"@polymer/paper-button": "^3.0.0",
 		"@polymer/paper-toggle-button": "^3.0.0",
-		"@semantic-release/changelog": "^5.0.0",
-		"@semantic-release/git": "^9.0.0",
-		"@web/dev-server": "^0.1.17",
+		"@semantic-release/changelog": "^6.0.0",
+		"@semantic-release/git": "^10.0.0",
+		"@web/dev-server": "^0.1.0",
 		"@web/test-runner": "^0.13.0",
 		"@web/test-runner-selenium": "^0.5.0",
 		"@webcomponents/webcomponentsjs": "^2.5.0",
-		"eslint": "^7.0.0",
-		"husky": "^6.0.0",
-		"semantic-release": "^17.4.0",
-		"sinon": "^11.0.0"
+		"husky": "^7.0.0",
+		"semantic-release": "^18.0.0",
+		"sinon": "^12.0.0"
 	}
 }

package/lib/use-bottom-bar-view.js

@@ -1,62 +0,0 @@
-import {
-	useEffect,
-	useState,
-	useMemo
-} from 'haunted';
-import { useViewInfo } from '@neovici/cosmoz-viewinfo';
-
-const useBottomBarView = ({
-	active: initialActive = true,
-	fixed
-}) => { /* eslint-disable no-return-assign */
-	const { desktop } = useViewInfo(),
-		isFixed = fixed ?? desktop,
-		[active, setActive] = useState(initialActive),
-		info = useMemo(() => ({}), []);
-
-	useEffect(() => {
-		if (isFixed) {
-			return;
-		}
-		const
-			{ current: el } = info,
-			opts = { passive: true },
-			onScroll = () => {
-				if (info.raf) {
-					cancelAnimationFrame(info.raf);
-				}
-				info.raf = requestAnimationFrame(() => info.raf = requestAnimationFrame(() => {
-					const { scrollTop } = el;
-					setActive(
-						scrollTop < 2 // at top
-						|| info.scrollTop > scrollTop // scrolling up
-						|| el.scrollHeight - scrollTop - el.offsetHeight < 3 // at bottom
-					);
-					Object.assign(info, {
-						scrollTop,
-						raf: undefined
-					});
-				}));
-			};
-		el.addEventListener('scroll', onScroll, opts);
-		onScroll();
-		return () => {
-			el.removeEventListener('scroll', onScroll, opts);
-			if (info.raf) {
-				cancelAnimationFrame(info.raf);
-				info.raf = undefined;
-			}
-		};
-	}, [isFixed, info]);
-
-	useEffect(() => {
-		setActive(initialActive);
-	}, [initialActive, setActive]);
-
-	return {
-		active,
-		info
-	};
-};
-
-export { useBottomBarView };