viewerjs - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

CHANGELOG.md

 # Changelog
 
+## 1.0.0-beta.2 (Feb 13, 2018)
+
+- Add a new option: `container`.
+- Recover the missing default value of the `interval` option (#133).
+
 ## 1.0.0-beta.1 (Dec 23, 2017)
@@ -4,0 +9,0 @@

dist/viewer.min.js

 /*!
- * Viewer.js v1.0.0-beta.1
+ * Viewer.js v1.0.0-beta.2
  * https://github.com/fengyuanchen/viewerjs
  *
- * Copyright (c) 2015-2017 Chen Fengyuan
+ * Copyright (c) 2015-2018 Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2017-12-23T04:31:53.438Z
+ * Date: 2018-02-13T13:33:47.607Z
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Viewer=e()}(this,function(){"use strict";function t(t){return"string"==typeof t}function e(t){return"number"==typeof t&&!tt(t)}function i(t){return void 0===t}function n(t){return"object"===(void 0===t?"undefined":G(t))&&null!==t}function s(t){if(!n(t))return!1;try{var e=t.constructor,i=e.prototype;return e&&i&&et.call(i,"isPrototypeOf")}catch(t){return!1}}function o(t){return"function"==typeof t}function a(t,i){if(t&&o(i))if(Array.isArray(t)||e(t.length)){var s=t.length,a=void 0;for(a=0;a<s&&!1!==i.call(t,t[a],a,t);a+=1);}else n(t)&&Object.keys(t).forEach(function(e){i.call(t,t[e],e,t)});return t}function r(t){for(var e=arguments.length,i=Array(e>1?e-1:0),s=1;s<e;s++)i[s-1]=arguments[s];if(n(t)&&i.length>0){if(Object.assign)return Object.assign.apply(Object,[t].concat(i));i.forEach(function(e){n(e)&&Object.keys(e).forEach(function(i){t[i]=e[i]})})}return t}function h(t,e){for(var i=arguments.length,n=Array(i>2?i-2:0),s=2;s<i;s++)n[s-2]=arguments[s];return function(){for(var i=arguments.length,s=Array(i),o=0;o<i;o++)s[o]=arguments[o];return t.apply(e,n.concat(s))}}function l(t,i){var n=t.style;a(i,function(t,i){it.test(i)&&e(t)&&(t+="px"),n[i]=t})}function c(t){return window.getComputedStyle?window.getComputedStyle(t,null):t.currentStyle}function u(t,e){return t.classList?t.classList.contains(e):t.className.indexOf(e)>-1}function d(t,i){if(i)if(e(t.length))a(t,function(t){d(t,i)});else if(t.classList)t.classList.add(i);else{var n=t.className.trim();n?n.indexOf(i)<0&&(t.className=n+" "+i):t.className=i}}function m(t,i){i&&(e(t.length)?a(t,function(t){m(t,i)}):t.classList?t.classList.remove(i):t.className.indexOf(i)>=0&&(t.className=t.className.replace(i,"")))}function f(t,i,n){i&&(e(t.length)?a(t,function(t){f(t,i,n)}):n?d(t,i):m(t,i))}function v(t){return t.replace(nt,"$1-$2").toLowerCase()}function g(t,e){return n(t[e])?t[e]:t.dataset?t.dataset[e]:t.getAttribute("data-"+v(e))}function p(t,e,i){n(i)?t[e]=i:t.dataset?t.dataset[e]=i:t.setAttribute("data-"+v(e),i)}function w(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};if(o(i)){var s=e.trim().split(st);s.length>1?a(s,function(e){w(t,e,i,n)}):t.removeEventListener?t.removeEventListener(e,i,n):t.detachEvent&&t.detachEvent("on"+e,i)}}function b(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};if(o(i)){var s=e.trim().split(st);if(s.length>1)a(s,function(e){b(t,e,i,n)});else{if(n.once){var r=i;i=function(){for(var s=arguments.length,o=Array(s),a=0;a<s;a++)o[a]=arguments[a];return w(t,e,i,n),r.apply(t,o)}}t.addEventListener?t.addEventListener(e,i,n):t.attachEvent&&t.attachEvent("on"+e,i)}}}function y(t,e,n){if(t.dispatchEvent){var s=void 0;return o(Event)&&o(CustomEvent)?s=i(n)?new Event(e,{bubbles:!0,cancelable:!0}):new CustomEvent(e,{detail:n,bubbles:!0,cancelable:!0}):i(n)?(s=document.createEvent("Event")).initEvent(e,!0,!0):(s=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n),t.dispatchEvent(s)}return!t.fireEvent||t.fireEvent("on"+e)}function x(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function E(t,e){if(!t.naturalWidth||at){var i=document.createElement("img"),n=document.body||document.documentElement;i.onload=function(){e(i.width,i.height),n.removeChild(i)},i.src=t.src,i.style.cssText="left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;",n.appendChild(i)}else e(t.naturalWidth,t.naturalHeight)}function k(t){switch(t){case 2:return X;case 3:return F;case 4:return M;default:return""}}function D(t,e){var i=t.pageX,n=t.pageY,s={endX:i,endY:n};return e?s:r({startX:i,startY:n},s)}var z={inline:!1,button:!0,navbar:!0,title:!0,toolbar:!0,tooltip:!0,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!0,keyboard:!0,backdrop:!0,loop:!1,minWidth:200,minHeight:100,zoomRatio:.1,minZoomRatio:.01,maxZoomRatio:100,zIndex:2015,zIndexInline:0,url:"src",filter:null,ready:null,show:null,shown:null,hide:null,hidden:null,view:null,viewed:null},I="undefined"!=typeof window?window:{},T="viewer",C="move",S=T+"-active",L=T+"-fade",N=T+"-fixed",Y=T+"-fullscreen-exit",q=T+"-hide",M=T+"-hide-md-down",F=T+"-hide-sm-down",X=T+"-hide-xs-down",O=T+"-in",R=T+"-invisible",W=T+"-open",A=T+"-show",P=T+"-transition",j="viewed",B="click",H="load",V=I.PointerEvent?"pointerdown":"touchstart mousedown",K=I.PointerEvent?"pointermove":"mousemove touchmove",U=I.PointerEvent?"pointerup pointercancel":"touchend touchcancel mouseup",Z="transitionend",$="wheel mousewheel DOMMouseScroll",_=["zoom-in","zoom-out","one-to-one","reset","prev","play","next","rotate-left","rotate-right","flip-horizontal","flip-vertical"],G="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},J=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},Q=function(){function t(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,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),tt=Number.isNaN||I.isNaN,et=Object.prototype.hasOwnProperty,it=/^(width|height|left|top|marginLeft|marginTop)$/,nt=/([a-z\d])([A-Z])/g,st=/\s+/,ot=I.navigator,at=ot&&/(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(ot.userAgent),rt={render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initContainer:function(){this.containerData={width:window.innerWidth,height:window.innerHeight}},initViewer:function(){var t=this.options,e=this.parent,i=void 0;t.inline&&(i={width:Math.max(e.offsetWidth,t.minWidth),height:Math.max(e.offsetHeight,t.minHeight)},this.parentData=i),!this.fulled&&i||(i=this.containerData),this.viewerData=r({},i)},renderViewer:function(){this.options.inline&&!this.fulled&&l(this.viewer,this.viewerData)},initList:function(){var e=this,i=this.element,n=this.options,s=this.list,r=[];a(this.images,function(e,i){var s=e.src,a=e.alt||function(e){return t(e)?e.replace(/^.*\//,"").replace(/[?&#].*$/,""):""}(s),h=n.url;t(h)?h=e.getAttribute(h):o(h)&&(h=h.call(e,e)),(s||h)&&r.push('<li><img src="'+(s||h)+'" role="button" data-action="view" data-index="'+i+'" data-original-url="'+(h||s)+'" alt="'+a+'"></li>')}),s.innerHTML=r.join(""),a(s.getElementsByTagName("img"),function(t){p(t,"filled",!0),b(t,H,h(e.loadImage,e),{once:!0})}),this.items=s.getElementsByTagName("li"),n.transition&&b(i,j,function(){d(s,P)},{once:!0})},renderList:function(t){var e=t||this.index,i=this.items[e].offsetWidth||30,n=i+1;l(this.list,{width:n*this.length,marginLeft:(this.viewerData.width-i)/2-n*e})},resetList:function(){x(this.list),m(this.list,P),l({marginLeft:0})},initImage:function(t){var e=this,i=this.options,n=this.image,s=this.viewerData,a=this.footer.offsetHeight,h=s.width,l=Math.max(s.height-a,a),c=this.ImageData||{};E(n,function(n,s){var a=n/s,u=h,d=l;l*a>h?d=h/a:u=l*a;var m={naturalWidth:n,naturalHeight:s,aspectRatio:a,ratio:(u=Math.min(.9*u,n))/n,width:u,height:d=Math.min(.9*d,s),left:(h-u)/2,top:(l-d)/2},f=r({},m);i.rotatable&&(m.rotate=c.rotate||0,f.rotate=0),i.scalable&&(m.scaleX=c.scaleX||1,m.scaleY=c.scaleY||1,f.scaleX=1,f.scaleY=1),e.imageData=m,e.initialImageData=f,o(t)&&t()})},renderImage:function(t){var i=this.image,n=this.imageData;l(i,r({width:n.width,height:n.height,marginLeft:n.left,marginTop:n.top},function(t){var i=t.rotate,n=t.scaleX,s=t.scaleY,o=[];e(i)&&0!==i&&o.push("rotate("+i+"deg)"),e(n)&&1!==n&&o.push("scaleX("+n+")"),e(s)&&1!==s&&o.push("scaleY("+s+")");var a=o.length?o.join(" "):"none";return{WebkitTransform:a,msTransform:a,transform:a}}(n))),o(t)&&(this.transitioning?b(i,Z,t,{once:!0}):t())},resetImage:function(){var t=this.image;t&&(t.parentNode.removeChild(t),this.image=null)}},ht={bind:function(){var t=this.element,e=this.options,i=this.viewer;o(e.view)&&b(t,"view",e.view),o(e.viewed)&&b(t,j,e.viewed),b(i,B,this.onClick=h(this.click,this)),b(i,$,this.onWheel=h(this.wheel,this)),b(i,"dragstart",this.onDragStart=h(this.dragstart,this)),b(this.canvas,V,this.onPointerDown=h(this.pointerdown,this)),b(t.ownerDocument,K,this.onPointerMove=h(this.pointermove,this)),b(t.ownerDocument,U,this.onPointerUp=h(this.pointerup,this)),b(t.ownerDocument,"keydown",this.onKeyDown=h(this.keydown,this)),b(window,"resize",this.onResize=h(this.resize,this))},unbind:function(){var t=this.element,e=this.options,i=this.viewer;o(e.view)&&w(t,"view",e.view),o(e.viewed)&&w(t,j,e.viewed),w(i,B,this.onClick),w(i,$,this.onWheel),w(i,"dragstart",this.onDragStart),w(this.canvas,V,this.onPointerDown),w(t.ownerDocument,K,this.onPointerMove),w(t.ownerDocument,U,this.onPointerUp),w(t.ownerDocument,"keydown",this.onKeyDown),w(window,"resize",this.onResize)}},lt={click:function(t){var e=t.target,i=this.options,n=this.imageData;switch(g(e,"action")){case"mix":this.played?this.stop():i.inline?this.fulled?this.exit():this.full():this.hide();break;case"hide":this.hide();break;case"view":this.view(g(e,"index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);break;case"one-to-one":this.toggle();break;case"reset":this.reset();break;case"prev":this.prev(i.loop);break;case"play":this.play();break;case"next":this.next(i.loop);break;case"rotate-left":this.rotate(-90);break;case"rotate-right":this.rotate(90);break;case"flip-horizontal":this.scaleX(-n.scaleX||-1);break;case"flip-vertical":this.scaleY(-n.scaleY||-1);break;default:this.played&&this.stop()}},load:function(){var t=this,e=this.options,i=this.image,n=this.index,s=this.viewerData;this.timeout&&(clearTimeout(this.timeout),this.timeout=!1),i&&(m(i,R),i.style.cssText="width:0;height:0;margin-left:"+s.width/2+"px;margin-top:"+s.height/2+"px;max-width:none!important;visibility:visible;",this.initImage(function(){f(i,P,e.transition),f(i,"viewer-move",e.movable),t.renderImage(function(){t.viewed=!0,y(t.element,j,{originalImage:t.images[n],index:n,image:i})})}))},loadImage:function(t){var e=t.target,i=e.parentNode,n=i.offsetWidth||30,s=i.offsetHeight||50,o=!!g(e,"filled");E(e,function(t,i){var a=t/i,r=n,h=s;s*a>n?o?r=s*a:h=n/a:o?h=n/a:r=s*a,l(e,{width:r,height:h,marginLeft:(n-r)/2,marginTop:(s-h)/2})})},keydown:function(t){var e=this.options,i=t.keyCode||t.which||t.charCode;if(this.fulled&&e.keyboard)switch(i){case 27:this.played?this.stop():e.inline?this.fulled&&this.exit():this.hide();break;case 32:this.played&&this.stop();break;case 37:this.prev(e.loop);break;case 38:t.preventDefault(),this.zoom(e.zoomRatio,!0);break;case 39:this.next(e.loop);break;case 40:t.preventDefault(),this.zoom(-e.zoomRatio,!0);break;case 48:case 49:(t.ctrlKey||t.shiftKey)&&(t.preventDefault(),this.toggle())}},dragstart:function(t){"img"===t.target.tagName.toLowerCase()&&t.preventDefault()},pointerdown:function(t){var e=this.options,i=this.pointers;if(this.viewed&&!this.transitioning){t.changedTouches?a(t.changedTouches,function(t){i[t.identifier]=D(t)}):i[t.pointerId||0]=D(t);var n=!!e.movable&&C;Object.keys(i).length>1?n="zoom":"touch"!==t.pointerType&&"touchstart"!==t.type||!this.isSwitchable()||(n="switch"),this.action=n}},pointermove:function(t){var e=this.options,i=this.pointers,n=this.action,s=this.image;this.viewed&&n&&(t.preventDefault(),t.changedTouches?a(t.changedTouches,function(t){r(i[t.identifier],D(t,!0))}):r(i[t.pointerId||0],D(t,!0)),n===C&&e.transition&&u(s,P)&&m(s,P),this.change(t))},pointerup:function(t){var e=this.action,i=this.pointers;t.changedTouches?a(t.changedTouches,function(t){delete i[t.identifier]}):delete i[t.pointerId||0],e&&(e===C&&this.options.transition&&d(this.image,P),this.action=!1)},resize:function(){var t=this;if(this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.viewed&&this.initImage(function(){t.renderImage()}),this.played){if(this.options.fullscreen&&this.fulled&&!document.fullscreenElement&&!document.mozFullScreenElement&&!document.webkitFullscreenElement&&!document.msFullscreenElement)return void this.stop();a(this.player.getElementsByTagName("img"),function(e){b(e,H,h(t.loadImage,t),{once:!0}),y(e,H)})}},start:function(t){var e=t.target;"img"===e.tagName.toLowerCase()&&-1!==this.images.indexOf(e)&&(this.target=e,this.show())},wheel:function(t){var e=this;if(this.viewed&&(t.preventDefault(),!this.wheeling)){this.wheeling=!0,setTimeout(function(){e.wheeling=!1},50);var i=Number(this.options.zoomRatio)||.1,n=1;t.deltaY?n=t.deltaY>0?1:-1:t.wheelDelta?n=-t.wheelDelta/120:t.detail&&(n=t.detail>0?1:-1),this.zoom(-n*i,!0,t)}}},ct={show:function(){var t=this,e=this.element,i=this.options;if(i.inline||this.transitioning||this.visible)return this;if(this.ready||this.build(),o(i.show)&&b(e,"show",i.show,{once:!0}),!1===y(e,"show"))return this;this.open();var n=this.viewer;return m(n,q),b(e,"shown",function(){t.view(t.target?[].concat(t.images).indexOf(t.target):t.index),t.target=!1},{once:!0}),i.transition?(this.transitioning=!0,d(n,P),n.offsetWidth,b(n,Z,h(this.shown,this),{once:!0}),d(n,O)):(d(n,O),this.shown()),this},hide:function(){var t=this,e=this.element,i=this.options,n=this.viewer;return i.inline||this.transitioning||!this.visible?this:(o(i.hide)&&b(e,"hide",i.hide,{once:!0}),!1===y(e,"hide")?this:(this.viewed&&i.transition?(this.transitioning=!0,b(this.image,Z,function(){b(n,Z,h(t.hidden,t),{once:!0}),m(n,O)},{once:!0}),this.zoomTo(0,!1,!1,!0)):(m(n,O),this.hidden()),this))},view:function(t){var e=this,i=this.element,n=this.title,s=this.canvas;if(t=Number(t)||0,!this.ready||!this.visible||this.played||t<0||t>=this.length||this.viewed&&t===this.index)return this;var o=this.items[t],a=o.querySelector("img"),r=g(a,"originalUrl"),l=a.getAttribute("alt"),c=document.createElement("img");return c.src=r,c.alt=l,!1===y(i,"view",{originalImage:this.images[t],index:t,image:c})?this:(this.image=c,m(this.items[this.index],S),d(o,S),this.viewed=!1,this.index=t,this.imageData=null,d(c,R),x(s),s.appendChild(c),this.renderList(),x(n),b(i,j,function(){var t=e.imageData;n.textContent=l+" ("+t.naturalWidth+" × "+t.naturalHeight+")"},{once:!0}),c.complete?this.load():(b(c,H,h(this.load,this),{once:!0}),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(function(){m(c,R),e.timeout=!1},1e3)),this)},prev:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.index-1;return e<0&&(e=t?this.length-1:0),this.view(e),this},next:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.length-1,i=this.index+1;return i>e&&(i=t?0:e),this.view(i),this},move:function(t,e){var n=this.imageData;return this.moveTo(i(t)?t:n.left+Number(t),i(e)?e:n.top+Number(e)),this},moveTo:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,n=this.imageData;if(t=Number(t),i=Number(i),this.viewed&&!this.played&&this.options.movable){var s=!1;e(t)&&(n.left=t,s=!0),e(i)&&(n.top=i,s=!0),s&&this.renderImage()}return this},zoom:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=this.imageData;return t=Number(t),t=t<0?1/(1-t):1+t,this.zoomTo(n.width*t/n.naturalWidth,e,i),this},zoomTo:function(t){var i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,s=arguments.length>3&&void 0!==arguments[3]&&arguments[3],o=this.options,r=this.pointers,h=this.imageData;if(t=Math.max(0,t),e(t)&&this.viewed&&!this.played&&(s||o.zoomable)){if(!s){var l=Math.max(.01,o.minZoomRatio),c=Math.min(100,o.maxZoomRatio);t=Math.min(Math.max(t,l),c)}n&&t>.95&&t<1.05&&(t=1);var u=h.naturalWidth*t,d=h.naturalHeight*t;if(n){var m=function(t){var e=document.documentElement,i=t.getBoundingClientRect();return{left:i.left+((window.scrollX||e&&e.scrollLeft||0)-(e&&e.clientLeft||0)),top:i.top+((window.scrollY||e&&e.scrollTop||0)-(e&&e.clientTop||0))}}(this.viewer),f=r&&Object.keys(r).length?function(t){var e=0,i=0,n=0;return a(t,function(t){var s=t.startX,o=t.startY;e+=s,i+=o,n+=1}),e/=n,i/=n,{pageX:e,pageY:i}}(r):{pageX:n.pageX,pageY:n.pageY};h.left-=(u-h.width)*((f.pageX-m.left-h.left)/h.width),h.top-=(d-h.height)*((f.pageY-m.top-h.top)/h.height)}else h.left-=(u-h.width)/2,h.top-=(d-h.height)/2;h.width=u,h.height=d,h.ratio=t,this.renderImage(),i&&this.tooltip()}return this},rotate:function(t){return this.rotateTo((this.imageData.rotate||0)+Number(t)),this},rotateTo:function(t){var i=this.imageData;return t=Number(t),e(t)&&this.viewed&&!this.played&&this.options.rotatable&&(i.rotate=t,this.renderImage()),this},scaleX:function(t){return this.scale(t,this.imageData.scaleY),this},scaleY:function(t){return this.scale(this.imageData.scaleX,t),this},scale:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,n=this.imageData;if(t=Number(t),i=Number(i),this.viewed&&!this.played&&this.options.scalable){var s=!1;e(t)&&(n.scaleX=t,s=!0),e(i)&&(n.scaleY=i,s=!0),s&&this.renderImage()}return this},play:function(){var t=this,i=this.options,n=this.player,s=h(this.loadImage,this),o=[],r=0,l=0;if(!this.visible||this.played)return this;if(i.fullscreen&&this.requestFullscreen(),this.played=!0,this.onLoadWhenPlay=s,d(n,A),a(this.items,function(t,e){var a=t.querySelector("img"),h=document.createElement("img");h.src=g(a,"originalUrl"),h.alt=a.getAttribute("alt"),r+=1,d(h,L),f(h,P,i.transition),u(t,S)&&(d(h,O),l=e),o.push(h),b(h,H,s,{once:!0}),n.appendChild(h)}),e(i.interval)&&i.interval>0){r>1&&function e(){t.playing=setTimeout(function(){m(o[l],O),d(o[l=(l+=1)<r?l:0],O),e()},i.interval)}()}return this},stop:function(){var t=this,e=this.player;return this.played?(this.options.fullscreen&&this.exitFullscreen(),this.played=!1,clearTimeout(this.playing),a(this.player.getElementsByTagName("img"),function(e){e.complete||w(e,H,t.onLoadWhenPlay)}),m(e,A),x(e),this):this},full:function(){var t=this,e=this.options,i=this.viewer,n=this.image,s=this.list;return!this.visible||this.played||this.fulled||!e.inline?this:(this.fulled=!0,this.open(),d(this.button,Y),e.transition&&(m(n,P),m(s,P)),d(i,N),i.setAttribute("style",""),l(i,{zIndex:e.zIndex}),this.initContainer(),this.viewerData=r({},this.containerData),this.renderList(),this.initImage(function(){t.renderImage(function(){e.transition&&setTimeout(function(){d(n,P),d(s,P)},0)})}),this)},exit:function(){var t=this,e=this.options,i=this.viewer,n=this.image,s=this.list;return this.fulled?(this.fulled=!1,this.close(),m(this.button,Y),e.transition&&(m(n,P),m(s,P)),m(i,N),l(i,{zIndex:e.zIndexInline}),this.viewerData=r({},this.parentData),this.renderViewer(),this.renderList(),this.initImage(function(){t.renderImage(function(){e.transition&&setTimeout(function(){d(n,P),d(s,P)},0)})}),this):this},tooltip:function(){var t=this,e=this.options,i=this.tooltipBox,n=this.imageData;return this.viewed&&!this.played&&e.tooltip?(i.textContent=Math.round(100*n.ratio)+"%",this.tooltiping?clearTimeout(this.tooltiping):e.transition?(this.fading&&y(i,Z),d(i,A),d(i,L),d(i,P),i.offsetWidth,d(i,O)):d(i,A),this.tooltiping=setTimeout(function(){e.transition?(b(i,Z,function(){m(i,A),m(i,L),m(i,P),t.fading=!1},{once:!0}),m(i,O),t.fading=!0):m(i,A),t.tooltiping=!1},1e3),this):this},toggle:function(){return 1===this.imageData.ratio?this.zoomTo(this.initialImageData.ratio,!0):this.zoomTo(1,!0),this},reset:function(){return this.viewed&&!this.played&&(this.imageData=r({},this.initialImageData),this.renderImage()),this},update:function(){var t=this.element,e=this.options,i=this.isImg,n=[];if(i&&!t.parentNode)return this.destroy();var s=[];if(a(i?[t]:t.querySelectorAll("img"),function(t){e.filter?e.filter(t)&&s.push(t):s.push(t)}),this.images=s,this.length=s.length,this.ready&&(a(this.items,function(t,e){var i=t.querySelector("img"),o=s[e];o?o.src!==i.src&&n.push(e):n.push(e)}),l(this.list,{width:"auto"}),this.initList(),this.visible))if(this.length){if(this.viewed){var o=n.indexOf(this.index);o>=0?(this.viewed=!1,this.view(Math.max(this.index-(o+1),0))):d(this.items[this.index],S)}}else this.image=null,this.viewed=!1,this.index=0,this.imageData=null,x(this.canvas),x(this.title);return this},destroy:function(){var t=this.element;return g(t,T)?(this.options.inline?this.unbind():(this.visible&&this.unbind(),w(t,B,this.onStart)),this.close(),this.unbuild(),function(t,e){if(n(t[e]))try{delete t[e]}catch(i){t[e]=null}else if(t.dataset)try{delete t.dataset[e]}catch(i){t.dataset[e]=null}else t.removeAttribute("data-"+v(e))}(t,T),this):this}},ut={open:function(){var t=this.body;d(t,W),t.style.paddingRight=this.scrollbarWidth+(parseFloat(this.initialBodyPaddingRight)||0)+"px"},close:function(){var t=this.body;t&&(m(t,W),t.style.paddingRight=this.initialBodyPaddingRight)},shown:function(){var t=this.element,e=this.options;this.transitioning=!1,this.fulled=!0,this.visible=!0,this.render(),this.bind(),o(e.shown)&&b(t,"shown",e.shown,{once:!0}),y(t,"shown")},hidden:function(){var t=this.element,e=this.options;this.transitioning=!1,this.viewed=!1,this.fulled=!1,this.visible=!1,this.close(),this.unbind(),d(this.viewer,q),this.resetList(),this.resetImage(),o(e.hidden)&&b(t,"hidden",e.hidden,{once:!0}),y(t,"hidden")},requestFullscreen:function(){var t=window.document;if(this.fulled&&!t.fullscreenElement&&!t.mozFullScreenElement&&!t.webkitFullscreenElement&&!t.msFullscreenElement){var e=t.documentElement;e.requestFullscreen?e.requestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen&&e.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}},exitFullscreen:function(){this.fulled&&(document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen())},change:function(t){var e=this.options,i=this.pointers,n=i[Object.keys(i)[0]],s=n.endX-n.startX,o=n.endY-n.startY;switch(this.action){case C:this.move(s,o);break;case"zoom":this.zoom(function(t){var e=r({},t),i=[];return a(t,function(t,n){delete e[n],a(e,function(e){var n=Math.abs(t.startX-e.startX),s=Math.abs(t.startY-e.startY),o=Math.abs(t.endX-e.endX),a=Math.abs(t.endY-e.endY),r=Math.sqrt(n*n+s*s),h=(Math.sqrt(o*o+a*a)-r)/r;i.push(h)})}),i.sort(function(t,e){return Math.abs(t)<Math.abs(e)}),i[0]}(i),!1,t);break;case"switch":this.action="switched",Math.abs(s)>Math.abs(o)&&(s>1?this.prev(e.loop):s<-1&&this.next(e.loop))}a(i,function(t){t.startX=t.endX,t.startY=t.endY})},isSwitchable:function(){var t=this.imageData,e=this.viewerData;return this.length>1&&t.left>=0&&t.top>=0&&t.width<=e.width&&t.height<=e.height}},dt=I.Viewer,mt=function(){function t(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(J(this,t),!e||1!==e.nodeType)throw new Error("The first argument is required and must be an element.");this.element=e,this.options=r({},z,s(i)&&i),this.isImg=!1,this.ready=!1,this.visible=!1,this.viewed=!1,this.fulled=!1,this.played=!1,this.wheeling=!1,this.playing=!1,this.fading=!1,this.tooltiping=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.timeout=!1,this.index=0,this.length=0,this.pointers={},this.init()}return Q(t,[{key:"init",value:function(){var t=this,e=this.element,n=this.options;if(!g(e,T)){p(e,T,this);var s="img"===e.tagName.toLowerCase(),r=[];a(s?[e]:e.querySelectorAll("img"),function(t){n.filter?n.filter(t)&&r.push(t):r.push(t)});var l=r.length;if(l){o(n.ready)&&b(e,"ready",n.ready,{once:!0}),i(document.createElement(T).style.transition)&&(n.transition=!1),this.isImg=s,this.length=l,this.count=0,this.images=r;var u=document.body||document.documentElement;if(this.body=u,this.scrollbarWidth=window.innerWidth-document.documentElement.clientWidth,this.initialBodyPaddingRight=c(u).paddingRight,n.inline){var d=h(this.progress,this);b(e,"ready",function(){t.view()},{once:!0}),a(r,function(t){t.complete?d():b(t,H,d,{once:!0})})}else b(e,B,this.onStart=h(this.start,this))}}}},{key:"progress",value:function(){this.count+=1,this.count===this.length&&this.build()}},{key:"build",value:function(){var t=this.options,n=this.element;if(!this.ready){var r=n.parentNode,h=document.createElement("div");h.innerHTML='<div class="viewer-container"><div class="viewer-canvas"></div><div class="viewer-footer"><div class="viewer-title"></div><div class="viewer-toolbar"></div><div class="viewer-navbar"><ul class="viewer-list"></ul></div></div><div class="viewer-tooltip"></div><div role="button" class="viewer-button" data-action="mix"></div><div class="viewer-player"></div></div>';var u=h.querySelector(".viewer-container"),m=u.querySelector(".viewer-title"),g=u.querySelector(".viewer-toolbar"),w=u.querySelector(".viewer-navbar"),x=u.querySelector(".viewer-button"),E=u.querySelector(".viewer-canvas");if(this.parent=r,this.viewer=u,this.title=m,this.toolbar=g,this.navbar=w,this.button=x,this.canvas=E,this.footer=u.querySelector(".viewer-footer"),this.tooltipBox=u.querySelector(".viewer-tooltip"),this.player=u.querySelector(".viewer-player"),this.list=u.querySelector(".viewer-list"),d(m,t.title?k(t.title):q),d(w,t.navbar?k(t.navbar):q),f(x,q,!t.button),t.backdrop&&(d(u,T+"-backdrop"),t.inline||!0!==t.backdrop||p(E,"action","hide")),t.toolbar){var D=document.createElement("ul"),z=s(t.toolbar),I=_.slice(0,3),C=_.slice(7,9),S=_.slice(9);z||d(g,k(t.toolbar)),a(z?t.toolbar:_,function(n,a){var r=z&&s(n),h=z?v(a):n,l=r&&!i(n.show)?n.show:n;if(l&&(t.zoomable||-1===I.indexOf(h))&&(t.rotatable||-1===C.indexOf(h))&&(t.scalable||-1===S.indexOf(h))){var c=r&&!i(n.size)?n.size:n,u=r&&!i(n.click)?n.click:n,m=document.createElement("li");m.setAttribute("role","button"),d(m,T+"-"+h),o(u)||p(m,"action",h),e(l)&&d(m,k(l)),-1!==["small","large"].indexOf(c)?d(m,T+"-"+c):"play"===h&&d(m,T+"-large"),o(u)&&b(m,B,u),D.appendChild(m)}}),g.appendChild(D)}else d(g,q);if(!t.rotatable){var Y=g.querySelectorAll('li[class*="rotate"]');d(Y,R),a(Y,function(t){g.appendChild(t)})}t.inline?(d(x,"viewer-fullscreen"),l(u,{zIndex:t.zIndexInline}),"static"===c(r).position&&l(r,{position:"relative"}),r.insertBefore(u,n.nextSibling)):(d(x,"viewer-close"),d(u,N),d(u,L),d(u,q),l(u,{zIndex:t.zIndex}),this.body.appendChild(u)),t.inline&&(this.render(),this.bind(),this.visible=!0),this.ready=!0,y(n,"ready")}}},{key:"unbuild",value:function(){this.ready&&(this.ready=!1,this.viewer.parentNode.removeChild(this.viewer))}}],[{key:"noConflict",value:function(){return window.Viewer=dt,t}},{key:"setDefaults",value:function(t){r(z,s(t)&&t)}}]),t}();return r(mt.prototype,rt,ht,lt,ct,ut),mt});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Viewer=e()}(this,function(){"use strict";function t(t){return"string"==typeof t}function e(t){return"number"==typeof t&&!tt(t)}function i(t){return void 0===t}function n(t){return"object"===(void 0===t?"undefined":G(t))&&null!==t}function s(t){if(!n(t))return!1;try{var e=t.constructor,i=e.prototype;return e&&i&&et.call(i,"isPrototypeOf")}catch(t){return!1}}function o(t){return"function"==typeof t}function a(t,i){if(t&&o(i))if(Array.isArray(t)||e(t.length)){var s=t.length,a=void 0;for(a=0;a<s&&!1!==i.call(t,t[a],a,t);a+=1);}else n(t)&&Object.keys(t).forEach(function(e){i.call(t,t[e],e,t)});return t}function r(t){for(var e=arguments.length,i=Array(e>1?e-1:0),s=1;s<e;s++)i[s-1]=arguments[s];if(n(t)&&i.length>0){if(Object.assign)return Object.assign.apply(Object,[t].concat(i));i.forEach(function(e){n(e)&&Object.keys(e).forEach(function(i){t[i]=e[i]})})}return t}function h(t,e){for(var i=arguments.length,n=Array(i>2?i-2:0),s=2;s<i;s++)n[s-2]=arguments[s];return function(){for(var i=arguments.length,s=Array(i),o=0;o<i;o++)s[o]=arguments[o];return t.apply(e,n.concat(s))}}function l(t,i){var n=t.style;a(i,function(t,i){it.test(i)&&e(t)&&(t+="px"),n[i]=t})}function c(t){return window.getComputedStyle?window.getComputedStyle(t,null):t.currentStyle}function u(t,e){return t.classList?t.classList.contains(e):t.className.indexOf(e)>-1}function d(t,i){if(i)if(e(t.length))a(t,function(t){d(t,i)});else if(t.classList)t.classList.add(i);else{var n=t.className.trim();n?n.indexOf(i)<0&&(t.className=n+" "+i):t.className=i}}function m(t,i){i&&(e(t.length)?a(t,function(t){m(t,i)}):t.classList?t.classList.remove(i):t.className.indexOf(i)>=0&&(t.className=t.className.replace(i,"")))}function f(t,i,n){i&&(e(t.length)?a(t,function(t){f(t,i,n)}):n?d(t,i):m(t,i))}function v(t){return t.replace(nt,"$1-$2").toLowerCase()}function g(t,e){return n(t[e])?t[e]:t.dataset?t.dataset[e]:t.getAttribute("data-"+v(e))}function p(t,e,i){n(i)?t[e]=i:t.dataset?t.dataset[e]=i:t.setAttribute("data-"+v(e),i)}function w(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};if(o(i)){var s=e.trim().split(st);s.length>1?a(s,function(e){w(t,e,i,n)}):t.removeEventListener?t.removeEventListener(e,i,n):t.detachEvent&&t.detachEvent("on"+e,i)}}function b(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};if(o(i)){var s=e.trim().split(st);if(s.length>1)a(s,function(e){b(t,e,i,n)});else{if(n.once){var r=i;i=function(){for(var s=arguments.length,o=Array(s),a=0;a<s;a++)o[a]=arguments[a];return w(t,e,i,n),r.apply(t,o)}}t.addEventListener?t.addEventListener(e,i,n):t.attachEvent&&t.attachEvent("on"+e,i)}}}function y(t,e,n){if(t.dispatchEvent){var s=void 0;return o(Event)&&o(CustomEvent)?s=i(n)?new Event(e,{bubbles:!0,cancelable:!0}):new CustomEvent(e,{detail:n,bubbles:!0,cancelable:!0}):i(n)?(s=document.createEvent("Event")).initEvent(e,!0,!0):(s=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n),t.dispatchEvent(s)}return!t.fireEvent||t.fireEvent("on"+e)}function x(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function E(t,e){if(!t.naturalWidth||at){var i=document.createElement("img"),n=document.body||document.documentElement;i.onload=function(){e(i.width,i.height),n.removeChild(i)},i.src=t.src,i.style.cssText="left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;",n.appendChild(i)}else e(t.naturalWidth,t.naturalHeight)}function k(t){switch(t){case 2:return X;case 3:return F;case 4:return M;default:return""}}function D(t,e){var i=t.pageX,n=t.pageY,s={endX:i,endY:n};return e?s:r({startX:i,startY:n},s)}var z={inline:!1,button:!0,navbar:!0,title:!0,toolbar:!0,tooltip:!0,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!0,interval:5e3,keyboard:!0,backdrop:!0,loop:!1,minWidth:200,minHeight:100,zoomRatio:.1,minZoomRatio:.01,maxZoomRatio:100,zIndex:2015,zIndexInline:0,url:"src",container:"body",filter:null,ready:null,show:null,shown:null,hide:null,hidden:null,view:null,viewed:null},I="undefined"!=typeof window?window:{},T="viewer",S="move",C=T+"-active",L=T+"-fade",N=T+"-fixed",q=T+"-fullscreen-exit",Y=T+"-hide",M=T+"-hide-md-down",F=T+"-hide-sm-down",X=T+"-hide-xs-down",O=T+"-in",R=T+"-invisible",W=T+"-open",A=T+"-show",P=T+"-transition",j="viewed",B="click",H="load",V=I.PointerEvent?"pointerdown":"touchstart mousedown",K=I.PointerEvent?"pointermove":"mousemove touchmove",U=I.PointerEvent?"pointerup pointercancel":"touchend touchcancel mouseup",Z="transitionend",$="wheel mousewheel DOMMouseScroll",_=["zoom-in","zoom-out","one-to-one","reset","prev","play","next","rotate-left","rotate-right","flip-horizontal","flip-vertical"],G="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},J=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},Q=function(){function t(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,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),tt=Number.isNaN||I.isNaN,et=Object.prototype.hasOwnProperty,it=/^(width|height|left|top|marginLeft|marginTop)$/,nt=/([a-z\d])([A-Z])/g,st=/\s+/,ot=I.navigator,at=ot&&/(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(ot.userAgent),rt={render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initContainer:function(){this.containerData={width:window.innerWidth,height:window.innerHeight}},initViewer:function(){var t=this.options,e=this.parent,i=void 0;t.inline&&(i={width:Math.max(e.offsetWidth,t.minWidth),height:Math.max(e.offsetHeight,t.minHeight)},this.parentData=i),!this.fulled&&i||(i=this.containerData),this.viewerData=r({},i)},renderViewer:function(){this.options.inline&&!this.fulled&&l(this.viewer,this.viewerData)},initList:function(){var e=this,i=this.element,n=this.options,s=this.list,r=[];a(this.images,function(e,i){var s=e.src,a=e.alt||function(e){return t(e)?e.replace(/^.*\//,"").replace(/[?&#].*$/,""):""}(s),h=n.url;t(h)?h=e.getAttribute(h):o(h)&&(h=h.call(e,e)),(s||h)&&r.push('<li><img src="'+(s||h)+'" role="button" data-action="view" data-index="'+i+'" data-original-url="'+(h||s)+'" alt="'+a+'"></li>')}),s.innerHTML=r.join(""),a(s.getElementsByTagName("img"),function(t){p(t,"filled",!0),b(t,H,h(e.loadImage,e),{once:!0})}),this.items=s.getElementsByTagName("li"),n.transition&&b(i,j,function(){d(s,P)},{once:!0})},renderList:function(t){var e=t||this.index,i=this.items[e].offsetWidth||30,n=i+1;l(this.list,{width:n*this.length,marginLeft:(this.viewerData.width-i)/2-n*e})},resetList:function(){x(this.list),m(this.list,P),l({marginLeft:0})},initImage:function(t){var e=this,i=this.options,n=this.image,s=this.viewerData,a=this.footer.offsetHeight,h=s.width,l=Math.max(s.height-a,a),c=this.ImageData||{};E(n,function(n,s){var a=n/s,u=h,d=l;l*a>h?d=h/a:u=l*a;var m={naturalWidth:n,naturalHeight:s,aspectRatio:a,ratio:(u=Math.min(.9*u,n))/n,width:u,height:d=Math.min(.9*d,s),left:(h-u)/2,top:(l-d)/2},f=r({},m);i.rotatable&&(m.rotate=c.rotate||0,f.rotate=0),i.scalable&&(m.scaleX=c.scaleX||1,m.scaleY=c.scaleY||1,f.scaleX=1,f.scaleY=1),e.imageData=m,e.initialImageData=f,o(t)&&t()})},renderImage:function(t){var i=this.image,n=this.imageData;l(i,r({width:n.width,height:n.height,marginLeft:n.left,marginTop:n.top},function(t){var i=t.rotate,n=t.scaleX,s=t.scaleY,o=[];e(i)&&0!==i&&o.push("rotate("+i+"deg)"),e(n)&&1!==n&&o.push("scaleX("+n+")"),e(s)&&1!==s&&o.push("scaleY("+s+")");var a=o.length?o.join(" "):"none";return{WebkitTransform:a,msTransform:a,transform:a}}(n))),o(t)&&(this.transitioning?b(i,Z,t,{once:!0}):t())},resetImage:function(){var t=this.image;t&&(t.parentNode.removeChild(t),this.image=null)}},ht={bind:function(){var t=this.element,e=this.options,i=this.viewer;o(e.view)&&b(t,"view",e.view),o(e.viewed)&&b(t,j,e.viewed),b(i,B,this.onClick=h(this.click,this)),b(i,$,this.onWheel=h(this.wheel,this)),b(i,"dragstart",this.onDragStart=h(this.dragstart,this)),b(this.canvas,V,this.onPointerDown=h(this.pointerdown,this)),b(t.ownerDocument,K,this.onPointerMove=h(this.pointermove,this)),b(t.ownerDocument,U,this.onPointerUp=h(this.pointerup,this)),b(t.ownerDocument,"keydown",this.onKeyDown=h(this.keydown,this)),b(window,"resize",this.onResize=h(this.resize,this))},unbind:function(){var t=this.element,e=this.options,i=this.viewer;o(e.view)&&w(t,"view",e.view),o(e.viewed)&&w(t,j,e.viewed),w(i,B,this.onClick),w(i,$,this.onWheel),w(i,"dragstart",this.onDragStart),w(this.canvas,V,this.onPointerDown),w(t.ownerDocument,K,this.onPointerMove),w(t.ownerDocument,U,this.onPointerUp),w(t.ownerDocument,"keydown",this.onKeyDown),w(window,"resize",this.onResize)}},lt={click:function(t){var e=t.target,i=this.options,n=this.imageData;switch(g(e,"action")){case"mix":this.played?this.stop():i.inline?this.fulled?this.exit():this.full():this.hide();break;case"hide":this.hide();break;case"view":this.view(g(e,"index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);break;case"one-to-one":this.toggle();break;case"reset":this.reset();break;case"prev":this.prev(i.loop);break;case"play":this.play();break;case"next":this.next(i.loop);break;case"rotate-left":this.rotate(-90);break;case"rotate-right":this.rotate(90);break;case"flip-horizontal":this.scaleX(-n.scaleX||-1);break;case"flip-vertical":this.scaleY(-n.scaleY||-1);break;default:this.played&&this.stop()}},load:function(){var t=this,e=this.options,i=this.image,n=this.index,s=this.viewerData;this.timeout&&(clearTimeout(this.timeout),this.timeout=!1),i&&(m(i,R),i.style.cssText="width:0;height:0;margin-left:"+s.width/2+"px;margin-top:"+s.height/2+"px;max-width:none!important;visibility:visible;",this.initImage(function(){f(i,P,e.transition),f(i,"viewer-move",e.movable),t.renderImage(function(){t.viewed=!0,y(t.element,j,{originalImage:t.images[n],index:n,image:i})})}))},loadImage:function(t){var e=t.target,i=e.parentNode,n=i.offsetWidth||30,s=i.offsetHeight||50,o=!!g(e,"filled");E(e,function(t,i){var a=t/i,r=n,h=s;s*a>n?o?r=s*a:h=n/a:o?h=n/a:r=s*a,l(e,{width:r,height:h,marginLeft:(n-r)/2,marginTop:(s-h)/2})})},keydown:function(t){var e=this.options,i=t.keyCode||t.which||t.charCode;if(this.fulled&&e.keyboard)switch(i){case 27:this.played?this.stop():e.inline?this.fulled&&this.exit():this.hide();break;case 32:this.played&&this.stop();break;case 37:this.prev(e.loop);break;case 38:t.preventDefault(),this.zoom(e.zoomRatio,!0);break;case 39:this.next(e.loop);break;case 40:t.preventDefault(),this.zoom(-e.zoomRatio,!0);break;case 48:case 49:(t.ctrlKey||t.shiftKey)&&(t.preventDefault(),this.toggle())}},dragstart:function(t){"img"===t.target.tagName.toLowerCase()&&t.preventDefault()},pointerdown:function(t){var e=this.options,i=this.pointers;if(this.viewed&&!this.transitioning){t.changedTouches?a(t.changedTouches,function(t){i[t.identifier]=D(t)}):i[t.pointerId||0]=D(t);var n=!!e.movable&&S;Object.keys(i).length>1?n="zoom":"touch"!==t.pointerType&&"touchstart"!==t.type||!this.isSwitchable()||(n="switch"),this.action=n}},pointermove:function(t){var e=this.options,i=this.pointers,n=this.action,s=this.image;this.viewed&&n&&(t.preventDefault(),t.changedTouches?a(t.changedTouches,function(t){r(i[t.identifier],D(t,!0))}):r(i[t.pointerId||0],D(t,!0)),n===S&&e.transition&&u(s,P)&&m(s,P),this.change(t))},pointerup:function(t){var e=this.action,i=this.pointers;t.changedTouches?a(t.changedTouches,function(t){delete i[t.identifier]}):delete i[t.pointerId||0],e&&(e===S&&this.options.transition&&d(this.image,P),this.action=!1)},resize:function(){var t=this;if(this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.viewed&&this.initImage(function(){t.renderImage()}),this.played){if(this.options.fullscreen&&this.fulled&&!document.fullscreenElement&&!document.mozFullScreenElement&&!document.webkitFullscreenElement&&!document.msFullscreenElement)return void this.stop();a(this.player.getElementsByTagName("img"),function(e){b(e,H,h(t.loadImage,t),{once:!0}),y(e,H)})}},start:function(t){var e=t.target;"img"===e.tagName.toLowerCase()&&-1!==this.images.indexOf(e)&&(this.target=e,this.show())},wheel:function(t){var e=this;if(this.viewed&&(t.preventDefault(),!this.wheeling)){this.wheeling=!0,setTimeout(function(){e.wheeling=!1},50);var i=Number(this.options.zoomRatio)||.1,n=1;t.deltaY?n=t.deltaY>0?1:-1:t.wheelDelta?n=-t.wheelDelta/120:t.detail&&(n=t.detail>0?1:-1),this.zoom(-n*i,!0,t)}}},ct={show:function(){var t=this,e=this.element,i=this.options;if(i.inline||this.transitioning||this.visible)return this;if(this.ready||this.build(),o(i.show)&&b(e,"show",i.show,{once:!0}),!1===y(e,"show"))return this;this.open();var n=this.viewer;return m(n,Y),b(e,"shown",function(){t.view(t.target?[].concat(t.images).indexOf(t.target):t.index),t.target=!1},{once:!0}),i.transition?(this.transitioning=!0,d(n,P),n.offsetWidth,b(n,Z,h(this.shown,this),{once:!0}),d(n,O)):(d(n,O),this.shown()),this},hide:function(){var t=this,e=this.element,i=this.options,n=this.viewer;return i.inline||this.transitioning||!this.visible?this:(o(i.hide)&&b(e,"hide",i.hide,{once:!0}),!1===y(e,"hide")?this:(this.viewed&&i.transition?(this.transitioning=!0,b(this.image,Z,function(){b(n,Z,h(t.hidden,t),{once:!0}),m(n,O)},{once:!0}),this.zoomTo(0,!1,!1,!0)):(m(n,O),this.hidden()),this))},view:function(t){var e=this,i=this.element,n=this.title,s=this.canvas;if(t=Number(t)||0,!this.ready||!this.visible||this.played||t<0||t>=this.length||this.viewed&&t===this.index)return this;var o=this.items[t],a=o.querySelector("img"),r=g(a,"originalUrl"),l=a.getAttribute("alt"),c=document.createElement("img");return c.src=r,c.alt=l,!1===y(i,"view",{originalImage:this.images[t],index:t,image:c})?this:(this.image=c,m(this.items[this.index],C),d(o,C),this.viewed=!1,this.index=t,this.imageData=null,d(c,R),x(s),s.appendChild(c),this.renderList(),x(n),b(i,j,function(){var t=e.imageData;n.textContent=l+" ("+t.naturalWidth+" × "+t.naturalHeight+")"},{once:!0}),c.complete?this.load():(b(c,H,h(this.load,this),{once:!0}),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(function(){m(c,R),e.timeout=!1},1e3)),this)},prev:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.index-1;return e<0&&(e=t?this.length-1:0),this.view(e),this},next:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.length-1,i=this.index+1;return i>e&&(i=t?0:e),this.view(i),this},move:function(t,e){var n=this.imageData;return this.moveTo(i(t)?t:n.left+Number(t),i(e)?e:n.top+Number(e)),this},moveTo:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,n=this.imageData;if(t=Number(t),i=Number(i),this.viewed&&!this.played&&this.options.movable){var s=!1;e(t)&&(n.left=t,s=!0),e(i)&&(n.top=i,s=!0),s&&this.renderImage()}return this},zoom:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=this.imageData;return t=Number(t),t=t<0?1/(1-t):1+t,this.zoomTo(n.width*t/n.naturalWidth,e,i),this},zoomTo:function(t){var i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,s=arguments.length>3&&void 0!==arguments[3]&&arguments[3],o=this.options,r=this.pointers,h=this.imageData;if(t=Math.max(0,t),e(t)&&this.viewed&&!this.played&&(s||o.zoomable)){if(!s){var l=Math.max(.01,o.minZoomRatio),c=Math.min(100,o.maxZoomRatio);t=Math.min(Math.max(t,l),c)}n&&t>.95&&t<1.05&&(t=1);var u=h.naturalWidth*t,d=h.naturalHeight*t;if(n){var m=function(t){var e=document.documentElement,i=t.getBoundingClientRect();return{left:i.left+((window.scrollX||e&&e.scrollLeft||0)-(e&&e.clientLeft||0)),top:i.top+((window.scrollY||e&&e.scrollTop||0)-(e&&e.clientTop||0))}}(this.viewer),f=r&&Object.keys(r).length?function(t){var e=0,i=0,n=0;return a(t,function(t){var s=t.startX,o=t.startY;e+=s,i+=o,n+=1}),e/=n,i/=n,{pageX:e,pageY:i}}(r):{pageX:n.pageX,pageY:n.pageY};h.left-=(u-h.width)*((f.pageX-m.left-h.left)/h.width),h.top-=(d-h.height)*((f.pageY-m.top-h.top)/h.height)}else h.left-=(u-h.width)/2,h.top-=(d-h.height)/2;h.width=u,h.height=d,h.ratio=t,this.renderImage(),i&&this.tooltip()}return this},rotate:function(t){return this.rotateTo((this.imageData.rotate||0)+Number(t)),this},rotateTo:function(t){var i=this.imageData;return t=Number(t),e(t)&&this.viewed&&!this.played&&this.options.rotatable&&(i.rotate=t,this.renderImage()),this},scaleX:function(t){return this.scale(t,this.imageData.scaleY),this},scaleY:function(t){return this.scale(this.imageData.scaleX,t),this},scale:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,n=this.imageData;if(t=Number(t),i=Number(i),this.viewed&&!this.played&&this.options.scalable){var s=!1;e(t)&&(n.scaleX=t,s=!0),e(i)&&(n.scaleY=i,s=!0),s&&this.renderImage()}return this},play:function(){var t=this,i=this.options,n=this.player,s=h(this.loadImage,this),o=[],r=0,l=0;if(!this.visible||this.played)return this;if(i.fullscreen&&this.requestFullscreen(),this.played=!0,this.onLoadWhenPlay=s,d(n,A),a(this.items,function(t,e){var a=t.querySelector("img"),h=document.createElement("img");h.src=g(a,"originalUrl"),h.alt=a.getAttribute("alt"),r+=1,d(h,L),f(h,P,i.transition),u(t,C)&&(d(h,O),l=e),o.push(h),b(h,H,s,{once:!0}),n.appendChild(h)}),e(i.interval)&&i.interval>0){r>1&&function e(){t.playing=setTimeout(function(){m(o[l],O),d(o[l=(l+=1)<r?l:0],O),e()},i.interval)}()}return this},stop:function(){var t=this,e=this.player;return this.played?(this.options.fullscreen&&this.exitFullscreen(),this.played=!1,clearTimeout(this.playing),a(this.player.getElementsByTagName("img"),function(e){e.complete||w(e,H,t.onLoadWhenPlay)}),m(e,A),x(e),this):this},full:function(){var t=this,e=this.options,i=this.viewer,n=this.image,s=this.list;return!this.visible||this.played||this.fulled||!e.inline?this:(this.fulled=!0,this.open(),d(this.button,q),e.transition&&(m(n,P),m(s,P)),d(i,N),i.setAttribute("style",""),l(i,{zIndex:e.zIndex}),this.initContainer(),this.viewerData=r({},this.containerData),this.renderList(),this.initImage(function(){t.renderImage(function(){e.transition&&setTimeout(function(){d(n,P),d(s,P)},0)})}),this)},exit:function(){var t=this,e=this.options,i=this.viewer,n=this.image,s=this.list;return this.fulled?(this.fulled=!1,this.close(),m(this.button,q),e.transition&&(m(n,P),m(s,P)),m(i,N),l(i,{zIndex:e.zIndexInline}),this.viewerData=r({},this.parentData),this.renderViewer(),this.renderList(),this.initImage(function(){t.renderImage(function(){e.transition&&setTimeout(function(){d(n,P),d(s,P)},0)})}),this):this},tooltip:function(){var t=this,e=this.options,i=this.tooltipBox,n=this.imageData;return this.viewed&&!this.played&&e.tooltip?(i.textContent=Math.round(100*n.ratio)+"%",this.tooltiping?clearTimeout(this.tooltiping):e.transition?(this.fading&&y(i,Z),d(i,A),d(i,L),d(i,P),i.offsetWidth,d(i,O)):d(i,A),this.tooltiping=setTimeout(function(){e.transition?(b(i,Z,function(){m(i,A),m(i,L),m(i,P),t.fading=!1},{once:!0}),m(i,O),t.fading=!0):m(i,A),t.tooltiping=!1},1e3),this):this},toggle:function(){return 1===this.imageData.ratio?this.zoomTo(this.initialImageData.ratio,!0):this.zoomTo(1,!0),this},reset:function(){return this.viewed&&!this.played&&(this.imageData=r({},this.initialImageData),this.renderImage()),this},update:function(){var t=this.element,e=this.options,i=this.isImg,n=[];if(i&&!t.parentNode)return this.destroy();var s=[];if(a(i?[t]:t.querySelectorAll("img"),function(t){e.filter?e.filter(t)&&s.push(t):s.push(t)}),this.images=s,this.length=s.length,this.ready&&(a(this.items,function(t,e){var i=t.querySelector("img"),o=s[e];o?o.src!==i.src&&n.push(e):n.push(e)}),l(this.list,{width:"auto"}),this.initList(),this.visible))if(this.length){if(this.viewed){var o=n.indexOf(this.index);o>=0?(this.viewed=!1,this.view(Math.max(this.index-(o+1),0))):d(this.items[this.index],C)}}else this.image=null,this.viewed=!1,this.index=0,this.imageData=null,x(this.canvas),x(this.title);return this},destroy:function(){var t=this.element;return g(t,T)?(this.options.inline?this.unbind():(this.visible&&this.unbind(),w(t,B,this.onStart)),this.close(),this.unbuild(),function(t,e){if(n(t[e]))try{delete t[e]}catch(i){t[e]=null}else if(t.dataset)try{delete t.dataset[e]}catch(i){t.dataset[e]=null}else t.removeAttribute("data-"+v(e))}(t,T),this):this}},ut={open:function(){var t=this.body;d(t,W),t.style.paddingRight=this.scrollbarWidth+(parseFloat(this.initialBodyPaddingRight)||0)+"px"},close:function(){var t=this.body;t&&(m(t,W),t.style.paddingRight=this.initialBodyPaddingRight)},shown:function(){var t=this.element,e=this.options;this.transitioning=!1,this.fulled=!0,this.visible=!0,this.render(),this.bind(),o(e.shown)&&b(t,"shown",e.shown,{once:!0}),y(t,"shown")},hidden:function(){var t=this.element,e=this.options;this.transitioning=!1,this.viewed=!1,this.fulled=!1,this.visible=!1,this.close(),this.unbind(),d(this.viewer,Y),this.resetList(),this.resetImage(),o(e.hidden)&&b(t,"hidden",e.hidden,{once:!0}),y(t,"hidden")},requestFullscreen:function(){var t=window.document;if(this.fulled&&!t.fullscreenElement&&!t.mozFullScreenElement&&!t.webkitFullscreenElement&&!t.msFullscreenElement){var e=t.documentElement;e.requestFullscreen?e.requestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen&&e.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}},exitFullscreen:function(){this.fulled&&(document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen())},change:function(t){var e=this.options,i=this.pointers,n=i[Object.keys(i)[0]],s=n.endX-n.startX,o=n.endY-n.startY;switch(this.action){case S:this.move(s,o);break;case"zoom":this.zoom(function(t){var e=r({},t),i=[];return a(t,function(t,n){delete e[n],a(e,function(e){var n=Math.abs(t.startX-e.startX),s=Math.abs(t.startY-e.startY),o=Math.abs(t.endX-e.endX),a=Math.abs(t.endY-e.endY),r=Math.sqrt(n*n+s*s),h=(Math.sqrt(o*o+a*a)-r)/r;i.push(h)})}),i.sort(function(t,e){return Math.abs(t)<Math.abs(e)}),i[0]}(i),!1,t);break;case"switch":this.action="switched",Math.abs(s)>Math.abs(o)&&(s>1?this.prev(e.loop):s<-1&&this.next(e.loop))}a(i,function(t){t.startX=t.endX,t.startY=t.endY})},isSwitchable:function(){var t=this.imageData,e=this.viewerData;return this.length>1&&t.left>=0&&t.top>=0&&t.width<=e.width&&t.height<=e.height}},dt=I.Viewer,mt=function(){function n(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(J(this,n),!t||1!==t.nodeType)throw new Error("The first argument is required and must be an element.");this.element=t,this.options=r({},z,s(e)&&e),this.isImg=!1,this.ready=!1,this.visible=!1,this.viewed=!1,this.fulled=!1,this.played=!1,this.wheeling=!1,this.playing=!1,this.fading=!1,this.tooltiping=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.timeout=!1,this.index=0,this.length=0,this.pointers={},this.init()}return Q(n,[{key:"init",value:function(){var t=this,e=this.element,n=this.options;if(!g(e,T)){p(e,T,this);var s="img"===e.tagName.toLowerCase(),r=[];a(s?[e]:e.querySelectorAll("img"),function(t){n.filter?n.filter(t)&&r.push(t):r.push(t)});var l=r.length;if(l){o(n.ready)&&b(e,"ready",n.ready,{once:!0}),i(document.createElement(T).style.transition)&&(n.transition=!1),this.isImg=s,this.length=l,this.count=0,this.images=r;var u=document.body||document.documentElement;if(this.body=u,this.scrollbarWidth=window.innerWidth-document.documentElement.clientWidth,this.initialBodyPaddingRight=c(u).paddingRight,n.inline){var d=h(this.progress,this);b(e,"ready",function(){t.view()},{once:!0}),a(r,function(t){t.complete?d():b(t,H,d,{once:!0})})}else b(e,B,this.onStart=h(this.start,this))}}}},{key:"progress",value:function(){this.count+=1,this.count===this.length&&this.build()}},{key:"build",value:function(){var n=this.options,r=this.element;if(!this.ready){var h=r.parentNode,u=document.createElement("div");u.innerHTML='<div class="viewer-container"><div class="viewer-canvas"></div><div class="viewer-footer"><div class="viewer-title"></div><div class="viewer-toolbar"></div><div class="viewer-navbar"><ul class="viewer-list"></ul></div></div><div class="viewer-tooltip"></div><div role="button" class="viewer-button" data-action="mix"></div><div class="viewer-player"></div></div>';var m=u.querySelector(".viewer-container"),g=m.querySelector(".viewer-title"),w=m.querySelector(".viewer-toolbar"),x=m.querySelector(".viewer-navbar"),E=m.querySelector(".viewer-button"),D=m.querySelector(".viewer-canvas");if(this.parent=h,this.viewer=m,this.title=g,this.toolbar=w,this.navbar=x,this.button=E,this.canvas=D,this.footer=m.querySelector(".viewer-footer"),this.tooltipBox=m.querySelector(".viewer-tooltip"),this.player=m.querySelector(".viewer-player"),this.list=m.querySelector(".viewer-list"),d(g,n.title?k(n.title):Y),d(x,n.navbar?k(n.navbar):Y),f(E,Y,!n.button),n.backdrop&&(d(m,T+"-backdrop"),n.inline||!0!==n.backdrop||p(D,"action","hide")),n.toolbar){var z=document.createElement("ul"),I=s(n.toolbar),S=_.slice(0,3),C=_.slice(7,9),q=_.slice(9);I||d(w,k(n.toolbar)),a(I?n.toolbar:_,function(t,a){var r=I&&s(t),h=I?v(a):t,l=r&&!i(t.show)?t.show:t;if(l&&(n.zoomable||-1===S.indexOf(h))&&(n.rotatable||-1===C.indexOf(h))&&(n.scalable||-1===q.indexOf(h))){var c=r&&!i(t.size)?t.size:t,u=r&&!i(t.click)?t.click:t,m=document.createElement("li");m.setAttribute("role","button"),d(m,T+"-"+h),o(u)||p(m,"action",h),e(l)&&d(m,k(l)),-1!==["small","large"].indexOf(c)?d(m,T+"-"+c):"play"===h&&d(m,T+"-large"),o(u)&&b(m,B,u),z.appendChild(m)}}),w.appendChild(z)}else d(w,Y);if(!n.rotatable){var M=w.querySelectorAll('li[class*="rotate"]');d(M,R),a(M,function(t){w.appendChild(t)})}if(n.inline)d(E,"viewer-fullscreen"),l(m,{zIndex:n.zIndexInline}),"static"===c(h).position&&l(h,{position:"relative"}),h.insertBefore(m,r.nextSibling);else{d(E,"viewer-close"),d(m,N),d(m,L),d(m,Y),l(m,{zIndex:n.zIndex});var F=n.container;t(F)&&(F=document.querySelector(F)),F||(F=this.body),F.appendChild(m)}n.inline&&(this.render(),this.bind(),this.visible=!0),this.ready=!0,y(r,"ready")}}},{key:"unbuild",value:function(){this.ready&&(this.ready=!1,this.viewer.parentNode.removeChild(this.viewer))}}],[{key:"noConflict",value:function(){return window.Viewer=dt,n}},{key:"setDefaults",value:function(t){r(z,s(t)&&t)}}]),n}();return r(mt.prototype,rt,ht,lt,ct,ut),mt});

package.json

 {
   "name": "viewerjs",
   "description": "JavaScript image viewer.",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "main": "dist/viewer.common.js",
@@ -65,3 +65,3 @@ "module": "dist/viewer.esm.js",
     "postcss-url": "^7.3.0",
-    "rollup": "^0.52.3",
+    "rollup": "^0.53.0",
     "rollup-plugin-babel": "^3.0.3",
@@ -68,0 +68,0 @@ "rollup-watch": "^4.3.1",

README.md

@@ -14,3 +14,3 @@ # Viewer.js
 - [Getting started](#getting-started)
-- [Keyboard support](#keyboard-support)s
+- [Keyboard support](#keyboard-support)
 - [Options](#options)
@@ -343,2 +343,12 @@ - [Methods](#methods)
 
+### container
+
+- Type: `Element` or `String`
+- Default: `'body'`
+- An element or a valid selector for [Document.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
+
+The container to put the viewer in modal mode.
+
+> Only available when the `inline` option is set to `false`.
+
 ### filter
@@ -345,0 +355,0 @@

src/js/defaults.js

@@ -38,2 +38,5 @@ export default {
 
+  // The amount of time to delay between automatically cycling an image when playing.
+  interval: 5000,
+
   // Enable keyboard support
@@ -73,2 +76,6 @@ keyboard: true,
 
+  // Define where to put the viewer in modal mode.
+  // Type: String | Element
+  container: 'body',
+
   // Filter the images for viewing.
@@ -75,0 +82,0 @@ // Type: Function (return true if the image is viewable)

src/js/handlers.js

@@ -0,0 +0,0 @@ import {

src/js/methods.js

@@ -0,0 +0,0 @@ import {

src/js/viewer.js

@@ -35,2 +35,3 @@ import DEFAULTS from './defaults';
   isPlainObject,
+  isString,
   isUndefined,
@@ -293,3 +294,13 @@ proxy,
 
-      this.body.appendChild(viewer);
+      let { container } = options;
+
+      if (isString(container)) {
+        container = document.querySelector(container);
+      }
+
+      if (!container) {
+        container = this.body;
+      }
+
+      container.appendChild(viewer);
     }
@@ -296,0 +307,0 @@

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

Total package byte prevSize

403634

increased by0.85%

Lines of code

9740

increased by0.51%

Number of lines in readme file

783

increased by1.29%

No dependency changes