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

Comparing version 3.0.10 to 3.0.11

CHANGELOG.md

@@ -0,1 +1,9 @@
+## [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)
@@ -2,0 +10,0 @@

cosmoz-bottom-bar-view.js

@@ -27,53 +27,49 @@ import '@webcomponents/shadycss/entrypoints/apply-shim';
 		return html`
-		<style>
-			:host {
-				position: relative;
-				overflow: hidden;
-				display: block;
-				/* TODO(plequang): Remove this, as it was added for convenience when the component was not public. */
-				@apply --layout-flex;
-			}
+			<style>
+				:host {
+					position: relative;
+					overflow: hidden;
+					display: block;
+					/* TODO(plequang): Remove this, as it was added for convenience when the component was not public. */
+					@apply --layout-flex;
+				}
 
-			#scroller {
-				@apply --layout-fit;
-				-webkit-overflow-scrolling: touch;
-				overflow-x: hidden;
-				overflow-y: auto;
-			}
+				#scroller {
+					@apply --layout-fit;
+					-webkit-overflow-scrolling: touch;
+					overflow-x: hidden;
+					overflow-y: auto;
+				}
 
-			#scrollerContent {
-				box-sizing: border-box;
-				min-height: 100%;
-				@apply --layout-vertical;
-			}
+				#scrollerContent {
+					box-sizing: border-box;
+					min-height: 100%;
+					@apply --layout-vertical;
+				}
 
-			#scrollerContent ::slotted(*) {
-				position: relative;
-				/* Default to vertical flex layout, but can be overriden locally */
-				@apply --layout-vertical;
-			}
+				#scrollerContent ::slotted(*) {
+					position: relative;
+					/* Default to vertical flex layout, but can be overriden locally */
+					@apply --layout-vertical;
+				}
 
-			cosmoz-bottom-bar {
-				background-color: var(--cosmoz-bottom-bar-view-bar-color, rgba(230, 230, 230, 0.8));
-				@apply --cosmoz-bottom-bar-view-bar;
-			}
+				cosmoz-bottom-bar {
+					background-color: var(--cosmoz-bottom-bar-view-bar-color, rgba(230, 230, 230, 0.8));
+					@apply --cosmoz-bottom-bar-view-bar;
+				}
 
-		</style>
-		<div id="scroller">
-			<div id="scrollerContent" style$="[[ _computeScrollerContentStyle(_computedBarHeight, _bottomBarVisible, _computedFixed)]]">
-				<slot name="scroller-content"></slot>
+			</style>
+			<div id="scroller">
+				<div id="scrollerContent" style$="[[ _computeScrollerContentStyle(_computedBarHeight, _bottomBarVisible, _computedFixed)]]">
+					<slot name="scroller-content"></slot>
+				</div>
 			</div>
-		</div>
-		<cosmoz-bottom-bar id="bottomBar" active="[[ active ]]" visible="{{ _bottomBarVisible }}"
-			bar-height="[[ barHeight ]]" computed-bar-height="{{ _computedBarHeight }}">
-			<slot></slot>
-			<slot name="extra" slot="extra"></slot>
-		</cosmoz-bottom-bar>
-`;
+			<cosmoz-bottom-bar id="bottomBar" active="[[ active ]]" visible="{{ _bottomBarVisible }}"
+				bar-height="[[ barHeight ]]" computed-bar-height="{{ _computedBarHeight }}">
+				<slot></slot>
+				<slot name="extra" slot="extra"></slot>
+			</cosmoz-bottom-bar>
+		`;
 	}
 
-	static get is() {
-		return 'cosmoz-bottom-bar-view';
-	}
-
 	static get properties() {
@@ -187,2 +183,2 @@ return {
 
-customElements.define(CosmozBottomBarView.is, CosmozBottomBarView);
+customElements.define('cosmoz-bottom-bar-view', CosmozBottomBarView);

cosmoz-bottom-bar.js

 /* eslint-disable max-lines */
-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 { PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer';
@@ -19,6 +10,10 @@ import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 
+import template from './cosmoz-bottom-bar.html.js';
+
 const
 	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;
+
 /**
@@ -46,132 +41,5 @@ * `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
 	static get template() { // eslint-disable-line max-lines-per-function
-		return html`
-		<style>
-			:host {
-				display: block;
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				max-width: 100%; /* Firefox fix */
-				background-color: inherit;
-				transition: transform 0.5s ease;
-				z-index: 10;
-			}
-
-			[hidden] {
-				display: none !important;
-			}
-
-			#bar {
-				@apply --layout-horizontal;
-				@apply --layout-center;
-				padding: 0 3%;
-			}
-
-			#info {
-				@apply --layout-center;
-				@apply --layout-horizontal;
-				min-width: 5px;
-				padding-right: 3%;
-			}
-
-			#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 {
-				@apply --layout-flex;
-			}
-
-			#toolbar, #extraToolbarSlot {
-				@apply --layout-center;
-				@apply --layout-horizontal;
-				overflow: hidden;
-			}
-
-			#menu {
-				@apply --layout-center;
-				@apply --layout-horizontal;
-			}
-
-			#info,
-			#menu > div {
-				white-space: nowrap;
-			}
-
-			#toolbar ::slotted(*) {
-				margin: 0 0.29em;
-				min-width: 40px;
-				min-height: 40px;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				@apply --cosmoz-bottom-bar-toolbar-item;
-			}
-
-			#toolbar ::slotted([disabled]) {
-				@apply --cosmoz-bottom-bar-toolbar-item-disabled;
-			}
-
-			#toolbar ::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(*) {
-				display: flex;
-				@apply --layout-center;
-				@apply --layout-horizontal;
-				position: relative;
-				@apply --cosmoz-bottom-bar-menu-item;
-			}
-		</style>
-
-		<div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]">
-			<div id="info">
-				<slot name="info"></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">
-			<slot id="content"></slot>
-		</div>
-`;
+		return template;
 	}
 
-	static get is() {
-		return 'cosmoz-bottom-bar';
-	}
-
 	// eslint-disable-next-line max-lines-per-function
@@ -357,20 +225,28 @@ static get properties() {
 		}
+		const newNodes = addedNodes.filter(node => removedNodes.indexOf(node) === -1);
+		if (newNodes.length === 0) {
+			return;
+		}
 
-		addedNodes
-		// ignore nodes that are moved between slots
-			.filter(node => removedNodes.indexOf(node) === -1)
-			.forEach(function (node) {
-				this._hiddenMutationObserver.observe(node, {
-					attributes: true,
-					attributeFilter: [
-						'hidden'
-					]
-				});
-				if (node.parentNode !== this) {
-					this.appendChild(node);
-				}
-				this._moveElement(node, true);
-			//this._toolbarMoveToStart(node);
-			}, this);
+		const toolbarElements = this._getElements().
+				filter(slotEq(BOTTOM_BAR_TOOLBAR_SLOT)),
+			toolbarCount = this.maxToolbarItems - toolbarElements.length;
 
+
+		newNodes.forEach(node => {
+			this._hiddenMutationObserver.observe(node, {
+				attributes: true,
+				attributeFilter: [
+					'hidden'
+				]
+			});
+			if (node.parentNode !== this) {
+				this.appendChild(node);
+			}
+			this._moveElement(node, false);
+		});
+		if (toolbarCount > 0) {
+			newNodes.filter(node => !node.hidden).slice(0, toolbarCount).
+				forEach(node => this._moveElement(node, true));
+		}
 		this._debounceLayoutActions();
@@ -440,2 +316,7 @@ }
 
