fix: replace iron-resizable-behavior with a ResizeObserver

Neovici · Oct 7, 2020 · 12a9787 · 12a9787
1 parent 20be6e5
commit 12a9787
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 48 deletions.
diff --git a/cosmoz-image-viewer.html.js b/cosmoz-image-viewer.html.js
@@ -4,8 +4,6 @@ import { html } from '@polymer/polymer/lib/utils/html-tag';
 
 import '@webcomponents/shadycss/entrypoints/apply-shim';
 
-import '@polymer/iron-flex-layout/iron-flex-layout';
-import '@polymer/iron-flex-layout/iron-flex-layout-classes';
 import '@polymer/iron-icons';
 import '@polymer/iron-image';
 import '@polymer/paper-icon-button';
@@ -15,20 +13,21 @@ import './cosmoz-image-viewer-overlay.js';
 import './lib/haunted-pan-zoom';
 
 export const template = html`
-<style include="iron-flex iron-flex-alignment">
+<style>
 	:host {
-		display: block;
+		display: flex;
+		flex-direction: column;
 		position: relative;
 		overflow: auto;
-		@apply --layout-vertical;
 	}
 
 	/* For Polymer 2 */
-
 	[hidden] {
 		display: none !important;
 	}
 
+	.flex { flex: auto; }
+
 	#imageContainer {
 		overflow-y: auto;
 		will-change: transform;
@@ -39,6 +38,8 @@ export const template = html`
 		left: 0;
 		right: 0;
 		margin: 12px;
+		display: flex;
+		align-items: center;
 	}
 
 	.nav.counter {
@@ -110,7 +111,7 @@ export const template = html`
 	}
 
 	.image-zoom {
-		@apply --layout-flex-auto;
+		flex: auto;
 		display: flex;
 		justify-content: center;
 		background-color: black;
@@ -124,7 +125,7 @@ export const template = html`
 		left: 50%;
 		transform: translate(-50%, -50%);
 		color: white;
-			z-index: +1;
+		z-index: +1;
 		@apply --cosmoz-image-viewer-error;
 	}
 
