element-gui/lib/image.js

A Component Library for Vue.js.

module.exports=function(e){var t={};function i(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)i.d(n,o,function(t){return e[t]}.bind(null,o));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/dist/",i(i.s=73)}({0:function(e,t,i){"use strict";function n(e,t,i,n,o,r,s,a){var l,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=i,c._compiled=!0),n&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),s?(l=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__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},c._ssrRegister=l):o&&(l=a?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(c.functional){c._injectStyles=l;var d=c.render;c.render=function(e,t){return l.call(t),d(e,t)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,l):[l]}return{exports:e,options:c}}i.d(t,"a",(function(){return n}))},16:function(e,t){e.exports=require("element-gui/lib/utils/types")},17:function(e,t){e.exports=require("element-gui/lib/utils/popup")},2:function(e,t){e.exports=require("element-gui/lib/utils/util")},23:function(e,t){e.exports=require("throttle-debounce/throttle")},3:function(e,t){e.exports=require("element-gui/lib/utils/dom")},7:function(e,t){e.exports=require("element-gui/lib/mixins/locale")},73:function(e,t,i){"use strict";i.r(t);var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-image",style:"width:"+e.width+";height:"+e.height},[e.isLoading?e._t("placeholder",[i("div",{staticClass:"el-image__placeholder"})]):e.error?e._t("error",[i("div",{staticClass:"el-image__error"},[e._v(e._s(e.t("el.image.error")))])]):e.defaults?e._t("default"):i("img",e._g(e._b({staticClass:"el-image__inner",class:{"el-image__inner--center":e.alignCenter,"el-image__preview":e.preview},style:e.imageStyle,attrs:{src:e.src,loading:e.loading},on:{click:e.clickHandler}},"img",e.$attrs,!1),e.$listeners)),e.preview?[e.showViewer?i("image-viewer",e._g(e._b({ref:"imageViewer",attrs:{"append-to-body":e.appendToBody,maskClosable:e.maskClosable,"z-index":e.zIndex,"initial-index":e.imageIndex,"on-close":e.closeViewer,"url-list":e.previewSrcList},on:{change:e.change}},"image-viewer",e.$attrs,!1),e.$listeners)):e._e()]:e._e()],2)};n._withStripped=!0;var o=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"viewer-fade",appear:""},on:{"after-leave":e.handleAfterLeave}},[i("div",{ref:"el-image-viewer__wrapper",staticClass:"el-image-viewer__wrapper",style:{"z-index":e.viewerZIndex},attrs:{tabindex:"-1"}},[i("div",{staticClass:"el-image-viewer__mask",on:{click:function(t){return t.target!==t.currentTarget?null:e.handleMaskClick(t)}}}),i("span",{staticClass:"el-image-viewer__btn el-image-viewer__close",on:{click:e.hide}},[i("i",{staticClass:"el-icon-close"})]),e.isSingle?e._e():[i("span",{staticClass:"el-image-viewer__btn el-image-viewer__prev",class:{"is-disabled":!e.infinite&&e.isFirst},on:{click:e.prev}},[i("i",{staticClass:"el-icon-arrow-left"})]),i("span",{staticClass:"el-image-viewer__btn el-image-viewer__next",class:{"is-disabled":!e.infinite&&e.isLast},on:{click:e.next}},[i("i",{staticClass:"el-icon-arrow-right"})])],i("div",{staticClass:"el-image-viewer__btn el-image-viewer__actions"},[i("div",{staticClass:"el-image-viewer__actions__inner"},[i("i",{staticClass:"el-icon-zoom-out",on:{click:function(t){return e.handleActions("zoomOut")}}}),i("i",{staticClass:"el-icon-zoom-in",on:{click:function(t){return e.handleActions("zoomIn")}}}),i("i",{staticClass:"el-image-viewer__actions__divider"}),i("i",{class:e.mode.icon,on:{click:e.toggleMode}}),i("i",{staticClass:"el-image-viewer__actions__divider"}),i("i",{staticClass:"el-icon-refresh-left",on:{click:function(t){return e.handleActions("anticlocelise")}}}),i("i",{staticClass:"el-icon-refresh-right",on:{click:function(t){return e.handleActions("clocelise")}}})])]),i("div",{staticClass:"el-image-viewer__canvas"},[e._l(e.urlList,(function(t,n){return[n===e.index?i("img",e._b({key:t,ref:"img",refInFor:!0,staticClass:"el-image-viewer__img",style:e.imgStyle,attrs:{src:e.currentImg},on:{load:e.handleImgLoad,error:e.handleImgError,mousedown:e.handleMouseDown}},"img",e.$attrs,!1)):e._e()]}))],2)],2)])};o._withStripped=!0;var r=i(7),s=i.n(r),a=i(3),l=i(2),c=i(17),d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},u={CONTAIN:{name:"contain",icon:"el-icon-full-screen"},ORIGINAL:{name:"original",icon:"el-icon-c-scale-to-original"}},h=Object(l.isFirefox)()?"DOMMouseScroll":"mousewheel",f={name:"elImageViewer",mixins:[s.a],props:{urlList:{type:Array,default:function(){return[]}},zIndex:{type:Number,default:2e3},onSwitch:{type:Function,default:function(){}},onClose:{type:Function,default:function(){}},initialIndex:{type:Number,default:0},zoomRate:{type:Number,default:1.2},minScale:{type:Number,default:.2},maxScale:{type:Number,default:7},appendToBody:{type:Boolean,default:!1},maskClosable:{type:Boolean,default:!0},infinite:{type:Boolean,default:!0}},data:function(){return{index:this.initialIndex,isShow:!1,loading:!1,mode:u.CONTAIN,transform:{scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}},computed:{isSingle:function(){return this.urlList.length<=1},isFirst:function(){return 0===this.index},isLast:function(){return this.index===this.urlList.length-1},currentImg:function(){return this.urlList[this.index]},imgStyle:function(){var e=this.transform,t=e.scale,i=e.deg,n=e.offsetX,o=e.offsetY,r={transform:"scale("+t+") rotate("+i+"deg)",transition:e.enableTransition?"transform .3s":"","margin-left":2*n+"px","margin-top":2*o+"px"};return this.mode===u.CONTAIN&&(r.maxWidth=r.maxHeight="100%"),r},viewerZIndex:function(){var e=c.PopupManager.nextZIndex();return this.zIndex>e?this.zIndex:e},elementContent:function(){return this.$ELEMENT&&this.$ELEMENT.content&&document.getElementById(this.$ELEMENT.content)||document.body}},watch:{index:{handler:function(e){this.reset(),this.onSwitch(e)}},currentImg:function(e){var t=this;this.$nextTick((function(e){t.$refs.img[0].complete||(t.loading=!0)}))}},methods:{hide:function(){this.deviceSupportUninstall(),this.onClose()},deviceSupportInstall:function(){var e=this;this._keyDownHandler=function(t){switch(t.stopPropagation(),t.keyCode){case 27:e.hide();break;case 32:e.toggleMode();break;case 37:e.prev();break;case 38:e.handleActions("zoomIn");break;case 39:e.next();break;case 40:e.handleActions("zoomOut")}},this._mouseWheelHandler=Object(l.rafThrottle)((function(t){var i=t.wheelDelta?t.wheelDelta:-t.detail,n=e.zoomRate>=1?e.zoomRate:1+e.zoomRate;i>0?e.handleActions("zoomIn",{zoomRate:n,enableTransition:!1}):e.handleActions("zoomOut",{zoomRate:n,enableTransition:!1})})),Object(a.on)(document,"keydown",this._keyDownHandler),Object(a.on)(document,h,this._mouseWheelHandler)},deviceSupportUninstall:function(){Object(a.off)(document,"keydown",this._keyDownHandler),Object(a.off)(document,h,this._mouseWheelHandler),this._keyDownHandler=null,this._mouseWheelHandler=null},handleImgLoad:function(e){this.loading=!1},handleImgError:function(e){this.loading=!1,e.target.alt=this.t("el.image.error")},handleMouseDown:function(e){var t=this;if(!this.loading&&0===e.button){Object(a.off)(document,"mousemove",this._dragHandler);var i=this.transform,n=i.offsetX,o=i.offsetY,r=e.pageX,s=e.pageY;this._dragHandler=Object(l.rafThrottle)((function(e){t.transform.offsetX=n+e.pageX-r,t.transform.offsetY=o+e.pageY-s})),Object(a.on)(document,"mousemove",this._dragHandler),Object(a.on)(document,"mouseup",this.handleMouseUp),e.preventDefault()}},handleMouseUp:function(e){Object(a.off)(document,"mousemove",this._dragHandler),Object(a.off)(document,"mouseup",this.handleMouseUp),this.$emit("dragend",e)},handleMaskClick:function(){this.maskClosable&&this.hide()},reset:function(){this.transform={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}},toggleMode:function(){if(!this.loading){Object.values||(Object.values=function(e){var t=[];for(var i in e)e.hasOwnProperty(i)&&t.push(e[i]);return t});var e=Object.keys(u),t=(Object.values(u).indexOf(this.mode)+1)%e.length;this.mode=u[e[t]],this.reset()}},prev:function(){if(!this.isFirst||this.infinite){var e=this.urlList.length;this.index=(this.index-1+e)%e,this.$emit("change",this.index)}},next:function(){if(!this.isLast||this.infinite){var e=this.urlList.length;this.index=(this.index+1)%e,this.$emit("change",this.index)}},handleActions:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!this.loading){var i=d({zoomRate:this.zoomRate>=1?this.zoomRate:1+this.zoomRate,rotateDeg:90,enableTransition:!0},t),n=i.zoomRate,o=i.rotateDeg,r=i.enableTransition,s=this.transform;switch(e){case"zoomOut":s.scale>this.minScale&&(s.scale=parseFloat((s.scale/n).toFixed(3))),this.$emit("zoom-change",s.scale);break;case"zoomIn":s.scale<this.maxScale&&(s.scale=parseFloat((s.scale*n).toFixed(3))),this.$emit("zoom-change",s.scale);break;case"clocelise":s.deg+=o,this.$emit("rotate-change",s.deg);break;case"anticlocelise":s.deg-=o,this.$emit("rotate-change",s.deg)}s.enableTransition=r}},handleAfterLeave:function(){this.$destroy(!0)}},mounted:function(){(this.deviceSupportInstall(),this.appendToBody)&&((document.fullscreenElement||window.fullScreen)&&document.fullscreenElement?document.fullscreenElement.appendChild(this.$el):this.elementContent.appendChild(this.$el));this.$refs["el-image-viewer__wrapper"].focus()},beforeDestroy:function(){this.$off()}},m=i(0),g=Object(m.a)(f,o,[],!1,null,null,null).exports,p=i(16),v=i(23),_=i.n(v),b=function(){return void 0!==document.documentElement.style.objectFit},w="none",y="contain",x="cover",L="fill",C="scale-down",S="",O={name:"ElImage",mixins:[s.a],inheritAttrs:!1,components:{ImageViewer:g},props:{src:String,fit:String,loading:String,lazy:Boolean,scrollContainer:{},previewSrcList:{type:Array,default:function(){return[]}},zIndex:{type:Number,default:2e3},initialIndex:Number,appendToBody:{type:Boolean,default:!1},maskClosable:{type:Boolean,default:!0},width:{type:String,default:"auto"},height:{type:String,default:"auto"}},data:function(){return{isLoading:!0,error:!1,defaults:!1,show:!this.lazy,imageWidth:0,imageHeight:0,showViewer:!1}},computed:{imageStyle:function(){var e=this.fit;return!this.$isServer&&e?b()?{"object-fit":e}:this.getImageStyle(e):{}},alignCenter:function(){return!this.$isServer&&!b()&&this.fit!==L},preview:function(){var e=this.previewSrcList;return Array.isArray(e)&&e.length>0},imageIndex:function(){var e=0,t=this.initialIndex;if(t>=0)return e=t;var i=this.previewSrcList.indexOf(this.src);return i>=0?e=i:e}},watch:{src:function(e){this.show&&this.loadImage()},show:function(e){e&&this.loadImage()}},mounted:function(){this.lazy?this.addLazyLoadListener():this.loadImage()},beforeDestroy:function(){this.lazy&&this.removeLazyLoadListener()},methods:{loadImage:function(){var e=this;if(!this.$isServer){if(this.$slots.default)return this.defaults=!0,this.isLoading=!1,void(this.error=!1);if(!this.src)return this.isLoading=!1,void(this.error=!0);"eager"===this.loading&&"loading"in HTMLImageElement.prototype?this.isLoading=!1:this.isLoading=!0,this.error=!1,this.img&&(this.img.onload=null,this.img.onerror=null);var t=new Image;this.img=t,t.onload=function(i){return e.handleLoad(i,t)},t.onerror=this.handleError.bind(this),Object.keys(this.$attrs).forEach((function(i){var n=e.$attrs[i];t.setAttribute(i,n)})),t.src=this.src}},handleLoad:function(e,t){this.imageWidth=t.width,this.imageHeight=t.height,this.isLoading=!1,this.error=!1},handleError:function(e){this.isLoading=!1,this.error=!0,this.$emit("error",e)},handleLazyLoad:function(){Object(a.isInContainer)(this.$el,this._scrollContainer)&&(this.show=!0,this.removeLazyLoadListener())},addLazyLoadListener:function(){if(!this.$isServer){var e=this.scrollContainer,t=null;(t=Object(p.isHtmlElement)(e)?e:Object(p.isString)(e)?document.querySelector(e):Object(a.getScrollContainer)(this.$el))&&(this._scrollContainer=t,this._lazyLoadHandler=_()(200,this.handleLazyLoad),Object(a.on)(t,"scroll",this._lazyLoadHandler),this.handleLazyLoad())}},removeLazyLoadListener:function(){var e=this._scrollContainer,t=this._lazyLoadHandler;!this.$isServer&&e&&t&&(Object(a.off)(e,"scroll",t),this._scrollContainer=null,this._lazyLoadHandler=null)},getImageStyle:function(e){var t=this.imageWidth,i=this.imageHeight,n=this.$el,o=n.clientWidth,r=n.clientHeight;if(!(t&&i&&o&&r))return{};var s=t/i,a=o/r;e===C&&(e=t<o&&i<r?w:y);switch(e){case w:return{width:"auto",height:"auto"};case y:return s<a?{width:"auto"}:{height:"auto"};case x:return s<a?{height:"auto"}:{width:"auto"};default:return{}}},clickHandler:function(){this.preview&&(S=document.body.style.overflow,document.body.style.overflow="hidden",this.showViewer=!0)},closeViewer:function(){document.body.style.overflow=S,this.showViewer=!1,this.$emit("close")},togglePreview:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];e?this.clickHandler():this.closeViewer()},change:function(e){this.$emit("change",e)}}},I=Object(m.a)(O,n,[],!1,null,null,null).exports;I.install=function(e){e.component(I.name,I)};t.default=I}});