"use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).ImgPreviewer=t()}(void 0,function(){function i(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)}}function o(e){e.preventDefault()}function u(e,t,n){var i=g*n/e,o=p*n/t;return o<i?o:i}function m(e,t,n,i,o){e.style.cssText="width:".concat(t,"px;height:").concat(n,"px;position:fixed; top:").concat(o,"px; left:").concat(i,"px;")}function f(e){y.style.display=e?"block":"none"}function h(e){a.style.overflow=e?"auto":"hidden"}var a,p,g,y=null,v=null,w=null,x=0,s={ratio:.9,zoom:{min:.1,max:5,step:.1},opacity:.6,scrollbar:!0};return function(){function d(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,d),this.index=0,this.selector=e,this.options=t,this.imageElements=[],t.zoom=Object.assign({},s.zoom,t.zoom||{}),this.config=Object.assign({},s,t),!e||"string"!=typeof e)throw new Error("ImagePreviewer plugin should css string selector that on first params,like #el,.el");if(!document.querySelector(e))throw new Error("selector is invalid");this.init()}var e,t,n;return e=d,n=[{key:"setImageAnimationParams",value:function(e){v.style.setProperty("--offsetX","".concat(e.endX,"px")),v.style.setProperty("--offsetY","".concat(e.endY+30,"px")),v.style.setProperty("--scale","".concat(e.scale)),v.style.setProperty("--rotate","".concat(e.rotate,"deg"))}}],(t=[{key:"update",value:function(){var n=this;this.imageElements=document.querySelectorAll("".concat(this.selector," a:not(.sp-hidden-items)")),this.imageElements.forEach(function(e,t){e.onclick=null,e.onclick=function(e){n.handleOpen(e,t),f(!0),n.updateIndex(t)}})}},{key:"bindEvent",value:function(){var a=this,e=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(window.navigator.userAgent),t=e?"touchstart":"mousedown",n=e?"touchend":"mouseup",s=e?"touchmove":"mousemove";this.imageElements.forEach(function(e,t){e.onclick=function(e){a.handleOpen(e,t),f(!0),a.updateIndex(t)}}),document.getElementById("close").addEventListener("click",function(){a.handleClose()}),document.getElementById("reset").addEventListener("click",function(){a.handleReset()}),document.getElementById("prev").addEventListener("click",function(){a.prev()}),document.getElementById("next").addEventListener("click",function(){a.next()}),y.addEventListener("click",function(e){"image-container"===e.target.classList[0]&&a.handleClose()}),v.addEventListener(t,function(e){var i=e.clientX-v.offsetLeft,o=e.clientY-v.offsetTop;this.classList.add("moving"),this["on".concat(s)]=function(e){var t=e.clientX-i,n=e.clientY-o;this.style.left="".concat(t,"px"),this.style.top="".concat(n,"px")},this["on".concat(n)]=function(){this.classList.remove("moving"),this.onmousemove=null},this.onmouseout=function(){this.classList.remove("moving"),this.onmousemove=null}}),v.addEventListener("mousewheel",function(e){var t=a.config.zoom,n=t.min,i=t.max,o=t.step;0<e.wheelDelta&&x<i?x+=o:n<x&&(x-=o),v.style.setProperty("--scale","".concat(x.toFixed(2)))},!0),document.getElementById("rotate-right").addEventListener("click",function(){a.handelRotateRight()}),document.getElementById("rotate-left").addEventListener("click",function(){a.handelRotateLeft()}),y.addEventListener("mousewheel",o),document.ondragstart=o,document.ondragend=o,window.onresize=function(t,n){var i=null;return function(e){clearTimeout(i),i=setTimeout(function(){t(e),clearTimeout(i)},n)}}.bind(null,function(){a.handleClose(),g=window.innerWidth,p=window.innerHeight},100)()}},{key:"handleReset",value:function(){v.style.top="".concat(w.startY,"px"),v.style.left="".concat(w.startX,"px"),v.style.setProperty("--rotate","".concat(0,"deg")),v.style.setProperty("--scale","".concat(w.scale)),w.rotate=0}},{key:"handleOpen",value:function(e,t){var n=this.config.ratio,i=this.imageElements,o=(e.target,100),a=100,s=e.clientX-e.offsetX,c=e.clientY-e.offsetY+1,l=this.config.scrollbar,r=new Image;r.src=i[t].href,r.onload=function(){if(o=r.width,a=r.height,window.screen.width<=768&&100<o){var e=Math.ceil(o/60);o/=e,a/=e}x=u(o,a,n),w={startX:s,startY:c,endX:g/2-o/2-s,endY:p/2-a/2-c,scale:x,rotate:0},v.src=i[t].href,m(v,o,a,s,c),setTimeout(function(){d.setImageAnimationParams(w)}),y.classList.add("show"),!l&&h(!1)}}},{key:"handleClose",value:function(){var t,n,i,o,a,s,c,l,r,e=this.config.opacity;this.imageElements[this.index];v.style.display="none",t=y,n={start:e,end:0,step:-.05,style:"background",template:"rgba(0, 0, 0, $)"},i=function(){v.src="",v.style="",y.style="",y.classList.remove("hiding"),f(!1)},o=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,a=window.cancelAnimationFrame||window.mozCancelAnimationFrame,s=n.start||0,c=n.end||0,l=n.step,r=null,function e(){0<l&&s<c||l<0&&c<s?(s+=l,t.style[n.style]=n.template.replace("$",s),r=o(e)):(i&&i(),a(r))}(),y.classList.remove("show"),y.classList.add("hiding"),!this.config.scrollbar&&h(!0)}},{key:"handelRotateLeft",value:function(){w.rotate-=90,v.style.setProperty("--rotate","".concat(w.rotate,"deg"))}},{key:"handelRotateRight",value:function(){w.rotate+=90,v.style.setProperty("--rotate","".concat(w.rotate,"deg"))}},{key:"prev",value:function(){0!==this.index&&(this.index-=1,this.updateIndex(this.index),this.useIndexUpdateImage(this.index))}},{key:"getMeta",value:function(e){var t=new Image;t.src=e,t.onload=function(){return this.width}}},{key:"next",value:function(){this.index<this.imageElements.length-1&&(this.index+=1,this.updateIndex(this.index),this.useIndexUpdateImage(this.index))}},{key:"useIndexUpdateImage",value:function(e){var t=this.config.ratio,n=100,i=100,o=this.imageElements[e].href,a=new Image;a.src=o,a.onload=function(){if(i=a.width,n=a.height,window.screen.width<=768&&100<i){var e=Math.ceil(i/60);i/=e,n/=e}v.classList.add("moving"),m(v,i,n,g/2-i/2,p/2-n/2),w={endX:0,endY:0,scale:u(i,n,t),rotate:0},v.src=o,d.setImageAnimationParams(w),setTimeout(function(){v.classList.remove("moving")})}}},{key:"updateIndex",value:function(e){this.index=e,document.getElementById("total-nums").innerText=this.imageElements.length,document.getElementById("current-index").innerText=e+1}},{key:"render",value:function(){var e=document.getElementById("image-preview-container");e?y=e:((y=document.createElement("div")).classList.add("image-preview-container"),y.id="image-preview-container",y.innerHTML='<div class="preview-header">\n <div class="nums">\n\n <p>\n <span id="current-index"></span>\n / \n <span id="total-nums"></span>\n </p>\n\n </div>\n <div class="tool-btn">\n <button id="rotate-left" data-tooltip="Rotate Right"><i class="iconfont icon-xuanzhuan"></i></button>\n <button id="rotate-right" data-tooltip="Rotate Left"><i class="iconfont icon-xuanzhuan1"></i></button>\n <button id="reset" data-tooltip="Reset"><i class="iconfont icon-zhongzhi"></i></button>\n <button id="close" data-tooltip="Close"><i class="iconfont icon-account-practice-lesson-close"></i></button>\n </div>\n </div>\n <div class="image-container">\n <button id="prev" data-tooltip="Prev"><i class="iconfont icon-shangyige"></i></button>\n <div class="img-content" id="image-content"><img id="preview-image" src="" alt="" /></div>\n <button id="next" data-tooltip="Next"><i class="iconfont icon-xiayige"></i></button>\n </div>',a.appendChild(y)),v=document.getElementById("preview-image")}},{key:"init",value:function(){a=document&&document.body||document.getElementsByTagName("body")[0],g=window.innerWidth,p=window.innerHeight,this.imageElements=document.querySelectorAll("".concat(this.selector," a:not(.sp-hidden-items)"));for(var e=0,t=this.imageElements.length;e<t;e++)this.imageElements[e].classList.add("zoom-in");this.render(),this.updateIndex(this.index),this.bindEvent(this.imageElements),this.options.onInited&&this.options.onInited()}}])&&i(e.prototype,t),n&&i(e,n),d}()});