@@ -205,11 +206,7 @@ export const template = html`
 			opacity: 0.1;
 			display: flex;
 			align-items: center;
-			-webkit-transition: opacity .25s ease-in-out;
-			-moz-transition: opacity .25s ease-in-out;
-			-ms-transition: opacity .25s ease-in-out;
-			-o-transition: opacity .25s ease-in-out;
-			transition: opacity .25s ease-in-out;
+			transition: opacity 0.25s ease-in-out;
 			transition-delay: 0s;
 			color: rgba(255, 255, 255, 0.87);
 			z-index: 10;
@@ -234,12 +231,7 @@ export const template = html`
 		}
 		.action-box {
 			padding: 0 48px;
-			display: -ms-flexbox;
-			display: -webkit-flex;
 			display: flex;
-			-ms-flex-direction: row;
-			-webkit-flex-direction: row;
-			flex-direction: row;
 		}
 		.action-box > * {
 			padding-right: 24px;

diff --git a/cosmoz-image-viewer.js b/cosmoz-image-viewer.js
@@ -1,8 +1,7 @@
 /* eslint-disable max-lines, max-len */
 import { PolymerElement } from '@polymer/polymer/polymer-element';
-
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class';
+import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
+import { timeOut } from '@polymer/polymer/lib/utils/async';
 import { translatable } from '@neovici/cosmoz-i18next';
 import { download } from './lib/pdf';
 import { template } from './cosmoz-image-viewer.html';
@@ -30,9 +29,7 @@ so a user can swipe to the next image.
 @demo demo/index.html
 @appliesMixin translatable
 */
-class CosmozImageViewer extends translatable(mixinBehaviors([
-	IronResizableBehavior
-], PolymerElement)) {
+class CosmozImageViewer extends translatable(PolymerElement) {
 	static get template() { // eslint-disable-line max-lines-per-function
 		return template;
 	}
@@ -119,7 +116,6 @@ class CosmozImageViewer extends translatable(mixinBehaviors([
 				notify: true,
 				observer: function (value) { // eslint-disable-line object-shorthand
 					this.hidden = value;
-					this.notifyResize();
 				}
 			},
 			/**
@@ -276,15 +272,14 @@ class CosmozImageViewer extends translatable(mixinBehaviors([
 		this._syncImageIndexBound = this._syncImageIndex.bind(this);
 		this._onOverlayDetachIntentBound = this._onOverlayDetachIntent.bind(this);
 		this._onOverlayClosedBound = this._onOverlayClosed.bind(this);
+		this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
 	}
 
 	/** ELEMENT LIFECYCLE */
 
 	ready() {
 		super.ready();
 
-		this.addEventListener('iron-resize', this._onResize);
-
 		this._dblClickListner = () => {
 			if (!this._showZoom) {
 				return;
@@ -295,18 +290,20 @@ class CosmozImageViewer extends translatable(mixinBehaviors([
 
 	connectedCallback() {
 		super.connectedCallback();
+		this._resizeObserver.observe(this);
 		this.addEventListener('dblclick', this._dblClickListner);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this._resizeObserver.unobserve(this);
 		this.removeEventListener('dblclick', this._dblClickListner);
 
 		if (imageOverlay) {
 			this._setupDialogEvents(false);
 		}
 
-		this.cancelDebouncer('elementHeight');
+		this._heightDebouncer?.cancel();
 	}
 
 	/** PUBLIC */
@@ -316,7 +313,7 @@ class CosmozImageViewer extends translatable(mixinBehaviors([
 	}
 
 	get carousel() {
-		return this.$$('#carousel');
+		return this.shadowRoot.querySelector('#carousel');
 	}
 
 	/**
@@ -416,7 +413,7 @@ class CosmozImageViewer extends translatable(mixinBehaviors([
 	_detachToNewWindow() {
 		const
 			w = globals.window = window.open(undefined, this.detachedWindowName, this._detachedWindowFeaturesString),
-			windowTemplate = this.$$('#externalWindow'),
+			windowTemplate = this.shadowRoot.querySelector('#externalWindow'),
 			windowTemplateClone = windowTemplate.content.cloneNode(true),
 			setImages = () => w.ciw.setImages(this._resolvedImages, this.currentImageIndex);
 
@@ -571,14 +568,22 @@ class CosmozImageViewer extends translatable(mixinBehaviors([
 		return index + 1;
 	}
 
-	_onResize() {
-		this.debounce('elementHeight', () => {
-			this._elementHeight = this.offsetHeight;
-		}, 50);
+	_onResize([entry]) {
+		const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect?.height;
+		if (height === 0) {
+			return;
+		}
+		this._heightDebouncer = Debouncer.debounce(
+			this._heightDebouncer,
+			timeOut.after(50), () => {
+				this._elementHeight = height;
+			}
+		);
+
 	}
 
 	_close() {
-		this.fire('close-tapped');
+		this.dispatchEvent(new CustomEvent('close-tapped'));
 	}
 
 	_resolveImages(images) {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,11 +64,9 @@
 		"@fabricelements/skeleton-carousel": "^3.0.2",
 		"@neovici/cosmoz-i18next": "^3.2.2",
 		"@neovici/cosmoz-utils": "^3.13.0",
-		"@polymer/iron-flex-layout": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
 		"@polymer/iron-image": "^3.0.0",
 		"@polymer/iron-overlay-behavior": "^3.0.0",
-		"@polymer/iron-resizable-behavior": "^3.0.0",
 		"@polymer/paper-icon-button": "^3.0.0",
 		"@polymer/polymer": "^3.4.1",
 		"@webcomponents/shadycss": "^1.10.1",

diff --git a/test/basic.test.js b/test/basic.test.js
@@ -65,14 +65,6 @@ suite('cosmoz-image-viewer', () => {
 		assert.equal(dialog.images, imageViewer.images);
 	});
 
-	test('detach calls notifyResize', () => {
-		const spyNotifyResize = sinon.spy(imageViewer, 'notifyResize');
-		assert.notCalled(spyNotifyResize);
-		imageViewer.detach();
-		assert.calledOnce(spyNotifyResize);
-		imageViewer.attach();
-	});
-
 	test('pdf creation works', async () => {
 		const blob = await imageViewer.downloadPdf(imageViewer._resolvedImages);
 		assert.isAbove(blob.size, 10000);