@hyper-proto/iv-viewer 2.3.0

package/dist/iv-viewer.min.css

@@ -0,0 +1 @@
+.iv-container{overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.iv-fullscreen{background:#0d0d0d;display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:1000}.iv-fullscreen-container{height:100%;position:relative;width:100%}.iv-fullscreen-close{cursor:pointer;height:24px;overflow:hidden;padding:10px;position:absolute;right:10px;text-align:center;text-shadow:0 0 3px #6d6d6d;top:10px;transition:all .2s ease;width:24px}.iv-fullscreen-close:after,.iv-fullscreen-close:before{background:#fff;content:"";height:4px;left:50%;position:absolute;top:50%;width:24px}.iv-fullscreen-close:before{transform:translate(-50%,-50%) rotate(45deg)}.iv-fullscreen-close:after{transform:translate(-50%,-50%) rotate(-45deg)}.iv-fullscreen-close:hover{transform:rotate(90deg);transform-origin:50% 50%}.iv-snap-view{background:#000;border:1px solid #aaa;box-sizing:border-box;height:152px;left:20px;opacity:0;position:absolute;top:20px;transition:opacity .4s ease;width:152px;z-index:100}.iv-snap-image-wrap{display:inline-block;left:50%;max-height:150px;max-width:150px;overflow:hidden;position:absolute;top:50%;transform:translate(-50%,-50%)}.iv-snap-image{position:relative;touch-action:none}.iv-snap-handle{border:1px solid #aaa;box-shadow:0 0 0 200px rgba(0,0,0,.5);box-sizing:border-box;cursor:pointer;cursor:grab;position:absolute;transform:translateZ(0)}.iv-snap-handle:active{cursor:grabbing}.iv-zoom-actions{background:rgba(0,0,0,.3);border:1px solid #aaa;border-top:0;box-sizing:content-box;height:20px;left:-1px;position:absolute;top:150px;width:100%}.iv-zoom-actions--has-buttons .iv-zoom-slider{left:24px;right:24px}.iv-zoom-handle{background:#fff;cursor:pointer;cursor:grab;height:20px;position:absolute;width:20px}.iv-zoom-handle:active{cursor:grabbing}.iv-zoom-slider{bottom:0;box-sizing:inherit;left:0;position:absolute;right:0;top:0}.iv-button-zoom,.iv-button-zoom--in,.iv-button-zoom--out{align-items:center;bottom:0;cursor:pointer;display:flex;justify-content:center;position:absolute;top:0;width:24px}.iv-button-zoom--in:after,.iv-button-zoom--in:before,.iv-button-zoom--out:after,.iv-button-zoom--out:before,.iv-button-zoom:after,.iv-button-zoom:before{background:#fff;content:"";height:2px;position:absolute;width:10px}.iv-button-zoom--in{right:0}.iv-button-zoom--in:after{transform:rotate(90deg)}.iv-button-zoom--out{left:0}.iv-image-mode{display:inline-block}.iv-image-view{height:100%;left:0;position:absolute;top:0;width:100%}.iv-image-wrap{display:inline-block}.iv-image-wrap:active{cursor:move}.iv-image{max-height:100%;max-width:100%;touch-action:none}.iv-image,.iv-loader{position:absolute;transform:translateZ(0)}.iv-loader{animation:loading-icon 1.1s linear infinite;border:1.1em solid rgba(0,0,0,.2);border-left-color:#fff;border-radius:50%;font-size:5px;height:32px;left:50%;margin-left:-16px;margin-top:-16px;text-indent:-9999em;top:50%;width:32px;z-index:100}.iv-loader:after{border-radius:50%;height:10em;width:10em}@keyframes loading-icon{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media screen and (max-width:767px){.iv-snap-view{visibility:hidden;z-index:-1}}

package/dist/iv-viewer.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).ImageViewer=t()}(this,function(){"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=Array(t);n<t;n++)i[n]=e[n];return i}function t(e,t,n){return t=r(t),function(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,s()?Reflect.construct(t,n||[],r(e).constructor):t.apply(e,n))}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t,n){return t&&function(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,h(i.key),i)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function o(e,t,n){return(t=h(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(){return a="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,n){var i=function(e,t){for(;!{}.hasOwnProperty.call(e,t)&&null!==(e=r(e)););return e}(e,t);if(i){var o=Object.getOwnPropertyDescriptor(i,t);return o.get?o.get.call(arguments.length<3?e:n):o.value}},a.apply(null,arguments)}function r(e){return r=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},r(e)}function s(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(s=function(){return!!e})()}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach(function(t){o(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function u(e,t){return u=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},u(e,t)}function m(t,n){return function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var i,o,a,r,s=[],l=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t);else for(;!(l=(i=a.call(n)).done)&&(s.push(i.value),s.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(r=n.return(),Object(r)!==r))return}finally{if(c)throw o}}return s}}(t,n)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var i={}.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?e(t,n):void 0}}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function d(){}function v(e){e.preventDefault()}function f(e,t,n,i){return e/=i,-n*((e-=1)*e*e*e-1)+t}function p(e){var t=document.createElement(e.tagName);return e.id&&(t.id=e.id),e.html&&(t.innerHTML=e.html),e.className&&(t.className=e.className),e.src&&(t.src=e.src),e.style&&(t.style.cssText=e.style),e.child&&t.appendChild(e.child),e.insertBefore?e.parent.insertBefore(t,e.insertBefore):e.parent.appendChild(t),t}function _(e,t){var n=t.split(" ");n.length>1?n.forEach(function(t){return _(e,t)}):e.classList?e.classList.add(t):e.className+=" ".concat(t)}function g(e,t){var n=t.split(" ");n.length>1?n.forEach(function(t){return g(e,t)}):e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\b)".concat(t.split(" ").join("|"),"(\\b|$)"),"gi")," ")}function y(e){return e.complete&&(void 0===e.naturalWidth||0!==e.naturalWidth)}function w(e){return e instanceof NodeList||e instanceof HTMLCollection?Array.prototype.slice.call(e):[e]}function b(e,t){var n=w(e);if("string"==typeof t)return window.getComputedStyle(n[0])[t];n.forEach(function(e){Object.keys(t).forEach(function(n){var i=t[n];e.style[n]=i})})}function S(e,t){e.style.removeProperty(t)}function z(e){w(e).forEach(function(e){e.parentNode.removeChild(e)})}function E(e,t,n){return Math.min(Math.max(e,t),n)}function x(e,t,n){return"string"==typeof t&&(t=[t]),t.forEach(function(t){e.addEventListener(t,n)}),function(){t.forEach(function(t){e.removeEventListener(t,n)})}}function V(e){var t=e[0],n=e[1];return Math.sqrt(Math.pow(n.pageX-t.pageX,2)+Math.pow(n.pageY-t.pageY,2))}var M=function(){return i(function e(t,i){var a=this,r=i.onStart,s=i.onMove,l=i.onEnd,c=i.isSliderEnabled;n(this,e),o(this,"startHandler",function(e){if(a.isSliderEnabled()){a.removeListeners(),e.preventDefault();var t=a.moveHandler,n=a.endHandler,i=a.onStart,o="touchstart"===e.type||"touchend"===e.type;a.touchMoveEvent=o?"touchmove":"mousemove",a.touchEndEvent=o?"touchend":"mouseup",a.sx=o?e.touches[0].clientX:e.clientX,a.sy=o?e.touches[0].clientY:e.clientY,i(e,{x:a.sx,y:a.sy}),document.addEventListener(a.touchMoveEvent,t),document.addEventListener(a.touchEndEvent,n),document.addEventListener("contextmenu",n)}}),o(this,"moveHandler",function(e){if(a.isSliderEnabled()){e.preventDefault();var t=a.sx,n=a.sy,i=a.onMove,o="touchmove"===a.touchMoveEvent,r=o?e.touches[0].clientX:e.clientX,s=o?e.touches[0].clientY:e.clientY;i(e,{dx:r-t,dy:s-n,mx:r,my:s})}}),o(this,"endHandler",function(){a.isSliderEnabled()&&(a.removeListeners(),a.onEnd())}),this.container=t,this.isSliderEnabled=c,this.onStart=r||d,this.onMove=s||d,this.onEnd=l||d},[{key:"removeListeners",value:function(){this.touchMoveEvent&&(document.removeEventListener(this.touchMoveEvent,this.moveHandler),document.removeEventListener(this.touchEndEvent,this.endHandler),document.removeEventListener("contextmenu",this.endHandler))}},{key:"init",value:function(){var e=this;["touchstart","mousedown"].forEach(function(t){e.container.addEventListener(t,e.startHandler)})}},{key:"destroy",value:function(){var e=this;["touchstart","mousedown"].forEach(function(t){e.container.removeEventListener(t,e.startHandler)}),this.removeListeners()}}])}(),I=function(){return i(function e(t){var i=this,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};n(this,e),o(this,"zoom",function(e,t){var n=i._options,o=i._elements,a=i._state,r=a.zoomValue,s=a.imageDim,l=a.containerDim,c=a.zoomSliderLength,u=o.image,m=o.zoomHandle,h=n.maxZoom;e=Math.round(Math.max(100,e)),e=Math.min(h,e),t=t||{x:l.w/2,y:l.h/2};var d=parseFloat(b(u,"left")),v=parseFloat(b(u,"top"));i._clearFrames();var p=0,_=(l.w-s.w)/2,g=(l.h-s.h)/2,y=l.w-_,w=l.h-g,S=function(){++p<16&&(i._frames.zoomFrame=requestAnimationFrame(S));var n=f(p,r,e-r,16);Math.abs(e-n)<1&&(n=e);var o=n/r,a=s.w*n/100,l=s.h*n/100,z=-((t.x-d)*o-t.x),E=-((t.y-v)*o-t.y);z=Math.min(z,_),E=Math.min(E,g),z+a<y&&(z=y-a),E+l<w&&(E=w-l),b(u,{height:"".concat(l,"px"),width:"".concat(a,"px"),left:"".concat(z,"px"),top:"".concat(E,"px")}),i._state.zoomValue=n,i._resizeSnapHandle(a,l,z,E),b(m,{left:"".concat((n-100)*c/(h-100),"px")}),i._listeners.onZoomChange&&i._listeners.onZoomChange(i._callbackData)};S()}),o(this,"_clearFrames",function(){var e=i._frames,t=e.slideMomentumCheck,n=e.sliderMomentumFrame,o=e.zoomFrame;clearInterval(t),cancelAnimationFrame(n),cancelAnimationFrame(o)}),o(this,"_resizeSnapHandle",function(e,t,n,o){var a=i._elements,r=i._state,s=a.snapHandle,l=a.image,c=r.imageDim,u=r.containerDim,m=r.zoomValue,h=r.snapImageDim,d=e||c.w*m/100,v=t||c.h*m/100,f=n||parseFloat(b(l,"left")),p=o||parseFloat(b(l,"top")),_=-f*h.w/d,g=-p*h.h/v,y=u.w*h.w/d,w=u.h*h.h/v;b(s,{top:"".concat(g,"px"),left:"".concat(_,"px"),width:"".concat(y,"px"),height:"".concat(w,"px")}),i._state.snapHandleDim={w:y,h:w}}),o(this,"showSnapView",function(e){var t=i._state,n=t.snapViewVisible,o=t.zoomValue,a=t.loaded,r=i._elements.snapView;i._options.snapView&&(n||o<=100||!a||(clearTimeout(i._frames.snapViewTimeout),i._state.snapViewVisible=!0,b(r,{opacity:1,pointerEvents:"inherit"}),e||(i._frames.snapViewTimeout=setTimeout(i.hideSnapView,1500))))}),o(this,"hideSnapView",function(){b(i._elements.snapView,{opacity:0,pointerEvents:"none"}),i._state.snapViewVisible=!1}),o(this,"refresh",function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];i._calculateDimensions(),i.resetZoom(e)});var r=this._findContainerAndImageSrc(t,a),s=r.container,l=r.domElement,u=r.imageSrc,m=r.hiResImageSrc;this._elements={container:s,domElement:l},this._options=c(c({},e.defaults),a),this._events={},this._listeners=this._options.listeners||{},this._frames={},this._sliders={},this._state={zoomValue:this._options.zoomValue},this._images={imageSrc:u,hiResImageSrc:m},this._init(),u&&this._loadImages(),l._imageViewer=this},[{key:"zoomInButton",get:function(){return this._options.hasZoomButtons?'<div class="iv-button-zoom--in" role="button"></div>':""}},{key:"zoomOutButton",get:function(){return this._options.hasZoomButtons?'<div class="iv-button-zoom--out" role="button"></div>':""}},{key:"imageViewHtml",get:function(){return'\n    <div class="iv-loader"></div>\n    <div class="iv-snap-view">\n      <div class="iv-snap-image-wrap">\n        <div class="iv-snap-handle"></div>\n      </div>\n      <div class="iv-zoom-actions '.concat(this._options.hasZoomButtons?"iv-zoom-actions--has-buttons":"",'">\n        ').concat(this.zoomInButton,'\n        <div class="iv-zoom-slider">\n          <div class="iv-zoom-handle"></div>\n        </div>\n        ').concat(this.zoomOutButton,'\n      </div>\n    </div>\n    <div class="iv-image-view" >\n      <div class="iv-image-wrap" ></div>\n    </div>\n  ')}},{key:"_findContainerAndImageSrc",value:function(e){var t,n,i=e;if("string"==typeof e&&(i=document.querySelector(e)),i._imageViewer)throw new Error("An image viewer is already being initiated on the element.");var o=e;return"IMG"===i.tagName?(t=i.src,n=i.getAttribute("high-res-src")||i.getAttribute("data-high-res-src"),o=function(e,t){var n=t.tag,i=void 0===n?"div":n,o=t.className,a=t.id,r=t.style,s=document.createElement(i);return o&&(s.className=o),a&&(s.id=a),r&&(s.style=r),e.parentNode.insertBefore(s,e),e.parentNode.removeChild(e),s.appendChild(e),s}(i,{className:"iv-container iv-image-mode",style:{display:"inline-block",overflow:"hidden"}}),b(i,{opacity:0,position:"relative",zIndex:-1})):(t=i.getAttribute("src")||i.getAttribute("data-src"),n=i.getAttribute("high-res-src")||i.getAttribute("data-high-res-src")),{container:o,domElement:i,imageSrc:t,hiResImageSrc:n}}},{key:"_init",value:function(){this._initDom(),this._initImageSlider(),this._initSnapSlider(),this._initZoomSlider(),this._pinchAndZoom(),this._scrollZoom(),this._doubleTapToZoom(),this._initEvents()}},{key:"_initDom",value:function(){var e=this._elements.container;p({tagName:"div",className:"iv-wrap",html:this.imageViewHtml,parent:e}),_(e,"iv-container"),"static"===b(e,"position")&&b(e,{position:"relative"}),this._elements=c(c({},this._elements),{},{snapView:e.querySelector(".iv-snap-view"),snapImageWrap:e.querySelector(".iv-snap-image-wrap"),imageWrap:e.querySelector(".iv-image-wrap"),snapHandle:e.querySelector(".iv-snap-handle"),zoomHandle:e.querySelector(".iv-zoom-handle"),zoomIn:e.querySelector(".iv-button-zoom--in"),zoomOut:e.querySelector(".iv-button-zoom--out")}),this._listeners.onInit&&this._listeners.onInit(this._callbackData)}},{key:"_initImageSlider",value:function(){var e,t,n=this,i=this._elements.imageWrap,o=new M(i,{isSliderEnabled:function(){var e=n._state,t=e.loaded,i=e.zooming,o=e.zoomValue;return t&&!i&&o>100},onStart:function(i,o){var a=n._sliders.snapSlider;n._clearFrames(),a.onStart(),e=[o,o],t=void 0,n._frames.slideMomentumCheck=setInterval(function(){t&&(e.shift(),e.push({x:t.mx,y:t.my}))},50)},onMove:function(e,i){var o=n._state.snapImageDim,a=n._sliders.snapSlider,r=n._getImageCurrentDim();t=i,a.onMove(e,{dx:-i.dx*o.w/r.w,dy:-i.dy*o.h/r.h})},onEnd:function(){var i,o,a,r=n._state.snapImageDim,s=n._sliders.snapSlider,l=n._getImageCurrentDim();n._clearFrames();var c=e[1].x-e[0].x,u=e[1].y-e[0].y,m=function(){i<=60&&(n._frames.sliderMomentumFrame=requestAnimationFrame(m)),o+=f(i,c/3,-c/3,60),a+=f(i,u/3,-u/3,60),s.onMove(null,{dx:-o*r.w/l.w,dy:-a*r.h/l.h}),i++};(Math.abs(c)>30||Math.abs(u)>30)&&(i=1,o=t.dx,a=t.dy,m())}});o.init(),this._sliders.imageSlider=o}},{key:"_initSnapSlider",value:function(){var e,t,n=this,i=this._elements.snapHandle,o=new M(i,{isSliderEnabled:function(){return n._state.loaded},onStart:function(){var o=n._frames,a=o.slideMomentumCheck,r=o.sliderMomentumFrame;e=parseFloat(b(i,"top")),t=parseFloat(b(i,"left")),clearInterval(a),cancelAnimationFrame(r)},onMove:function(o,a){var r=n._state,s=r.snapHandleDim,l=r.snapImageDim,c=n._elements.image,u=n._getImageCurrentDim(),m=Math.max(l.w-s.w,t),h=Math.max(l.h-s.h,e),d=Math.min(0,t),v=Math.min(0,e),f=E(t+a.dx,d,m),p=E(e+a.dy,v,h),_=-f*u.w/l.w,g=-p*u.h/l.h;b(i,{left:"".concat(f,"px"),top:"".concat(p,"px")}),b(c,{left:"".concat(_,"px"),top:"".concat(g,"px")})}});o.init(),this._sliders.snapSlider=o}},{key:"_initZoomSlider",value:function(){var e,t,n=this,i=this._elements,o=i.snapView,a=i.zoomHandle,r=o.querySelector(".iv-zoom-slider"),s=new M(r,{isSliderEnabled:function(){return n._state.loaded},onStart:function(i){var o=n._sliders.zoomSlider;e=r.getBoundingClientRect().left,t=parseInt(b(a,"width"),10),o.onMove(i)},onMove:function(i){var o=n._options.maxZoom,a=n._state.zoomSliderLength,r=100+(o-100)*E((void 0!==i.clientX?i.clientX:i.touches[0].clientX)-e-t/2,0,a)/a;n.zoom(r)}});s.init(),this._sliders.zoomSlider=s}},{key:"_initEvents",value:function(){this._snapViewEvents(),this._options.refreshOnResize&&(this._events.onWindowResize=x(window,"resize",this.refresh)),this._events.onDragStart=x(this._elements.container,"dragstart",v)}},{key:"_snapViewEvents",value:function(){var e=this,t=this._elements,n=t.imageWrap,i=t.snapView;if(this._events.snapViewOnMouseMove=x(n,["touchmove","mousemove"],function(){e.showSnapView()}),this._events.mouseEnterSnapView=x(i,["mouseenter","touchstart"],function(){e._state.snapViewVisible=!1,e.showSnapView(!0)}),this._events.mouseLeaveSnapView=x(i,["mouseleave","touchend"],function(){e._state.snapViewVisible=!1,e.showSnapView()}),this._options.hasZoomButtons){var o=this._elements,a=o.zoomOut,r=o.zoomIn;this._events.zoomInClick=x(r,["click"],function(){e.zoom(e._state.zoomValue+e._options.zoomStep||50)}),this._events.zoomOutClick=x(a,["click"],function(){e.zoom(e._state.zoomValue-e._options.zoomStep||50)})}}},{key:"_pinchAndZoom",value:function(){var e=this,t=this._elements,n=t.imageWrap,i=t.container;this._events.pinchStart=x(n,"touchstart",function(t){var n=e._state,o=n.loaded,a=n.zoomValue,r=e._events;if(o){var s=t.touches[0],l=t.touches[1];if(s&&l){e._state.zooming=!0;var c=i.getBoundingClientRect(),u=V(t.touches),m={x:(l.clientX+s.clientX)/2-c.left,y:(l.clientY+s.clientY)/2-c.top};r.pinchMove&&r.pinchMove(),r.pinchEnd&&r.pinchEnd(),r.pinchMove=x(document,"touchmove",function(t){var n=V(t.touches),i=a+(n-u)/2;e.zoom(i,m)}),r.pinchEnd=x(document,"touchend",function(t){r.pinchMove(),r.pinchEnd(),e._state.zooming=!1,1===t.touches.length&&e._sliders.imageSlider.startHandler(t)})}}})}},{key:"_scrollZoom",value:function(){var e=this,t=this._options,n=this._elements,i=n.container,o=n.imageWrap,a=0;this._events.scrollZoom=x(o,"wheel",function(n){var o=e._state,r=o.loaded,s=o.zoomValue;if(t.zoomOnMouseWheel&&r){e._clearFrames();var l=Math.max(-1,Math.min(1,n.wheelDelta||-n.detail||-n.deltaY)),c=s*(100+15*l)/100;if(c>=100&&c<=t.maxZoom?a=0:a+=Math.abs(l),n.preventDefault(),!(a>5)){var u=i.getBoundingClientRect(),m=n.clientX-u.left,h=n.clientY-u.top;e.zoom(c,{x:m,y:h}),e.showSnapView()}}})}},{key:"_doubleTapToZoom",value:function(){var e,t=this,n=this._elements.imageWrap,i=0;this._events.doubleTapToZoom=x(n,"click",function(n){0===i?(i=Date.now(),e={x:n.clientX,y:n.clientY}):Date.now()-i<500&&Math.abs(n.clientX-e.x)<50&&Math.abs(n.clientY-e.y)<50?(t._state.zoomValue===t._options.zoomValue?t.zoom(200):t.resetZoom(),i=0):i=0})}},{key:"_getImageCurrentDim",value:function(){var e=this._state,t=e.zoomValue,n=e.imageDim;return{w:n.w*(t/100),h:n.h*(t/100)}}},{key:"_loadImages",value:function(){var e=this,t=this._images,n=this._elements,i=t.imageSrc,o=t.hiResImageSrc,a=n.container,r=n.snapImageWrap,s=n.imageWrap,l=a.querySelector(".iv-loader");z(a.querySelectorAll(".iv-snap-image, .iv-image"));var c=p({tagName:"img",className:"iv-snap-image",src:i,insertBefore:r.firstChild,parent:r}),u=p({tagName:"img",className:"iv-image iv-small-image",src:i,parent:s});this._state.loaded=!1,this._elements.image=u,this._elements.snapImage=c,b(l,{display:"block"}),b(u,{visibility:"hidden"}),this.hideSnapView();var m=function(){b(l,{display:"none"}),b(u,{visibility:"visible"}),o&&e._loadHighResImage(o),e._state.loaded=!0,e._calculateDimensions(),e._listeners.onImageLoaded&&e._listeners.onImageLoaded(e._callbackData),e.resetZoom()};y(u)?m():("function"==typeof this._events.imageLoad&&this._events.imageLoad(),this._events.imageLoad=x(u,"load",m))}},{key:"_loadHighResImage",value:function(e){var t=this,n=this._elements,i=n.imageWrap,o=n.container,a=this._elements.image,r=p({tagName:"img",className:"iv-image iv-large-image",src:e,parent:i,style:a.style.cssText});r.style.cssText=a.style.cssText,this._elements.image=o.querySelectorAll(".iv-image");var s=function(){z(a),t._elements.image=r};y(r)?s():("function"==typeof this._events.hiResImageLoad&&this._events.hiResImageLoad(),this._events.hiResImageLoad=x(r,"load",s))}},{key:"_calculateDimensions",value:function(){var e=this._elements,t=e.image,n=e.container,i=e.snapView,o=e.snapImage,a=e.zoomHandle,r=parseInt(b(t,"width"),10),s=parseInt(b(t,"height"),10),l=parseInt(b(n,"width"),10),c=parseInt(b(n,"height"),10),u=i.clientWidth,m=i.clientHeight;this._state.containerDim={w:l,h:c};var h=r/s,d=r>s&&c>=l||h*c>l?l:h*c,v=d/h;this._state.imageDim={w:d,h:v},b(t,{width:"".concat(d,"px"),height:"".concat(v,"px"),left:"".concat((l-d)/2,"px"),top:"".concat((c-v)/2,"px"),maxWidth:"none",maxHeight:"none"});var f=d>v?u:d*m/v,p=v>d?m:v*u/d;this._state.snapImageDim={w:f,h:p},b(o,{width:"".concat(f,"px"),height:"".concat(p,"px")});var _=i.querySelector(".iv-zoom-slider").clientWidth;this._state.zoomSliderLength=_-a.offsetWidth}},{key:"resetZoom",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=this._options.zoomValue;e||(this._state.zoomValue=t),this.zoom(t)}},{key:"load",value:function(e,t){this._images={imageSrc:e,hiResImageSrc:t},this._loadImages()}},{key:"destroy",value:function(){var e,t,n=this._elements,i=n.container,o=n.domElement;Object.entries(this._sliders).forEach(function(e){m(e,2)[1].destroy()}),Object.entries(this._events).forEach(function(e){(0,m(e,2)[1])()}),this._clearFrames(),z(i.querySelector(".iv-wrap")),g(i,"iv-container"),S(document.querySelector("html"),"relative"),o!==i&&(t=(e=o).parentNode)!==document.body&&(t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t)),o._imageViewer=null,this._listeners.onDestroy&&this._listeners.onDestroy()}},{key:"_callbackData",get:function(){return{container:this._elements.container,snapView:this._elements.snapView,zoomValue:this._state.zoomValue,reachedMin:Math.abs(this._state.zoomValue-100)<1,reachedMax:Math.abs(this._state.zoomValue-this._options.maxZoom)<1,instance:this}}}])}();I.defaults={zoomValue:100,snapView:!0,maxZoom:500,refreshOnResize:!0,zoomOnMouseWheel:!0,hasZoomButtons:!1,zoomStep:50,listeners:{onInit:null,onDestroy:null,onImageLoaded:null,onZoomChange:null}};var O=function(e){function s(){var e,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n(this,s);var a=p({tagName:"div",className:"iv-fullscreen",html:'\n  <div class="iv-fullscreen-container"></div>\n  <div class="iv-fullscreen-close"></div>\n',parent:document.body}),r=a.querySelector(".iv-fullscreen-container");return o(e=t(this,s,[r,c(c({},i),{},{refreshOnResize:!1})]),"hide",function(){b(e._elements.fullScreen,{display:"none"}),S(document.querySelector("html"),"overflow"),e._events.onWindowResize&&e._events.onWindowResize()}),e._elements.fullScreen=a,e._initFullScreenEvents(),e}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&u(e,t)}(s,e),i(s,[{key:"_initFullScreenEvents",value:function(){var e=this._elements.fullScreen.querySelector(".iv-fullscreen-close");this._events.onCloseBtnClick=x(e,"click",this.hide)}},{key:"show",value:function(e,t){b(this._elements.fullScreen,{display:"block"}),e&&this.load(e,t),this._events.onWindowResize=x(window,"resize",this.refresh),b(document.querySelector("html"),{overflow:"hidden"})}},{key:"destroy",value:function(){var e,t,n,i=this._elements.fullScreen;this.hide(),(e="destroy",t=this,"function"==typeof(n=a(r(s.prototype),e,t))?function(e){return n.apply(t,e)}:n)([]),z(i)}}])}(I);return I.FullScreenViewer=O,I});

