/*! * viewer v0.1.0 * https://github.com/fengyuanchen/viewer * * copyright (c) 2015 fengyuan chen * released under the mit license * * date: 2015-09-02t09:08:17.666z */ !function(i){"function"==typeof define&&define.amd?define("viewer",["jquery"],i):i("object"==typeof exports?require("jquery"):jquery)}(function(i){"use strict";function t(i){return"string"==typeof i}function e(i){return"number"==typeof i&&!isnan(i)}function s(i){return"undefined"==typeof i}function n(i,t){var s=[];return e(t)&&s.push(t),s.slice.apply(i,s)}function a(i,t){var e=n(arguments,2);return function(){return i.apply(t,e.concat(n(arguments)))}}function o(i){var t=[],s=i.rotate,n=i.scalex,a=i.scaley;return e(s)&&t.push("rotate("+s+"deg)"),e(n)&&e(a)&&t.push("scale("+n+","+a+")"),t.length?t.join(" "):"none"}function h(i){return t(i)?i.replace(/^.*\//,"").replace(/[\?&#].*$/,""):""}function r(i,t){var e;return i.naturalwidth?t(i.naturalwidth,i.naturalheight):(e=document.createelement("img"),e.onload=function(){t(this.width,this.height)},void(e.src=i.src))}function l(t,e){this.$element=i(t),this.options=i.extend({},l.defaults,i.isplainobject(e)&&e),this.isimg=!1,this.isbuilt=!1,this.isshown=!1,this.isviewed=!1,this.isfulled=!1,this.isplayed=!1,this.playing=!1,this.fading=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.index=0,this.length=0,this.init()}var d=i(window),c=i(document),u="viewer",m=document.createelement(u),v="viewer-toggle",f="viewer-fixed",g="viewer-open",w="viewer-show",p="viewer-hide",b="viewer-fade",y="viewer-in",x="viewer-move",$="viewer-active",c="viewer-invisible",z="viewer-transition",i="viewer-fullscreen",f="viewer-fullscreen-exit",k="viewer-close",y="img",p="mousedown touchstart pointerdown mspointerdown",s="mousemove touchmove pointermove mspointermove",x="mouseup touchend touchcancel pointerup pointercancel mspointerup mspointercancel",t="wheel mousewheel dommousescroll",d="transitionend",e="load."+u,l="keydown."+u,v="click."+u,r="resize."+u,q="build."+u,m="built."+u,w="show."+u,_="shown."+u,j="hide."+u,a="hidden."+u,h="view."+u,b="viewed."+u,u="undefined"!=typeof m.style.transition,n=math.round,o=math.sqrt,z=math.abs,k=math.min,q=math.max,g=parsefloat,j={};i.extend(j,{init:function(){var t=this.options,e=this.$element,s=e.is(y),n=s?e:e.find(y),a=n.length,o=i.proxy(this.ready,this);a&&(i.isfunction(t.build)&&e.one(q,t.build),this.trigger(q).isdefaultprevented()||(u||(t.transition=!1),this.isimg=s,this.length=a,this.count=0,this.$images=n,this.$body=i("body"),t.inline?(e.one(m,i.proxy(function(){this.view()},this)),n.each(function(){this.complete?o():i(this).one(e,o)})):(n.addclass(v),e.on(v,i.proxy(this.start,this)))))},ready:function(){this.count++,this.count===this.length&&this.build()}}),i.extend(j,{build:function(){var t,e,s,n,a=this.options,o=this.$element;this.isbuilt||(t&&t.length||(t=o.parent()),this.$parent=t,this.$viewer=e=i(l.template),this.$canvas=e.find(".viewer-canvas"),this.$footer=e.find(".viewer-footer"),this.$title=e.find(".viewer-title").toggleclass(p,!a.title),this.$toolbar=n=e.find(".viewer-toolbar").toggleclass(p,!a.toolbar),this.$navbar=e.find(".viewer-navbar").toggleclass(p,!a.navbar),this.$button=s=e.find(".viewer-button").toggleclass(p,!a.button),this.$tooltip=e.find(".viewer-tooltip"),this.$player=e.find(".viewer-player"),this.$list=e.find(".viewer-list"),n.find("li[class*=zoom]").toggleclass(c,!a.zoomable),n.find("li[class*=flip]").toggleclass(c,!a.scalable),a.rotatable||n.find("li[class*=rotate]").addclass(c).appendto(n),a.inline?(s.addclass(i),e.css("z-index",a.zindexinline),"static"===t.css("position")&&t.css("position","relative")):(s.addclass(k),e.css("z-index",a.zindex).addclass([f,b,p].join(" "))),o.after(e),a.inline&&(this.render(),this.bind(),this.isshown=!0),this.isbuilt=!0,i.isfunction(a.built)&&o.one(m,a.built),this.trigger(m))},unbuild:function(){var i=this.options,t=this.$element;this.isbuilt&&(i.inline&&!i.container&&t.removeclass(p),this.$viewer.remove())}}),i.extend(j,{bind:function(){this.$viewer.on(v,i.proxy(this.click,this)).on(t,i.proxy(this.wheel,this)),this.$canvas.on(p,i.proxy(this.mousedown,this)),c.on(s,this._mousemove=a(this.mousemove,this)).on(x,this._mouseup=a(this.mouseup,this)).on(l,this._keydown=a(this.keydown,this)),d.on(r,this._resize=a(this.resize,this))},unbind:function(){this.$viewer.off(v,this.click).off(t,this.wheel),this.$canvas.off(p,this.mousedown),c.off(s,this._mousemove).off(x,this._mouseup).off(l,this._keydown),d.off(r,this._resize)}}),i.extend(j,{render:function(){this.initcontainer(),this.initviewer(),this.initlist(),this.renderviewer()},initcontainer:function(){this.container={width:d.innerwidth(),height:d.innerheight()}},initviewer:function(){var t,e=this.options,s=this.$parent;e.inline&&(this.parent=t={width:q(s.width(),e.minwidth),height:q(s.height(),e.minheight)}),(this.isfulled||!t)&&(t=this.container),this.viewer=i.extend({},t)},renderviewer:function(){this.options.inline&&!this.isfulled&&this.$viewer.css(this.viewer)},initlist:function(){var e=this.options,s=this.$element,n=this.$list,a=[];this.$images.each(function(s){var n=this.src,o=this.alt||h(n),r=e.url;n&&(t(r)?r=this.getattribute(r):i.isfunction(r)&&(r=r.call(this,this)),a.push('
  • '+o+'
  • '))}),n.html(a.join("")).find(y).one(e,{filled:!0},i.proxy(this.loadimage,this)),this.$items=n.children(),e.transition&&s.one(b,function(){n.addclass(z)})},renderlist:function(i){var t=i||this.index,e=this.$items.eq(t).width(),s=e+1;this.$list.css({width:s*this.length,marginleft:(this.viewer.width-e)/2-s*t})},resetlist:function(){this.$list.empty().removeclass(z).css("margin-left",0)},initimage:function(t){var e=this.options,s=this.$image,n=this.viewer,a=this.$footer.height(),o=n.width,h=q(n.height-a,a),l=this.image||{};r(s[0],i.proxy(function(s,n){var a,r,d=s/n,c=o,u=h;h*d>o?u=o/d:c=h*d,c=k(.9*c,s),u=k(.9*u,n),r={naturalwidth:s,naturalheight:n,aspectratio:d,ratio:c/s,width:c,height:u,left:(o-c)/2,top:(h-u)/2},a=i.extend({},r),e.rotatable&&(r.rotate=l.rotate||0,a.rotate=0),e.scalable&&(r.scalex=l.scalex||1,r.scaley=l.scaley||1,a.scalex=1,a.scaley=1),this.image=r,this.initialimage=a,i.isfunction(t)&&t()},this))},renderimage:function(t){var e=this.image,s=this.$image;s.css({width:e.width,height:e.height,marginleft:e.left,margintop:e.top,transform:o(e)}),i.isfunction(t)&&(this.options.transition?s.one(d,t):t())},resetimage:function(){this.$image.remove(),this.$image=null}}),i.extend(j,{start:function(t){var e=t.target;i(e).hasclass(v)&&(this.target=e,this.show())},click:function(t){var e=i(t.target),s=e.data("action"),n=this.image;switch(s){case"mix":this.isplayed?this.stop():this.options.inline?this.isfulled?this.exit():this.full():this.hide();break;case"view":this.view(e.data("index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);break;case"one-to-one":1===this.image.ratio?this.zoomto(this.initialimage.ratio):this.zoomto(1);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.scale(-n.scalex||-1,n.scaley||1);break;case"flip-vertical":this.scale(n.scalex||1,-n.scaley||-1);break;default:this.isplayed&&this.stop()}},load:function(){this.initimage(i.proxy(function(){this.renderimage(i.proxy(function(){this.isviewed=!0,this.trigger(b)},this))},this))},loadimage:function(t){var e=t.target,s=i(e),n=s.parent(),a=n.width(),o=n.height(),h=t.data&&t.data.filled;r(e,i.proxy(function(i,t){var e=i/t,n=a,r=o;o*e>a?h?n=o*e:r=a/e:h?r=a/e:n=o*e,s.css({width:n,height:r,marginleft:(a-n)/2,margintop:(o-r)/2})},this))},resize:function(){this.initcontainer(),this.initviewer(),this.renderviewer(),this.renderlist(),this.initimage(i.proxy(function(){this.renderimage()},this)),this.isplayed&&this.$player.find(y).one(e,i.proxy(this.loadimage,this)).trigger(e)},wheel:function(i){var t=i.originalevent,e=g(this.options.zoomratio)||.1,s=1;this.isviewed&&(i.preventdefault(),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*e,!0))},keydown:function(i){var t=this.options,e=i.which;if(this.isfulled&&t.keyboard)switch(e){case 27:this.isplayed?this.stop():t.inline?this.isfulled&&this.exit():this.hide();break;case 37:this.prev();break;case 38:this.zoom(t.zoomratio,!0);break;case 39:this.next();break;case 40:this.zoom(-t.zoomratio,!0);break;case 48:case 49:(i.ctrlkey||i.shiftkey)&&(i.preventdefault(),1===this.image.ratio?this.zoomto(this.initialimage.ratio):this.zoomto(1))}},mousedown:function(i){var t,e=this.options,s=i.originalevent,n=s&&s.touches,a=i,o=e.movable?"move":!1;if(this.isviewed){if(n){if(t=n.length,t>1){if(!e.zoomable||2!==t)return;a=n[1],this.startx2=a.pagex,this.starty2=a.pagey,o="zoom"}else this.isswitchable()&&(o="switch");a=n[0]}o&&(i.preventdefault(),"move"===o&&e.transition&&this.$image.removeclass(z),this.action=o,this.startx=a.pagex||s&&s.pagex,this.starty=a.pagey||s&&s.pagey)}},mousemove:function(i){var t,e=this.options,s=i.originalevent,n=s&&s.touches,a=i;if(this.isviewed){if(n){if(t=n.length,t>1){if(!e.zoomable||2!==t)return;a=n[1],this.endx2=a.pagex,this.endy2=a.pagey}a=n[0]}this.action&&(i.preventdefault(),this.endx=a.pagex||s&&s.pagex,this.endy=a.pagey||s&&s.pagey,this.change())}},mouseup:function(i){var t=this.action;t&&(i.preventdefault(),"move"===t&&this.options.transition&&this.$image.addclass(z),this.action=!1)}}),i.extend(j,{show:function(){var t,e=this.options;e.inline||this.transitioning||(this.isbuilt||this.build(),i.isfunction(e.show)&&this.$element.one(w,e.show),this.trigger(w).isdefaultprevented()||(this.$body.addclass(g),t=this.$viewer.removeclass(p),this.$element.one(_,i.proxy(function(){this.view((this.target?this.$images.index(this.target):0)||this.index),this.target=!1},this)),e.transition?(this.transitioning=!0,t.addclass(z).get(0).offsetwidth,t.one(d,i.proxy(this.shown,this)).addclass(y)):(t.addclass(y),this.shown())))},hide:function(){var t=this.options,e=this.$viewer;t.inline||this.transitioning||!this.isshown||(i.isfunction(t.hide)&&this.$element.one(j,t.hide),this.trigger(j).isdefaultprevented()||(this.isviewed&&t.transition?(this.transitioning=!0,this.$image.one(d,i.proxy(function(){e.one(d,i.proxy(this.hidden,this)).removeclass(y)},this)),this.zoomto(0,!1,!0)):(e.removeclass(y),this.hidden())))},view:function(t){var e,s,n,a,o,h=this.options,r=this.viewer,l=this.$title;t=number(t)||0,!this.isshown||this.isplayed||0>t||t>=this.length||this.isviewed&&t===this.index||this.trigger(h).isdefaultprevented()||(s=this.$items.eq(t),n=s.find(y),a=n.data("originalurl"),o=n.attr("alt"),this.$image=e=i(''+o+''),e.toggleclass(z,h.transition).toggleclass(x,h.movable).css({width:0,height:0,marginleft:r.width/2,margintop:r.height/2}),this.$items.eq(this.index).removeclass($),s.addclass($),this.isviewed=!1,this.index=t,this.image=null,e.one(e,i.proxy(this.load,this)),this.$canvas.html(e),l.empty(),this.renderlist(),this.$element.one(b,i.proxy(function(){var i=this.image,t=i.naturalwidth,e=i.naturalheight;l.html(o+" ("+t+" × "+e+")")},this)))},prev:function(){this.view(q(this.index-1,0))},next:function(){this.view(k(this.index+1,this.length-1))},move:function(i,t){var n=this.image;s(t)&&(t=i),i=g(i),t=g(t),this.isshown&&!this.isplayed&&this.options.movable&&(n.left+=e(i)?i:0,n.top+=e(t)?t:0,this.renderimage())},zoom:function(i,t){var s,n,a=this.options,o=q(.01,a.minzoomratio),h=k(100,a.maxzoomratio),r=this.image;i=g(i),e(i)&&this.isshown&&!this.isplayed&&a.zoomable&&(i=0>i?1/(1-i):1+i,s=r.width*i,n=r.height*i,i=s/r.naturalwidth,i=k(q(i,o),h),i>.95&&1.05>i&&(i=1,s=r.naturalwidth,n=r.naturalheight),r.left-=(s-r.width)/2,r.top-=(n-r.height)/2,r.width=s,r.height=n,r.ratio=i,this.renderimage(),t&&this.tooltip())},zoomto:function(i,t,s){var n,a,o=this.image;i=q(i,0),e(i)&&this.isshown&&!this.isplayed&&(s||this.options.zoomable)&&(n=o.naturalwidth*i,a=o.naturalheight*i,o.left-=(n-o.width)/2,o.top-=(a-o.height)/2,o.width=n,o.height=a,o.ratio=i,this.renderimage(),t&&this.tooltip())},rotate:function(i){var t=this.image;i=g(i),e(i)&&this.isshown&&!this.isplayed&&this.options.rotatable&&(t.rotate=(t.rotate||0)+i,this.renderimage())},rotateto:function(i){var t=this.image;i=g(i),e(i)&&this.isshown&&!this.isplayed&&this.options.rotatable&&(t.rotate=i,this.renderimage())},scale:function(i,t){var n=this.image;s(t)&&(t=i),i=g(i),t=g(t),this.isshown&&!this.isplayed&&this.options.scalable&&(n.scalex=e(i)?i:1,n.scaley=e(t)?t:1,this.renderimage())},scalex:function(i){this.scale(i,this.image.scaley)},scaley:function(i){this.scale(this.image.scalex,i)},play:function(){var t,s=this.options,n=this.$player,a=i.proxy(this.loadimage,this),o=[],h=0,r=0;this.isshown&&!this.isplayed&&(s.fullscreen&&this.fullscreen(),this.isplayed=!0,n.addclass(w),this.$items.each(function(t){var e=i(this),l=e.find(y),d=i(''+l.attr(');h++,d.addclass(b).toggleclass(z,s.transition),e.hasclass($)&&(d.addclass(y),r=t),o.push(d),d.one(e,{filled:!1},a),n.append(d)}),e(s.interval)&&s.interval>0&&(t=i.proxy(function(){this.playing=settimeout(function(){o[r].removeclass(y),r++,r=h>r?r:0,o[r].addclass(y),t()},s.interval)},this),h>1&&t()))},stop:function(){this.isplayed&&(this.isplayed=!1,cleartimeout(this.playing),this.$player.removeclass(w).empty())},full:function(){var t=this.options,e=this.$image,s=this.$list;this.isshown&&!this.isplayed&&!this.isfulled&&t.inline&&(this.isfulled=!0,this.$body.addclass(g),this.$button.addclass(f),t.transition&&(e.removeclass(z),s.removeclass(z)),this.$viewer.addclass(f).removeattr("style").css("z-index",t.zindex),this.initcontainer(),this.viewer=i.extend({},this.container),this.renderlist(),this.initimage(i.proxy(function(){this.renderimage(function(){t.transition&&settimeout(function(){e.addclass(z),s.addclass(z)},0)})},this)))},exit:function(){var t=this.options,e=this.$image,s=this.$list;this.isfulled&&(this.isfulled=!1,this.$body.removeclass(g),this.$button.removeclass(f),t.transition&&(e.removeclass(z),s.removeclass(z)),this.$viewer.removeclass(f).css("z-index",t.zindexinline),this.viewer=i.extend({},this.parent),this.renderviewer(),this.renderlist(),this.initimage(i.proxy(function(){this.renderimage(function(){t.transition&&settimeout(function(){e.addclass(z),s.addclass(z)},0)})},this)))},tooltip:function(){var t=this.options,e=this.$tooltip,s=this.image,n=[w,b,z].join(" ");this.isshown&&!this.isplayed&&t.tooltip&&(e.text(n(100*s.ratio)+"%"),this.fading?cleartimeout(this.fading):t.transition?(e.addclass(n).get(0).offsetwidth,e.addclass(y)):e.addclass(w),this.fading=settimeout(i.proxy(function(){t.transition?e.one(d,function(){e.removeclass(n)}).removeclass(y):e.removeclass(w),this.fading=!1},this),1e3))},toggle:function(){1===this.image.ratio?this.zoomto(this.initialimage.ratio):this.zoomto(1)},reset:function(){this.isshown&&!this.isplayed&&(this.image=i.extend({},this.initialimage),this.renderimage())},destroy:function(){var i=this.$element;this.options.inline?this.unbind():(this.isshown&&this.unbind(),this.$images.removeclass(v),i.off(v,this.start)),this.unbuild(),i.removedata(u)}}),i.extend(j,{trigger:function(t,e){var s=i.event(t,e);return this.$element.trigger(s),s},shown:function(){var t=this.options;this.transitioning=!1,this.isfulled=!0,this.isshown=!0,this.isvisible=!0,this.render(),this.bind(),i.isfunction(t.shown)&&this.$element.one(_,t.shown),this.trigger(_)},hidden:function(){var t=this.options;this.transitioning=!1,this.isviewed=!1,this.isfulled=!1,this.isshown=!1,this.isvisible=!1,this.unbind(),this.$body.removeclass(g),this.$viewer.addclass(p),this.resetlist(),this.resetimage(),i.isfunction(t.hidden)&&this.$element.one(a,t.hidden),this.trigger(a)},fullscreen:function(){var i=document.documentelement;!this.isfulled||document.fullscreenelement||document.mozfullscreenelement||document.webkitfullscreenelement||document.msfullscreenelement||(i.requestfullscreen?i.requestfullscreen():i.msrequestfullscreen?i.msrequestfullscreen():i.mozrequestfullscreen?i.mozrequestfullscreen():i.webkitrequestfullscreen&&i.webkitrequestfullscreen(element.allow_keyboard_input))},change:function(){var i=this.endx-this.startx,t=this.endy-this.starty;switch(this.action){case"move":this.move(i,t);break;case"zoom":this.zoom(function(i,t,e,s){var n=o(i*i+t*t),a=o(e*e+s*s);return(a-n)/n}(z(this.startx-this.startx2),z(this.starty-this.starty2),z(this.endx-this.endx2),z(this.endy-this.endy2))),this.startx2=this.endx2,this.starty2=this.endy2;break;case"switch":this.action="switched",i>1?this.prev():-1>i&&this.next()}this.startx=this.endx,this.starty=this.endy},isswitchable:function(){var i=this.image,t=this.viewer;return i.left>=0&&i.top>=0&&i.width<=t.width&&i.height<=t.height}}),i.extend(l.prototype,j),l.defaults={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",build:null,built:null,show:null,shown:null,hide:null,hidden:null},l.template='
    ',l.other=i.fn.viewer,i.fn.viewer=function(e){var a,o=n(arguments,1);return this.each(function(){var s,n=i(this),h=n.data(u);if(!h){if(/destroy|hide|exit|stop|reset/.test(e))return;n.data(u,h=new l(this,e))}t(e)&&i.isfunction(s=h[e])&&(a=s.apply(h,o))}),s(a)?this:a},i.fn.viewer.constructor=l,i.fn.viewer.setdefaults=l.setdefaults,i.fn.viewer.noconflict=function(){return i.fn.viewer=l.other,this}});