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

Comparing version 3.1.3 to 3.1.4

CHANGELOG.md

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

cosmoz-bottom-bar-view.js

@@ -53,3 +53,3 @@ import { component } from 'haunted';
 			<div id="content" part="content">
-				${ref(info)}
+				${ ref(info) }
 				<slot name="content"></slot>
@@ -59,3 +59,3 @@ <slot name="scroller-content"></slot>
 			<cosmoz-bottom-bar id="bar" ?active=${ active } bar-height=${ ifDefined(barHeight) } part="bar"
-				@computed-bar-height-changed=${e => info.computedBarHeight = e.target.computedBarHeight} >
+				@computed-bar-height-changed=${ e => info.computedBarHeight = e.target.computedBarHeight } >
 				<slot></slot>
@@ -62,0 +62,0 @@ <slot name="extra" slot="extra"></slot>

cosmoz-bottom-bar.js

@@ -6,6 +6,2 @@ /* eslint-disable max-lines */
 import { timeOut } from '@polymer/polymer/lib/utils/async';
-import { enqueueDebouncer } from '@polymer/polymer/lib/utils/flush';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior';
-
 import template from './cosmoz-bottom-bar.html.js';
@@ -39,3 +35,3 @@
 	*/
-class CosmozBottomBar extends mixinBehaviors([IronResizableBehavior], PolymerElement) {
+class CosmozBottomBar extends PolymerElement {
 	static get template() { // eslint-disable-line max-lines-per-function
@@ -169,3 +165,3 @@ return template;
 		return [
-			'_showHideBottomBar(visible, computedBarHeight)'
+			'_showHideBottomBar(visible)'
 		];
@@ -180,2 +176,3 @@ }
 		this._boundLayoutActions = this._layoutActions.bind(this);
+		this._resizeObserver = new ResizeObserver(this._boundOnResize);
 	}
@@ -186,3 +183,2 @@
 
-		this.addEventListener('iron-resize', this._boundOnResize);
 		this.addEventListener('iron-closed-overlay', this._boundDropdownClosed);
@@ -198,2 +194,3 @@
 		);
+		this._resizeObserver.observe(this);
 		this._computedBarHeightKicker = 0;
@@ -212,2 +209,3 @@ }
 		this._layoutDebouncer?.cancel(); /* eslint-disable-line no-unused-expressions */
+		this._resizeObserver.unobserve(this);
 	}
@@ -277,3 +275,2 @@
 		);
-		enqueueDebouncer(this._layoutDebouncer);
 	}
@@ -405,4 +402,4 @@
 		element.setAttribute('tabindex', tabindex);
-		this.toggleClass(this.menuClass, !toToolbar, element);
-		this.toggleClass(this.toolbarClass, toToolbar, element);
+		element.classList.toggle(this.menuClass, !toToolbar);
+		element.classList.toggle(this.toolbarClass, toToolbar);
 		this.updateStyles();
@@ -416,3 +413,6 @@ }
 
-	_onResize() {
+	_onResize([entry]) {
+		if (entry.borderBoxSize?.[0]?.blockSize === 0 || entry.contentRect?.height === 0) {
+			return;
+		}
 		this._computedBarHeightKicker += 1;
@@ -422,5 +422,5 @@ this._debounceLayoutActions();
 
-	_showHideBottomBar(visible, barHeight) {
+	_showHideBottomBar(visible) {
 		this.style.display = '';
-		const translateY = visible ? 0 : barHeight,
+		const translateY = visible ? 0 : '100%',
 			onEnd = () => {
@@ -433,3 +433,3 @@ clearTimeout(this._hideTimeout);
 		requestAnimationFrame(() => {
-			this.translate3d('0px', translateY + 'px', '0px');
+			this.style.transform = `translate3d(0px, ${ translateY }, 0px)`;
 			this._hideTimeout = setTimeout(onEnd, 510);
@@ -436,0 +436,0 @@ });

package.json

 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "3.1.3",
+	"version": "3.1.4",
 	"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
@@ -63,5 +63,3 @@ "keywords": [
 		"@neovici/cosmoz-viewinfo": "^3.1.1",
-		"@polymer/iron-flex-layout": "^3.0.0",
-		"@polymer/iron-icons": "^3.0.0",
-		"@polymer/iron-resizable-behavior": "^3.0.0",
+		"@polymer/iron-icons": "^3.0.1",
 		"@polymer/iron-selector": "^3.0.0",
@@ -77,4 +75,4 @@ "@polymer/paper-icon-button": "^3.0.0",
 	"devDependencies": {
-		"@commitlint/cli": "^8.3.5",
-		"@commitlint/config-conventional": "^8.3.4",
+		"@commitlint/cli": "^11.0.0",
+		"@commitlint/config-conventional": "^11.0.0",
 		"@neovici/eslint-config": "^1.2.1",
@@ -95,3 +93,3 @@ "@open-wc/testing": "^2.5.11",
 		"karma-firefox-launcher": "^1.3.0",
-		"karma-sauce-launcher": "^2.0.2",
+		"karma-sauce-launcher": "^4.1.0",
 		"semantic-release": "^17.0.4",
@@ -98,0 +96,0 @@ "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

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

Total package byte prevSize

38341

increased by0.72%

Dependency count

11

decreased by-15.38%

Lines of code

588

increased by0.17%

Dependency changes

• - Removed@polymer/iron-flex-layout@^3.0.0

• - Removed@polymer/iron-resizable-behavior@^3.0.0

• Updated@polymer/iron-icons@^3.0.1