+	_getElements() {
+		return FlattenedNodesObserver.getFlattenedNodes(this)
+			.filter(this._isActionNode)
+			.filter(element => !element.hidden);
+	}
 	/**
@@ -462,5 +343,3 @@ * Layout the actions available as buttons or menu items
 	_layoutActions() { // eslint-disable-line max-statements
-		const elements = FlattenedNodesObserver.getFlattenedNodes(this).filter(n => n.nodeType === Node.ELEMENT_NODE)
-				.filter(this._isActionNode)
-				.filter(element => !element.hidden),
+		const elements = this._getElements(),
 			toolbar = this.$.toolbar;
@@ -480,18 +359,11 @@
 
-		const toolbarElements = elements.filter(element => {
-				if (element.getAttribute('slot') === BOTTOM_BAR_TOOLBAR_SLOT) {
-					// make sure we only read scrollWidth and clientWidth until
-					// know that we don't fit
-					fits = fits && element.scrollWidth <= element.clientWidth;
-					return true;
-				}
-				return false;
-			}),
+		const toolbarElements = elements.filter(slotEq(BOTTOM_BAR_TOOLBAR_SLOT)),
+			menuElements = elements.filter(slotEq(BOTTOM_BAR_MENU_SLOT));
 
-			menuElements = elements.filter(element => element.getAttribute('slot') === BOTTOM_BAR_MENU_SLOT);
-
 		this._setHasMenuItems(menuElements.length > 0);
 
 		fits = fits && toolbarElements.length <= this.maxToolbarItems;
+		fits = fits && toolbarElements.every(element => element.scrollWidth <= element.clientWidth);
 
+
 		if (fits) {
@@ -560,13 +432,4 @@ if (this._canAddMoreButtonToBar(currentWidth, toolbarElements, menuElements)) {
 	}
-
-	_toolbarMoveToStart(node) {
-		const toolbar = this.$.toolbar;
-		if (toolbar.children.length === 0) {
-			toolbar.appendChild(node);
-			return;
-		}
-		toolbar.insertBefore(node, toolbar.children[0]);
-	}
 }
 
-customElements.define(CosmozBottomBar.is, CosmozBottomBar);
+customElements.define('cosmoz-bottom-bar', CosmozBottomBar);

package.json

 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "3.0.10",
+	"version": "3.0.11",
 	"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
@@ -23,8 +23,13 @@ "keywords": [
 	},
+	"files": [
+		"cosmoz-*.js"
+	],
 	"scripts": {
-		"analyze": "polymer analyze --input cosmoz-*.js  > analysis.json",
-		"lint": "eslint --cache --ext .js,.html . && polymer lint cosmoz-*.js",
-		"pristine": "rm -rf node_modules/ && npm install",
-		"start": "polymer serve -o",
-		"test": "polymer test"
+		"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"
 	},
@@ -64,32 +69,28 @@ "release": {
 		"@polymer/paper-menu-button": "^3.0.0",
-		"@polymer/polymer": "^3.0.0",
-		"@webcomponents/shadycss": "^1.9.1"
+		"@polymer/polymer": "^3.3.1",
+		"@webcomponents/shadycss": "^1.9.6"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^8.2.0",
-		"@commitlint/config-conventional": "^8.2.0",
-		"@neovici/eslint-config": "^1.1.7",
-		"@neovici/github-actions-eslint-annotator": "^0.3.0",
-		"@polymer/iron-component-page": "^4.0.0",
-		"@polymer/iron-demo-helpers": "^3.0.0",
-		"@polymer/iron-test-helpers": "^3.0.0",
+		"@commitlint/cli": "^8.3.5",
+		"@commitlint/config-conventional": "^8.3.4",
+		"@neovici/eslint-config": "^1.2.1",
+		"@open-wc/testing": "^2.5.11",
+		"@open-wc/testing-karma": "^3.3.12",
+		"@polymer/iron-icon": "^3.0.1",
 		"@polymer/paper-button": "^3.0.0",
 		"@polymer/paper-toggle-button": "^3.0.0",
-		"@polymer/test-fixture": "^4.0.2",
-		"@semantic-release/changelog": "^3.0.5",
-		"@semantic-release/git": "^7.0.17",
-		"@webcomponents/webcomponentsjs": "^2.0.0",
-		"babel-eslint": "^10.0.2",
-		"chai": "^4.2.0",
-		"eslint": "^5.0.0",
-		"eslint-plugin-html": "^5.0.0",
-		"eslint-plugin-import": "^2.17.3",
-		"eslint-plugin-mocha": "^5.0.0",
-		"husky": "^3.0.9",
-		"mocha": "^6.2.2",
-		"polymer-cli": "^1.9.1",
-		"semantic-release": "^16.0.0-beta.25",
-		"wct-istanbul": "^0.14.3",
-		"wct-mocha": "^1.0.1"
+		"@semantic-release/changelog": "^5.0.1",
+		"@semantic-release/git": "^9.0.0",
+		"@webcomponents/webcomponentsjs": "^2.4.3",
+		"deepmerge": "^4.2.2",
+		"es-dev-server": "^1.46.2",
+		"eslint": "^6.8.0",
+		"husky": "^4.2.5",
+		"karma": "^5.0.1",
+		"karma-firefox-launcher": "^1.3.0",
+		"karma-sauce-launcher": "^2.0.2",
+		"lit-html": "^1.2.1",
+		"semantic-release": "^17.0.4",
+		"sinon": "^9.0.2"
 	}
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Improved metrics

Dev dependency count

21

decreased by-16%

Worsened metrics

Total package byte prevSize

38370

decreased by-99.7%

Number of package files

7

decreased by-76.67%

Lines of code

632

decreased by-72.45%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/polymer@^3.3.1

• Updated@webcomponents/shadycss@^1.9.6