← Back
Editing: img-previewer.min.js
function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,_toPropertyKey(n.key),n)}}function _createClass(t,e,i){return e&&_defineProperties(t.prototype,e),i&&_defineProperties(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t}function _toPropertyKey(t){t=_toPrimitive(t,"string");return"symbol"==_typeof(t)?t:t+""}function _toPrimitive(t,e){if("object"!=_typeof(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0===i)return("string"===e?String:Number)(t);i=i.call(t,e||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}var _ImgPreviewer;"undefined"==typeof ImgPreviewer&&(_ImgPreviewer=(()=>_createClass(function t(e){var i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,t),this.selector=e,this.options=i,this.initialize()},[{key:"initialize",value:function(){var t=this;this.index=0,this.imageElements=[],this.config=Object.assign({ratio:.9,zoom:{min:.1,max:5,step:.1},opacity:.6,scrollbar:!0},this.options),this.uniqueId=0,this.previewContainerId=null,this.generateUniqueIds(),this.previewContainer=null,this.historyInfo=null,this.imageEl=null,this.body=document.body||document.getElementsByTagName("body")[0],this.windowWidth=window.innerWidth,this.windowHeight=window.innerHeight,window.addEventListener("resize",function(){t.handleResize()}),this.render(),this.update(),this.bindEvents()}},{key:"handleResize",value:function(){var o,s,a,r,c,l=this;null!=this.historyInfo&&this.historyInfo&&this.historyInfo.width&&this.historyInfo.height&&(o=this.index,s=this.config.ratio,a=this.imageElements,r=this.config.scrollbar,(c=new Image).src=a[o].href,c.onload=function(){var t=c.width,e=c.height,i=window.innerWidth,n=window.innerHeight,i=(i<t||n<e?(t*=n=Math.min(i/t,n/e),e*=n):i<=768&&300<t&&(t*=n=300/t,e*=n),(window.innerWidth-t)/2),n=(window.innerHeight-e)/2;l.currentImageScale=l.calcScaleNums(t,e,s),l.historyInfo={startX:i,startY:n,width:t,height:e,endX:0,endY:0,scale:l.currentImageScale,rotate:0},l.imageEl.src=a[o].href,l.setImageBaseStyle(l.imageEl,t,e,i,n),setTimeout(function(){l.setImageAnimationParams(l.historyInfo)}),l.previewContainer.classList.add("show"),r||l.toggleScrollBar(!1)})}},{key:"generateUniqueIds",value:function(){this.uniqueId=this.selector.replace(/[^a-zA-Z0-9]/g,""),this.previewContainerId="image-preview-container"+this.uniqueId}},{key:"render",value:function(){this.previewContainer=document.createElement("div"),this.previewContainer.classList.add("image-preview-container"),this.previewContainer.id="image-preview-container-"+this.uniqueId;var t="preview-image-"+this.uniqueId,e="prev-button-"+this.uniqueId,i="next-button-"+this.uniqueId,n="close-button-"+this.uniqueId,o="reset-button-"+this.uniqueId,s="rotate-left-button-"+this.uniqueId,a="rotate-right-button-"+this.uniqueId;this.previewContainer.innerHTML='\n <div class="preview-header">\n <div class="nums">\n <p>\n <span id="current-index-'.concat(this.uniqueId,'"></span>\n / \n <span id="total-nums-').concat(this.uniqueId,'"></span>\n </p>\n </div>\n <div class="tool-btn">\n <button id="').concat(s,'" data-tooltip="Rotate Right"><i class="iconfont icon-xuanzhuan"></i></button>\n <button id="').concat(a,'" data-tooltip="Rotate Left"><i class="iconfont icon-xuanzhuan1"></i></button>\n <button id="').concat(o,'" data-tooltip="Reset"><i class="iconfont icon-zhongzhi"></i></button>\n <button id="').concat(n,'" 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" class="').concat(e,'" data-tooltip="Prev"><i class="iconfont icon-shangyige"></i></button>\n <div class="img-content" id="image-content-').concat(this.uniqueId,'"><img id="').concat(t,'" src="" alt="" /></div>\n <button id="next" class="').concat(i,'" data-tooltip="Next"><i class="iconfont icon-xiayige"></i></button>\n </div>'),this.body.appendChild(this.previewContainer),this.imageEl=document.getElementById(t)}},{key:"update",value:function(){var i=this;this.imageElements=document.querySelectorAll("".concat(this.selector," a:not(.sp-hidden-items)")),this.imageElements.forEach(function(t,e){t.onclick=function(t){i.handleOpen(t,e),i.taggleModel(!0),i.updateIndex(e)}})}},{key:"getElementRect",value:function(t){return t.getBoundingClientRect()}},{key:"calcScaleNums",value:function(t,e,i){t=this.windowWidth*i/t,i=this.windowHeight*i/e,e=i<t?i:t;return e=1<e?1:e}},{key:"setImageBaseStyle",value:function(t,e,i,n,o){t.style.cssText="width:".concat(e,"px;height:").concat(i,"px;position:fixed; top:").concat(o,"px; left:").concat(n,"px;")}},{key:"taggleModel",value:function(t){this.previewContainer.style.display=t?"block":"none"}},{key:"toggleModel",value:function(t){this.previewContainer.style.display=t?"block":"none"}},{key:"setImageAnimationParams",value:function(t){this.imageEl.style.setProperty("--offsetX","".concat(t.endX,"px")),this.imageEl.style.setProperty("--offsetY","".concat(t.endY+30,"px")),this.imageEl.style.setProperty("--scale","".concat(t.scale)),this.imageEl.style.setProperty("--rotate","".concat(t.rotate,"deg"))}},{key:"useIndexUpdateImage",value:function(t){var n=this,o=this.config.ratio,s=100,a=100,r=this.imageElements[t].href,c=new Image;c.src=r,c.onload=function(){a=c.width,s=c.height;var t=window.innerWidth,e=window.innerHeight,i=(t<a||e<s?(i=t/a,e=e/s,i=Math.min(i,e),a*=i,s*=i):t<=768&&300<a&&(a*=e=300/a,s*=e),(window.innerWidth-a)/2),t=(window.innerHeight-s)/2;n.imageEl.classList.add("moving"),n.setImageBaseStyle(n.imageEl,a,s,i,t),n.historyInfo={startX:i,startY:t,width:a,height:s,endX:0,endY:0,scale:n.calcScaleNums(a,s,o),rotate:0},n.imageEl.src=r,n.setImageAnimationParams(n.historyInfo),setTimeout(function(){n.imageEl.classList.remove("moving")})}}},{key:"bindEvents",value:function(){var t,e,i,n,o,s,a=this,r=this.previewContainer;r&&(t="prev-button-"+this.uniqueId,e="next-button-"+this.uniqueId,i="close-button-"+this.uniqueId,n="reset-button-"+this.uniqueId,o="rotate-left-button-"+this.uniqueId,s="rotate-right-button-"+this.uniqueId,r.querySelector("#".concat(i)).addEventListener("click",function(){a.handleClose()}),r.querySelector(".".concat(t)).addEventListener("click",function(){a.prev()}),r.querySelector(".".concat(e)).addEventListener("click",function(){a.next()}),r.querySelector("#".concat(n)).addEventListener("click",function(){a.handleReset()}),r.querySelector("#".concat(o)).addEventListener("click",function(){a.handelRotateLeft()}),r.querySelector("#".concat(s)).addEventListener("click",function(){a.handelRotateRight()}),r.addEventListener("click",function(t){t.target.classList.contains("image-container")&&a.handleClose()}),document.addEventListener("keydown",function(t){"Escape"===t.key&&a.handleClose()}))}},{key:"handleReset",value:function(){this.imageEl.style.top="".concat(this.historyInfo.startY,"px"),this.imageEl.style.left="".concat(this.historyInfo.startX,"px"),this.imageEl.style.setProperty("--rotate","0deg"),this.imageEl.style.setProperty("--scale","".concat(this.historyInfo.scale)),this.historyInfo.rotate=0}},{key:"handelRotateLeft",value:function(){this.historyInfo.rotate-=90,this.imageEl.style.setProperty("--rotate","".concat(this.historyInfo.rotate,"deg"))}},{key:"handelRotateRight",value:function(){this.historyInfo.rotate+=90,this.imageEl.style.setProperty("--rotate","".concat(this.historyInfo.rotate,"deg"))}},{key:"runAnimation",value:function(e,i,n){var o=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,s=window.cancelAnimationFrame||window.mozCancelAnimationFrame,a=i.start||0,r=i.end||0,c=i.step,l=null;!function t(){0<c&&a<r||c<0&&r<a?(a+=c,e.style[i.style]=i.template.replace("$",a),l=o(t)):(n&&n(),s(l))}()}},{key:"handleOpen",value:function(t,o){var s=this,a=(t.preventDefault(),this.config.ratio),r=this.imageElements,c=this.config.scrollbar,l=new Image;l.src=r[o].href,l.onload=function(){var t=l.width,e=l.height,i=window.innerWidth,n=window.innerHeight,i=(i<t||n<e?(t*=n=Math.min(i/t,n/e),e*=n):i<=768&&300<t&&(t*=n=300/t,e*=n),(window.innerWidth-t)/2),n=(window.innerHeight-e)/2;s.currentImageScale=s.calcScaleNums(t,e,a),s.historyInfo={startX:i,startY:n,width:t,height:e,endX:0,endY:0,scale:s.currentImageScale,rotate:0},s.imageEl.src=r[o].href,s.setImageBaseStyle(s.imageEl,t,e,i,n),setTimeout(function(){s.setImageAnimationParams(s.historyInfo)}),s.previewContainer.classList.add("show"),c||s.toggleScrollBar(!1)}}},{key:"handleClose",value:function(){var t=this,e=this.config.opacity;this.imageElements[this.index];this.imageEl.style.display="none",this.runAnimation(this.previewContainer,{start:e,end:0,step:-.05,style:"background",template:"rgba(0, 0, 0, $)"},function(){t.imageEl.src="",t.imageEl.style="",t.previewContainer.style="",t.previewContainer.classList.remove("hiding"),t.toggleModel(!1)}),this.previewContainer.classList.remove("show"),this.previewContainer.classList.add("hiding"),this.config.scrollbar||this.toggleScrollBar(!0)}},{key:"prev",value:function(){0!==this.index&&(--this.index,this.updateIndex(this.index),this.useIndexUpdateImage(this.index))}},{key:"next",value:function(){this.index<this.imageElements.length-1&&(this.index+=1,this.updateIndex(this.index),this.useIndexUpdateImage(this.index))}},{key:"updateIndex",value:function(t){this.index=t;var e=document.getElementById("total-nums-".concat(this.uniqueId)),i=document.getElementById("current-index-".concat(this.uniqueId));e&&i?(e.innerText=this.imageElements.length,i.innerText=t+1):console.error("Total numbers element or current index element not found.")}},{key:"setImageStyles",value:function(t,e,i){this.historyInfo.endX=t/2-this.historyInfo.width/2-this.historyInfo.startX,this.historyInfo.endY=e/2-this.historyInfo.height/2-this.historyInfo.startY,this.historyInfo.scale=this.historyInfo._scale=this.calcScaleNums(t,this.historyInfo.width,e,this.historyInfo.height,this.mergeOptions.fillRatio||this.defaultOptions.fillRatio),i&&(this.historyInfo.rotate=0,this.imageEl.style.setProperty("--rotate","0")),this.setImageBaseStyle(this.imageEl,t,e,this.historyInfo.startX-1,this.historyInfo.startY),this.imageEl.style.setProperty("--offsetX","".concat(this.historyInfo.endX,"px")),this.imageEl.style.setProperty("--offsetY","".concat(this.historyInfo.endY,"px")),this.imageEl.style.setProperty("--scale","".concat(this.historyInfo.scale))}}]))(),window.ImgPreviewer=_ImgPreviewer);
Save File
Cancel