viewerjs - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

CHANGELOG.md

 # Changelog
 
+## 0.9.0 (Nov 4, 2017)
+
+- Add a new option: `filter`.
+- Support to customize the layout of toolbar (#79).
+- Disallow to show again if it had shown.
+
 ## 0.8.0 (Oct 8, 2017)
@@ -4,0 +10,0 @@

dist/viewer.min.js

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

package.json

 {
   "name": "viewerjs",
   "description": "JavaScript image viewer.",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "main": "dist/viewer.common.js",
   "module": "dist/viewer.esm.js",
   "browser": "dist/viewer.js",
-  "license": "MIT",
   "repository": "fengyuanchen/viewerjs",
   "homepage": "https://fengyuanchen.github.io/viewerjs",
+  "license": "MIT",
   "author": {
-    "name": "Fengyuan Chen",
+    "name": "Chen Fengyuan",
     "url": "http://chenfengyuan.com"
@@ -34,11 +34,11 @@ },
     "build": "npm run build:css && npm run build:js",
-    "build:css": "postcss src/css/viewer.css -o dist/viewer.css -m",
+    "build:css": "postcss src/css/viewer.css -o dist/viewer.css --no-map",
     "build:js": "rollup -c",
+    "clear": "del-cli dist",
     "compress": "npm run compress:css && npm run compress:js",
-    "compress:css": "postcss dist/viewer.css -u cssnano -o dist/viewer.min.css -m",
+    "compress:css": "postcss dist/viewer.css -u cssnano -o dist/viewer.min.css --no-map",
     "compress:js": "uglifyjs dist/viewer.js -o dist/viewer.min.js -c -m --comments /^!/",
     "copy": "cpy dist/viewer.css docs/css",
     "lint": "eslint src/js --fix",
-    "postbuild": "npm test && npm run compress && npm run copy",
-    "prebuild": "npm run lint",
+    "release": "npm run clear && npm run lint && npm run build && npm run compress && npm run copy && npm test",
     "start": "npm-run-all --parallel watch:*",
@@ -51,9 +51,10 @@ "test": "node-qunit-phantomjs test/index.html --timeout 10",
     "babel-core": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "cpy-cli": "^1.0.1",
     "cssnano": "^3.10.0",
-    "eslint": "^4.8.0",
-    "eslint-config-airbnb-base": "^12.0.2",
-    "eslint-plugin-import": "^2.7.0",
-    "node-qunit-phantomjs": "^1.5.0",
+    "del-cli": "^1.1.0",
+    "eslint": "^4.10.0",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "node-qunit-phantomjs": "^1.6.0",
     "npm-run-all": "^4.1.1",
@@ -68,4 +69,4 @@ "postcss-cli": "^4.1.1",
     "stylefmt": "^6.0.0",
-    "uglify-js": "^3.1.3"
+    "uglify-js": "^3.1.6"
   }
 }

README.md

@@ -1,3 +0,5 @@
-# Viewer.js [![Build Status](https://travis-ci.org/fengyuanchen/viewerjs.svg)](https://travis-ci.org/fengyuanchen/viewerjs)
+# Viewer.js
 
