vue-zoomer - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/vue-zoomer.js

@@ -5,5 +5,5 @@ parcelRequire=function(e,r,n,t){var i="function"==typeof parcelRequire&&parcelRequire,o="function"==typeof require&&require;function u(n,t){if(!r[n]){if(!e[n]){var f="function"==typeof parcelRequire&&parcelRequire;if(!t&&f)return f(n,!0);if(i)return i(n,!0);if(o&&"string"==typeof n)return o(n);var c=new Error("Cannot find module '"+n+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[n][1][r]||r},p.cache={};var l=r[n]=new u.Module(n);e[n][0].call(l.exports,p,l,l.exports,this)}return r[n].exports;function p(e){return u(p.resolve(e))}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.exports={}},u.modules=e,u.cache=r,u.parent=i,u.register=function(r,n){e[r]=[function(e,r){r.exports=n},{}]};for(var f=0;f<n.length;f++)u(n[f]);if(n.length){var c=u(n[n.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd?define(function(){return c}):t&&(this[t]=c)}return u}({"4PZ+":[function(require,module,exports) {
 },{}],"li1N":[function(require,module,exports) {
-"use strict";function e(){var e=[],t=[];function n(e){e.forEach(function(e){e.apply()})}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",r),e.addEventListener("touchmove",v),e.addEventListener("touchend",a),e.addEventListener("mousedown",h),e.addEventListener("mouseup",f),e.addEventListener("mousemove",d)):console.error("TapDetector.attach: arg must be an Element")},this.detach=function(e){e.removeEventListener("touchstart",r),e.removeEventListener("touchmove",v),e.removeEventListener("touchend",a),e.removeEventListener("mousedown",h),e.removeEventListener("mouseup",f),e.removeEventListener("mousemove",d)};var o=0,u=0,c=0,i=0,s=0;function r(e){1===e.touches.length&&l(e.touches[0].clientX,e.touches[0].clientY)}function a(e){0===e.touches.length&&m()}function v(e){1===e.touches.length&&p(e.touches[0].clientX,e.touches[0].clientY)}function h(e){l(e.clientX,e.clientY)}function f(e){m()}function d(e){0===e.button&&p(e.clientX,e.clientY)}function l(e,t){i=e,s=t,c=0}function m(){var i=Date.now();c<10&&(i-o<300?u+=1:u=1,o=Date.now(),n(e),2===u&&(n(t),u=0)),c=0}function p(e,t){var n=i-e,o=s-t,u=Math.sqrt(n*n+o*o);c+=u,i=e,s=t}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=e;exports.default=t;
+"use strict";function e(){var e=[],t=[];function n(e,t){e.forEach(function(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",r),e.addEventListener("touchmove",l),e.addEventListener("touchend",a),e.addEventListener("mousedown",v),e.addEventListener("mouseup",h),e.addEventListener("mousemove",f)):console.error("TapDetector.attach: arg must be an Element")},this.detach=function(e){e.removeEventListener("touchstart",r),e.removeEventListener("touchmove",l),e.removeEventListener("touchend",a),e.removeEventListener("mousedown",v),e.removeEventListener("mouseup",h),e.removeEventListener("mousemove",f)};var o=0,c=0,i=0,u=0,s=0;function r(e){1===e.touches.length&&d(e.touches[0].clientX,e.touches[0].clientY)}function a(e){0===e.touches.length&&m()}function l(e){1===e.touches.length&&E(e.touches[0].clientX,e.touches[0].clientY)}function v(e){d(e.clientX,e.clientY)}function h(e){m()}function f(e){0===e.button&&E(e.clientX,e.clientY)}function d(e,t){u=e,s=t,i=0}function m(){var r=Date.now();i<10&&(r-o<300?c+=1:c=1,o=Date.now(),n(e,{clientX:u,clientY:s}),2===c&&(n(t,{clientX:u,clientY:s}),c=0)),i=0}function E(e,t){var n=u-e,o=s-t,c=Math.sqrt(n*n+o*o);i+=c,u=e,s=t}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=e;exports.default=t;
 },{}],"7edH":[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=i(require("lodash.debounce")),e=i(require("./TapDetector"));function i(t){return t&&t.__esModule?t:{default:t}}var n={props:{minScale:{type:Number,default:1},maxScale:{type:Number,default:5},zoomed:{type:Boolean,default:!1}},data:function(){return{containerWidth:1,containerHeight:1,containerLeft:0,containerTop:0,translateX:0,animTranslateX:0,translateY:0,animTranslateY:0,scale:1,animScale:1,lastFullWheelTime:0,isPointerDown:!1,pointerPosX:-1,pointerPosY:-1,twoFingerInitDist:0,panLocked:!0,raf:null,tapDetector:null}},computed:{wrapperStyle:function(){var t=this.containerWidth*this.animTranslateX,e=this.containerHeight*this.animTranslateY;return{transform:["translate(".concat(t,"px, ").concat(e,"px)"),"scale(".concat(this.animScale,")")].join(" ")}}},watch:{scale:function(t){1!==t&&(this.$emit("update:zoomed",!0),this.panLocked=!1)}},mounted:function(){this.tapDetector=new e.default,this.tapDetector.attach(this.$el),this.tapDetector.onDoubleTap(this.onDoubleTap),window.addEventListener("resize",this.onWindowResize),this.onWindowResize(),this.loop()},destroyed:function(){this.tapDetector.detach(this.$el),window.removeEventListener("resize",this.onWindowResize),window.cancelAnimationFrame(this.raf)},methods:{tryToScale:function(t){var e=(this.pointerPosX-this.containerLeft)/this.containerWidth,i=(this.pointerPosY-this.containerTop)/this.containerHeight,n=this.scale*t;if(n<this.minScale||n>this.maxScale){var s=Math.log2(t);s*=.2,t=Math.pow(2,s),n=this.scale*t}t=n/this.scale,this.scale=n,this.translateX=(.5+this.translateX-e)*t+e-.5,this.translateY=(.5+this.translateY-i)*t+i-.5},onPointerMove:function(t,e){if(this.isPointerDown){var 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:(0,t.default)(function(){this.limit(),this.panLocked=1===this.scale,this.$emit("update:zoomed",!this.panLocked)},100),limit:function(){if(this.scale<this.minScale)this.tryToScale(this.minScale/this.scale);else if(this.scale>this.maxScale)this.tryToScale(this.maxScale/this.scale);else{var t=(this.scale-1)/2;Math.abs(this.translateX)>t&&(this.translateX*=t/Math.abs(this.translateX)),Math.abs(this.translateY)>t&&(this.translateY*=t/Math.abs(this.translateY))}},onDoubleTap:function(){1===this.scale?this.scale=Math.min(3,this.maxScale):this.reset(),this.onInteractionEnd()},reset:function(){this.scale=1,this.panLocked=!0,this.translateX=0,this.translateY=0},onWindowResize:function(){var t=window.getComputedStyle(this.$el);this.containerWidth=parseFloat(t.width),this.containerHeight=parseFloat(t.height)},refreshContainerPos:function(){this.containerLeft=+this.$el.offsetLeft||0,this.containerTop=+this.$el.offsetTop||0},loop:function(){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:function(t,e){var i=.3*(e-t);return Math.abs(i)>1e-5?t+i:e},onMouseWheel:function(t){if(120===Math.abs(t.wheelDelta)){var e=Date.now();e-this.lastFullWheelTime>50&&(this.onMouseWheelDo(t),this.lastFullWheelTime=e)}else this.onMouseWheelDo(t)},onMouseWheelDo:function(t){var e=Math.pow(1.25,t.wheelDelta/120);this.tryToScale(e),this.onInteractionEnd()},onMouseDown:function(t){this.refreshContainerPos(),this.isPointerDown=!0,this.pointerPosX=t.clientX,this.pointerPosY=t.clientY},onMouseUp:function(t){this.isPointerDown=!1,this.onInteractionEnd()},onMouseMove:function(t){this.onPointerMove(t.clientX,t.clientY)},onTouchStart:function(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;var 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:function(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:function(t){if(1===t.touches.length)this.onPointerMove(t.touches[0].clientX,t.touches[0].clientY);else if(2===t.touches.length){var 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;var n=t.touches[0].clientX-t.touches[1].clientX,s=t.touches[0].clientY-t.touches[1].clientY,o=Math.sqrt(n*n+s*s);this.tryToScale(o/this.twoFingerInitDist),this.twoFingerInitDist=o}}}};exports.default=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=i(require("lodash.debounce")),e=i(require("./TapDetector"));function i(t){return t&&t.__esModule?t:{default:t}}var n={props:{minScale:{type:Number,default:1},maxScale:{type:Number,default:5},zoomed:{type:Boolean,default:!1}},data:function(){return{containerWidth:1,containerHeight:1,containerLeft:0,containerTop:0,translateX:0,animTranslateX:0,translateY:0,animTranslateY:0,scale:1,animScale:1,lastFullWheelTime:0,isPointerDown:!1,pointerPosX:-1,pointerPosY:-1,twoFingerInitDist:0,panLocked:!0,raf:null,tapDetector:null}},computed:{wrapperStyle:function(){var t=this.containerWidth*this.animTranslateX,e=this.containerHeight*this.animTranslateY;return{transform:["translate(".concat(t,"px, ").concat(e,"px)"),"scale(".concat(this.animScale,")")].join(" ")}}},watch:{scale:function(t){1!==t&&(this.$emit("update:zoomed",!0),this.panLocked=!1)}},mounted:function(){this.tapDetector=new e.default,this.tapDetector.attach(this.$el),this.tapDetector.onDoubleTap(this.onDoubleTap),window.addEventListener("resize",this.onWindowResize),this.onWindowResize(),this.loop()},destroyed:function(){this.tapDetector.detach(this.$el),window.removeEventListener("resize",this.onWindowResize),window.cancelAnimationFrame(this.raf)},methods:{tryToScale:function(t){var e=(this.pointerPosX-this.containerLeft)/this.containerWidth,i=(this.pointerPosY-this.containerTop)/this.containerHeight,n=this.scale*t;if(n<this.minScale||n>this.maxScale){var s=Math.log2(t);s*=.2,t=Math.pow(2,s),n=this.scale*t}t=n/this.scale,this.scale=n,this.translateX=(.5+this.translateX-e)*t+e-.5,this.translateY=(.5+this.translateY-i)*t+i-.5},onPointerMove:function(t,e){if(this.isPointerDown){var 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:(0,t.default)(function(){this.limit(),this.panLocked=1===this.scale,this.$emit("update:zoomed",!this.panLocked)},100),limit:function(){this.scale<this.minScale?this.scale=this.minScale:this.scale>this.maxScale&&(this.scale=this.maxScale);var t=(this.scale-1)/2;Math.abs(this.translateX)>t&&(this.translateX*=t/Math.abs(this.translateX)),Math.abs(this.translateY)>t&&(this.translateY*=t/Math.abs(this.translateY))},onDoubleTap:function(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()},reset:function(){this.scale=1,this.panLocked=!0,this.translateX=0,this.translateY=0},onWindowResize:function(){var t=window.getComputedStyle(this.$el);this.containerWidth=parseFloat(t.width),this.containerHeight=parseFloat(t.height)},refreshContainerPos:function(){this.containerLeft=+this.$el.offsetLeft||0,this.containerTop=+this.$el.offsetTop||0},loop:function(){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:function(t,e){var i=.3*(e-t);return Math.abs(i)>1e-5?t+i:e},onMouseWheel:function(t){if(120===Math.abs(t.wheelDelta)){var e=Date.now();e-this.lastFullWheelTime>50&&(this.onMouseWheelDo(t),this.lastFullWheelTime=e)}else this.onMouseWheelDo(t)},onMouseWheelDo:function(t){var e=Math.pow(1.25,t.wheelDelta/120);this.tryToScale(e),this.onInteractionEnd()},onMouseDown:function(t){this.refreshContainerPos(),this.isPointerDown=!0,this.pointerPosX=t.clientX,this.pointerPosY=t.clientY},onMouseUp:function(t){this.isPointerDown=!1,this.onInteractionEnd()},onMouseMove:function(t){this.onPointerMove(t.clientX,t.clientY)},onTouchStart:function(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;var 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:function(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:function(t){if(1===t.touches.length)this.onPointerMove(t.touches[0].clientX,t.touches[0].clientY);else if(2===t.touches.length){var 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;var n=t.touches[0].clientX-t.touches[1].clientX,s=t.touches[0].clientY-t.touches[1].clientY,o=Math.sqrt(n*n+s*s);this.tryToScale(o/this.twoFingerInitDist),this.twoFingerInitDist=o}}}};exports.default=n;
 (function(){var e=exports.default||module.exports;"function"==typeof e&&(e=e.options),Object.assign(e,{render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"vue-zoomer",style:{backgroundColor:"hsl(0, 0%, 0%, "+(e.scale<=1?.7:.8)+")"},on:{mousewheel:function(o){return o.preventDefault(),e.onMouseWheel(o)},mousedown:e.onMouseDown,mouseup:e.onMouseUp,mousemove:e.onMouseMove,touchstart:function(o){return o.preventDefault(),e.onTouchStart(o)},touchend:e.onTouchEnd,touchmove:e.onTouchMove}},[t("div",{staticClass:"zoomer",style:e.wrapperStyle},[e._t("default")],2)])},staticRenderFns:[],_compiled:!0,_scopeId:"data-v-20389a",functional:void 0});})();
@@ -10,0 +10,0 @@ },{"lodash.debounce":"4PZ+","./TapDetector":"li1N"}],"Twlx":[function(require,module,exports) {

package.json

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

README.md

@@ -7,3 +7,4 @@ # vue-zoomer
 
-https://unpkg.com/vue-zoomer/demo/stand-alone.html
+[Single Image](https://unpkg.com/vue-zoomer/demo/basic.html)
+[Gallery](https://unpkg.com/vue-zoomer/demo/gallery.html)
 
@@ -25,3 +26,3 @@ # Usage
 
-Use:
+Single usage:
 ```html
@@ -36,13 +37,28 @@ <v-zoomer style="width: 500px; height: 500px; border: solid 1px silver;">
 
-# API: Props
+Gallery usage:
+```html
+<v-zoomer-gallery
+  style="width: 100vw; height: 100vh;"
+  :list="['a.jpg', 'b.jpg', 'c.jpg']"
+  v-model="selIndex"
+></v-zoomer-gallery>
+```
 
-> `out` means the prop is a child -> parent one-way binding.
-> So it must be uses with a `.sync` modifier.
+# API
 
+> `out` means the prop is a child -> parent one-way binding. So there must have a `.sync` modifier.
+
+## &lt;v-zoomer&gt; Props
+
 - `maxScale: number` - Maximum scale limit, default is 1;
 - `minScale: number` - Minimum scale limit, default is 5;
-- `zoomed: out boolean` - Whether zoomed out (scale equals to 1);
+- `zoomed: out boolean` - Whether zoomed in (scale equals to 1);
 
+## &lt;v-zoomer-gallery&gt; Props
+
+- `list: Array<string> required` - Displaying image urls;
+- `v-model(value): number required` - Index of current showing image;
+
 # License
 
 MIT

src/TapDetector.js

@@ -21,5 +21,5 @@ /**
 
-  function triggerCallbacks (cbList) {
+  function triggerCallbacks (cbList, arg) {
     cbList.forEach(cbItem => {
-      cbItem.apply()
+      cbItem.call(null, arg)
     })
@@ -120,5 +120,11 @@ }
       // console.log('tappedCount', tappedCount)
-      triggerCallbacks(singleTapCallbacks)
+      triggerCallbacks(singleTapCallbacks, {
+        clientX: lastPointerX,
+        clientY: lastPointerY,
+      })
       if (tappedCount === 2) {
-        triggerCallbacks(doubleTapCallbacks)
+        triggerCallbacks(doubleTapCallbacks, {
+          clientX: lastPointerX,
+          clientY: lastPointerY,
+        })
         tappedCount = 0 // clear count on maximum tap count
@@ -125,0 +131,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

1400528

increased by0.05%

Lines of code

218

increased by2.83%

Number of lines in readme file

62

increased by34.78%

No dependency changes