package/iv-viewer.d.ts

@@ -0,0 +1,54 @@
+declare module "@hyper-proto/iv-viewer" {
+    type Callback<T extends ImageViewer = ImageViewer> = (data: {
+        container: HTMLElement;
+        snapView: HTMLElement;
+        zoomValue: number;
+        reachedMin: number;
+        reachedMax: number;
+        instance: T;
+    }) => void | null;
+
+    export type Config<T extends ImageViewer = ImageViewer> = {
+        zoomValue: number;
+        snapView: boolean;
+        maxZoom: number;
+        refreshOnResize: boolean;
+        zoomOnMouseWheel: boolean;
+        hasZoomButtons: boolean;
+        zoomStep: number;
+        listeners: {
+            onInit?: Callback<T>;
+            onDestroy?: () => void | null;
+            onImageLoaded?: Callback<T>;
+            onZoomChange?: Callback<T>;
+        };
+    };
+
+    export class ImageViewer {
+        constructor(element: HTMLElement, options?: Partial<Config<ImageViewer>>);
+
+        destroy(): void;
+
+        resetZoom(animate?: boolean): void;
+
+        zoom(percent: number, point?: { x: number, y: number }): void;
+
+        showSnapView(noTimeout?: boolean): void;
+
+        hideSnapView(): void;
+
+        refresh(animate?: boolean): void;
+
+        load(imageSrc: string, hiResImageSrc?: string): void;
+    }
+
+    export class FullScreenViewer extends ImageViewer {
+        constructor(options?: Partial<Config<FullScreenViewer>>);
+
+        show(imageSrc?: string, hiResImageSrc?: string): void;
+
+        hide(): void;
+    }
+
+    export default ImageViewer;
+}

