vue-zoomer - npm Package Compare versions

Comparing version 0.3.8 to 0.3.9

dist/vue-zoomer.esm.js

@@ -1,2 +0,2 @@
-// vue-zoomer v0.3.8 - Jarvis Niu
+// vue-zoomer v0.3.9 - Jarvis Niu
 // https://github.com/jarvisniu/vue-zoomer
@@ -548,2 +548,3 @@
     pivot: { type: String, default: 'cursor' }, // other options: image-center
+    zoomingElastic: { type: Boolean, default: true },
     limitTranslation: { type: Boolean, default: true },
@@ -645,8 +646,13 @@ doubleClickToZoom: { type: Boolean, default: true },
       let newScale = this.scale * scaleDelta;
-       // damping
-      if (newScale < this.minScale || newScale > this.maxScale) {
-        let log = Math.log2(scaleDelta);
-        log *= 0.2;
-        scaleDelta = Math.pow(2, log);
-        newScale = this.scale * scaleDelta;
+      if (this.zoomingElastic) {
+        // damping
+        if (newScale < this.minScale || newScale > this.maxScale) {
+          let log = Math.log2(scaleDelta);
+          log *= 0.2;
+          scaleDelta = Math.pow(2, log);
+          newScale = this.scale * scaleDelta;
+        }
+      } else {
+        if (newScale < this.minScale) newScale = this.minScale;
+        else if (newScale > this.maxScale) newScale = this.maxScale;
       }
@@ -1054,7 +1060,7 @@ scaleDelta = newScale / this.scale;
     if (!inject) return
-    inject("data-v-5982b056_0", { source: ".vue-zoomer[data-v-5982b056] {\n  overflow: hidden;\n  transition: background-color 0.5s;\n}\n.zoomer[data-v-5982b056] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-5982b056] {\n  vertical-align: top;\n  user-drag: none;\n  -webkit-user-drag: none;\n  -moz-user-drag: none;\n}\n", map: undefined, media: undefined });
+    inject("data-v-33e6a267_0", { source: ".vue-zoomer[data-v-33e6a267] {\n  overflow: hidden;\n}\n.zoomer[data-v-33e6a267] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-33e6a267] {\n  vertical-align: top;\n  user-drag: none;\n  -webkit-user-drag: none;\n  -moz-user-drag: none;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-5982b056";
+  const __vue_scope_id__ = "data-v-33e6a267";
   /* module identifier */
@@ -1130,2 +1136,3 @@ const __vue_module_identifier__ = undefined;
 //
+//
 
@@ -1141,2 +1148,3 @@
     pivot: { type: String, default: 'cursor' },
+    zoomingElastic: { type: Boolean, default: true },
     limitTranslation: { type: Boolean, default: true },
@@ -1357,2 +1365,3 @@ doubleClickToZoom: { type: Boolean, default: true },
             pivot: _vm.pivot,
+            "zooming-elastic": _vm.zoomingElastic,
             "limit-translation": _vm.limitTranslation,
@@ -1401,7 +1410,7 @@ "double-click-to-zoom": _vm.doubleClickToZoom,
     if (!inject) return
-    inject("data-v-71adc9b0_0", { source: ".vue-zoomer-gallery[data-v-71adc9b0] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-71adc9b0] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-71adc9b0] {\n  transition: left 0.4s;\n}\n.slide[data-v-71adc9b0] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
+    inject("data-v-ea62d372_0", { source: ".vue-zoomer-gallery[data-v-ea62d372] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-ea62d372] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-ea62d372] {\n  transition: left 0.4s;\n}\n.slide[data-v-ea62d372] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$1 = "data-v-71adc9b0";
+  const __vue_scope_id__$1 = "data-v-ea62d372";
   /* module identifier */
@@ -1408,0 +1417,0 @@ const __vue_module_identifier__$1 = undefined;

dist/vue-zoomer.js

@@ -1,2 +0,2 @@
-// vue-zoomer v0.3.8 - Jarvis Niu
+// vue-zoomer v0.3.9 - Jarvis Niu
 // https://github.com/jarvisniu/vue-zoomer
@@ -554,2 +554,3 @@
 	    pivot: { type: String, default: 'cursor' }, // other options: image-center
+	    zoomingElastic: { type: Boolean, default: true },
 	    limitTranslation: { type: Boolean, default: true },
@@ -651,8 +652,13 @@ doubleClickToZoom: { type: Boolean, default: true },
 	      let newScale = this.scale * scaleDelta;
-	       // damping
-	      if (newScale < this.minScale || newScale > this.maxScale) {
-	        let log = Math.log2(scaleDelta);
-	        log *= 0.2;
-	        scaleDelta = Math.pow(2, log);
-	        newScale = this.scale * scaleDelta;
+	      if (this.zoomingElastic) {
+	        // damping
+	        if (newScale < this.minScale || newScale > this.maxScale) {
+	          let log = Math.log2(scaleDelta);
+	          log *= 0.2;
+	          scaleDelta = Math.pow(2, log);
+	          newScale = this.scale * scaleDelta;
+	        }
+	      } else {
+	        if (newScale < this.minScale) newScale = this.minScale;
+	        else if (newScale > this.maxScale) newScale = this.maxScale;
 	      }
@@ -1060,7 +1066,7 @@ scaleDelta = newScale / this.scale;
 	    if (!inject) return
-	    inject("data-v-5982b056_0", { source: ".vue-zoomer[data-v-5982b056] {\n  overflow: hidden;\n  transition: background-color 0.5s;\n}\n.zoomer[data-v-5982b056] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-5982b056] {\n  vertical-align: top;\n  user-drag: none;\n  -webkit-user-drag: none;\n  -moz-user-drag: none;\n}\n", map: undefined, media: undefined });
+	    inject("data-v-33e6a267_0", { source: ".vue-zoomer[data-v-33e6a267] {\n  overflow: hidden;\n}\n.zoomer[data-v-33e6a267] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-33e6a267] {\n  vertical-align: top;\n  user-drag: none;\n  -webkit-user-drag: none;\n  -moz-user-drag: none;\n}\n", map: undefined, media: undefined });
 
 	  };
 	  /* scoped */
-	  const __vue_scope_id__ = "data-v-5982b056";
+	  const __vue_scope_id__ = "data-v-33e6a267";
 	  /* module identifier */
@@ -1136,2 +1142,3 @@ const __vue_module_identifier__ = undefined;
 	//
+	//
 
@@ -1147,2 +1154,3 @@
 	    pivot: { type: String, default: 'cursor' },
+	    zoomingElastic: { type: Boolean, default: true },
 	    limitTranslation: { type: Boolean, default: true },
@@ -1363,2 +1371,3 @@ doubleClickToZoom: { type: Boolean, default: true },
 	            pivot: _vm.pivot,
+	            "zooming-elastic": _vm.zoomingElastic,
 	            "limit-translation": _vm.limitTranslation,
@@ -1407,7 +1416,7 @@ "double-click-to-zoom": _vm.doubleClickToZoom,
 	    if (!inject) return
-	    inject("data-v-71adc9b0_0", { source: ".vue-zoomer-gallery[data-v-71adc9b0] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-71adc9b0] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-71adc9b0] {\n  transition: left 0.4s;\n}\n.slide[data-v-71adc9b0] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
+	    inject("data-v-ea62d372_0", { source: ".vue-zoomer-gallery[data-v-ea62d372] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-ea62d372] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-ea62d372] {\n  transition: left 0.4s;\n}\n.slide[data-v-ea62d372] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
 
 	  };
 	  /* scoped */
-	  const __vue_scope_id__$1 = "data-v-71adc9b0";
+	  const __vue_scope_id__$1 = "data-v-ea62d372";
 	  /* module identifier */
@@ -1414,0 +1423,0 @@ const __vue_module_identifier__$1 = undefined;

dist/vue-zoomer.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).VueZoomer=e()}(this,(function(){"use strict";var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},e=/^\s+|\s+$/g,i=/^[-+]0x[0-9a-f]+$/i,n=/^0b[01]+$/i,o=/^0o[0-7]+$/i,s=parseInt,a="object"==typeof t&&t&&t.Object===Object&&t,r="object"==typeof self&&self&&self.Object===Object&&self,l=a||r||Function("return this")(),h=Object.prototype.toString,c=Math.max,u=Math.min,d=function(){return l.Date.now()};function m(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function f(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==h.call(t)}(t))return NaN;if(m(t)){var a="function"==typeof t.valueOf?t.valueOf():t;t=m(a)?a+"":a}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(e,"");var r=n.test(t);return r||o.test(t)?s(t.slice(2),r?2:8):i.test(t)?NaN:+t}function p(){let t=[],e=[];function i(t,e){t.forEach(t=>{t.call(null,e)})}this.onSingleTap=function(e){"function"!=typeof e||t.includes(e)||t.push(e)},this.onDoubleTap=function(t){"function"!=typeof t||e.includes(t)||e.push(t)},this.attach=function(t){t instanceof Element?(t.addEventListener("touchstart",h),t.addEventListener("touchmove",u),t.addEventListener("touchend",c),t.addEventListener("mousedown",d),t.addEventListener("mouseup",m),t.addEventListener("mousemove",f)):console.error("TapDetector.attach: arg must be an Element")},this.detach=function(t){t.removeEventListener("touchstart",h),t.removeEventListener("touchmove",u),t.removeEventListener("touchend",c),t.removeEventListener("mousedown",d),t.removeEventListener("mouseup",m),t.removeEventListener("mousemove",f)};let n=!1,o=0,s=0,a=0,r=0,l=0;function h(t){n=!0,1===t.touches.length&&p(t.touches[0].clientX,t.touches[0].clientY)}function c(t){0===t.touches.length&&v()}function u(t){1===t.touches.length&&g(t.touches[0].clientX,t.touches[0].clientY)}function d(t){n||p(t.clientX,t.clientY)}function m(t){n||v()}function f(t){n||0===t.button&&g(t.clientX,t.clientY)}function p(t,e){r=t,l=e,a=0}function v(){let n=Date.now();a<10&&(n-o<300?s+=1:s=1,o=Date.now(),i(t,{clientX:r,clientY:l}),2===s&&(i(e,{clientX:r,clientY:l}),s=0)),a=0}function g(t,e){let i=r-t,n=l-e,o=Math.sqrt(i*i+n*n);a+=o,r=t,l=e}}var v={props:{minScale:{type:Number,default:1},maxScale:{type:Number,default:5},zoomed:{type:Boolean,default:!1},resetTrigger:{type:Number,default:1e5},aspectRatio:{type:Number,default:1},backgroundColor:{type:String,default:"transparent"},pivot:{type:String,default:"cursor"},limitTranslation:{type:Boolean,default:!0},doubleClickToZoom:{type:Boolean,default:!0},mouseWheelToZoom:{type:Boolean,default:!0}},data:()=>({containerWidth:1,containerHeight:1,containerLeft:0,containerTop:0,translateX:0,animTranslateX:0,translateY:0,animTranslateY:0,scale:1,animScale:1,lastFullWheelTime:0,lastWheelTime:0,lastWheelDirection:"y",isPointerDown:!1,pointerPosX:-1,pointerPosY:-1,twoFingerInitDist:0,panLocked:!0,raf:null,tapDetector:null}),computed:{wrapperStyle(){return{transform:[`translate(${this.containerWidth*this.animTranslateX}px, ${this.containerHeight*this.animTranslateY}px)`,`scale(${this.animScale})`].join(" ")}}},watch:{scale(t){1!==t&&(this.$emit("update:zoomed",!0),this.panLocked=!1)},resetTrigger:"reset"},mounted(){this.tapDetector=new p,this.tapDetector.attach(this.$el),this.doubleClickToZoom&&this.tapDetector.onDoubleTap(this.onDoubleTap),window.addEventListener("resize",this.onWindowResize),this.onWindowResize(),this.refreshContainerPos(),this.loop()},destroyed(){this.tapDetector.detach(this.$el),window.removeEventListener("resize",this.onWindowResize),window.cancelAnimationFrame(this.raf)},methods:{reset(){this.scale=1,this.panLocked=!0,this.translateX=0,this.translateY=0},zoomIn(t=2){this.tryToScale(t),this.onInteractionEnd()},zoomOut(t=.5){this.tryToScale(t),this.onInteractionEnd()},tryToScale(t){let e=this.scale*t;if(e<this.minScale||e>this.maxScale){let i=Math.log2(t);i*=.2,t=Math.pow(2,i),e=this.scale*t}if(t=e/this.scale,this.scale=e,"image-center"!==this.pivot){let e=(this.pointerPosX-this.containerLeft)/this.containerWidth,i=(this.pointerPosY-this.containerTop)/this.containerHeight;this.translateX=(.5+this.translateX-e)*t+e-.5,this.translateY=(.5+this.translateY-i)*t+i-.5}},setPointerPosCenter(){this.pointerPosX=this.containerLeft+this.containerWidth/2,this.pointerPosY=this.containerTop+this.containerHeight/2},onPointerMove(t,e){if(this.isPointerDown){let i=t-this.pointerPosX,n=e-this.pointerPosY;this.panLocked||(this.translateX+=i/this.containerWidth,this.translateY+=n/this.containerHeight)}this.pointerPosX=t,this.pointerPosY=e},onInteractionEnd:function(t,e,i){var n,o,s,a,r,l,h=0,p=!1,v=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var i=n,s=o;return n=o=void 0,h=e,a=t.apply(s,i)}function w(t){return h=t,r=setTimeout(b,e),p?y(t):a}function T(t){var i=t-l;return void 0===l||i>=e||i<0||v&&t-h>=s}function b(){var t=d();if(T(t))return X(t);r=setTimeout(b,function(t){var i=e-(t-l);return v?u(i,s-(t-h)):i}(t))}function X(t){return r=void 0,g&&n?y(t):(n=o=void 0,a)}function P(){var t=d(),i=T(t);if(n=arguments,o=this,l=t,i){if(void 0===r)return w(l);if(v)return r=setTimeout(b,e),y(l)}return void 0===r&&(r=setTimeout(b,e)),a}return e=f(e)||0,m(i)&&(p=!!i.leading,s=(v="maxWait"in i)?c(f(i.maxWait)||0,e):s,g="trailing"in i?!!i.trailing:g),P.cancel=function(){void 0!==r&&clearTimeout(r),h=0,n=l=o=r=void 0},P.flush=function(){return void 0===r?a:X(d())},P}((function(){this.limit(),this.panLocked=1===this.scale,this.$emit("update:zoomed",!this.panLocked)}),100),limit(){if(this.scale<this.minScale?this.scale=this.minScale:this.scale>this.maxScale&&this.tryToScale(this.maxScale/this.scale),this.limitTranslation){let t=this.calcTranslateLimit();Math.abs(this.translateX)>t.x&&(this.translateX*=t.x/Math.abs(this.translateX)),Math.abs(this.translateY)>t.y&&(this.translateY*=t.y/Math.abs(this.translateY))}},calcTranslateLimit(){if("y"===this.getMarginDirection()){let t=this.containerWidth/this.aspectRatio/this.containerHeight,e=(this.scale*t-1)/2;return e<0&&(e=0),{x:(this.scale-1)/2,y:e}}{let t=this.containerHeight*this.aspectRatio/this.containerWidth,e=(this.scale*t-1)/2;return e<0&&(e=0),{x:e,y:(this.scale-1)/2}}},getMarginDirection(){return this.containerWidth/this.containerHeight>this.aspectRatio?"x":"y"},onDoubleTap(t){1===this.scale?(t.clientX>0&&(this.pointerPosX=t.clientX,this.pointerPosY=t.clientY),this.tryToScale(Math.min(3,this.maxScale))):this.reset(),this.onInteractionEnd()},onWindowResize(){let t=window.getComputedStyle(this.$el);this.containerWidth=parseFloat(t.width),this.containerHeight=parseFloat(t.height),this.setPointerPosCenter(),this.limit()},refreshContainerPos(){let t=this.$el.getBoundingClientRect();this.containerLeft=t.left,this.containerTop=t.top},loop(){this.animScale=this.gainOn(this.animScale,this.scale),this.animTranslateX=this.gainOn(this.animTranslateX,this.translateX),this.animTranslateY=this.gainOn(this.animTranslateY,this.translateY),this.raf=window.requestAnimationFrame(this.loop)},gainOn(t,e){let i=.3*(e-t);return Math.abs(i)>1e-5?t+i:e},onMouseWheel(t){if(!this.mouseWheelToZoom)return;t.preventDefault(),t.detail&&(t.wheelDelta=-10*t.detail);let e=Date.now();120===Math.abs(t.wheelDelta)?e-this.lastFullWheelTime>50&&(this.onMouseWheelDo(t.wheelDelta),this.lastFullWheelTime=e):(e-this.lastWheelTime>50&&"number"==typeof t.deltaX&&(this.lastWheelDirection=0==t.detail&&Math.abs(t.deltaX)>Math.abs(t.deltaY)?"x":"y","x"===this.lastWheelDirection&&this.$emit("swipe",t.deltaX>0?"left":"right")),"y"===this.lastWheelDirection&&this.onMouseWheelDo(t.wheelDelta)),this.lastWheelTime=e},onMouseWheelDo(t){let e=Math.pow(1.25,t/120);this.tryToScale(e),this.onInteractionEnd()},onMouseDown(t){this.refreshContainerPos(),this.isPointerDown=!0,this.pointerPosX=t.clientX,this.pointerPosY=t.clientY},onMouseUp(t){this.isPointerDown=!1,this.onInteractionEnd()},onMouseMove(t){this.onPointerMove(t.clientX,t.clientY)},onTouchStart(t){if(1===t.touches.length)this.refreshContainerPos(),this.pointerPosX=t.touches[0].clientX,this.pointerPosY=t.touches[0].clientY,this.isPointerDown=!0;else if(2===t.touches.length){this.isPointerDown=!0,this.pointerPosX=(t.touches[0].clientX+t.touches[1].clientX)/2,this.pointerPosY=(t.touches[0].clientY+t.touches[1].clientY)/2;let e=t.touches[0].clientX-t.touches[1].clientX,i=t.touches[0].clientY-t.touches[1].clientY;this.twoFingerInitDist=Math.sqrt(e*e+i*i)}},onTouchEnd(t){0===t.touches.length?(this.isPointerDown=!1,Math.abs(this.scale-1)<.1&&(this.scale=1),this.onInteractionEnd()):1===t.touches.length&&(this.pointerPosX=t.touches[0].clientX,this.pointerPosY=t.touches[0].clientY)},onTouchMove(t){if(1===t.touches.length)this.onPointerMove(t.touches[0].clientX,t.touches[0].clientY);else if(2===t.touches.length){let e=(t.touches[0].clientX+t.touches[1].clientX)/2,i=(t.touches[0].clientY+t.touches[1].clientY)/2;this.onPointerMove(e,i),this.pointerPosX=e,this.pointerPosY=i;let n=t.touches[0].clientX-t.touches[1].clientX,o=t.touches[0].clientY-t.touches[1].clientY,s=Math.sqrt(n*n+o*o);this.tryToScale(s/this.twoFingerInitDist),this.twoFingerInitDist=s}}}};var g,y=function(t,e,i,n,o,s,a,r,l,h){"boolean"!=typeof a&&(l=r,r=a,a=!1);var c,u="function"==typeof i?i.options:i;if(t&&t.render&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0,o&&(u.functional=!0)),n&&(u._scopeId=n),s?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(s)},u._ssrRegister=c):e&&(c=a?function(){e.call(this,h(this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),c)if(u.functional){var d=u.render;u.render=function(t,e){return c.call(e),d(t,e)}}else{var m=u.beforeCreate;u.beforeCreate=m?[].concat(m,c):[c]}return i},w="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var T={};var b=function(t){return function(t,e){return function(t,e){var i=w?e.media||"default":t,n=T[i]||(T[i]={ids:new Set,styles:[]});if(!n.ids.has(t)){n.ids.add(t);var o=e.source;if(e.map&&(o+="\n/*# sourceURL="+e.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",e.media&&n.element.setAttribute("media",e.media),void 0===g&&(g=document.head||document.getElementsByTagName("head")[0]),g.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(o),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{var s=n.ids.size-1,a=document.createTextNode(o),r=n.element.childNodes;r[s]&&n.element.removeChild(r[s]),r.length?n.element.insertBefore(a,r[s]):n.element.appendChild(a)}}}(t,e)}};const X=v;var P=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"vue-zoomer",style:{backgroundColor:t.backgroundColor},on:{mousewheel:t.onMouseWheel,DOMMouseScroll:t.onMouseWheel,mousedown:t.onMouseDown,mouseup:t.onMouseUp,mousemove:t.onMouseMove,mouseout:t.setPointerPosCenter,touchstart:t.onTouchStart,touchend:t.onTouchEnd,touchmove:t.onTouchMove}},[i("div",{staticClass:"zoomer",style:t.wrapperStyle},[t._t("default")],2)])};P._withStripped=!0;const S=y({render:P,staticRenderFns:[]},(function(t){t&&t("data-v-5982b056_0",{source:".vue-zoomer[data-v-5982b056] {\n  overflow: hidden;\n  transition: background-color 0.5s;\n}\n.zoomer[data-v-5982b056] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-5982b056] {\n  vertical-align: top;\n  user-drag: none;\n  -webkit-user-drag: none;\n  -moz-user-drag: none;\n}\n",map:void 0,media:void 0})}),X,"data-v-5982b056",!1,void 0,!1,b,void 0,void 0);const M={props:{value:{type:Number,required:!0},list:{type:Array,required:!0},backgroundColor:{type:String,default:"#333"},pivot:{type:String,default:"cursor"},limitTranslation:{type:Boolean,default:!0},doubleClickToZoom:{type:Boolean,default:!0},mouseWheelToZoom:{type:Boolean,default:!0}},data(){return{containerWidth:1,containerHeight:1,selIndex:this.value,animSelIndex:this.value,currentZoomed:!1,autoSliding:!1,imageAspectRatios:[],isPointerDown:!1,lastPointerX:0,slideOffsetX:0}},computed:{middleStyle(){return{left:0+this.slideOffsetX+"px"}},leftStyle(){return{left:-this.containerWidth+this.slideOffsetX+"px"}},rightStyle(){return{left:this.containerWidth+this.slideOffsetX+"px"}},slideThresh(){return Math.max(50,.1*this.containerWidth)}},watch:{value(t){t!==this.animSelIndex&&(this.selIndex=t,this.animSelIndex=t)},selIndex(){this.$nextTick(()=>{this.$refs.zoomers.forEach(t=>{t.refreshContainerPos()})})}},mounted(){window.addEventListener("resize",this.onWindowResize),this.onWindowResize()},destroyed(){window.removeEventListener("resize",this.onWindowResize)},methods:{reset(){this.$refs.zoomers.forEach(t=>{t.reset()})},zoomIn(t){this.$refs.zoomers[1]&&this.$refs.zoomers[1].zoomIn(t)},zoomOut(t){this.$refs.zoomers[1]&&this.$refs.zoomers[1].zoomOut(t)},onWindowResize(){let t=window.getComputedStyle(this.$el);this.containerWidth=parseFloat(t.width),this.containerHeight=parseFloat(t.height)},onPointerMove(t){if(this.isPointerDown&&!this.currentZoomed){let e=0===this.selIndex&&t>0&&this.slideOffsetX+t>0||this.selIndex===this.list.length-1&&t<0&&this.slideOffsetX+t<0?.3:1;this.slideOffsetX+=t*e}},onPointerUp(){this.slideOffsetX<-this.slideThresh?this.paginate(1):this.slideOffsetX>this.slideThresh?this.paginate(-1):this.paginate(0)},onImageDragStart:t=>(t.preventDefault(),!1),paginate(t){let e=this.selIndex+t;e<0||e>=this.list.length?this.slideOffsetX=0:(this.slideOffsetX=this.containerWidth*-t,this.autoSliding=!0,this.$emit("input",e),this.animSelIndex=e,setTimeout(()=>{this.selIndex=e,this.slideOffsetX=0,this.autoSliding=!1},400))},onMouseDown(t){this.isPointerDown=!0,this.lastPointerX=t.clientX},onMouseUp(t){this.isPointerDown=!1,this.onPointerUp()},onMouseMove(t){this.isPointerDown&&(this.onPointerMove(t.clientX-this.lastPointerX),this.lastPointerX=t.clientX)},onTouchStart(t){1===t.touches.length&&(this.isPointerDown=!0,this.lastPointerX=t.touches[0].clientX)},onTouchEnd(t){0===t.touches.length&&(this.isPointerDown=!1,this.onPointerUp())},onTouchMove(t){1===t.touches.length&&(this.onPointerMove(t.touches[0].clientX-this.lastPointerX),this.lastPointerX=t.touches[0].clientX)},onImageLoad(t,e){let i=e.target.naturalWidth/e.target.naturalHeight;this.$set(this.imageAspectRatios,t,i)},onImageSwipe(t){this.paginate("right"==t?-1:1)}}};var D=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"vue-zoomer-gallery",class:{anim:t.autoSliding&&!t.isPointerDown},style:{"background-color":t.backgroundColor},on:{mousemove:t.onMouseMove,mousedown:t.onMouseDown,mouseout:t.onMouseUp,mouseup:t.onMouseUp,touchstart:t.onTouchStart,touchend:t.onTouchEnd,touchmove:function(e){return e.preventDefault(),t.onTouchMove(e)}}},t._l(3,(function(e,n){return i("v-zoomer",{key:n+"-"+t.selIndex,ref:"zoomers",refInFor:!0,staticClass:"slide",class:["left","middle","right"][n],style:[t.leftStyle,t.middleStyle,t.rightStyle][n],attrs:{"max-scale":10,zoomed:t.currentZoomed,"reset-trigger":n,"aspect-ratio":t.imageAspectRatios[t.selIndex+n-1]||1,pivot:t.pivot,"limit-translation":t.limitTranslation,"double-click-to-zoom":t.doubleClickToZoom,"mouse-wheel-to-zoom":t.mouseWheelToZoom},on:{"update:zoomed":function(e){t.currentZoomed=e},swipe:t.onImageSwipe}},[t.selIndex+n-1>-1&&t.selIndex+n-1<t.list.length?i("img",{staticStyle:{"object-fit":"contain",width:"100%",height:"100%"},attrs:{src:t.list[t.selIndex+n-1],draggable:"false"},on:{load:function(e){return t.onImageLoad(t.selIndex+n-1,e)},dragstart:t.onImageDragStart}}):t._e()])})),1)};D._withStripped=!0;const x=y({render:D,staticRenderFns:[]},(function(t){t&&t("data-v-71adc9b0_0",{source:".vue-zoomer-gallery[data-v-71adc9b0] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-71adc9b0] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-71adc9b0] {\n  transition: left 0.4s;\n}\n.slide[data-v-71adc9b0] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n",map:void 0,media:void 0})}),M,"data-v-71adc9b0",!1,void 0,!1,b,void 0,void 0);return{install(t){t.component("VZoomer",S),t.component("VZoomerGallery",x)}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VueZoomer=t()}(this,(function(){"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t=/^\s+|\s+$/g,i=/^[-+]0x[0-9a-f]+$/i,n=/^0b[01]+$/i,o=/^0o[0-7]+$/i,s=parseInt,a="object"==typeof e&&e&&e.Object===Object&&e,r="object"==typeof self&&self&&self.Object===Object&&self,l=a||r||Function("return this")(),h=Object.prototype.toString,c=Math.max,u=Math.min,d=function(){return l.Date.now()};function m(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function f(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==h.call(e)}(e))return NaN;if(m(e)){var a="function"==typeof e.valueOf?e.valueOf():e;e=m(a)?a+"":a}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(t,"");var r=n.test(e);return r||o.test(e)?s(e.slice(2),r?2:8):i.test(e)?NaN:+e}function p(){let e=[],t=[];function i(e,t){e.forEach(e=>{e.call(null,t)})}this.onSingleTap=function(t){"function"!=typeof t||e.includes(t)||e.push(t)},this.onDoubleTap=function(e){"function"!=typeof e||t.includes(e)||t.push(e)},this.attach=function(e){e instanceof Element?(e.addEventListener("touchstart",h),e.addEventListener("touchmove",u),e.addEventListener("touchend",c),e.addEventListener("mousedown",d),e.addEventListener("mouseup",m),e.addEventListener("mousemove",f)):console.error("TapDetector.attach: arg must be an Element")},this.detach=function(e){e.removeEventListener("touchstart",h),e.removeEventListener("touchmove",u),e.removeEventListener("touchend",c),e.removeEventListener("mousedown",d),e.removeEventListener("mouseup",m),e.removeEventListener("mousemove",f)};let n=!1,o=0,s=0,a=0,r=0,l=0;function h(e){n=!0,1===e.touches.length&&p(e.touches[0].clientX,e.touches[0].clientY)}function c(e){0===e.touches.length&&g()}function u(e){1===e.touches.length&&v(e.touches[0].clientX,e.touches[0].clientY)}function d(e){n||p(e.clientX,e.clientY)}function m(e){n||g()}function f(e){n||0===e.button&&v(e.clientX,e.clientY)}function p(e,t){r=e,l=t,a=0}function g(){let n=Date.now();a<10&&(n-o<300?s+=1:s=1,o=Date.now(),i(e,{clientX:r,clientY:l}),2===s&&(i(t,{clientX:r,clientY:l}),s=0)),a=0}function v(e,t){let i=r-e,n=l-t,o=Math.sqrt(i*i+n*n);a+=o,r=e,l=t}}var g={props:{minScale:{type:Number,default:1},maxScale:{type:Number,default:5},zoomed:{type:Boolean,default:!1},resetTrigger:{type:Number,default:1e5},aspectRatio:{type:Number,default:1},backgroundColor:{type:String,default:"transparent"},pivot:{type:String,default:"cursor"},zoomingElastic:{type:Boolean,default:!0},limitTranslation:{type:Boolean,default:!0},doubleClickToZoom:{type:Boolean,default:!0},mouseWheelToZoom:{type:Boolean,default:!0}},data:()=>({containerWidth:1,containerHeight:1,containerLeft:0,containerTop:0,translateX:0,animTranslateX:0,translateY:0,animTranslateY:0,scale:1,animScale:1,lastFullWheelTime:0,lastWheelTime:0,lastWheelDirection:"y",isPointerDown:!1,pointerPosX:-1,pointerPosY:-1,twoFingerInitDist:0,panLocked:!0,raf:null,tapDetector:null}),computed:{wrapperStyle(){return{transform:[`translate(${this.containerWidth*this.animTranslateX}px, ${this.containerHeight*this.animTranslateY}px)`,`scale(${this.animScale})`].join(" ")}}},watch:{scale(e){1!==e&&(this.$emit("update:zoomed",!0),this.panLocked=!1)},resetTrigger:"reset"},mounted(){this.tapDetector=new p,this.tapDetector.attach(this.$el),this.doubleClickToZoom&&this.tapDetector.onDoubleTap(this.onDoubleTap),window.addEventListener("resize",this.onWindowResize),this.onWindowResize(),this.refreshContainerPos(),this.loop()},destroyed(){this.tapDetector.detach(this.$el),window.removeEventListener("resize",this.onWindowResize),window.cancelAnimationFrame(this.raf)},methods:{reset(){this.scale=1,this.panLocked=!0,this.translateX=0,this.translateY=0},zoomIn(e=2){this.tryToScale(e),this.onInteractionEnd()},zoomOut(e=.5){this.tryToScale(e),this.onInteractionEnd()},tryToScale(e){let t=this.scale*e;if(this.zoomingElastic){if(t<this.minScale||t>this.maxScale){let i=Math.log2(e);i*=.2,e=Math.pow(2,i),t=this.scale*e}}else t<this.minScale?t=this.minScale:t>this.maxScale&&(t=this.maxScale);if(e=t/this.scale,this.scale=t,"image-center"!==this.pivot){let t=(this.pointerPosX-this.containerLeft)/this.containerWidth,i=(this.pointerPosY-this.containerTop)/this.containerHeight;this.translateX=(.5+this.translateX-t)*e+t-.5,this.translateY=(.5+this.translateY-i)*e+i-.5}},setPointerPosCenter(){this.pointerPosX=this.containerLeft+this.containerWidth/2,this.pointerPosY=this.containerTop+this.containerHeight/2},onPointerMove(e,t){if(this.isPointerDown){let i=e-this.pointerPosX,n=t-this.pointerPosY;this.panLocked||(this.translateX+=i/this.containerWidth,this.translateY+=n/this.containerHeight)}this.pointerPosX=e,this.pointerPosY=t},onInteractionEnd:function(e,t,i){var n,o,s,a,r,l,h=0,p=!1,g=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function y(t){var i=n,s=o;return n=o=void 0,h=t,a=e.apply(s,i)}function w(e){return h=e,r=setTimeout(X,t),p?y(e):a}function T(e){var i=e-l;return void 0===l||i>=t||i<0||g&&e-h>=s}function X(){var e=d();if(T(e))return S(e);r=setTimeout(X,function(e){var i=t-(e-l);return g?u(i,s-(e-h)):i}(e))}function S(e){return r=void 0,v&&n?y(e):(n=o=void 0,a)}function b(){var e=d(),i=T(e);if(n=arguments,o=this,l=e,i){if(void 0===r)return w(l);if(g)return r=setTimeout(X,t),y(l)}return void 0===r&&(r=setTimeout(X,t)),a}return t=f(t)||0,m(i)&&(p=!!i.leading,s=(g="maxWait"in i)?c(f(i.maxWait)||0,t):s,v="trailing"in i?!!i.trailing:v),b.cancel=function(){void 0!==r&&clearTimeout(r),h=0,n=l=o=r=void 0},b.flush=function(){return void 0===r?a:S(d())},b}((function(){this.limit(),this.panLocked=1===this.scale,this.$emit("update:zoomed",!this.panLocked)}),100),limit(){if(this.scale<this.minScale?this.scale=this.minScale:this.scale>this.maxScale&&this.tryToScale(this.maxScale/this.scale),this.limitTranslation){let e=this.calcTranslateLimit();Math.abs(this.translateX)>e.x&&(this.translateX*=e.x/Math.abs(this.translateX)),Math.abs(this.translateY)>e.y&&(this.translateY*=e.y/Math.abs(this.translateY))}},calcTranslateLimit(){if("y"===this.getMarginDirection()){let e=this.containerWidth/this.aspectRatio/this.containerHeight,t=(this.scale*e-1)/2;return t<0&&(t=0),{x:(this.scale-1)/2,y:t}}{let e=this.containerHeight*this.aspectRatio/this.containerWidth,t=(this.scale*e-1)/2;return t<0&&(t=0),{x:t,y:(this.scale-1)/2}}},getMarginDirection(){return this.containerWidth/this.containerHeight>this.aspectRatio?"x":"y"},onDoubleTap(e){1===this.scale?(e.clientX>0&&(this.pointerPosX=e.clientX,this.pointerPosY=e.clientY),this.tryToScale(Math.min(3,this.maxScale))):this.reset(),this.onInteractionEnd()},onWindowResize(){let e=window.getComputedStyle(this.$el);this.containerWidth=parseFloat(e.width),this.containerHeight=parseFloat(e.height),this.setPointerPosCenter(),this.limit()},refreshContainerPos(){let e=this.$el.getBoundingClientRect();this.containerLeft=e.left,this.containerTop=e.top},loop(){this.animScale=this.gainOn(this.animScale,this.scale),this.animTranslateX=this.gainOn(this.animTranslateX,this.translateX),this.animTranslateY=this.gainOn(this.animTranslateY,this.translateY),this.raf=window.requestAnimationFrame(this.loop)},gainOn(e,t){let i=.3*(t-e);return Math.abs(i)>1e-5?e+i:t},onMouseWheel(e){if(!this.mouseWheelToZoom)return;e.preventDefault(),e.detail&&(e.wheelDelta=-10*e.detail);let t=Date.now();120===Math.abs(e.wheelDelta)?t-this.lastFullWheelTime>50&&(this.onMouseWheelDo(e.wheelDelta),this.lastFullWheelTime=t):(t-this.lastWheelTime>50&&"number"==typeof e.deltaX&&(this.lastWheelDirection=0==e.detail&&Math.abs(e.deltaX)>Math.abs(e.deltaY)?"x":"y","x"===this.lastWheelDirection&&this.$emit("swipe",e.deltaX>0?"left":"right")),"y"===this.lastWheelDirection&&this.onMouseWheelDo(e.wheelDelta)),this.lastWheelTime=t},onMouseWheelDo(e){let t=Math.pow(1.25,e/120);this.tryToScale(t),this.onInteractionEnd()},onMouseDown(e){this.refreshContainerPos(),this.isPointerDown=!0,this.pointerPosX=e.clientX,this.pointerPosY=e.clientY},onMouseUp(e){this.isPointerDown=!1,this.onInteractionEnd()},onMouseMove(e){this.onPointerMove(e.clientX,e.clientY)},onTouchStart(e){if(1===e.touches.length)this.refreshContainerPos(),this.pointerPosX=e.touches[0].clientX,this.pointerPosY=e.touches[0].clientY,this.isPointerDown=!0;else if(2===e.touches.length){this.isPointerDown=!0,this.pointerPosX=(e.touches[0].clientX+e.touches[1].clientX)/2,this.pointerPosY=(e.touches[0].clientY+e.touches[1].clientY)/2;let t=e.touches[0].clientX-e.touches[1].clientX,i=e.touches[0].clientY-e.touches[1].clientY;this.twoFingerInitDist=Math.sqrt(t*t+i*i)}},onTouchEnd(e){0===e.touches.length?(this.isPointerDown=!1,Math.abs(this.scale-1)<.1&&(this.scale=1),this.onInteractionEnd()):1===e.touches.length&&(this.pointerPosX=e.touches[0].clientX,this.pointerPosY=e.touches[0].clientY)},onTouchMove(e){if(1===e.touches.length)this.onPointerMove(e.touches[0].clientX,e.touches[0].clientY);else if(2===e.touches.length){let t=(e.touches[0].clientX+e.touches[1].clientX)/2,i=(e.touches[0].clientY+e.touches[1].clientY)/2;this.onPointerMove(t,i),this.pointerPosX=t,this.pointerPosY=i;let n=e.touches[0].clientX-e.touches[1].clientX,o=e.touches[0].clientY-e.touches[1].clientY,s=Math.sqrt(n*n+o*o);this.tryToScale(s/this.twoFingerInitDist),this.twoFingerInitDist=s}}}};var v,y=function(e,t,i,n,o,s,a,r,l,h){"boolean"!=typeof a&&(l=r,r=a,a=!1);var c,u="function"==typeof i?i.options:i;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,o&&(u.functional=!0)),n&&(u._scopeId=n),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},u._ssrRegister=c):t&&(c=a?function(){t.call(this,h(this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),c)if(u.functional){var d=u.render;u.render=function(e,t){return c.call(t),d(e,t)}}else{var m=u.beforeCreate;u.beforeCreate=m?[].concat(m,c):[c]}return i},w="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var T={};var X=function(e){return function(e,t){return function(e,t){var i=w?t.media||"default":e,n=T[i]||(T[i]={ids:new Set,styles:[]});if(!n.ids.has(e)){n.ids.add(e);var o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",t.media&&n.element.setAttribute("media",t.media),void 0===v&&(v=document.head||document.getElementsByTagName("head")[0]),v.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(o),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{var s=n.ids.size-1,a=document.createTextNode(o),r=n.element.childNodes;r[s]&&n.element.removeChild(r[s]),r.length?n.element.insertBefore(a,r[s]):n.element.appendChild(a)}}}(e,t)}};const S=g;var b=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"vue-zoomer",style:{backgroundColor:e.backgroundColor},on:{mousewheel:e.onMouseWheel,DOMMouseScroll:e.onMouseWheel,mousedown:e.onMouseDown,mouseup:e.onMouseUp,mousemove:e.onMouseMove,mouseout:e.setPointerPosCenter,touchstart:e.onTouchStart,touchend:e.onTouchEnd,touchmove:e.onTouchMove}},[i("div",{staticClass:"zoomer",style:e.wrapperStyle},[e._t("default")],2)])};b._withStripped=!0;const P=y({render:b,staticRenderFns:[]},(function(e){e&&e("data-v-33e6a267_0",{source:".vue-zoomer[data-v-33e6a267] {\n  overflow: hidden;\n}\n.zoomer[data-v-33e6a267] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-33e6a267] {\n  vertical-align: top;\n  user-drag: none;\n  -webkit-user-drag: none;\n  -moz-user-drag: none;\n}\n",map:void 0,media:void 0})}),S,"data-v-33e6a267",!1,void 0,!1,X,void 0,void 0);const M={props:{value:{type:Number,required:!0},list:{type:Array,required:!0},backgroundColor:{type:String,default:"#333"},pivot:{type:String,default:"cursor"},zoomingElastic:{type:Boolean,default:!0},limitTranslation:{type:Boolean,default:!0},doubleClickToZoom:{type:Boolean,default:!0},mouseWheelToZoom:{type:Boolean,default:!0}},data(){return{containerWidth:1,containerHeight:1,selIndex:this.value,animSelIndex:this.value,currentZoomed:!1,autoSliding:!1,imageAspectRatios:[],isPointerDown:!1,lastPointerX:0,slideOffsetX:0}},computed:{middleStyle(){return{left:0+this.slideOffsetX+"px"}},leftStyle(){return{left:-this.containerWidth+this.slideOffsetX+"px"}},rightStyle(){return{left:this.containerWidth+this.slideOffsetX+"px"}},slideThresh(){return Math.max(50,.1*this.containerWidth)}},watch:{value(e){e!==this.animSelIndex&&(this.selIndex=e,this.animSelIndex=e)},selIndex(){this.$nextTick(()=>{this.$refs.zoomers.forEach(e=>{e.refreshContainerPos()})})}},mounted(){window.addEventListener("resize",this.onWindowResize),this.onWindowResize()},destroyed(){window.removeEventListener("resize",this.onWindowResize)},methods:{reset(){this.$refs.zoomers.forEach(e=>{e.reset()})},zoomIn(e){this.$refs.zoomers[1]&&this.$refs.zoomers[1].zoomIn(e)},zoomOut(e){this.$refs.zoomers[1]&&this.$refs.zoomers[1].zoomOut(e)},onWindowResize(){let e=window.getComputedStyle(this.$el);this.containerWidth=parseFloat(e.width),this.containerHeight=parseFloat(e.height)},onPointerMove(e){if(this.isPointerDown&&!this.currentZoomed){let t=0===this.selIndex&&e>0&&this.slideOffsetX+e>0||this.selIndex===this.list.length-1&&e<0&&this.slideOffsetX+e<0?.3:1;this.slideOffsetX+=e*t}},onPointerUp(){this.slideOffsetX<-this.slideThresh?this.paginate(1):this.slideOffsetX>this.slideThresh?this.paginate(-1):this.paginate(0)},onImageDragStart:e=>(e.preventDefault(),!1),paginate(e){let t=this.selIndex+e;t<0||t>=this.list.length?this.slideOffsetX=0:(this.slideOffsetX=this.containerWidth*-e,this.autoSliding=!0,this.$emit("input",t),this.animSelIndex=t,setTimeout(()=>{this.selIndex=t,this.slideOffsetX=0,this.autoSliding=!1},400))},onMouseDown(e){this.isPointerDown=!0,this.lastPointerX=e.clientX},onMouseUp(e){this.isPointerDown=!1,this.onPointerUp()},onMouseMove(e){this.isPointerDown&&(this.onPointerMove(e.clientX-this.lastPointerX),this.lastPointerX=e.clientX)},onTouchStart(e){1===e.touches.length&&(this.isPointerDown=!0,this.lastPointerX=e.touches[0].clientX)},onTouchEnd(e){0===e.touches.length&&(this.isPointerDown=!1,this.onPointerUp())},onTouchMove(e){1===e.touches.length&&(this.onPointerMove(e.touches[0].clientX-this.lastPointerX),this.lastPointerX=e.touches[0].clientX)},onImageLoad(e,t){let i=t.target.naturalWidth/t.target.naturalHeight;this.$set(this.imageAspectRatios,e,i)},onImageSwipe(e){this.paginate("right"==e?-1:1)}}};var D=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"vue-zoomer-gallery",class:{anim:e.autoSliding&&!e.isPointerDown},style:{"background-color":e.backgroundColor},on:{mousemove:e.onMouseMove,mousedown:e.onMouseDown,mouseout:e.onMouseUp,mouseup:e.onMouseUp,touchstart:e.onTouchStart,touchend:e.onTouchEnd,touchmove:function(t){return t.preventDefault(),e.onTouchMove(t)}}},e._l(3,(function(t,n){return i("v-zoomer",{key:n+"-"+e.selIndex,ref:"zoomers",refInFor:!0,staticClass:"slide",class:["left","middle","right"][n],style:[e.leftStyle,e.middleStyle,e.rightStyle][n],attrs:{"max-scale":10,zoomed:e.currentZoomed,"reset-trigger":n,"aspect-ratio":e.imageAspectRatios[e.selIndex+n-1]||1,pivot:e.pivot,"zooming-elastic":e.zoomingElastic,"limit-translation":e.limitTranslation,"double-click-to-zoom":e.doubleClickToZoom,"mouse-wheel-to-zoom":e.mouseWheelToZoom},on:{"update:zoomed":function(t){e.currentZoomed=t},swipe:e.onImageSwipe}},[e.selIndex+n-1>-1&&e.selIndex+n-1<e.list.length?i("img",{staticStyle:{"object-fit":"contain",width:"100%",height:"100%"},attrs:{src:e.list[e.selIndex+n-1],draggable:"false"},on:{load:function(t){return e.onImageLoad(e.selIndex+n-1,t)},dragstart:e.onImageDragStart}}):e._e()])})),1)};D._withStripped=!0;const x=y({render:D,staticRenderFns:[]},(function(e){e&&e("data-v-ea62d372_0",{source:".vue-zoomer-gallery[data-v-ea62d372] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-ea62d372] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-ea62d372] {\n  transition: left 0.4s;\n}\n.slide[data-v-ea62d372] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n",map:void 0,media:void 0})}),M,"data-v-ea62d372",!1,void 0,!1,X,void 0,void 0);return{install(e){e.component("VZoomer",P),e.component("VZoomerGallery",x)}}}));

package.json

 {
   "name": "vue-zoomer",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Zoom the image or other thing with mouse or touch",
@@ -5,0 +5,0 @@ "main": "dist/vue-zoomer.min.js",

README.md

@@ -56,2 +56,3 @@ # vue-zoomer
 - `pivot: 'cursor' | 'image-center'` - The pivot when zoom the content, default is `cursor`, can set to be `image-center`;
+- `zoomingElastic: boolean` - Whether to use the elastic effect when reaching the max/min zooming bounds, default is `true`;
 - `limitTranslation: boolean` - Whether to limit the content into the container, default is `true`;
@@ -71,6 +72,7 @@ - `doubleClickToZoom: boolean` - Whether to zoom in/out the content by double click, default is `true`;
 - `v-model(value): number required` - Index of current showing image;
-- `pivot: 'cursor' | 'image-center'` - The pivot when zoom the image, default is `cursor`, can set to be `image-center`;
-- `limitTranslation: boolean` - Whether to limit the image into the container, default is `true`;
-- `doubleClickToZoom: boolean` - Whether to zoom in/out the image by double click, default is `true`;
-- `mouseWheelToZoom: boolean` - Whether to zoom in/out the image by mouse wheel, default is `true`;
+- `pivot: 'cursor' | 'image-center'` - Same as above;
+- `zoomingElastic: boolean` - Same as above;
+- `limitTranslation: boolean` - Same as above;
+- `doubleClickToZoom: boolean` - Same as above;
+- `mouseWheelToZoom: boolean` - Same as above;
 
@@ -77,0 +79,0 @@ ### <v-zoomer-gallery> Methods

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2444130

increased by0.09%

Lines of code

3432

increased by0.56%

Number of lines in readme file

86

increased by2.38%

No dependency changes