+[![Build Status](https://travis-ci.org/fengyuanchen/viewerjs.svg)](https://travis-ci.org/fengyuanchen/viewerjs) [![Downloads](https://img.shields.io/npm/dt/viewerjs.svg)](https://www.npmjs.com/package/viewerjs) [![Version](https://img.shields.io/npm/v/viewerjs.svg)](https://www.npmjs.com/package/viewerjs)
+
 > JavaScript image viewer.
@@ -12,3 +14,3 @@
 - [Getting started](#getting-started)
-- [Keyboard support](#keyboard-support)
+- [Keyboard support](#keyboard-support)s
 - [Options](#options)
@@ -25,3 +27,3 @@ - [Methods](#methods)
 
-- Supports 29 [options](#options)
+- Supports 30 [options](#options)
 - Supports 23 [methods](#methods)
@@ -160,13 +162,39 @@ - Supports 7 [events](#events)
 
-- Type: `Boolean` or `Number`
+- Type: `Boolean` or `Number` or `Object`
 - Default: `true`
 - Options:
-  - `0` or `false`: hide the toolbar
-  - `1` or `true`: show the toolbar
-  - `2`: show the toolbar only when screen width great then 768 pixels
-  - `3`: show the toolbar only when screen width great then 992 pixels
-  - `4`: show the toolbar only when screen width great then 1200 pixels
+  - `0` or `false`: hide the toolbar.
+  - `1` or `true`: show the toolbar.
+  - `2`: show the toolbar only when screen width great then 768 pixels.
+  - `3`: show the toolbar only when screen width great then 992 pixels.
+  - `4`: show the toolbar only when screen width great then 1200 pixels.
+  - `{ key: Boolean | Number }`: show or hide the toolbar.
+  - `{ key: String }`: customize the size of the button.
+  - `{ key: { show: Boolean | Number, size: String, click: Function }`: customize each property of the button.
+  - Available keys: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal" and "flipVertical".
+  - Available sizes: "small", "medium" (default) and "large".
 
-Specify the visibility of the toolbar.
+Specify the visibility and layout of the toolbar its buttons.
 
+For example, `toolbar: 4` equals to:
+
+```js
+toolbar: {
+  zoomIn: 4,
+  zoomOut: 4,
+  oneToOne: 4,
+  reset: 4,
+  prev: 4,
+  play: {
+    show: 4,
+    size: 'large',
+  },
+  next: 4,
+  rotateLeft: 4,
+  rotateRight: 4,
+  flipHorizontal: 4,
+  flipVertical: 4,
+}
+```
+
 ### tooltip
@@ -300,2 +328,19 @@
 
+### filter
+
+- Type: `Function`
+- Default: `null`
+
+Filter the images for viewing (should return `true` if the image is viewable).
+
+For example:
+
+```js
+new Viewer(images, {
+  filter(image) {
+    return image.complete;
+  },
+});
+```
+
 ### ready
@@ -398,8 +443,18 @@
 
-### prev()
+### prev([loop=false])
 
+- **loop** (optional):
+  - Type: `Boolean`
+  - Default: `false`
+  - Indicate if turn to view the last one when it is the first one at present.
+
 View the previous image.
 
-### next()
+### next([loop=false])
 
+- **loop** (optional):
+  - Type: `Boolean`
+  - Default: `false`
+  - Indicate if turn to view the first one  when it is the last one at present.
+
 View the next image.
@@ -603,2 +658,5 @@
 
+> Be careful to use these events in other component which has the same event names, e.g.: [Bootstrap](https://getbootstrap.com/)'s modal.
+
+
 ```js
@@ -701,4 +759,4 @@ var viewer;
 
-[MIT](http://opensource.org/licenses/MIT) © [Fengyuan Chen](http://chenfengyuan.com)
+[MIT](http://opensource.org/licenses/MIT) © [Chen Fengyuan](http://chenfengyuan.com)
 
 [⬆ back to top](#table-of-contents)

src/js/constants.js

@@ -1,3 +0,2 @@
-const { PointerEvent } = window;
-
+export const WINDOW = typeof window !== 'undefined' ? window : {};
 export const NAMESPACE = 'viewer';
@@ -40,7 +39,21 @@
 export const EVENT_LOAD = 'load';
-export const EVENT_POINTER_DOWN = PointerEvent ? 'pointerdown' : 'touchstart mousedown';
-export const EVENT_POINTER_MOVE = PointerEvent ? 'pointermove' : 'mousemove touchmove';
-export const EVENT_POINTER_UP = PointerEvent ? 'pointerup pointercancel' : 'touchend touchcancel mouseup';
+export const EVENT_POINTER_DOWN = WINDOW.PointerEvent ? 'pointerdown' : 'touchstart mousedown';
+export const EVENT_POINTER_MOVE = WINDOW.PointerEvent ? 'pointermove' : 'mousemove touchmove';
+export const EVENT_POINTER_UP = WINDOW.PointerEvent ? 'pointerup pointercancel' : 'touchend touchcancel mouseup';
 export const EVENT_RESIZE = 'resize';
 export const EVENT_TRANSITION_END = 'transitionend';
 export const EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll';
+
+export const BUTTONS = [
+  'zoom-in',
+  'zoom-out',
+  'one-to-one',
+  'reset',
+  'prev',
+  'play',
+  'next',
+  'rotate-left',
+  'rotate-right',
+  'flip-horizontal',
+  'flip-vertical',
+];

src/js/defaults.js

@@ -69,2 +69,6 @@ export default {
 
+  // Filter the images for viewing.
+  // Type: Function (return true if the image is viewable)
+  filter: null,
+
   // Event shortcuts
@@ -71,0 +75,0 @@ ready: null,

src/js/events.js

@@ -36,13 +36,21 @@ import {
     addListener(
-      this.canvas, EVENT_POINTER_DOWN, (
-        this.onPointerDown = proxy(this.pointerdown, this)
-      ),
+      this.canvas,
+      EVENT_POINTER_DOWN,
+      (this.onPointerDown = proxy(this.pointerdown, this)),
     );
     addListener(
-      document, EVENT_POINTER_MOVE, (
-        this.onPointerMove = proxy(this.pointermove, this)
-      ),
+      element.ownerDocument,
+      EVENT_POINTER_MOVE,
+      (this.onPointerMove = proxy(this.pointermove, this)),
     );
-    addListener(document, EVENT_POINTER_UP, (this.onPointerUp = proxy(this.pointerup, this)));
-    addListener(document, EVENT_KEY_DOWN, (this.onKeyDown = proxy(this.keydown, this)));
+    addListener(
+      element.ownerDocument,
+      EVENT_POINTER_UP,
+      (this.onPointerUp = proxy(this.pointerup, this)),
+    );
+    addListener(
+      element.ownerDocument,
+      EVENT_KEY_DOWN,
+      (this.onKeyDown = proxy(this.keydown, this)),
+    );
     addListener(window, EVENT_RESIZE, (this.onResize = proxy(this.resize, this)));
@@ -66,7 +74,7 @@ },
     removeListener(this.canvas, EVENT_POINTER_DOWN, this.onPointerDown);
-    removeListener(document, EVENT_POINTER_MOVE, this.onPointerMove);
-    removeListener(document, EVENT_POINTER_UP, this.onPointerUp);
-    removeListener(document, EVENT_KEY_DOWN, this.onKeyDown);
+    removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onPointerMove);
+    removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onPointerUp);
+    removeListener(element.ownerDocument, EVENT_KEY_DOWN, this.onKeyDown);
     removeListener(window, EVENT_RESIZE, this.onResize);
   },
 };

src/js/handlers.js

@@ -320,6 +320,2 @@ import {
 
-    if (!this.viewed) {
-      return;
-    }
-
     if (e.changedTouches) {
@@ -376,3 +372,3 @@ each(e.changedTouches, (touch) => {
   start({ target }) {
-    if (target.tagName.toLowerCase() === 'img') {
+    if (target.tagName.toLowerCase() === 'img' && this.images.indexOf(target) !== -1) {
       this.target = target;
@@ -379,0 +375,0 @@ this.show();

src/js/methods.js

@@ -48,3 +48,3 @@ import {
 
-    if (options.inline || this.transitioning) {
+    if (options.inline || this.transitioning || this.visible) {
       return this;
@@ -216,13 +216,34 @@ }
 
-  // View the previous image
-  prev() {
-    this.view(Math.max(this.index - 1, 0));
+  /**
+   * View the previous image
+   * @param {boolean} [loop=false] - Indicate if view the last one
+   * when it is the first one at present.
+   * @returns {Object} this
+   */
+  prev(loop = false) {
+    let index = this.index - 1;
 
+    if (index < 0) {
+      index = loop ? this.length - 1 : 0;
+    }
+
+    this.view(index);
     return this;
   },
 
-  // View the next image
-  next() {
-    this.view(Math.min(this.index + 1, this.length - 1));
+  /**
+   * View the next image
+   * @param {boolean} [loop=false] - Indicate if view the first one
+   * when it is the last one at present.
+   * @returns {Object} this
+   */
+  next(loop = false) {
+    const maxIndex = this.length - 1;
+    let index = this.index + 1;
 
+    if (index > maxIndex) {
+      index = loop ? 0 : maxIndex;
+    }
+
+    this.view(index);
     return this;
@@ -703,15 +724,29 @@ },
   update() {
+    const { element, options, isImg } = this;
     const indexes = [];
 
     // Destroy viewer if the target image was deleted
-    if (this.isImg && !this.element.parentNode) {
+    if (isImg && !element.parentNode) {
       return this.destroy();
     }
 
-    this.length = this.images.length;
+    const images = [];
 
+    each(isImg ? [element] : element.querySelectorAll('img'), (image) => {
+      if (options.filter) {
+        if (options.filter(image)) {
+          images.push(image);
+        }
+      } else {
+        images.push(image);
+      }
+    });
+
+    this.images = images;
+    this.length = images.length;
+
     if (this.ready) {
       each(this.items, (item, i) => {
         const img = item.querySelector('img');
-        const image = this.images[i];
+        const image = images[i];
 
@@ -763,2 +798,6 @@ if (image) {
 
+    if (!getData(element, NAMESPACE)) {
+      return this;
+    }
+
     if (this.options.inline) {
@@ -774,7 +813,7 @@ this.unbind();
 
+    this.close();
     this.unbuild();
     removeData(element, NAMESPACE);
-
     return this;
   },
 };

src/js/others.js

@@ -20,4 +20,2 @@ import {
 
-const { document } = window;
-
 export default {
@@ -28,3 +26,4 @@ open() {
     addClass(body, CLASS_OPEN);
-    body.style.paddingRight = `${this.scrollbarWidth}px`;
+
+    body.style.paddingRight = `${this.scrollbarWidth + (parseFloat(this.initialBodyPaddingRight) || 0)}px`;
   },
@@ -36,3 +35,3 @@
     removeClass(body, CLASS_OPEN);
-    body.style.paddingRight = 0;
+    body.style.paddingRight = this.initialBodyPaddingRight;
   },
@@ -60,3 +59,2 @@
     const { element, options } = this;
-
     this.transitioning = false;
@@ -66,4 +64,4 @@ this.viewed = false;
     this.visible = false;
+    this.close();
     this.unbind();
-    this.close();
     addClass(this.viewer, CLASS_HIDE);
@@ -83,2 +81,4 @@ this.resetList();
   requestFullscreen() {
+    const { document } = window;
+
     if (this.fulled && !document.fullscreenElement && !document.mozFullScreenElement &&
@@ -85,0 +85,0 @@ !document.webkitFullscreenElement && !document.msFullscreenElement) {

src/js/render.js

@@ -74,6 +74,2 @@ import {
 
-      if (!src) {
-        return;
-      }
-
       if (isString(url)) {
@@ -85,12 +81,14 @@ url = image.getAttribute(url);
 
-      items.push('<li>' +
-        '<img' +
-          ` src="${src}"` +
-          ' role="button"' +
-          ' data-action="view"' +
-          ` data-index="${i}"` +
-          ` data-original-url="${(url || src)}"` +
-          ` alt="${alt}"` +
-        '>' +
-      '</li>');
+      if (src || url) {
+        items.push('<li>' +
+          '<img' +
+            ` src="${src || url}"` +
+            ' role="button"' +
+            ' data-action="view"' +
+            ` data-index="${i}"` +
+            ` data-original-url="${url || src}"` +
+            ` alt="${alt}"` +
+          '>' +
+        '</li>');
+      }
     });
@@ -97,0 +95,0 @@

src/js/template.js

@@ -6,15 +6,3 @@ export default (
       '<div class="viewer-title"></div>' +
-      '<ul class="viewer-toolbar">' +
-        '<li role="button" class="viewer-zoom-in" data-action="zoom-in"></li>' +
-        '<li role="button" class="viewer-zoom-out" data-action="zoom-out"></li>' +
-        '<li role="button" class="viewer-one-to-one" data-action="one-to-one"></li>' +
-        '<li role="button" class="viewer-reset" data-action="reset"></li>' +
-        '<li role="button" class="viewer-prev" data-action="prev"></li>' +
-        '<li role="button" class="viewer-play" data-action="play"></li>' +
-        '<li role="button" class="viewer-next" data-action="next"></li>' +
-        '<li role="button" class="viewer-rotate-left" data-action="rotate-left"></li>' +
-        '<li role="button" class="viewer-rotate-right" data-action="rotate-right"></li>' +
-        '<li role="button" class="viewer-flip-horizontal" data-action="flip-horizontal"></li>' +
-        '<li role="button" class="viewer-flip-vertical" data-action="flip-vertical"></li>' +
-      '</ul>' +
+      '<div class="viewer-toolbar"></div>' +
       '<div class="viewer-navbar">' +
@@ -21,0 +9,0 @@ '<ul class="viewer-list"></ul>' +

src/js/utilities.js

@@ -5,2 +5,3 @@ import {
   CLASS_HIDE_MD_DOWN,
+  WINDOW,
 } from './constants';
@@ -20,3 +21,3 @@
  */
-export const isNaN = Number.isNaN || window.isNaN;
+export const isNaN = Number.isNaN || WINDOW.isNaN;
 
@@ -334,9 +335,13 @@ /**
 /**
- * Remove event listener from the given element.
- * @param {Element} element - The target element.
- * @param {string} type - The event type(s) to remove,
- * @param {Function} listener - The event listener to remove.
+ * Remove event listener from the target element.
+ * @param {Element} element - The event target.
+ * @param {string} type - The event type(s).
+ * @param {Function} listener - The event listener.
  * @param {Object} options - The event options.
  */
 export function removeListener(element, type, listener, options = {}) {
+  if (!isFunction(listener)) {
+    return;
+  }
+
   const types = type.trim().split(REGEXP_SPACES);
@@ -346,3 +351,3 @@
     each(types, (t) => {
-      removeListener(element, t, listener);
+      removeListener(element, t, listener, options);
     });
@@ -352,7 +357,2 @@ return;
 
-  if (isFunction(listener.onceListener)) {
-    listener = listener.onceListener;
-    delete listener.onceListener;
-  }
-
   if (element.removeEventListener) {
@@ -366,9 +366,13 @@ element.removeEventListener(type, listener, options);
 /**
- * Add event listener to the given element.
- * @param {Element} element - The target element.
- * @param {string} type - The event type(s) to add,
- * @param {Function} listener - The event listener to add.
+ * Add event listener to the target element.
+ * @param {Element} element - The event target.
+ * @param {string} type - The event type(s).
+ * @param {Function} listener - The event listener.
  * @param {Object} options - The event options.
  */
 export function addListener(element, type, listener, options = {}) {
+  if (!isFunction(listener)) {
+    return;
+  }
+
   const types = type.trim().split(REGEXP_SPACES);
@@ -378,3 +382,3 @@
     each(types, (t) => {
-      addListener(element, t, listener);
+      addListener(element, t, listener, options);
     });
@@ -386,8 +390,7 @@ return;
     const originalListener = listener;
-    const onceListener = (...args) => {
-      removeListener(element, type, onceListener);
+
+    listener = (...args) => {
+      removeListener(element, type, listener, options);
       return originalListener.apply(element, args);
     };
-    originalListener.onceListener = onceListener;
-    listener = onceListener;
   }
@@ -403,5 +406,5 @@
 /**
- * Dispatch event on the given element.
- * @param {Element} element - The target element.
- * @param {string} type - The event type(s) to dispatch,
+ * Dispatch event on the target element.
+ * @param {Element} element - The event target.
+ * @param {string} type - The event type(s).
  * @param {Object} data - The additional event data.
@@ -516,2 +519,3 @@ * @returns {boolean} Indicate if the event is default prevented or not.
 
+const { navigator } = WINDOW;
 const IS_SAFARI_OR_UIWEBVIEW = navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);
@@ -518,0 +522,0 @@

src/js/viewer.js

@@ -9,2 +9,3 @@ import DEFAULTS from './defaults';
 import {
+  BUTTONS,
   CLASS_CLOSE,
@@ -20,2 +21,3 @@ CLASS_FADE,
   NAMESPACE,
+  WINDOW,
 } from './constants';
@@ -31,3 +33,5 @@ import {
   getStyle,
+  hyphenate,
   isFunction,
+  isNumber,
   isPlainObject,
@@ -41,3 +45,3 @@ isUndefined,
 
-let AnotherViewer;
+const AnotherViewer = WINDOW.Viewer;
 
@@ -55,3 +59,2 @@ class Viewer {
 
-
     this.element = element;
@@ -89,3 +92,14 @@ this.options = extend({}, DEFAULTS, isPlainObject(options) && options);
     const isImg = element.tagName.toLowerCase() === 'img';
-    const images = isImg ? [element] : element.getElementsByTagName('img');
+    const images = [];
+
+    each(isImg ? [element] : element.querySelectorAll('img'), (image) => {
+      if (options.filter) {
+        if (options.filter(image)) {
+          images.push(image);
+        }
+      } else {
+        images.push(image);
+      }
+    });
+
     const { length } = images;
@@ -112,5 +126,9 @@
     this.images = images;
-    this.body = document.body;
-    this.scrollbarWidth = window.innerWidth - document.body.clientWidth;
 
+    const { body } = document;
+
+    this.body = body;
+    this.scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    this.initialBodyPaddingRight = getStyle(body).paddingRight;
+
     if (options.inline) {
@@ -179,10 +197,60 @@ const progress = proxy(this.progress, this);
     addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(options.title));
-    addClass(toolbar, !options.toolbar ? CLASS_HIDE : getResponsiveClass(options.toolbar));
     addClass(navbar, !options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));
     toggleClass(button, CLASS_HIDE, !options.button);
 
-    toggleClass(toolbar.querySelector(`.${NAMESPACE}-one-to-one`), CLASS_INVISIBLE, !options.zoomable);
-    toggleClass(toolbar.querySelectorAll('li[class*="zoom"]'), CLASS_INVISIBLE, !options.zoomable);
-    toggleClass(toolbar.querySelectorAll('li[class*="flip"]'), CLASS_INVISIBLE, !options.scalable);
+    if (options.toolbar) {
+      const list = document.createElement('ul');
+      const custom = isPlainObject(options.toolbar);
+      const zoomButtons = BUTTONS.slice(0, 3);
+      const rotateButtons = BUTTONS.slice(7, 9);
+      const scaleButtons = BUTTONS.slice(9);
 
+      if (!custom) {
+        addClass(toolbar, getResponsiveClass(options.toolbar));
+      }
+
+      each(custom ? options.toolbar : BUTTONS, (value, index) => {
+        const deep = custom && isPlainObject(value);
+        const name = custom ? hyphenate(index) : value;
+        const show = deep ? value.show : value;
+
+        if (
+          !show ||
+          (!options.zoomable && zoomButtons.indexOf(name) !== -1) ||
+          (!options.rotatable && rotateButtons.indexOf(name) !== -1) ||
+          (!options.scalable && scaleButtons.indexOf(name) !== -1)
+        ) {
+          return;
+        }
+
+        const size = deep ? value.size : value;
+        const click = deep ? value.click : value;
+        const item = document.createElement('li');
+
+        item.setAttribute('role', 'button');
+        setData(item, 'action', name);
+        addClass(item, `${NAMESPACE}-${name}`);
+
+        if (isNumber(show)) {
+          addClass(item, getResponsiveClass(show));
+        }
+
+        if (['small', 'large'].indexOf(size) !== -1) {
+          addClass(item, `${NAMESPACE}-${size}`);
+        } else if (name === 'play') {
+          addClass(item, `${NAMESPACE}-large`);
+        }
+
+        if (isFunction(click)) {
+          addListener(item, EVENT_CLICK, click);
+        }
+
+        list.appendChild(item);
+      });
+
+      toolbar.appendChild(list);
+    } else {
+      addClass(toolbar, CLASS_HIDE);
+    }
+
     if (!options.rotatable) {
@@ -220,3 +288,3 @@ const rotates = toolbar.querySelectorAll('li[class*="rotate"]');
 
-      document.body.appendChild(viewer);
+      this.body.appendChild(viewer);
     }
@@ -264,7 +332,2 @@
 
-if (typeof window !== 'undefined') {
-  AnotherViewer = window.Viewer;
-  window.Viewer = Viewer;
-}
-
 export default Viewer;

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

Lines of code

9489

increased by3.58%

Number of lines in readme file

756

increased by8.31%

Worsened metrics

Total package byte prevSize

394730

decreased by-46.29%

Dev dependency count

19

increased by5.56%

Number of package files

23

decreased by-14.81%

No dependency changes