iv-viewer - npm Package Compare versions

Comparing version 2.0.0-beta3 to 2.0.0-beta4

dist/iv-viewer.es.js

 /**
- * iv-viewer - 2.0.0-beta3
+ * iv-viewer - 2.0.0-beta4
  * Author : Sudhanshu Yadav
@@ -1396,3 +1396,4 @@ * Copyright (c)  2019 to Sudhanshu Yadav, released under the MIT license.
 
+ImageViewer.FullScreenViewer = FullScreenViewer;
+
 export default ImageViewer;
-export { ImageViewer, FullScreenViewer };

dist/iv-viewer.js

 /**
- * iv-viewer - 2.0.0-beta3
+ * iv-viewer - 2.0.0-beta4
  * Author : Sudhanshu Yadav
@@ -9,6 +9,6 @@ * Copyright (c)  2019 to Sudhanshu Yadav, released under the MIT license.
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = global || self, factory(global.ImageViewer = {}));
-}(this, function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.ImageViewer = factory());
+}(this, function () { 'use strict';
 
@@ -1403,8 +1403,6 @@ function _classCallCheck(instance, Constructor) {
 
-  exports.default = ImageViewer;
-  exports.ImageViewer = ImageViewer;
-  exports.FullScreenViewer = FullScreenViewer;
+  ImageViewer.FullScreenViewer = FullScreenViewer;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
+  return ImageViewer;
 
 }));

dist/iv-viewer.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).ImageViewer={})}(this,function(e){"use strict";function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a 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 t(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(e){c(t,e,n[e])})}return t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function n(e,t){return(n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e,t,n){return(a="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var i=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=s(e)););return e}(e,t);if(i){var a=Object.getOwnPropertyDescriptor(i,t);return a.get?a.get.call(n):a.value}})(e,t,n||e)}function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=[],i=!0,a=!1,o=void 0;try{for(var r,s=e[Symbol.iterator]();!(i=(r=s.next()).done)&&(n.push(r.value),!t||n.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==s.return||s.return()}finally{if(a)throw o}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function h(){}function E(e,t,n,i){return e/=i,-n*((e-=1)*e*e*e-1)+t}function d(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 v(e){return e.complete&&(void 0===e.naturalWidth||0!==e.naturalWidth)}function r(e){return e instanceof NodeList||e instanceof HTMLCollection?Array.prototype.slice.call(e):[e]}function x(e,i){var t=r(e);if("string"==typeof i)return window.getComputedStyle(t[0])[i];t.forEach(function(n){Object.keys(i).forEach(function(e){var t=i[e];n.style[e]=t})})}function p(e,t){e.style.removeProperty(t)}function f(e){r(e).forEach(function(e){e.parentNode.removeChild(e)})}function y(e,t,n){return Math.min(Math.max(e,t),n)}function g(t,e,n){return"string"==typeof e&&(e=[e]),e.forEach(function(e){t.addEventListener(e,n)}),function(){e.forEach(function(e){t.removeEventListener(e,n)})}}function _(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 w=function(){function r(e,t){var s=this,n=t.onStart,i=t.onMove,a=t.onEnd,o=t.isSliderEnabled;l(this,r),c(this,"startHandler",function(e){if(s.isSliderEnabled()){s.removeListeners(),e.preventDefault();var t=s.moveHandler,n=s.endHandler,i=s.onStart,a="touchstart"===e.type;s.touchMoveEvent=a?"touchmove":"mousemove",s.touchEndEvent=a?"touchend":"mouseup",s.sx=a?e.touches[0].clientX:e.clientX,s.sy=a?e.touches[0].clientY:e.clientY,i(e,{x:s.sx,y:s.sy}),document.addEventListener(s.touchMoveEvent,t),document.addEventListener(s.touchEndEvent,n),document.addEventListener("contextmenu",n)}}),c(this,"moveHandler",function(e){if(s.isSliderEnabled()){e.preventDefault();var t=s.sx,n=s.sy,i=s.onMove,a="touchmove"===s.touchMoveEvent,o=a?e.touches[0].clientX:e.clientX,r=a?e.touches[0].clientY:e.clientY;i(e,{dx:o-t,dy:r-n,mx:o,my:r})}}),c(this,"endHandler",function(){s.isSliderEnabled()&&(s.removeListeners(),s.onEnd())}),this.container=e,this.isSliderEnabled=o,this.onStart=n||h,this.onMove=i||h,this.onEnd=a||h}return t(r,[{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 t=this;["touchstart","mousedown"].forEach(function(e){t.container.addEventListener(e,t.startHandler)})}},{key:"destroy",value:function(){var t=this;["touchstart","mousedown"].forEach(function(e){t.container.removeEventListener(e,t.startHandler)}),this.removeListeners()}}]),r}(),S=function(){function s(e){var b=this,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};l(this,s),c(this,"zoom",function(s,l){var e=b._options,t=b._elements,n=b._state,c=n.zoomValue,m=n.imageDim,i=n.containerDim,u=n.zoomSliderLength,h=t.image,d=t.zoomHandle,v=e.maxZoom;s=Math.round(Math.max(100,s)),s=Math.min(v,s),l=l||{x:i.w/2,y:i.h/2};var p=parseFloat(x(h,"left")),f=parseFloat(x(h,"top"));b._clearFrames();var g=0,_=(i.w-m.w)/2,y=(i.h-m.h)/2,w=i.w-_,S=i.h-y;!function e(){++g<16&&(b._frames.zoomFrame=requestAnimationFrame(e));var t=E(g,c,s-c,16),n=t/c,i=m.w*t/100,a=m.h*t/100,o=-((l.x-p)*n-l.x),r=-((l.y-f)*n-l.y);o=Math.min(o,_),r=Math.min(r,y),o+i<w&&(o=w-i),r+a<S&&(r=S-a),x(h,{height:"".concat(a,"px"),width:"".concat(i,"px"),left:"".concat(o,"px"),top:"".concat(r,"px")}),b._state.zoomValue=t,b._resizeSnapHandle(i,a,o,r),x(d,{left:"".concat((t-100)*u/(v-100),"px")})}()}),c(this,"_clearFrames",function(){var e=b._frames,t=e.slideMomentumCheck,n=e.sliderMomentumFrame,i=e.zoomFrame;clearInterval(t),cancelAnimationFrame(n),cancelAnimationFrame(i)}),c(this,"_resizeSnapHandle",function(e,t,n,i){var a=b._elements,o=b._state,r=a.snapHandle,s=a.image,l=o.imageDim,c=o.containerDim,m=o.zoomValue,u=o.snapImageDim,h=e||l.w*m/100,d=t||l.h*m/100,v=n||parseFloat(x(s,"left")),p=i||parseFloat(x(s,"top")),f=-v*u.w/h,g=-p*u.h/d,_=c.w*u.w/h,y=c.h*u.h/d;x(r,{top:"".concat(g,"px"),left:"".concat(f,"px"),width:"".concat(_,"px"),height:"".concat(y,"px")}),b._state.snapHandleDim={w:_,h:y}}),c(this,"showSnapView",function(e){var t=b._state,n=t.snapViewVisible,i=t.zoomValue,a=t.loaded,o=b._elements.snapView;b._options.snapView&&(n||i<=100||!a||(clearTimeout(b._frames.snapViewTimeout),b._state.snapViewVisible=!0,x(o,{opacity:1}),e||(b._frames.snapViewTimeout=setTimeout(b.hideSnapView,1500))))}),c(this,"hideSnapView",function(){x(b._elements.snapView,{opacity:0}),b._state.snapViewVisible=!1}),c(this,"refresh",function(){b._calculateDimensions(),b.resetZoom()});var n=this._findContainerAndImageSrc(e,t),i=n.container,a=n.domElement,o=n.imageSrc,r=n.hiResImageSrc;this._elements={container:i,domElement:a},this._options=m({},s.defaults,t),this._events={},this._frames={},this._sliders={},this._state={zoomValue:this._options.zoomValue},this._images={imageSrc:o,hiResImageSrc:r},this._init(),o&&this._loadImages(),a._imageViewer=this}return t(s,[{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 a,o,r,s,l,c,m,u,h=e;return"IMG"===i.tagName?(t=i.src,n=i.getAttribute("high-res-src")||i.getAttribute("data-high-res-src"),a=i,r=(o={className:"iv-container iv-image-mode",style:{display:"inline-block",overflow:"hidden"}}).tag,s=void 0===r?"div":r,l=o.className,c=o.id,m=o.style,u=document.createElement(s),l&&(u.className=l),c&&(u.id=c),m&&(u.style=m),a.parentNode.insertBefore(u,a),a.parentNode.removeChild(a),u.appendChild(a),h=u,x(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:h,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;d({tagName:"div",className:"iv-wrap",html:'\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-slider">\n      <div class="iv-zoom-handle"></div>\n    </div>\n  </div>\n  <div class="iv-image-view" >\n    <div class="iv-image-wrap" ></div>\n  </div>\n',parent:e}),function t(n,e){var i=e.split(" ");1<i.length?i.forEach(function(e){return t(n,e)}):n.classList?n.classList.add(e):n.className+=" ".concat(e)}(e,"iv-container"),"static"===x(e,"position")&&x(e,{position:"relative"}),this._elements=m({},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")})}},{key:"_initImageSlider",value:function(){var c,m,u=this,e=this._elements.imageWrap,t=new w(e,{isSliderEnabled:function(){var e=u._state,t=e.loaded,n=e.zooming,i=e.zoomValue;return t&&!n&&100<i},onStart:function(e,t){var n=u._sliders.snapSlider;u._clearFrames(),n.onStart(),c=[t,t],m=void 0,u._frames.slideMomentumCheck=setInterval(function(){m&&(c.shift(),c.push({x:m.mx,y:m.my}))},50)},onMove:function(e,t){var n=u._state.snapImageDim,i=u._sliders.snapSlider,a=u._getImageCurrentDim();m=t,i.onMove(e,{dx:-t.dx*n.w/a.w,dy:-t.dy*n.h/a.h})},onEnd:function(){var t,n,i,a=u._state.snapImageDim,o=u._sliders.snapSlider,r=u._getImageCurrentDim();u._clearFrames();var s=c[1].x-c[0].x,l=c[1].y-c[0].y;(30<Math.abs(s)||30<Math.abs(l))&&(t=1,n=m.dx,i=m.dy,function e(){t<=60&&(u._frames.sliderMomentumFrame=requestAnimationFrame(e)),n+=E(t,s/3,-s/3,60),i+=E(t,l/3,-l/3,60),o.onMove(null,{dx:-n*a.w/r.w,dy:-i*a.h/r.h}),t++}())}});t.init(),this._sliders.imageSlider=t}},{key:"_initSnapSlider",value:function(){var p,f,g=this,_=this._elements.snapHandle,e=new w(_,{isSliderEnabled:function(){return g._state.loaded},onStart:function(){var e=g._frames,t=e.slideMomentumCheck,n=e.sliderMomentumFrame;p=parseFloat(x(_,"top")),f=parseFloat(x(_,"left")),clearInterval(t),cancelAnimationFrame(n)},onMove:function(e,t){var n=g._state,i=n.snapHandleDim,a=n.snapImageDim,o=g._elements.image,r=g._getImageCurrentDim(),s=Math.max(a.w-i.w,f),l=Math.max(a.h-i.h,p),c=Math.min(0,f),m=Math.min(0,p),u=y(f+t.dx,c,s),h=y(p+t.dy,m,l),d=-u*r.w/a.w,v=-h*r.h/a.h;x(_,{left:"".concat(u,"px"),top:"".concat(h,"px")}),x(o,{left:"".concat(d,"px"),top:"".concat(v,"px")})}});e.init(),this._sliders.snapSlider=e}},{key:"_initZoomSlider",value:function(){var a,o,r=this,e=this._elements,t=e.snapView,n=e.zoomHandle,i=t.querySelector(".iv-zoom-slider"),s=new w(i,{isSliderEnabled:function(){return r._state.loaded},onStart:function(e){var t=r._sliders.zoomSlider;a=i.getBoundingClientRect().left+document.body.scrollLeft,o=parseInt(x(n,"width"),10),t.onMove(e)},onMove:function(e){var t=r._options.maxZoom,n=r._state.zoomSliderLength,i=100+(t-100)*y((void 0!==e.pageX?e.pageX:e.touches[0].pageX)-a-o/2,0,n)/n;r.zoom(i)}});s.init(),this._sliders.zoomSlider=s}},{key:"_initEvents",value:function(){this._snapViewEvents(),this._options.refreshOnResize&&(this._events.onWindowResize=g(window,"resize",this.refresh))}},{key:"_snapViewEvents",value:function(){var e=this,t=this._elements,n=t.imageWrap,i=t.snapView;this._events.snapViewOnMouseMove=g(n,["touchmove","mousemove"],function(){e.showSnapView()}),this._events.mouseEnterSnapView=g(i,["mouseenter","touchstart"],function(){e._state.snapViewVisible=!1,e.showSnapView(!0)}),this._events.mouseLeaveSnapView=g(i,["mouseleave","touchend"],function(){e._state.snapViewVisible=!1,e.showSnapView()})}},{key:"_pinchAndZoom",value:function(){var m=this,e=this._elements,t=e.imageWrap,u=e.container;this._events.pinchStart=g(t,"touchstart",function(e){var t=m._state,n=t.loaded,i=t.zoomValue,a=m._events;if(n){var o=e.touches[0],r=e.touches[1];if(o&&r){m._state.zooming=!0;var s=u.getBoundingClientRect(),l=_(e.touches),c={x:(r.pageX+o.pageX)/2-(s.left+document.body.scrollLeft),y:(r.pageY+o.pageY)/2-(s.top+document.body.scrollTop)};a.pinchMove&&a.pinchMove(),a.pinchEnd&&a.pinchEnd(),a.pinchMove=g(document,"touchmove",function(e){var t=_(e.touches),n=i+(t-l)/2;m.zoom(n,c)}),a.pinchEnd=g(document,"touchend",function(){a.pinchMove(),a.pinchEnd(),m._state.zooming=!1})}}})}},{key:"_scrollZoom",value:function(){var c=this,m=this._options,e=this._elements,u=e.container,t=e.imageWrap,h=0;this._ev=g(t,"wheel",function(e){var t=c._state,n=t.loaded,i=t.zoomValue;if(m.zoomOnMouseWheel&&n){c._clearFrames();var a=Math.max(-1,Math.min(1,e.wheelDelta||-e.detail)),o=i*(100+15*a)/100;if(100<=o&&o<=m.maxZoom?h=0:h+=Math.abs(a),e.preventDefault(),!(5<h)){var r=u.getBoundingClientRect(),s=(e.pageX||e.pageX)-(r.left+document.body.scrollLeft),l=(e.pageY||e.pageY)-(r.top+document.body.scrollTop);c.zoom(o,{x:s,y:l}),c.showSnapView()}}})}},{key:"_doubleTapToZoom",value:function(){var t,n=this,e=this._elements.imageWrap,i=0;g(e,"click",function(e){0===i?(i=Date.now(),t={x:e.pageX,y:e.pageY}):(Date.now()-i<500&&Math.abs(e.pageX-t.x)<50&&Math.abs(e.pageY-t.y)<50&&(n._state.zoomValue===n._options.zoomValue?n.zoom(200):n.resetZoom()),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,a=t.hiResImageSrc,o=n.container,r=n.snapImageWrap,s=n.imageWrap,l=o.querySelector(".iv-loader");f(o.querySelectorAll(".iv-snap-image, .iv-large-image"));var c=d({tagName:"img",className:"iv-snap-image",src:i,insertBefore:r.firstChild,parent:r}),m=d({tagName:"img",className:"iv-image iv-small-image",src:i,parent:s});this._state.loaded=!1,this._elements.image=m,this._elements.snapImage=c,x(l,{display:"block"}),x(m,{visibility:"hidden"}),this.hideSnapView();var u=function(){x(l,{display:"none"}),x(m,{visibility:"visible"}),a&&e._loadHighResImage(a),e._state.loaded=!0,e._calculateDimensions(),e.resetZoom()};v(m)?u():this._events.imageLoad=g(m,"load",u)}},{key:"_loadHighResImage",value:function(e){var t=this,n=this._elements,i=n.imageWrap,a=n.container,o=this._elements.image,r=d({tagName:"img",className:"iv-image iv-large-image",src:e,parent:i,style:o.style.cssText});r.style.cssText=o.style.cssText,this._elements.image=a.querySelectorAll(".iv-image");var s=function(){f(o),t._elements.image=r};v(r)?s():this._events.hiResImageLoad=g(r,"load",s)}},{key:"_calculateDimensions",value:function(){var e,t,n=this._elements,i=n.image,a=n.container,o=n.snapView,r=n.snapImage,s=n.zoomHandle,l=parseInt(x(i,"width"),10),c=parseInt(x(i,"height"),10),m=parseInt(x(a,"width"),10),u=parseInt(x(a,"height"),10),h=o.clientWidth,d=o.clientHeight;this._state.containerDim={w:m,h:u};var v=l/c;t=(e=c<l&&m<=u||m<v*u?m:v*u)/v,this._state.imageDim={w:e,h:t},x(i,{width:"".concat(e,"px"),height:"".concat(t,"px"),left:"".concat((m-e)/2,"px"),top:"".concat((u-t)/2,"px"),maxWidth:"none",maxHeight:"none"});var p=t<e?h:e*d/t,f=e<t?d:t*h/e;this._state.snapImageDim={w:p,h:f},x(r,{width:"".concat(p,"px"),height:"".concat(f,"px")}),this._state.zoomSliderLength=h-s.offsetWidth}},{key:"resetZoom",value:function(){var e=!(0<arguments.length&&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,a=n.domElement;Object.entries(this._sliders).forEach(function(e){var t=o(e,2);t[0];t[1].destroy()}),Object.entries(this._events).forEach(function(e){var t=o(e,2);t[0];(0,t[1])()}),this._clearFrames(),f(i.querySelector(".iv-wrap")),function t(n,e){var i=e.split(" ");1<i.length?i.forEach(function(e){return t(n,e)}):n.classList?n.classList.remove(e):n.className=n.className.replace(new RegExp("(^|\\b)".concat(e.split(" ").join("|"),"(\\b|$)"),"gi")," ")}(i,"iv-container"),p(document.querySelector("html"),"relative"),a!==i&&(t=(e=a).parentNode)!==document.body&&(t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t)),a._imageViewer=null}}]),s}();S.defaults={zoomValue:100,snapView:!0,maxZoom:500,refreshOnResize:!0,zoomOnMouseWheel:!0};var b=function(e){function r(){var e,t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};l(this,r);var n,i,a=d({tagName:"div",className:"iv-fullscreen",html:'\n  <div class="iv-fullscreen-container"></div>\n  <div class="iv-fullscreen-close"></div>\n',parent:document.body}),o=a.querySelector(".iv-fullscreen-container");return n=this,i=s(r).call(this,o,m({},t,{refreshOnResize:!1})),c(u(e=!i||"object"!=typeof i&&"function"!=typeof i?u(n):i),"hide",function(){x(e._elements.fullScreen,{display:"none"}),p(document.querySelector("html"),"overflow"),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}}),t&&n(e,t)}(r,S),t(r,[{key:"_initFullScreenEvents",value:function(){var e=this._elements.fullScreen.querySelector(".iv-fullscreen-close");this._events.onCloseBtnClick=g(e,"click",this.hide)}},{key:"show",value:function(e,t){x(this._elements.fullScreen,{display:"block"}),e&&this.load(e,t),this._events.onWindowResize=g(window,"resize",this.refresh),x(document.querySelector("html"),{overflow:"hidden"})}},{key:"destroy",value:function(){var e=this._elements.fullScreen;a(s(r.prototype),"destroy",this).call(this),f(e)}}]),r}();e.default=S,e.ImageViewer=S,e.FullScreenViewer=b,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).ImageViewer=t()}(this,function(){"use strict";function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a 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 t(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(e){c(t,e,n[e])})}return t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function n(e,t){return(n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e,t,n){return(a="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var i=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=s(e)););return e}(e,t);if(i){var a=Object.getOwnPropertyDescriptor(i,t);return a.get?a.get.call(n):a.value}})(e,t,n||e)}function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=[],i=!0,a=!1,o=void 0;try{for(var r,s=e[Symbol.iterator]();!(i=(r=s.next()).done)&&(n.push(r.value),!t||n.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==s.return||s.return()}finally{if(a)throw o}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function h(){}function E(e,t,n,i){return e/=i,-n*((e-=1)*e*e*e-1)+t}function d(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 v(e){return e.complete&&(void 0===e.naturalWidth||0!==e.naturalWidth)}function r(e){return e instanceof NodeList||e instanceof HTMLCollection?Array.prototype.slice.call(e):[e]}function x(e,i){var t=r(e);if("string"==typeof i)return window.getComputedStyle(t[0])[i];t.forEach(function(n){Object.keys(i).forEach(function(e){var t=i[e];n.style[e]=t})})}function p(e,t){e.style.removeProperty(t)}function f(e){r(e).forEach(function(e){e.parentNode.removeChild(e)})}function y(e,t,n){return Math.min(Math.max(e,t),n)}function g(t,e,n){return"string"==typeof e&&(e=[e]),e.forEach(function(e){t.addEventListener(e,n)}),function(){e.forEach(function(e){t.removeEventListener(e,n)})}}function _(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 w=function(){function r(e,t){var s=this,n=t.onStart,i=t.onMove,a=t.onEnd,o=t.isSliderEnabled;l(this,r),c(this,"startHandler",function(e){if(s.isSliderEnabled()){s.removeListeners(),e.preventDefault();var t=s.moveHandler,n=s.endHandler,i=s.onStart,a="touchstart"===e.type;s.touchMoveEvent=a?"touchmove":"mousemove",s.touchEndEvent=a?"touchend":"mouseup",s.sx=a?e.touches[0].clientX:e.clientX,s.sy=a?e.touches[0].clientY:e.clientY,i(e,{x:s.sx,y:s.sy}),document.addEventListener(s.touchMoveEvent,t),document.addEventListener(s.touchEndEvent,n),document.addEventListener("contextmenu",n)}}),c(this,"moveHandler",function(e){if(s.isSliderEnabled()){e.preventDefault();var t=s.sx,n=s.sy,i=s.onMove,a="touchmove"===s.touchMoveEvent,o=a?e.touches[0].clientX:e.clientX,r=a?e.touches[0].clientY:e.clientY;i(e,{dx:o-t,dy:r-n,mx:o,my:r})}}),c(this,"endHandler",function(){s.isSliderEnabled()&&(s.removeListeners(),s.onEnd())}),this.container=e,this.isSliderEnabled=o,this.onStart=n||h,this.onMove=i||h,this.onEnd=a||h}return t(r,[{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 t=this;["touchstart","mousedown"].forEach(function(e){t.container.addEventListener(e,t.startHandler)})}},{key:"destroy",value:function(){var t=this;["touchstart","mousedown"].forEach(function(e){t.container.removeEventListener(e,t.startHandler)}),this.removeListeners()}}]),r}(),S=function(){function s(e){var b=this,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};l(this,s),c(this,"zoom",function(s,l){var e=b._options,t=b._elements,n=b._state,c=n.zoomValue,m=n.imageDim,i=n.containerDim,u=n.zoomSliderLength,h=t.image,d=t.zoomHandle,v=e.maxZoom;s=Math.round(Math.max(100,s)),s=Math.min(v,s),l=l||{x:i.w/2,y:i.h/2};var p=parseFloat(x(h,"left")),f=parseFloat(x(h,"top"));b._clearFrames();var g=0,_=(i.w-m.w)/2,y=(i.h-m.h)/2,w=i.w-_,S=i.h-y;!function e(){++g<16&&(b._frames.zoomFrame=requestAnimationFrame(e));var t=E(g,c,s-c,16),n=t/c,i=m.w*t/100,a=m.h*t/100,o=-((l.x-p)*n-l.x),r=-((l.y-f)*n-l.y);o=Math.min(o,_),r=Math.min(r,y),o+i<w&&(o=w-i),r+a<S&&(r=S-a),x(h,{height:"".concat(a,"px"),width:"".concat(i,"px"),left:"".concat(o,"px"),top:"".concat(r,"px")}),b._state.zoomValue=t,b._resizeSnapHandle(i,a,o,r),x(d,{left:"".concat((t-100)*u/(v-100),"px")})}()}),c(this,"_clearFrames",function(){var e=b._frames,t=e.slideMomentumCheck,n=e.sliderMomentumFrame,i=e.zoomFrame;clearInterval(t),cancelAnimationFrame(n),cancelAnimationFrame(i)}),c(this,"_resizeSnapHandle",function(e,t,n,i){var a=b._elements,o=b._state,r=a.snapHandle,s=a.image,l=o.imageDim,c=o.containerDim,m=o.zoomValue,u=o.snapImageDim,h=e||l.w*m/100,d=t||l.h*m/100,v=n||parseFloat(x(s,"left")),p=i||parseFloat(x(s,"top")),f=-v*u.w/h,g=-p*u.h/d,_=c.w*u.w/h,y=c.h*u.h/d;x(r,{top:"".concat(g,"px"),left:"".concat(f,"px"),width:"".concat(_,"px"),height:"".concat(y,"px")}),b._state.snapHandleDim={w:_,h:y}}),c(this,"showSnapView",function(e){var t=b._state,n=t.snapViewVisible,i=t.zoomValue,a=t.loaded,o=b._elements.snapView;b._options.snapView&&(n||i<=100||!a||(clearTimeout(b._frames.snapViewTimeout),b._state.snapViewVisible=!0,x(o,{opacity:1}),e||(b._frames.snapViewTimeout=setTimeout(b.hideSnapView,1500))))}),c(this,"hideSnapView",function(){x(b._elements.snapView,{opacity:0}),b._state.snapViewVisible=!1}),c(this,"refresh",function(){b._calculateDimensions(),b.resetZoom()});var n=this._findContainerAndImageSrc(e,t),i=n.container,a=n.domElement,o=n.imageSrc,r=n.hiResImageSrc;this._elements={container:i,domElement:a},this._options=m({},s.defaults,t),this._events={},this._frames={},this._sliders={},this._state={zoomValue:this._options.zoomValue},this._images={imageSrc:o,hiResImageSrc:r},this._init(),o&&this._loadImages(),a._imageViewer=this}return t(s,[{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 a,o,r,s,l,c,m,u,h=e;return"IMG"===i.tagName?(t=i.src,n=i.getAttribute("high-res-src")||i.getAttribute("data-high-res-src"),a=i,r=(o={className:"iv-container iv-image-mode",style:{display:"inline-block",overflow:"hidden"}}).tag,s=void 0===r?"div":r,l=o.className,c=o.id,m=o.style,u=document.createElement(s),l&&(u.className=l),c&&(u.id=c),m&&(u.style=m),a.parentNode.insertBefore(u,a),a.parentNode.removeChild(a),u.appendChild(a),h=u,x(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:h,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;d({tagName:"div",className:"iv-wrap",html:'\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-slider">\n      <div class="iv-zoom-handle"></div>\n    </div>\n  </div>\n  <div class="iv-image-view" >\n    <div class="iv-image-wrap" ></div>\n  </div>\n',parent:e}),function t(n,e){var i=e.split(" ");1<i.length?i.forEach(function(e){return t(n,e)}):n.classList?n.classList.add(e):n.className+=" ".concat(e)}(e,"iv-container"),"static"===x(e,"position")&&x(e,{position:"relative"}),this._elements=m({},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")})}},{key:"_initImageSlider",value:function(){var c,m,u=this,e=this._elements.imageWrap,t=new w(e,{isSliderEnabled:function(){var e=u._state,t=e.loaded,n=e.zooming,i=e.zoomValue;return t&&!n&&100<i},onStart:function(e,t){var n=u._sliders.snapSlider;u._clearFrames(),n.onStart(),c=[t,t],m=void 0,u._frames.slideMomentumCheck=setInterval(function(){m&&(c.shift(),c.push({x:m.mx,y:m.my}))},50)},onMove:function(e,t){var n=u._state.snapImageDim,i=u._sliders.snapSlider,a=u._getImageCurrentDim();m=t,i.onMove(e,{dx:-t.dx*n.w/a.w,dy:-t.dy*n.h/a.h})},onEnd:function(){var t,n,i,a=u._state.snapImageDim,o=u._sliders.snapSlider,r=u._getImageCurrentDim();u._clearFrames();var s=c[1].x-c[0].x,l=c[1].y-c[0].y;(30<Math.abs(s)||30<Math.abs(l))&&(t=1,n=m.dx,i=m.dy,function e(){t<=60&&(u._frames.sliderMomentumFrame=requestAnimationFrame(e)),n+=E(t,s/3,-s/3,60),i+=E(t,l/3,-l/3,60),o.onMove(null,{dx:-n*a.w/r.w,dy:-i*a.h/r.h}),t++}())}});t.init(),this._sliders.imageSlider=t}},{key:"_initSnapSlider",value:function(){var p,f,g=this,_=this._elements.snapHandle,e=new w(_,{isSliderEnabled:function(){return g._state.loaded},onStart:function(){var e=g._frames,t=e.slideMomentumCheck,n=e.sliderMomentumFrame;p=parseFloat(x(_,"top")),f=parseFloat(x(_,"left")),clearInterval(t),cancelAnimationFrame(n)},onMove:function(e,t){var n=g._state,i=n.snapHandleDim,a=n.snapImageDim,o=g._elements.image,r=g._getImageCurrentDim(),s=Math.max(a.w-i.w,f),l=Math.max(a.h-i.h,p),c=Math.min(0,f),m=Math.min(0,p),u=y(f+t.dx,c,s),h=y(p+t.dy,m,l),d=-u*r.w/a.w,v=-h*r.h/a.h;x(_,{left:"".concat(u,"px"),top:"".concat(h,"px")}),x(o,{left:"".concat(d,"px"),top:"".concat(v,"px")})}});e.init(),this._sliders.snapSlider=e}},{key:"_initZoomSlider",value:function(){var a,o,r=this,e=this._elements,t=e.snapView,n=e.zoomHandle,i=t.querySelector(".iv-zoom-slider"),s=new w(i,{isSliderEnabled:function(){return r._state.loaded},onStart:function(e){var t=r._sliders.zoomSlider;a=i.getBoundingClientRect().left+document.body.scrollLeft,o=parseInt(x(n,"width"),10),t.onMove(e)},onMove:function(e){var t=r._options.maxZoom,n=r._state.zoomSliderLength,i=100+(t-100)*y((void 0!==e.pageX?e.pageX:e.touches[0].pageX)-a-o/2,0,n)/n;r.zoom(i)}});s.init(),this._sliders.zoomSlider=s}},{key:"_initEvents",value:function(){this._snapViewEvents(),this._options.refreshOnResize&&(this._events.onWindowResize=g(window,"resize",this.refresh))}},{key:"_snapViewEvents",value:function(){var e=this,t=this._elements,n=t.imageWrap,i=t.snapView;this._events.snapViewOnMouseMove=g(n,["touchmove","mousemove"],function(){e.showSnapView()}),this._events.mouseEnterSnapView=g(i,["mouseenter","touchstart"],function(){e._state.snapViewVisible=!1,e.showSnapView(!0)}),this._events.mouseLeaveSnapView=g(i,["mouseleave","touchend"],function(){e._state.snapViewVisible=!1,e.showSnapView()})}},{key:"_pinchAndZoom",value:function(){var m=this,e=this._elements,t=e.imageWrap,u=e.container;this._events.pinchStart=g(t,"touchstart",function(e){var t=m._state,n=t.loaded,i=t.zoomValue,a=m._events;if(n){var o=e.touches[0],r=e.touches[1];if(o&&r){m._state.zooming=!0;var s=u.getBoundingClientRect(),l=_(e.touches),c={x:(r.pageX+o.pageX)/2-(s.left+document.body.scrollLeft),y:(r.pageY+o.pageY)/2-(s.top+document.body.scrollTop)};a.pinchMove&&a.pinchMove(),a.pinchEnd&&a.pinchEnd(),a.pinchMove=g(document,"touchmove",function(e){var t=_(e.touches),n=i+(t-l)/2;m.zoom(n,c)}),a.pinchEnd=g(document,"touchend",function(){a.pinchMove(),a.pinchEnd(),m._state.zooming=!1})}}})}},{key:"_scrollZoom",value:function(){var c=this,m=this._options,e=this._elements,u=e.container,t=e.imageWrap,h=0;this._ev=g(t,"wheel",function(e){var t=c._state,n=t.loaded,i=t.zoomValue;if(m.zoomOnMouseWheel&&n){c._clearFrames();var a=Math.max(-1,Math.min(1,e.wheelDelta||-e.detail)),o=i*(100+15*a)/100;if(100<=o&&o<=m.maxZoom?h=0:h+=Math.abs(a),e.preventDefault(),!(5<h)){var r=u.getBoundingClientRect(),s=(e.pageX||e.pageX)-(r.left+document.body.scrollLeft),l=(e.pageY||e.pageY)-(r.top+document.body.scrollTop);c.zoom(o,{x:s,y:l}),c.showSnapView()}}})}},{key:"_doubleTapToZoom",value:function(){var t,n=this,e=this._elements.imageWrap,i=0;g(e,"click",function(e){0===i?(i=Date.now(),t={x:e.pageX,y:e.pageY}):(Date.now()-i<500&&Math.abs(e.pageX-t.x)<50&&Math.abs(e.pageY-t.y)<50&&(n._state.zoomValue===n._options.zoomValue?n.zoom(200):n.resetZoom()),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,a=t.hiResImageSrc,o=n.container,r=n.snapImageWrap,s=n.imageWrap,l=o.querySelector(".iv-loader");f(o.querySelectorAll(".iv-snap-image, .iv-large-image"));var c=d({tagName:"img",className:"iv-snap-image",src:i,insertBefore:r.firstChild,parent:r}),m=d({tagName:"img",className:"iv-image iv-small-image",src:i,parent:s});this._state.loaded=!1,this._elements.image=m,this._elements.snapImage=c,x(l,{display:"block"}),x(m,{visibility:"hidden"}),this.hideSnapView();var u=function(){x(l,{display:"none"}),x(m,{visibility:"visible"}),a&&e._loadHighResImage(a),e._state.loaded=!0,e._calculateDimensions(),e.resetZoom()};v(m)?u():this._events.imageLoad=g(m,"load",u)}},{key:"_loadHighResImage",value:function(e){var t=this,n=this._elements,i=n.imageWrap,a=n.container,o=this._elements.image,r=d({tagName:"img",className:"iv-image iv-large-image",src:e,parent:i,style:o.style.cssText});r.style.cssText=o.style.cssText,this._elements.image=a.querySelectorAll(".iv-image");var s=function(){f(o),t._elements.image=r};v(r)?s():this._events.hiResImageLoad=g(r,"load",s)}},{key:"_calculateDimensions",value:function(){var e,t,n=this._elements,i=n.image,a=n.container,o=n.snapView,r=n.snapImage,s=n.zoomHandle,l=parseInt(x(i,"width"),10),c=parseInt(x(i,"height"),10),m=parseInt(x(a,"width"),10),u=parseInt(x(a,"height"),10),h=o.clientWidth,d=o.clientHeight;this._state.containerDim={w:m,h:u};var v=l/c;t=(e=c<l&&m<=u||m<v*u?m:v*u)/v,this._state.imageDim={w:e,h:t},x(i,{width:"".concat(e,"px"),height:"".concat(t,"px"),left:"".concat((m-e)/2,"px"),top:"".concat((u-t)/2,"px"),maxWidth:"none",maxHeight:"none"});var p=t<e?h:e*d/t,f=e<t?d:t*h/e;this._state.snapImageDim={w:p,h:f},x(r,{width:"".concat(p,"px"),height:"".concat(f,"px")}),this._state.zoomSliderLength=h-s.offsetWidth}},{key:"resetZoom",value:function(){var e=!(0<arguments.length&&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,a=n.domElement;Object.entries(this._sliders).forEach(function(e){var t=o(e,2);t[0];t[1].destroy()}),Object.entries(this._events).forEach(function(e){var t=o(e,2);t[0];(0,t[1])()}),this._clearFrames(),f(i.querySelector(".iv-wrap")),function t(n,e){var i=e.split(" ");1<i.length?i.forEach(function(e){return t(n,e)}):n.classList?n.classList.remove(e):n.className=n.className.replace(new RegExp("(^|\\b)".concat(e.split(" ").join("|"),"(\\b|$)"),"gi")," ")}(i,"iv-container"),p(document.querySelector("html"),"relative"),a!==i&&(t=(e=a).parentNode)!==document.body&&(t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t)),a._imageViewer=null}}]),s}();S.defaults={zoomValue:100,snapView:!0,maxZoom:500,refreshOnResize:!0,zoomOnMouseWheel:!0};var e=function(e){function r(){var e,t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};l(this,r);var n,i,a=d({tagName:"div",className:"iv-fullscreen",html:'\n  <div class="iv-fullscreen-container"></div>\n  <div class="iv-fullscreen-close"></div>\n',parent:document.body}),o=a.querySelector(".iv-fullscreen-container");return n=this,i=s(r).call(this,o,m({},t,{refreshOnResize:!1})),c(u(e=!i||"object"!=typeof i&&"function"!=typeof i?u(n):i),"hide",function(){x(e._elements.fullScreen,{display:"none"}),p(document.querySelector("html"),"overflow"),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}}),t&&n(e,t)}(r,S),t(r,[{key:"_initFullScreenEvents",value:function(){var e=this._elements.fullScreen.querySelector(".iv-fullscreen-close");this._events.onCloseBtnClick=g(e,"click",this.hide)}},{key:"show",value:function(e,t){x(this._elements.fullScreen,{display:"block"}),e&&this.load(e,t),this._events.onWindowResize=g(window,"resize",this.refresh),x(document.querySelector("html"),{overflow:"hidden"})}},{key:"destroy",value:function(){var e=this._elements.fullScreen;a(s(r.prototype),"destroy",this).call(this),f(e)}}]),r}();return S.FullScreenViewer=e,S});

package.json

 {
   "name": "iv-viewer",
-  "version": "2.0.0-beta3",
+  "version": "2.0.0-beta4",
   "description": "A zooming and panning plugin inspired by google photos for your web images.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

16

increased by6.67%

Lines of code

3845

increased by0.21%

Worsened metrics

Total package byte prevSize

454044

decreased by-0.01%

No dependency changes