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 f5cc13a..c0986a0 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(); @@ -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 index 5fd937a..f0335ec 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(); @@ -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,