@diracleo/vue-enlargeable-image/dist/vue-enlargeable-image.min.js

A Vue component that, when clicked, will enlarge an image from thumbnail to full version using a smooth animation.

var VueEnlargeableImage=function(e){"use strict";var t={name:"EnlargeableImage",props:{src:{type:String},src_large:{type:String},animation_duration:{type:String,default:"700"},trigger:{type:String,default:"click"}},data:function(){return{state:this.state,styles:this.styles}},methods:{init:function(){this.state="delarged",this.delay=50,this.adjust_top=0,this.wait=!1;var e=parseInt(this.$props.animation_duration)/1e3;0==e&&(this.delay=0),e=e.toFixed(2),this.transition_value="width "+e+"s, height "+e+"s, top "+e+"s, left "+e+"s, background-color "+e+"s",this.styles={transition:this.transition_value},"hover"==this.$props.trigger&&(this.styles.pointerEvents="none")},enlarge:function(){var e=this,t=e.$refs.slot.getBoundingClientRect();e.styles={position:"fixed",left:Math.round(t.left)+"px",top:Math.round(t.top+e.adjust_top)+"px",width:Math.round(t.right-t.left)+"px",height:Math.round(t.bottom-t.top)+"px",backgroundImage:"url("+e.$props.src+")",transition:e.transition_value},"hover"==e.$props.trigger&&(e.styles.pointerEvents="none"),e.state="enlarging",void 0!==e.timer&&clearTimeout(e.timer),e.timer=setTimeout((function(){e.$emit("enlarging"),e.styles={backgroundImage:"url("+e.$props.src+")",transition:e.transition_value},"hover"==e.$props.trigger&&(e.styles.pointerEvents="none"),void 0!==e.timer&&clearTimeout(e.timer),e.timer=setTimeout((function(){e.state="enlarged",e.$emit("enlarged")}),e.$props.animation_duration)}),e.delay)},reset:function(){var e=this;if("delarging"!=e.state){var t=e.$refs.slot.getBoundingClientRect();void 0!==e.timer&&clearTimeout(e.timer),e.timer=setTimeout((function(){e.state="delarging",e.$emit("delarging"),e.styles={backgroundImage:"url("+e.$props.src+")",position:"fixed",left:Math.round(t.left)+"px",top:Math.round(t.top+e.adjust_top)+"px",width:Math.round(t.right-t.left)+"px",height:Math.round(t.bottom-t.top)+"px",transition:e.transition_value},"hover"==e.$props.trigger&&(e.styles.pointerEvents="none"),void 0!==e.timer&&clearTimeout(e.timer),e.timer=setTimeout((function(){e.state="delarged",e.$emit("delarged")}),e.$props.animation_duration)}),0)}else e.enlarge()}},mounted:function(){this.init()}};function n(e,t,n,i,a,o,r,s,l,d){"boolean"!=typeof r&&(l=s,s=r,r=!1);const c="function"==typeof n?n.options:n;let g;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,a&&(c.functional=!0)),i&&(c._scopeId=i),o?(g=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(o)},c._ssrRegister=g):t&&(g=r?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),g)if(c.functional){const e=c.render;c.render=function(t,n){return g.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,g):[g]}return n}const i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function a(e){return(e,t)=>function(e,t){const n=i?t.media||"default":e,a=r[n]||(r[n]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",t.media&&a.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(n),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{const e=a.ids.size-1,t=document.createTextNode(n),i=a.element.childNodes;i[e]&&a.element.removeChild(i[e]),i.length?a.element.insertBefore(t,i[e]):a.element.appendChild(t)}}}(e,t)}let o;const r={};var s=n({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:{"enlargeable-image":!0,active:"delarged"!=e.state}},[n("div",e._g({ref:"slot",staticClass:"slot"},"click"==this.$props.trigger?{click:e.enlarge}:{mouseenter:e.enlarge,mouseleave:e.reset}),[e._t("default",[n("img",{staticClass:"default",attrs:{src:this.$props.src}})])],2),e._v(" "),n("div",e._g({staticClass:"full",class:e.state,style:e.styles},"click"==this.$props.trigger?{click:e.reset}:{}),["enlarged"!=e.state?n("img",{attrs:{src:this.$props.src}}):e._e(),e._v(" "),"enlarged"==e.state?n("img",{attrs:{src:this.$props.src_large}}):e._e()])])},staticRenderFns:[]},(function(e){e&&e("data-v-74c9692d_0",{source:".enlargeable-image>.slot[data-v-74c9692d]{display:inline-block;max-width:100%;max-height:100%;cursor:zoom-in}.enlargeable-image>.slot>img.default[data-v-74c9692d]{max-width:100%;vertical-align:middle}.enlargeable-image.active>.slot[data-v-74c9692d]{opacity:.3;filter:grayscale(100%)}.enlargeable-image .full[data-v-74c9692d]{cursor:zoom-out;background-color:transparent;align-items:center;justify-content:center;background-position:center center;background-repeat:no-repeat;background-size:contain;display:none}.enlargeable-image .full>img[data-v-74c9692d]{object-fit:contain;width:100%;height:100%}.enlargeable-image .full.enlarging[data-v-74c9692d]{display:flex;position:fixed;left:0;top:0;width:100%;height:100%;background-color:transparent;cursor:zoom-out;z-index:3}.enlargeable-image .full.enlarged[data-v-74c9692d]{display:flex;position:fixed;left:0;top:0;width:100%;height:100%;background-color:transparent;cursor:zoom-out;z-index:2}.enlargeable-image .full.delarging[data-v-74c9692d]{display:flex;position:fixed;left:0;top:0;width:100%;height:100%;background-color:transparent;cursor:zoom-in;z-index:1}",map:void 0,media:void 0})}),t,"data-v-74c9692d",!1,void 0,!1,a,void 0,void 0),l=function(e){l.installed||(l.installed=!0,e.component("VueEnlargeableImage",s))},d={install:l},c=null;return"undefined"!=typeof window?c=window.Vue:"undefined"!=typeof global&&(c=global.Vue),c&&c.use(d),s.install=l,e.default=s,e}({});