From 26278afce21a29c4a8e0638c9e29e59345e5d3f3 Mon Sep 17 00:00:00 2001 From: Robert Svensson Date: Tue, 7 Aug 2018 15:39:18 +0200 Subject: [PATCH 1/4] Fix: Properly update offset and aspect ratio on 'resize' This fixes two issues when the view is resized: - Update the offset to align with the new initial offset - Clear the container height before computing the new parent height, since it depends on the height of the container. This amends the changes in b587571696, prior to which the aspect ratio had no dependency on the size of the parent. Also renamed the offset setup method to better describe what it does. --- dist/pinch-zoom.umd.js | 28 ++++++++++++++++++++++------ src/pinch-zoom.js | 28 ++++++++++++++++++++++------ 2 files changed, 44 insertions(+), 12 deletions(-) diff --git a/dist/pinch-zoom.umd.js b/dist/pinch-zoom.umd.js index f5cc13a..0a04d85 100644 --- a/dist/pinch-zoom.umd.js +++ b/dist/pinch-zoom.umd.js @@ -126,7 +126,7 @@ // and then the load event (which trigger update) will never fire. if (this.isImageLoaded(this.el)) { this.updateAspectRatio(); - this.setupInitialOffset(); + this.setupOffsets(); } this.enable(); @@ -264,6 +264,14 @@ }; }, + /** + * Reset current image offset to that of the initial offset + */ + resetOffset: function resetOffset() { + this.offset.x = this.initialOffset.x; + this.offset.y = this.initialOffset.y; + }, + /** * Determine if image is loaded */ @@ -275,7 +283,7 @@ } }, - setupInitialOffset: function setupInitialOffset() { + setupOffsets: function setupOffsets() { if (this._initialOffsetSetup) { return; } @@ -283,8 +291,7 @@ this._initialOffsetSetup = true; this.computeInitialOffset(); - this.offset.x = this.initialOffset.x; - this.offset.y = this.initialOffset.y; + this.resetOffset(); }, /** @@ -476,9 +483,13 @@ }, /** - * Updates the aspect ratio + * Updates the container aspect ratio + * + * Any previous container height must be cleared before re-measuring the + * parent height, since it depends implicitly on the height of any of its children */ updateAspectRatio: function updateAspectRatio() { + this.unsetContainerY(); this.setContainerY(this.container.parentElement.offsetHeight); }, @@ -604,6 +615,10 @@ return this.container.style.height = y + 'px'; }, + unsetContainerY: function unsetContainerY() { + this.container.style.height = null; + }, + /** * Creates the expected html structure */ @@ -662,10 +677,11 @@ if (event && event.type === 'resize') { this.computeInitialOffset(); + this.resetOffset(); } if (event && event.type === 'load') { - this.setupInitialOffset(); + this.setupOffsets(); } var zoomFactor = this.getInitialZoomFactor() * this.zoomFactor, diff --git a/src/pinch-zoom.js b/src/pinch-zoom.js index 5fd937a..23c06e5 100644 --- a/src/pinch-zoom.js +++ b/src/pinch-zoom.js @@ -105,7 +105,7 @@ var definePinchZoom = function () { // and then the load event (which trigger update) will never fire. if (this.isImageLoaded(this.el)) { this.updateAspectRatio(); - this.setupInitialOffset(); + this.setupOffsets(); } this.enable(); @@ -244,6 +244,14 @@ var definePinchZoom = function () { }; }, + /** + * Reset current image offset to that of the initial offset + */ + resetOffset: function() { + this.offset.x = this.initialOffset.x; + this.offset.y = this.initialOffset.y; + }, + /** * Determine if image is loaded */ @@ -255,7 +263,7 @@ var definePinchZoom = function () { } }, - setupInitialOffset: function() { + setupOffsets: function() { if (this._initialOffsetSetup) { return; } @@ -263,8 +271,7 @@ var definePinchZoom = function () { this._initialOffsetSetup = true; this.computeInitialOffset(); - this.offset.x = this.initialOffset.x; - this.offset.y = this.initialOffset.y; + this.resetOffset(); }, /** @@ -463,9 +470,13 @@ var definePinchZoom = function () { }, /** - * Updates the aspect ratio + * Updates the container aspect ratio + * + * Any previous container height must be cleared before re-measuring the + * parent height, since it depends implicitly on the height of any of its children */ updateAspectRatio: function () { + this.unsetContainerY(); this.setContainerY(this.container.parentElement.offsetHeight); }, @@ -589,6 +600,10 @@ var definePinchZoom = function () { return this.container.style.height = y + 'px'; }, + unsetContainerY: function () { + this.container.style.height = null; + }, + /** * Creates the expected html structure */ @@ -647,10 +662,11 @@ var definePinchZoom = function () { if (event && event.type === 'resize') { this.computeInitialOffset(); + this.resetOffset(); } if (event && event.type === 'load') { - this.setupInitialOffset(); + this.setupOffsets(); } var zoomFactor = this.getInitialZoomFactor() * this.zoomFactor, From 5ecb76914eb419524bf2b4b0c099a45ec5a18d52 Mon Sep 17 00:00:00 2001 From: Robert Svensson Date: Tue, 7 Aug 2018 16:05:52 +0200 Subject: [PATCH 2/4] Fix: Reduce number of calls to update container aspect ratio This prevents the container aspect ratio from being re-computed during rapid touch move and animation events, reducing needless DOM updates. --- dist/pinch-zoom.umd.js | 3 ++- src/pinch-zoom.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/dist/pinch-zoom.umd.js b/dist/pinch-zoom.umd.js index 0a04d85..3d5cb47 100644 --- a/dist/pinch-zoom.umd.js +++ b/dist/pinch-zoom.umd.js @@ -673,14 +673,15 @@ window.setTimeout(function () { this.updatePlaned = false; - this.updateAspectRatio(); if (event && event.type === 'resize') { + this.updateAspectRatio(); this.computeInitialOffset(); this.resetOffset(); } if (event && event.type === 'load') { + this.updateAspectRatio(); this.setupOffsets(); } diff --git a/src/pinch-zoom.js b/src/pinch-zoom.js index 23c06e5..95aac1d 100644 --- a/src/pinch-zoom.js +++ b/src/pinch-zoom.js @@ -658,14 +658,15 @@ var definePinchZoom = function () { window.setTimeout((function () { this.updatePlaned = false; - this.updateAspectRatio(); if (event && event.type === 'resize') { + this.updateAspectRatio(); this.computeInitialOffset(); this.resetOffset(); } if (event && event.type === 'load') { + this.updateAspectRatio(); this.setupOffsets(); } From 9d347e370edc842d0f993a3f0047ab809504554d Mon Sep 17 00:00:00 2001 From: Robert Svensson Date: Wed, 8 Aug 2018 15:01:31 +0200 Subject: [PATCH 3/4] Fix: Update offsets for every 'load' event (not just first) When the image emits a 'load' event it is safe to assume that enough may have changed to it that the initial and current offsets need to be recomputed. Consequently, the run-once check for offset computations is removed. --- dist/pinch-zoom.umd.js | 9 +-------- src/pinch-zoom.js | 9 +-------- 2 files changed, 2 insertions(+), 16 deletions(-) diff --git a/dist/pinch-zoom.umd.js b/dist/pinch-zoom.umd.js index 3d5cb47..ad2da08 100644 --- a/dist/pinch-zoom.umd.js +++ b/dist/pinch-zoom.umd.js @@ -284,12 +284,6 @@ }, setupOffsets: function setupOffsets() { - if (this._initialOffsetSetup) { - return; - } - - this._initialOffsetSetup = true; - this.computeInitialOffset(); this.resetOffset(); }, @@ -676,8 +670,7 @@ if (event && event.type === 'resize') { this.updateAspectRatio(); - this.computeInitialOffset(); - this.resetOffset(); + this.setupOffsets(); } if (event && event.type === 'load') { diff --git a/src/pinch-zoom.js b/src/pinch-zoom.js index 95aac1d..8418816 100644 --- a/src/pinch-zoom.js +++ b/src/pinch-zoom.js @@ -264,12 +264,6 @@ var definePinchZoom = function () { }, setupOffsets: function() { - if (this._initialOffsetSetup) { - return; - } - - this._initialOffsetSetup = true; - this.computeInitialOffset(); this.resetOffset(); }, @@ -661,8 +655,7 @@ var definePinchZoom = function () { if (event && event.type === 'resize') { this.updateAspectRatio(); - this.computeInitialOffset(); - this.resetOffset(); + this.setupOffsets(); } if (event && event.type === 'load') { From bc5e1766e70d82e7e2cc1bbad4f6b6303592490f Mon Sep 17 00:00:00 2001 From: Robert Svensson Date: Thu, 9 Aug 2018 11:09:47 +0200 Subject: [PATCH 4/4] =?UTF-8?q?SQUASH:=20Fix:=20Update=20offsets=20for=20e?= =?UTF-8?q?very=20'load'=20=E2=80=A6=20-=20add=20'once'=20option?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit An option is provided to allow the offsets to only be set once, in cases where the offset needs to be maintained between 'load' events. --- README.md | 4 ++++ dist/pinch-zoom.umd.js | 7 +++++++ src/pinch-zoom.js | 7 +++++++ 3 files changed, 18 insertions(+) diff --git a/README.md b/README.md index 3627ddc..5dcb41d 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,8 @@ minZoom: Minimum zoom factor. (default 0.5) draggableUnzoomed: Capture drag events even when the image isn't zoomed. (default true) (using `false` allows other libs (e.g. swipe) to pick up drag events) lockDragAxis: Lock panning of the element to a single axis. (default false) +setOffsetsOnce: Compute offsets (image position inside container) only once. (default false) + (using `true` maintains the offset on consecutive `load` and `resize`) use2d: Fall back to 2D transforms when idle. (default true) (a truthy value will still use 3D transforms during animation) verticalPadding: Vertical padding to apply around the image. (default 0) @@ -51,6 +53,8 @@ pz_doubletap Resetting the zoom with double-tap ``` +_(if need be, the event names can be customized via `options`)_ + ### Methods ```Javascript diff --git a/dist/pinch-zoom.umd.js b/dist/pinch-zoom.umd.js index ad2da08..c0986a0 100644 --- a/dist/pinch-zoom.umd.js +++ b/dist/pinch-zoom.umd.js @@ -148,6 +148,7 @@ minZoom: 0.5, draggableUnzoomed: true, lockDragAxis: false, + setOffsetsOnce: false, use2d: true, zoomStartEventName: 'pz_zoomstart', zoomUpdateEventName: 'pz_zoomupdate', @@ -284,6 +285,12 @@ }, setupOffsets: function setupOffsets() { + if (this.options.setOffsetsOnce && this._isOffsetsSet) { + return; + } + + this._isOffsetsSet = true; + this.computeInitialOffset(); this.resetOffset(); }, diff --git a/src/pinch-zoom.js b/src/pinch-zoom.js index 8418816..f0335ec 100644 --- a/src/pinch-zoom.js +++ b/src/pinch-zoom.js @@ -128,6 +128,7 @@ var definePinchZoom = function () { minZoom: 0.5, draggableUnzoomed: true, lockDragAxis: false, + setOffsetsOnce: false, use2d: true, zoomStartEventName: 'pz_zoomstart', zoomUpdateEventName: 'pz_zoomupdate', @@ -264,6 +265,12 @@ var definePinchZoom = function () { }, setupOffsets: function() { + if (this.options.setOffsetsOnce && this._isOffsetsSet) { + return; + } + + this._isOffsetsSet = true; + this.computeInitialOffset(); this.resetOffset(); },