package/lib/FullScreen.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _util = require("./util");
+var _ImageViewer2 = _interopRequireDefault(require("./ImageViewer"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
+function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var fullScreenHtml = "\n  <div class=\"iv-fullscreen-container\"></div>\n  <div class=\"iv-fullscreen-close\"></div>\n";
+var FullScreenViewer = /*#__PURE__*/function (_ImageViewer) {
+  function FullScreenViewer() {
+    var _this;
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck(this, FullScreenViewer);
+    var fullScreenElem = (0, _util.createElement)({
+      tagName: 'div',
+      className: 'iv-fullscreen',
+      html: fullScreenHtml,
+      parent: document.body
+    });
+    var container = fullScreenElem.querySelector('.iv-fullscreen-container');
+
+    // call the ImageViewer constructor
+    _this = _callSuper(this, FullScreenViewer, [container, _objectSpread(_objectSpread({}, options), {}, {
+      refreshOnResize: false
+    })]);
+
+    // add fullScreenElem on element list
+    _defineProperty(_this, "hide", function () {
+      // hide the fullscreen
+      (0, _util.css)(_this._elements.fullScreen, {
+        display: 'none'
+      });
+
+      // enable scroll
+      (0, _util.removeCss)(document.querySelector('html'), 'overflow');
+
+      // remove window event
+      if (_this._events.onWindowResize) {
+        _this._events.onWindowResize();
+      }
+    });
+    _this._elements.fullScreen = fullScreenElem;
+    _this._initFullScreenEvents();
+    return _this;
+  }
+  _inherits(FullScreenViewer, _ImageViewer);
+  return _createClass(FullScreenViewer, [{
+    key: "_initFullScreenEvents",
+    value: function _initFullScreenEvents() {
+      var fullScreen = this._elements.fullScreen;
+      var closeBtn = fullScreen.querySelector('.iv-fullscreen-close');
+
+      // add close button event
+      this._events.onCloseBtnClick = (0, _util.assignEvent)(closeBtn, 'click', this.hide);
+    }
+  }, {
+    key: "show",
+    value: function show(imageSrc, hiResImageSrc) {
+      // show the element
+      (0, _util.css)(this._elements.fullScreen, {
+        display: 'block'
+      });
+
+      // if image source is provide load image source
+      if (imageSrc) {
+        this.load(imageSrc, hiResImageSrc);
+      }
+
+      // handle window resize
+      this._events.onWindowResize = (0, _util.assignEvent)(window, 'resize', this.refresh);
+
+      // disable scroll on html
+      (0, _util.css)(document.querySelector('html'), {
+        overflow: 'hidden'
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var fullScreen = this._elements.fullScreen;
+
+      // restore scroll before removing elements
+      this.hide();
+
+      // destroy image viewer
+      _superPropGet(FullScreenViewer, "destroy", this, 3)([]);
+
+      // remove the element
+      (0, _util.remove)(fullScreen);
+    }
+  }]);
+}(_ImageViewer2["default"]);
+var _default = exports["default"] = FullScreenViewer;