Merge pull request #67 from zyniq82/offset-and-size-fixes

Offset and size fixes (related to events)
manuelstofer · Aug 16, 2018 · 9fe5384 · 9fe5384
2 parents 0121a59 + bc5e176
commit 9fe5384
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 20 deletions.
diff --git 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
@@ -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();
@@ -148,6 +148,7 @@
                 minZoom: 0.5,
                 draggableUnzoomed: true,
                 lockDragAxis: false,
+                setOffsetsOnce: false,
                 use2d: true,
                 zoomStartEventName: 'pz_zoomstart',
                 zoomUpdateEventName: 'pz_zoomupdate',
@@ -264,6 +265,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,16 +284,15 @@
                 }
             },
 
-            setupInitialOffset: function setupInitialOffset() {
-                if (this._initialOffsetSetup) {
+            setupOffsets: function setupOffsets() {
+                if (this.options.setOffsetsOnce && this._isOffsetsSet) {
                     return;
                 }
 
-                this._initialOffsetSetup = true;
+                this._isOffsetsSet = true;
 
                 this.computeInitialOffset();
-                this.offset.x = this.initialOffset.x;
-                this.offset.y = this.initialOffset.y;
+                this.resetOffset();
             },
 
             /**
@@ -476,9 +484,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 +616,10 @@
                 return this.container.style.height = y + 'px';
             },
 
+            unsetContainerY: function unsetContainerY() {
+                this.container.style.height = null;
+            },
+
             /**
              * Creates the expected html structure
              */
@@ -658,14 +674,15 @@
 
                 window.setTimeout(function () {
                     this.updatePlaned = false;
-                    this.updateAspectRatio();
 
                     if (event && event.type === 'resize') {
-                        this.computeInitialOffset();
+                        this.updateAspectRatio();
+                        this.setupOffsets();
                     }
 
                     if (event && event.type === 'load') {
-                        this.setupInitialOffset();
+                        this.updateAspectRatio();
+                        this.setupOffsets();
                     }
 
                     var zoomFactor = this.getInitialZoomFactor() * this.zoomFactor,

diff --git 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();
@@ -128,6 +128,7 @@ var definePinchZoom = function () {
             minZoom: 0.5,
             draggableUnzoomed: true,
             lockDragAxis: false,
+            setOffsetsOnce: false,
             use2d: true,
             zoomStartEventName: 'pz_zoomstart',
             zoomUpdateEventName: 'pz_zoomupdate',
@@ -244,6 +245,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,16 +264,15 @@ var definePinchZoom = function () {
             }
         },
 
-        setupInitialOffset: function() {
-            if (this._initialOffsetSetup) {
+        setupOffsets: function() {
+            if (this.options.setOffsetsOnce && this._isOffsetsSet) {
               return;
             }
 
-            this._initialOffsetSetup = true;
+            this._isOffsetsSet = true;
 
             this.computeInitialOffset();
-            this.offset.x = this.initialOffset.x;
-            this.offset.y = this.initialOffset.y;
+            this.resetOffset();
         },
 
         /**
@@ -463,9 +471,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 +601,10 @@ var definePinchZoom = function () {
             return this.container.style.height = y + 'px';
         },
 
+        unsetContainerY: function () {
+            this.container.style.height = null;
+        },
+
         /**
          * Creates the expected html structure
          */
@@ -643,14 +659,15 @@ var definePinchZoom = function () {
 
             window.setTimeout((function () {
                 this.updatePlaned = false;
-                this.updateAspectRatio();
 
                 if (event && event.type === 'resize') {
-                    this.computeInitialOffset();
+                    this.updateAspectRatio();
+                    this.setupOffsets();
                 }
 
                 if (event && event.type === 'load') {
-                  this.setupInitialOffset();
+                  this.updateAspectRatio();
+                  this.setupOffsets();
                 }
 
                 var zoomFactor = this.getInitialZoomFactor() * this.zoomFactor,