@neovici/cosmoz-bottom-bar 4.0.5 → 4.2.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

@@ -82,6 +82,9 @@ export default html`
 
         #dropdown {
             padding: 0;
+            --paper-menu-button-content: {
+               max-width: 300px !important;
+            };
         }
 
         /** Seems like a shady dom scoping/slotting issue */
@@ -92,11 +95,15 @@ export default html`
 
         #dropdown ::slotted(:not(slot)) {
             position: relative;
+            cursor: pointer;
             @apply --cosmoz-bottom-bar-menu-item;
         }
+        #dropdown ::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>
         </div>

package/cosmoz-bottom-bar.js

@@ -10,9 +10,7 @@ import { html } from 'haunted';
 
 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
@@ -183,14 +181,14 @@ class CosmozBottomBar extends PolymerElement {
 
 		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;
 	}
@@ -199,34 +197,19 @@ class CosmozBottomBar extends PolymerElement {
 		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 +218,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;
 		}
@@ -272,12 +245,7 @@ class CosmozBottomBar extends PolymerElement {
 	}
 
 	_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 +279,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 +304,20 @@ class CosmozBottomBar extends PolymerElement {
 	 */
 	_layoutActions() { // eslint-disable-line max-statements
 		const elements = this._getElements(),
-			toolbar = this.$.toolbar;
-
-		let fits,
-			newToolbarElement;
+			hasActions = elements.length > 0 || this.hasExtraItems;
+		this._setHasActions(hasActions);
 
-		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();
+		this.$.menu.$.dropdown.notifyResize();
 	}
 
 	_moveElement(element, toToolbar) {
@@ -408,7 +341,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.5",
+	"version": "4.2.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",
@@ -26,12 +26,10 @@
 	],
 	"scripts": {
 		"lint": "eslint --cache --ext .js .",
-		"start": "es-dev-server",
-		"test": "karma start --coverage",
-		"test:watch": "karma start --auto-watch=true --single-run=false",
-		"test:update-snapshots": "karma start --update-snapshots",
-		"test:prune-snapshots": "karma start --prune-snapshots",
-		"test:compatibility": "karma start --compatibility all --auto-watch=true --single-run=false"
+		"start": "wds",
+		"test": "wtr --coverage",
+		"test:watch": "wtr --watch",
+		"prepare": "husky install"
 	},
 	"release": {
 		"plugins": [
@@ -52,14 +50,8 @@
 			"@commitlint/config-conventional"
 		]
 	},
-	"husky": {
-		"hooks": {
-			"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-		}
-	},
 	"dependencies": {
-		"@neovici/cosmoz-utils": "^3.12.0",
-		"@neovici/cosmoz-viewinfo": "^3.1.3",
+		"@neovici/cosmoz-utils": "^3.21.0",
 		"@polymer/iron-icons": "^3.0.1",
 		"@polymer/iron-selector": "^3.0.0",
 		"@polymer/paper-icon-button": "^3.0.0",
@@ -67,29 +59,25 @@
 		"@polymer/paper-menu-button": "^3.0.0",
 		"@polymer/polymer": "^3.3.1",
 		"@webcomponents/shadycss": "^1.10.2",
-		"haunted": "^4.7.0",
-		"lit-html": "^1.2.1"
+		"haunted": "^4.8.0",
+		"lit-html": "^1.4.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^11.0.0",
-		"@commitlint/config-conventional": "^11.0.0",
+		"@commitlint/cli": "^15.0.0",
+		"@commitlint/config-conventional": "^15.0.0",
 		"@neovici/eslint-config": "^1.3.0",
-		"@open-wc/testing": "^2.5.29",
-		"@open-wc/testing-karma": "^3.3.12",
+		"@open-wc/testing": "^2.5.0",
 		"@polymer/iron-icon": "^3.0.1",
 		"@polymer/paper-button": "^3.0.0",
 		"@polymer/paper-toggle-button": "^3.0.0",
-		"@semantic-release/changelog": "^5.0.1",
-		"@semantic-release/git": "^9.0.0",
+		"@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",
-		"deepmerge": "^4.2.2",
-		"es-dev-server": "^1.57.8",
-		"eslint": "^6.8.0",
-		"husky": "^4.2.5",
-		"karma": "^5.0.1",
-		"karma-firefox-launcher": "^1.3.0",
-		"karma-sauce-launcher": "^4.1.6",
-		"semantic-release": "^17.2.3",
-		"sinon": "^9.2.0"
+		"husky": "^7.0.0",
+		"semantic-release": "^18.0.0",
+		"sinon": "^12.0.0"
 	}
 }

package/CHANGELOG.md

@@ -1,128 +0,0 @@
-## [4.0.5](https://github.com/neovici/cosmoz-bottom-bar/compare/v4.0.4...v4.0.5) (2021-01-15)
-
-
-### Bug Fixes
-
-* **cosmoz-bottom-bar:** ignore style elements ([b5330e9](https://github.com/neovici/cosmoz-bottom-bar/commit/b5330e9583eb9a2b6044e47a46d20615b8829d4c))
-
-## [4.0.4](https://github.com/neovici/cosmoz-bottom-bar/compare/v4.0.3...v4.0.4) (2020-10-20)
-
-
-### Bug Fixes
-
-* do not style slotted slots on Safari/iOS ([ee653c8](https://github.com/neovici/cosmoz-bottom-bar/commit/ee653c878a41ac400906262bb5a6e7e26e24027e))
-
-## [4.0.3](https://github.com/neovici/cosmoz-bottom-bar/compare/v4.0.2...v4.0.3) (2020-10-15)
-
-
-### Bug Fixes
-
-* don't recompute height ([7b52e06](https://github.com/neovici/cosmoz-bottom-bar/commit/7b52e068ed4e17cd3ac5259da5f09fce11237033))
-* restore cosmoz-bottom-bar-view animation behavior ([cf04651](https://github.com/neovici/cosmoz-bottom-bar/commit/cf04651f70a188bf99e80181402dd751684880f2))
-
-## [4.0.2](https://github.com/neovici/cosmoz-bottom-bar/compare/v4.0.1...v4.0.2) (2020-10-15)
-
-
-### Bug Fixes
-
-* disabled buttons in the menu are not styled ([3a0cf4a](https://github.com/neovici/cosmoz-bottom-bar/commit/3a0cf4a23a57c28152b30ae0ac8afead1a0da82b))
-
-## [4.0.1](https://github.com/neovici/cosmoz-bottom-bar/compare/v4.0.0...v4.0.1) (2020-10-15)
-
-
-### Bug Fixes
-
-* prevent resize observer loops ([7994a7f](https://github.com/neovici/cosmoz-bottom-bar/commit/7994a7f827e601e6ffbb18c7096e03af224dc098))
-
-# [4.0.0](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.1.5...v4.0.0) (2020-10-15)
-
-
-### Features
-
-* distribute via slots ([ea66679](https://github.com/neovici/cosmoz-bottom-bar/commit/ea66679776135abef30f06b7917a5a131717aa7c)), closes [#24802](https://github.com/neovici/cosmoz-bottom-bar/issues/24802)
-
-
-### BREAKING CHANGES
-
-* If your component allows adding content to the bottom bar via slots, then you have
-to also make sure you also export `bottom-bar-toolbar` and `bottom-bar-menu`, otherwise the actions
-will not show up.
-
-## [3.1.5](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.1.4...v3.1.5) (2020-10-12)
-
-
-### Bug Fixes
-
-* always run layout actions on resize ([f95925c](https://github.com/neovici/cosmoz-bottom-bar/commit/f95925ccf27c73765cb13a6f22fc1e6c84c0818e))
-
-## [3.1.4](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.1.3...v3.1.4) (2020-10-02)
-
-
-### Bug Fixes
-
-* remove iron-flex-layout from demos ([44faf8d](https://github.com/neovici/cosmoz-bottom-bar/commit/44faf8d5345a536d6de93437242881946a56002f))
-* replace iron-resizable-behavior with a ResizeObserver ([69b0c60](https://github.com/neovici/cosmoz-bottom-bar/commit/69b0c60c1fcbce542f3eb515f1fe34716d1df310)), closes [#83](https://github.com/neovici/cosmoz-bottom-bar/issues/83)
-
-## [3.1.3](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.1.2...v3.1.3) (2020-08-24)
-
-
-### Bug Fixes
-
-* undefined layoutDebouncer ([46a46e0](https://github.com/neovici/cosmoz-bottom-bar/commit/46a46e062f772b1312ddf7e3ef44686d1feee35d))
-
-## [3.1.2](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.1.1...v3.1.2) (2020-08-20)
-
-
-### Bug Fixes
-
-* on desktop bb remains inactive, if not explicitly made active ([956b9b2](https://github.com/neovici/cosmoz-bottom-bar/commit/956b9b2d7f44c927aa06a07a7e375e4afff0a514))
-
-## [3.1.1](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.1.0...v3.1.1) (2020-08-19)
-
-
-### Bug Fixes
-
-* remove iron-flex-layout ([2664d51](https://github.com/neovici/cosmoz-bottom-bar/commit/2664d5115eaacc966b4e9cfa7882b86ed196e0cd))
-
-# [3.1.0](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.0.11...v3.1.0) (2020-08-14)
-
-
-### Features
-
-* convert cosmoz-bottom-bar-view to haunted ([6b4c674](https://github.com/neovici/cosmoz-bottom-bar/commit/6b4c6743c209a6fb81ce573638d40c075a925c41)), closes [#74](https://github.com/neovici/cosmoz-bottom-bar/issues/74)
-
-## [3.0.11](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.0.10...v3.0.11) (2020-06-23)
-
-
-### Bug Fixes
-
-* better hidden element handling ([3184992](https://github.com/neovici/cosmoz-bottom-bar/commit/3184992dad82951881eab58ec60c1019cdeec9a6))
-* improve initial distribution of toolbar elements ([f195cfb](https://github.com/neovici/cosmoz-bottom-bar/commit/f195cfb6c33d5d8110e8dc3362350767e932600c))
-
-## [3.0.10](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.0.9...v3.0.10) (2020-01-13)
-
-
-### Bug Fixes
-
-* reduce max toolbar items from 3 to 1 ([#70](https://github.com/neovici/cosmoz-bottom-bar/issues/70)) ([ae3a781](https://github.com/neovici/cosmoz-bottom-bar/commit/ae3a781))
-
-## [3.0.9](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.0.8...v3.0.9) (2020-01-10)
-
-
-### Bug Fixes
-
-* correct package version ([9132345](https://github.com/neovici/cosmoz-bottom-bar/commit/9132345))
-
-## [3.0.5](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.0.4...v3.0.5) (2019-10-10)
-
-
-### Bug Fixes
-
-* **readme:** missing badges ([5217901](https://github.com/neovici/cosmoz-bottom-bar/commit/5217901))
-
-## [3.0.4](https://github.com/neovici/cosmoz-bottom-bar/compare/v3.0.3...v3.0.4) (2019-10-08)
-
-
-### Bug Fixes
-
-* **ci:** adopt semantic release ([1e5240f](https://github.com/neovici/cosmoz-bottom-bar/commit/1e5240f))

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 };