photo-view
Version:
PhotoView - Pan, PinchZoom and Swipe for mobile
2 lines • 6.54 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("hammerjs")):"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.PhotoView=t(require("hammerjs")):e.PhotoView=t(e.Hammer)}(this,function(e){return function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={exports:{},id:i,loaded:!1};return e[i].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=n(3),r=i(o),c=n(2),l=i(c),u=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a(this,e);var n={maxScale:2,enableMultiZoom:!1,snapToGrid:!0,tapToZoom:!1};return this.options=Object.assign(n,t),this}return s(e,[{key:"init",value:function(e){var t="string"==typeof e?document.querySelectorAll(e)[0]:e;return t?(this.image=t.querySelectorAll("img")[0],this.image?(this._manager=new r["default"].Manager(this.image,{touchAction:"pan-y"}),this._registerGestures(),this._registerEvents(),this.scale=1,this.deltaX=0,this.deltaY=0,this):void console.warn("You must have a valid img tag inside your container")):void console.warn('You must provide a valid container for PhotoView (selector "'+e+'" did not match any element)')}},{key:"_dispatchEvent",value:function(e,t){var n=new l["default"](e,{bubbles:!0,cancelable:!0,detail:t});document.dispatchEvent(n)}},{key:"_registerGestures",value:function(){var e=new r["default"].Tap({event:"zoom",taps:1}),t=new r["default"].Tap({event:"zoom",taps:2}),n=new r["default"].Pan({direction:r["default"].DIRECTION_ALL,threshold:10}),i=new r["default"].Pinch,a=[i,t,n];this.options.tapToZoom&&(t.recognizeWith(e),e.requireFailure(t),a.splice(2,-1,e)),this._manager.add(a)}},{key:"_getZoomLevel",value:function(){var e=void 0;if(this.options.enableMultiZoom){var t=this.options.maxScale/2;e=1===this.scale?t:this.scale===t?this.options.maxScale:1}else e=this.scale>1?1:this.options.maxScale;return e}},{key:"handleTouchEvent",value:function(){this._dispatchEvent("photoview.scale.changed",{scale:this.scale})}},{key:"_registerEvents",value:function(){var e=this;this._manager.on("zoom",function(t){var n=t.center,i=n.x,a=n.y,s=e._getZoomLevel();e._setTransition(!0),e._transform(i,a,s),e.handleTouchEvent()}),this._manager.on("pinchstart",function(t){clearTimeout(e.panTimer),e._enableGesture("pan",!1);var n=t.center,i=n.x,a=n.y;e._setTransition(!0),1===e.scale&&(e.pinchX=i,e.pinchY=a)}),this._manager.on("pinch",function(t){"pinchout"===t.additionalEvent?e._transform(e.pinchX,e.pinchY,e.options.maxScale):"pinchin"===t.additionalEvent&&e._transform(0,0,1),e.handleTouchEvent()}),this._manager.on("pinchend",function(t){e.panTimer=setTimeout(function(t){return e._enableGesture("pan",!0)},1e3)}),this._manager.on("panstart",function(t){e._setTransition(!1)}),this._manager.on("pan",function(t){1!==e.scale&&(t.srcEvent.stopPropagation(),e.currentDeltaX=(isNaN(e.deltaX)?0:e.deltaX)+t.deltaX,e.currentDeltaY=(isNaN(e.deltaY)?0:e.deltaY)+t.deltaY,e.options.snapToGrid&&e._adjustSnapPositions(),e._setTransition(!1),e.image.style.transform="translate3d("+e.currentDeltaX+"px, "+e.currentDeltaY+"px, 0px) scale("+e.scale+")")}),this._manager.on("panend",function(t){e.deltaX=e.currentDeltaX,e.deltaY=e.currentDeltaY})}},{key:"_adjustSnapPositions",value:function(){var e=this.image.offsetLeft,t=this.image.offsetTop;if(this.currentDeltaX+e>this.x)this.currentDeltaX=this.x-e;else if(this.x-this.currentDeltaX+e>this.image.width){var n=this.x-this.currentDeltaX+e-this.image.width;this.currentDeltaX=this.currentDeltaX+n}if(this.currentDeltaY+t>this.y)this.currentDeltaY=this.y-t;else if(this.y-this.currentDeltaY+t>this.image.height){var i=this.y-this.currentDeltaY+t-this.image.height;this.currentDeltaY=this.currentDeltaY+i}}},{key:"_transform",value:function(e,t,n){1===n?(e=this.x,t=this.y):(e-=this.image.offsetLeft,t-=this.image.offsetTop),this.image.style.transformOrigin=e+"px "+t+"px",this.image.style.transform="scale3d("+n+","+n+",1)",this.x=e,this.y=t,this.scale=n,this._onTransformEnd()}},{key:"_onTransformEnd",value:function(){this.scale<=1&&(this.deltaX=this.deltaY=0)}},{key:"_enableGesture",value:function(e,t){this._manager.get(e).set({enable:t})}},{key:"_setTransition",value:function(e){this.image.style.transition=e?"transform 0.5s":"none"}},{key:"_unregisterEvents",value:function(){this._manager.off("pan"),this._manager.off("pinch"),this._manager.off("zoom")}},{key:"reset",value:function(e){e?(this._setTransition(!0),this._transform(0,0,1),this._setTransition(!1)):this.image.style.transform="none",this.resetScale()}},{key:"resetScale",value:function(){this.scale=1,this._dispatchEvent("photoview.scale.changed",{scale:this.scale})}},{key:"destroy",value:function(){this._unregisterEvents(),this._manager=null}}]),e}(),h=function(){function e(t){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};a(this,e),this.instances=[];var s=Array.prototype.slice,o=s.call(document.querySelectorAll(t));o.forEach(function(e){n.instances.push(new u(i).init(e))})}return s(e,[{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.animate,n=void 0!==t&&t;this.instances.forEach(function(e){e.reset(n)})}},{key:"destroy",value:function(){this.instances.forEach(function(e){e.destroy()}),this.instances=null}}]),e}();t["default"]=h,e.exports=t["default"]},function(e,t,n){function i(){try{var e=new a("cat",{detail:{foo:"bar"}});return"cat"===e.type&&"bar"===e.detail.foo}catch(t){}return!1}var a={}.CustomEvent;e.exports=i()?a:"undefined"!=typeof document&&"function"==typeof document.createEvent?function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n}:function(e,t){var n=document.createEventObject();return n.type=e,t?(n.bubbles=Boolean(t.bubbles),n.cancelable=Boolean(t.cancelable),n.detail=t.detail):(n.bubbles=!1,n.cancelable=!1,n.detail=void 0),n}},function(t,n){t.exports=e}])});
//# sourceMappingURL=build.js.map