@xysfe/actui/es/ImagePreview/index.js

A fantastic mobile ui lib implement by Vue

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@xysfe/actui/es/assets/utils/create/index.js"),require("@xysfe/actui/es/assets/utils/helpers.js"),require("@xysfe/actui/es/assets/mixins/visible.js"),require("@xysfe/actui/es/assets/mixins/popup.js"),require("@xysfe/actui/es/assets/mixins/noscroll.js"),require("@xysfe/actui/es/assets/common/popup.js"),require("@xysfe/actui/es/assets/mixins/touch.js"),require("@xysfe/actui/es/assets/utils/event.js"),require("@xysfe/actui/es/Swipe/index.js")):"function"==typeof define&&define.amd?define(["@xysfe/actui/es/assets/utils/create/index.js","@xysfe/actui/es/assets/utils/helpers.js","@xysfe/actui/es/assets/mixins/visible.js","@xysfe/actui/es/assets/mixins/popup.js","@xysfe/actui/es/assets/mixins/noscroll.js","@xysfe/actui/es/assets/common/popup.js","@xysfe/actui/es/assets/mixins/touch.js","@xysfe/actui/es/assets/utils/event.js","@xysfe/actui/es/Swipe/index.js"],t):"object"==typeof exports?exports.ImagePreview=t(require("@xysfe/actui/es/assets/utils/create/index.js"),require("@xysfe/actui/es/assets/utils/helpers.js"),require("@xysfe/actui/es/assets/mixins/visible.js"),require("@xysfe/actui/es/assets/mixins/popup.js"),require("@xysfe/actui/es/assets/mixins/noscroll.js"),require("@xysfe/actui/es/assets/common/popup.js"),require("@xysfe/actui/es/assets/mixins/touch.js"),require("@xysfe/actui/es/assets/utils/event.js"),require("@xysfe/actui/es/Swipe/index.js")):e.ImagePreview=t(e["@xysfe/actui/es/assets/utils/create/index.js"],e["@xysfe/actui/es/assets/utils/helpers.js"],e["@xysfe/actui/es/assets/mixins/visible.js"],e["@xysfe/actui/es/assets/mixins/popup.js"],e["@xysfe/actui/es/assets/mixins/noscroll.js"],e["@xysfe/actui/es/assets/common/popup.js"],e["@xysfe/actui/es/assets/mixins/touch.js"],e["@xysfe/actui/es/assets/utils/event.js"],e["@xysfe/actui/es/Swipe/index.js"])}("undefined"!=typeof self?self:this,function(e,t,s,i,n,a,o,r,c){return function(e){function t(i){if(s[i])return s[i].exports;var n=s[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var s={};return t.m=e,t.c=s,t.d=function(e,s,i){t.o(e,s)||Object.defineProperty(e,s,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var s=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(s,"a",s),s},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="../es",t(t.s=1697)}({109:function(e,t){e.exports=i},110:function(e,t){e.exports=n},1133:function(e,t,s){"use strict";function i(e){return Math.sqrt(Math.pow(e[0].clientX-e[1].clientX,2)+Math.pow(e[0].clientY-e[1].clientY,2))}var n=s(40),a=s.n(n),o=s(110),r=s.n(o),c=s(109),u=s.n(c),l=s(955),h=s.n(l),f=s(118),p=s.n(f),m=s(1700),v=s.n(m),x=s(956),d=(s.n(x),s(39));s.n(d);t.a={name:"ActImagePreview",mixins:[a.a,r.a,u.a,h.a],data:function(){return{scale:1,moveX:0,moveY:0,active:0,moving:!1,zooming:!1,doubleClickTimer:null,staticImages:null,staticStart:-1}},watch:{isVisible:function(e){var t=this;e&&(this.setActive(+this.realStart),this.$nextTick(function(){t.$refs.swipe.swipeTo(+t.realStart,{immediate:!0})}))},start:function(e){this.setActive(e)}},computed:{realImages:function(){return this.staticImages||this.images},realStart:function(){return-1!==this.staticStart?this.staticStart:this.start}},methods:{setData:function(e,t){this.staticImages=e,this.staticStart=t},emitClose:function(){this.asyncClose||this.$emit("input",!1)},onWrapperTouchStart:function(){this.zoom&&(this.touchStartTime=new Date)},onWrapperTouchEnd:function(e){var t=this;if(this.zoom){Object(x.preventDefault)(e);var s=new Date-this.touchStartTime,i=this.$refs.swipe||{},n=i.offsetX,a=void 0===n?0:n,o=i.offsetY,r=void 0===o?0:o;s<300&&a<10&&r<10&&(this.doubleClickTimer?(clearTimeout(this.doubleClickTimer),this.doubleClickTimer=null,this.toggleScale()):this.doubleClickTimer=setTimeout(function(){t.hide(),t.doubleClickTimer=null},300))}},onWrapperClick:function(){this.zoom||this.hide()},startMove:function(e){var t=e.currentTarget,s=t.getBoundingClientRect(),i=window.innerWidth,n=window.innerHeight;this.touchStart(e),this.moving=!0,this.startMoveX=this.moveX,this.startMoveY=this.moveY,this.maxMoveX=Math.max(0,(s.width-i)/2),this.maxMoveY=Math.max(0,(s.height-n)/2)},startZoom:function(e){this.moving=!1,this.zooming=!0,this.startScale=this.scale,this.startDistance=i(e.touches)},onImageTouchStart:function(e){if(this.zoom){var t=e.touches,s=this.$refs.swipe||{},i=s.offsetX,n=void 0===i?0:i;1===t.length&&1!==this.scale?this.startMove(e):2!==t.length||n||this.startZoom(e)}},onImageTouchMove:function(e){if(this.zoom){var t=e.touches;if((this.moving||this.zooming)&&Object(x.preventDefault)(e,!0),this.moving){this.touchMove(e);var s=this.deltaX+this.startMoveX,n=this.deltaY+this.startMoveY;this.moveX=Object(d.range)(s,-this.maxMoveX,this.maxMoveX),this.moveY=Object(d.range)(n,-this.maxMoveY,this.maxMoveY)}if(this.zooming&&2===t.length){var a=i(t),o=this.startScale*a/this.startDistance;this.setScale(o)}}},onImageTouchEnd:function(e){if(this.zoom&&(this.moving||this.zooming)){var t=!0;this.moving&&this.startMoveX===this.moveX&&this.startMoveY===this.moveY&&(t=!1),e.touches.length||(this.moving=!1,this.zooming=!1,this.startMoveX=0,this.startMoveY=0,this.startScale=1,this.scale<1&&this.resetScale()),t&&Object(x.preventDefault)(e,!0)}},setActive:function(e){this.resetScale(),e!==this.active&&(this.active=e,this.$emit("change",e))},setScale:function(e){var t=Object(d.range)(e,1/3,3);this.scale=t,this.$emit("scale",{index:this.active,scale:t})},resetScale:function(){this.setScale(1),this.moveX=0,this.moveY=0},toggleScale:function(){var e=this.scale>1?1:2;this.setScale(e),this.moveX=0,this.moveY=0},cancel:function(){this.hide()}},props:{images:{type:Array,default:function(){return[]}},start:{type:[Number,String],default:0},loop:{type:Boolean,default:!1},pagination:{type:Boolean,default:!1},zoom:{type:Boolean,default:!1},opacity:{type:[Number,String],default:.7}},components:{ActPopup:p.a,ActSwipe:v.a}}},118:function(e,t){e.exports=a},1697:function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=s(26),n=s.n(i),a=s(1698);a.a.install=function(e){e.component(a.a.name,a.a),e.prototype.$createImagePreview=n()(a.a,e)},t.default=a.a},1698:function(e,t,s){"use strict";function i(e){r||s(1699)}var n=s(1133),a=s(1701),o=s(7),r=!1,c=i,u=Object(o.a)(n.a,a.a,a.b,!1,c,"data-v-4e48703b",null);u.options.__file="src\\components\\ImagePreview\\src\\index.vue",t.a=u.exports},1699:function(e,t){},1700:function(e,t){e.exports=c},1701:function(e,t,s){"use strict";s.d(t,"a",function(){return i}),s.d(t,"b",function(){return n});var i=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"act-image-preview"},[s("transition",{attrs:{name:"act-image-preview"}},[s("act-popup",{directives:[{name:"show",rawName:"v-show",value:e.isVisible,expression:"isVisible"}],attrs:{mask:!0,zIndex:e.zIndex,opacity:e.opacity},on:{touchmove:function(e){e.preventDefault()},"mask-click":e.cancel},scopedSlots:e._u([{key:"mask",fn:function(){return[s("transition",{attrs:{name:"act-preview-content"}},[e.isVisible?s("act-swipe",{ref:"swipe",staticClass:"act-preview-swipe",attrs:{autoplay:0,loop:e.loop,pagination:e.pagination},on:{change:e.setActive}},[e._l(e.realImages,function(t,i){return s("div",{key:"act_image_preview_"+i,staticClass:"act-image-item",on:{touchstart:e.onWrapperTouchStart,touchmove:function(e){e.preventDefault()},touchend:e.onWrapperTouchEnd,touchcancel:e.onWrapperTouchEnd,click:e.onWrapperClick}},[t.desc?s("div",{staticClass:"act-image-desc"},[e._v("\n                "+e._s(t.desc)+"\n              ")]):e._e(),e._v(" "),s("img",{staticClass:"act-preview-image",style:i===e.active?{"transition-duration":e.zooming||e.moving?"0s":".3s","-webkit-transform":"scale3d("+e.scale+", "+e.scale+", 1) translate("+e.moveX/e.scale+"px, "+e.moveY/e.scale+"px)",transform:"scale3d("+e.scale+", "+e.scale+", 1) translate("+e.moveX/e.scale+"px, "+e.moveY/e.scale+"px)"}:null,attrs:{src:"string"==typeof t?t:t.url},on:{touchstart:e.onImageTouchStart,touchmove:e.onImageTouchMove,touchend:e.onImageTouchEnd,touchcancel:e.onImageTouchEnd}})])}),e._v(" "),e.$slots.pagination?e._t("pagination",null,{slot:"pagination"}):e._e()],2):e._e()],1)]},proxy:!0}],null,!0)})],1)],1)},n=[];i._withStripped=!0},26:function(t,s){t.exports=e},39:function(e,s){e.exports=t},40:function(e,t){e.exports=s},7:function(e,t,s){"use strict";function i(e,t,s,i,n,a,o,r){e=e||{};var c=typeof e.default;"object"!==c&&"function"!==c||(e=e.default);var u="function"==typeof e?e.options:e;t&&(u.render=t,u.staticRenderFns=s,u._compiled=!0),i&&(u.functional=!0),a&&(u._scopeId=a);var l;if(o?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=l):n&&(l=r?function(){n.call(this,this.$root.$options.shadowRoot)}:n),l)if(u.functional){u._injectStyles=l;var h=u.render;u.render=function(e,t){return l.call(t),h(e,t)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,l):[l]}return{exports:e,options:u}}t.a=i},955:function(e,t){e.exports=o},956:function(e,t){e.exports=r}})});