Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

imageviewer

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

imageviewer - npm Package Compare versions

Comparing version 0.6.0 to 1.0.0-alpha

src/index.css
src/index.js

9

CHANGELOG.md
# Changelog
## 1.0.0-alpha (Mar 11, 2018)
- The core code of Viewer is replaced with [Viewer.js](https://github.com/fengyuanchen/viewerjs) now.
## 0.7.0 (Mar 11, 2018)
- Emulate scroll bar width when modal opening.
- Disallow to show again if it had shown.
## 0.6.0 (Oct 7, 2017)

@@ -4,0 +13,0 @@

8

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

75

package.json
{
"name": "imageviewer",
"description": "A simple jQuery image viewing plugin.",
"version": "0.6.0",
"version": "1.0.0-alpha",
"main": "dist/viewer.common.js",
"module": "dist/viewer.esm.js",
"browser": "dist/viewer.js",
"license": "MIT",
"unpkg": "dist/viewer.js",
"style": "dist/viewer.css",
"repository": "fengyuanchen/viewer",
"homepage": "https://fengyuanchen.github.io/viewer",
"license": "MIT",
"author": {
"name": "Fengyuan Chen",
"name": "Chen Fengyuan",
"url": "http://chenfengyuan.com"

@@ -22,2 +23,4 @@ },

"viewer",
"viewer.js",
"viewing",
"jquery",

@@ -29,42 +32,60 @@ "jquery-plugin",

"front-end",
"web",
"development"
"web"
],
"scripts": {
"build": "npm run build:css && npm run build:js",
"build:css": "postcss src/css/viewer.css -o dist/viewer.css",
"build:css": "postcss src/index.css -o dist/viewer.css --no-map",
"build:js": "rollup -c",
"clear": "del-cli dist",
"commitmsg": "npm run lint && commitlint -e",
"compress": "npm run compress:css && npm run compress:js",
"compress:css": "postcss dist/viewer.css -u cssnano -m -o dist/viewer.min.css",
"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 --fix",
"postbuild": "npm run compress && npm run copy",
"prebuild": "npm run lint",
"lint": "eslint src test --fix",
"release": "npm run clear && npm run lint && npm run build && npm run compress && npm run copy && npm test",
"start": "npm-run-all --parallel watch:*",
"watch:css": "postcss src/css/viewer.css -o docs/css/viewer.css -w",
"watch:js": "rollup -c -w -m"
"test": "karma start test/karma.conf.js",
"watch:css": "postcss src/index.css -o docs/css/viewer.css -m -w",
"watch:js": "rollup -c -m -w"
},
"dependencies": {
"viewerjs": "^1.0.0-rc"
},
"devDependencies": {
"@commitlint/cli": "^6.1.3",
"@commitlint/config-angular": "^6.1.3",
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.6.1",
"chai": "^4.1.2",
"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",
"jquery": "^3.2.1",
"npm-run-all": "^4.1.1",
"postcss": "^6.0.11",
"postcss-cli": "^4.1.1",
"del-cli": "^1.1.0",
"eslint": "^4.18.2",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.9.0",
"husky": "^0.14.3",
"jquery": "^3.3.1",
"karma": "^2.0.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.5",
"karma-rollup-preprocessor": "^5.1.1",
"mocha": "^5.0.1",
"npm-run-all": "^4.1.2",
"postcss-cli": "^5.0.0",
"postcss-cssnext": "^3.0.2",
"postcss-header": "^1.0.0",
"postcss-url": "^7.1.2",
"rollup": "^0.50.0",
"rollup-plugin-babel": "^3.0.2",
"rollup-plugin-commonjs": "^8.1.0",
"rollup-plugin-node-resolve": "^3.0.0",
"postcss-import": "^11.1.0",
"postcss-url": "^7.3.1",
"puppeteer": "^1.1.1",
"rollup": "^0.56.5",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-node-resolve": "^3.0.3",
"rollup-watch": "^4.3.1",
"stylefmt": "^6.0.0",
"uglify-js": "^3.1.3"
"uglify-js": "^3.3.14"
},

@@ -71,0 +92,0 @@ "peerDependencies": {

631

README.md
# Viewer
> A simple jQuery image viewing plugin.
[![Build Status](https://travis-ci.org/fengyuanchen/viewer.svg)](https://travis-ci.org/fengyuanchen/viewer) [![Downloads](https://img.shields.io/npm/dm/imageviewer.svg)](https://www.npmjs.com/package/imageviewer) [![Version](https://img.shields.io/npm/v/imageviewer.svg)](https://www.npmjs.com/package/imageviewer)
- [Website](https://fengyuanchen.github.io/viewer)
- [Viewer.js](https://github.com/fengyuanchen/viewerjs) - the non-jQuery version of Viewer (**recommended**).
> A simple jQuery image viewing plugin. As of v1.0.0, the core code of Viewer is replaced with [Viewer.js](https://github.com/fengyuanchen/viewerjs).
## Table of contents
- [Demo](https://fengyuanchen.github.io/viewer)
- [Viewer.js](https://github.com/fengyuanchen/viewerjs) - JavaScript image viewer (**recommended**)
- [viewer](https://github.com/fengyuanchen/viewer) - A jQuery plugin wrapper for Viewer.js (**recommended** for jQuery users to use this instead of Viewer)
- [Features](#features)
- [Main](#main)
- [Getting started](#getting-started)
- [Keyboard support](#keyboard-support)
- [Options](#options)
- [Methods](#methods)
- [Events](#events)
- [No conflict](#no-conflict)
- [Browser support](#browser-support)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [License](#license)
## Features
- Supports [options](#options)
- Supports [methods](#methods)
- Supports [events](#events)
- Supports touch
- Supports move
- Supports zoom
- Supports rotation
- Supports scale (flip)
- Supports keyboard
- Cross-browser support
## Main

@@ -40,8 +15,8 @@

dist/
├── viewer.css ( 8 KB)
├── viewer.min.css ( 7 KB)
├── viewer.js (50 KB, UMD)
├── viewer.min.js (22 KB, UMD, compressed)
├── viewer.common.js (50 KB, CommonJS, default)
└── viewer.esm.js (50 KB, ES Module)
├── viewer.css
├── viewer.min.css (compressed)
├── viewer.js (UMD)
├── viewer.min.js (UMD, compressed)
├── viewer.common.js (CommonJS, default)
└── viewer.esm.js (ES Module)
```

@@ -51,3 +26,3 @@

### Install
### Installation

@@ -62,4 +37,4 @@ ```shell

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/viewer.js"></script>
<link href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>
```

@@ -74,8 +49,8 @@

<div>
<img class="image" src="picture.jpg" alt="Picture">
<img id="image" src="picture.jpg" alt="Picture">
</div>
<div>
<ul class="images">
<li><img src="picture.jpg" alt="Picture"></li>
<ul id="images">
<li><img src="picture-1.jpg" alt="Picture 1"></li>
<li><img src="picture-2.jpg" alt="Picture 2"></li>

@@ -88,559 +63,42 @@ <li><img src="picture-3.jpg" alt="Picture 3"></li>

```js
// View one image
$('.image').viewer();
var $image = $('#image');
// View some images
$('.images').viewer();
```
## Keyboard support
> Only available in modal mode.
- `Esc`: Exit full screen or stop play.
- `Space`: Stop play.
- `←`: View the previous image.
- `→`: View the next image.
- `↑`: Zoom in the image.
- `↓`: Zoom out the image.
- `Ctrl + 0`: Zoom out to initial size.
- `Ctrl + 1`: Zoom in to natural size.
[⬆ back to top](#table-of-contents)
## Options
You may set viewer options with `$().viewer(options)`.
If you want to change the global default options, You may use `$.fn.viewer.setDefaults(options)`.
### inline
- Type: `Boolean`
- Default: `false`
Enable inline mode.
### button
- Type: `Boolean`
- Default: `true`
Show the button on the top-right of the viewer.
### navbar
- Type: `Boolean` or `Number`
- Default: `true`
- Options:
- `0` or `false`: hide the navbar
- `1` or `true`: show the navbar
- `2`: show the navbar only when screen width great then 768 pixels
- `3`: show the navbar only when screen width great then 992 pixels
- `4`: show the navbar only when screen width great then 1200 pixels
Specify the visibility of the navbar.
### title
- Type: `Boolean` or `Number`
- Default: `true`
- Options:
- `0` or `false`: hide the title
- `1` or `true`: show the title
- `2`: show the title only when screen width great then 768 pixels
- `3`: show the title only when screen width great then 992 pixels
- `4`: show the title only when screen width great then 1200 pixels
Specify the visibility of the title (the current image's name and dimensions).
> The name comes from the `alt` attribute of an image element or the image name parsed from URL.
### toolbar
- Type: `Boolean` or `Number`
- 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
Specify the visibility of the toolbar.
### tooltip
- Type: `Boolean`
- Default: `true`
Show the tooltip with image ratio (percentage) when zoom in or zoom out
### movable
- Type: `Boolean`
- Default: `true`
Enable to move the image.
### zoomable
- Type: `Boolean`
- Default: `true`
Enable to zoom the image.
### rotatable
- Type: `Boolean`
- Default: `true`
Enable to rotate the image.
### scalable
- Type: `Boolean`
- Default: `true`
Enable to scale the image.
### transition
- Type: `Boolean`
- Default: `true`
Enable CSS3 Transition for some special elements.
### fullscreen
- Type: `Boolean`
- Default: `true`
Enable to request full screen when play.
> Requires the browser supports [Full Screen API](http://caniuse.com/fullscreen).
### keyboard
- Type: `Boolean`
- Default: `true`
Enable keyboard support.
### interval
- Type: `Number`
- Default: `5000`
Define interval of each image when playing.
### minWidth
- Type: `Number`
- Default: 200
Define the minimum width of the viewer.
> Only available in inline mode (set the `inline` option to `true`).
### minHeight
- Type: `Number`
- Default: 100
Define the minimum height of the viewer.
> Only available in inline mode (set the `inline` option to `true`).
### zoomRatio
- Type: `Number`
- Default: `0.1`
Define the ratio when zoom the image by wheeling mouse.
### minZoomRatio
- Type: `Number`
- Default: `0.01`
Define the min ratio of the image when zoom out.
### maxZoomRatio
- Type: `Number`
- Default: `100`
Define the max ratio of the image when zoom in.
### zIndex
- Type: `Number`
- Default: `2015`
Define the CSS `z-index` value of viewer in modal mode.
### zIndexInline
- Type: `Number`
- Default: `0`
Define the CSS `z-index` value of viewer in inline mode.
### url
- Type: `String` or `Function`
- Default: `'src'`
Define where to get the original image URL for viewing.
> If it is a string, it should be one of the attributes of each image element.
> If it is a function, it will be called on each image and should return a valid image URL.
### ready
- Type: `Function`
- Default: `null`
A shortcut of the "ready" event.
### show
- Type: `Function`
- Default: `null`
A shortcut of the "show" event.
### shown
- Type: `Function`
- Default: `null`
A shortcut of the "shown" event.
### hide
- Type: `Function`
- Default: `null`
A shortcut of the "hide" event.
### hidden
- Type: `Function`
- Default: `null`
A shortcut of the "hidden" event.
### view
- Type: `Function`
- Default: `null`
A shortcut of the "view" event.
### viewed
- Type: `Function`
- Default: `null`
A shortcut of the "viewed" event.
[⬆ back to top](#table-of-contents)
## Methods
As there are some **asynchronous** processes when start the viewer, you should call a method only when it is available, see the following **lifecycle**:
```js
$().viewer({
built: function () {
// 2 methods are available here: "show" and "destroy".
},
shown: function () {
// 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy".
},
viewed: function () {
// All methods are available here except "show".
$(this).viewer('rotate', 90).viewer('scale', -1, -1);
$image.viewer({
inline: true,
viewed: function() {
$image.viewer('zoomTo', 1);
}
}
```
});
### show()
// Get the Viewer.js instance after initialized
var viewer = $image.data('viewer');
Show the viewer.
> Only available in modal mode.
### hide()
hide the viewer.
> Only available in modal mode.
### view([index])
- **index** (optional):
- Type: `Number`
- Default: `0`
- The index of the image for viewing
View one of the images with image's index.
```js
$().viewer('view', 1); // View the second image
// View a list of images
$('#images').viewer();
```
### prev()
## Options
View the previous image.
See the available [options](https://github.com/fengyuanchen/viewerjs#options) of Viewer.js.
### next()
View the next image.
### move(offsetX[, offsetY])
- **offsetX**:
- Type: `Number`
- Moving size (px) in the horizontal direction
- **offsetY** (optional):
- Type: `Number`
- Moving size (px) in the vertical direction.
- If not present, its default value is `offsetX`
Move the image with relative offsets.
```js
$().viewer('move', 1);
$().viewer('move', -1, 0); // Move left
$().viewer('move', 1, 0); // Move right
$().viewer('move', 0, -1); // Move up
$().viewer('move', 0, 1); // Move down
$().viewer(options);
```
### moveTo(x[, y])
## Methods
- **x**:
- Type: `Number`
- The `left` value of the image
See the available [methods](https://github.com/fengyuanchen/viewerjs#methods) of Viewer.js.
- **y** (optional):
- Type: `Number`
- The `top` value of the image
- If not present, its default value is `x`.
Move the image to an absolute point.
### zoom(ratio[, hasTooltip])
- **ratio**:
- Type: `Number`
- Zoom in: requires a positive number (ratio > 0)
- Zoom out: requires a negative number (ratio < 0)
- **hasTooltip** (optional):
- Type: `Boolean`
- Default: `false`
- Show tooltip
Zoom the image with a relative ratio
```js
$().viewer('zoom', 0.1);
$().viewer('zoom', -0.1);
$().viewer('method', argument1, , argument2, ..., argumentN);
```
### zoomTo(ratio[, hasTooltip])
## Events
- **ratio**:
- Type: `Number`
- Requires a positive number (ratio > 0)
See the available [events](https://github.com/fengyuanchen/viewerjs#events) of Viewer.js.
- **hasTooltip** (optional):
- Type: `Boolean`
- Default: `false`
- Show tooltip
Zoom the image to an absolute ratio.
```js
$().viewer('zoomTo', 0); // Zoom to zero size (0%)
$().viewer('zoomTo', 1); // Zoom to natural size (100%)
$().on('event', handler);
```
### rotate(degree)
- **degree**:
- Type: `Number`
- Rotate right: requires a positive number (degree > 0)
- Rotate left: requires a negative number (degree < 0)
Rotate the image with a relative degree.
> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
```js
$().viewer('rotate', 90);
$().viewer('rotate', -90);
```
### rotateTo(degree)
- **degree**:
- Type: `Number`
Rotate the image to an absolute degree.
> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
```js
$().viewer('rotateTo', 0); // Reset to zero degree
$().viewer('rotateTo', 360); // Rotate a full round
```
### scale(scaleX[, scaleY])
- **scaleX**:
- Type: `Number`
- Default: `1`
- The scaling factor to apply on the abscissa of the image
- When equal to `1` it does nothing.
- **scaleY** (optional):
- Type: `Number`
- The scaling factor to apply on the ordinate of the image
- If not present, its default value is `scaleX`.
Scale the image.
> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
```js
$().viewer('scale', -1); // Flip both horizontal and vertical
$().viewer('scale', -1, 1); // Flip horizontal
$().viewer('scale', 1, -1); // Flip vertical
```
### scaleX(scaleX)
- **scaleX**:
- Type: `Number`
- Default: `1`
- The scaling factor to apply on the abscissa of the image
- When equal to `1` it does nothing
Scale the abscissa of the image.
> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
```js
$().viewer('scaleX', -1); // Flip horizontal
```
### scaleY(scaleY)
- **scaleY**:
- Type: `Number`
- Default: `1`
- The scaling factor to apply on the ordinate of the image
- When equal to `1` it does nothing
Scale the ordinate of the image.
> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
```js
$().viewer('scaleY', -1); // Flip vertical
```
### play()
Play the images.
### stop()
Stop play.
### full()
Enter modal mode.
> Only available in inline mode.
### exit()
Exit modal mode.
> Only available in inline mode.
### tooltip()
Show the current ratio of the image with percentage.
> Requires the `tooltip` option set to `true`.
### toggle()
Toggle the image size between its natural size and initial size.
### reset()
Reset the image to its initial state.
### update()
Update the viewer when images changed.
> If you load images dynamically, you can use this method to add the new images to the viewer instance.
### destroy()
Destroy the viewer and remove the instance.
[⬆ back to top](#table-of-contents)
## Events
### ready
This event fires when a viewer instance is ready for viewing.
> In modal mode, this event will not be triggered until you click on one of the images.
### show
This event fires when the viewer modal starts to show.
> Only available in modal mode.
### shown
This event fires when the viewer modal has shown.
> Only available in modal mode.
### hide
This event fires when the viewer modal starts to hide.
> Only available in modal mode.
### hidden
This event fires when the viewer modal has hidden.
> Only available in modal mode.
### view
This event fires when a viewer starts to show (view) an image.
### viewed
This event fires when a viewer has shown (viewed) an image.
[⬆ back to top](#table-of-contents)
## No conflict

@@ -659,17 +117,10 @@

## Contributing
## Browser support
Please read through our [contributing guidelines](CONTRIBUTING.md).
It is the same as the [browser support of Viewer.js](https://github.com/fengyuanchen/viewerjs#browser-support). As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/).
## Browser support
## Contributing
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 8+
Please read through our [contributing guidelines](.github/CONTRIBUTING.md).
As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/).
## Versioning

@@ -681,4 +132,2 @@

[MIT](http://opensource.org/licenses/MIT) © [Fengyuan Chen](http://chenfengyuan.com)
[⬆ back to top](#table-of-contents)
[MIT](http://opensource.org/licenses/MIT) © [Chen Fengyuan](http://chenfengyuan.com)
dist/viewer.common.js.map
dist/viewer.esm.js.map
dist/viewer.js.map
dist/viewer.min.css.map
src/css/viewer.css
src/images/icons.png
src/images/icons.psd
src/js/constants.js
src/js/defaults.js
src/js/events.js
src/js/handlers.js
src/js/index.js
src/js/methods.js
src/js/others.js
src/js/render.js
src/js/template.js
src/js/utilities.js
src/js/viewer.js
dist/viewer.common.js

Sorry, the diff of this file is too big to display

dist/viewer.css

Sorry, the diff of this file is not supported yet

dist/viewer.esm.js

Sorry, the diff of this file is too big to display

dist/viewer.js

Sorry, the diff of this file is too big to display

dist/viewer.min.css

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc