sliderjs
Version:
lightweight slideshow engine using CSS, Canvas and WebGL Transitions
94 lines (90 loc) • 37.7 kB
JavaScript
/*!
Copyright 2010-2012 Gaetan Renaudeau
http://sliderjs.org/
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
window.sliderjs={};window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
(function(a){var b=/-([a-z]|[0-9])/ig,e=/^-ms-/,f=/[, ]+/,d=function(a,b){return(b+"").toUpperCase()},c=a.util={version:"native",html:function(a,b){a&&(a.innerHTML=b)},append:function(a,b){var c=document.createElement("div");c.innerHTML=b;return a.appendChild(c.firstChild)},find:function(a,b){return a.querySelectorAll(b)},addClass:function(a,b){a.classList.add(b)},removeClass:function(a,b){a.classList.remove(b)},camelCase:function(a){return a.replace(e,"ms-").replace(b,d)},css:function(a,b,d){b=c.camelCase(b);
if(1==arguments.length)return a.style[b];a.style[b]=d},show:function(a){a.style.display="block"},hide:function(a){a.style.display="none"},width:function(a,b){if(1==arguments.length)return a.style.width;a.style.width=b},height:function(a,b){if(1==arguments.length)return a.style.height;a.style.height=b},on:function(a,b,c){a.addEventListener(b,c)},off:function(a,b,c){a.removeEventListener(b,c)},indexOf:function(a,b){if(a.indexOf)return a.indexOf(b);for(var c=0;c<a.length;c++)if(a[c]==b)return c;return-1},
makeEvent:function(a){return{pub:function(b,c,d,e){e=-1;for(d=[].concat(a[b]);d[++e];)d[e](c)},sub:function(b,c){(a[b]||(a[b]=[])).push(c)},del:function(b,d){if(a[b]){var e=c.indexOf(a[b],d);0<=e&&a[b].splice(e,1)}}}},each:function(a,b){if(a.forEach)a.forEach(b);else for(var c=0;c<a.length;++c)b(a[c],c,a)},map:function(a,b){var d=[];c.each(a,function(a,c,e){d[c]=b(a,c,e)});return d},extend:function(a){for(var b=1;b<arguments.length;++b){var c=arguments[b],d;for(d in c)void 0!==c[d]&&(a[d]=c[d])}return a},
dif:function(a,b){for(var d=[],e=0;e<a.length;++e)0>c.indexOf(b,a[e])&&d.push(a[e]);return d},nop:function(){},now:function(){return+new Date},uuid:function(a){return function(){return++a}}(0),tmpl:function(a){return new Function("obj","var p=[];with(obj||{}){p.push('"+a.replace(/[\r\t\n]/g," ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g,"$1\r").replace(/\t=(.*?)%>/g,"',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'")+"');}return p.join('');")},getList:function(a){return"string"==
typeof a?a.split(f):a instanceof Array?a:[]},createRegistrable:function(){var a=[],b={};return function(c,d){switch(arguments.length){case 0:return a;case 1:return b[c];case 2:a.push(c),b[c]=d}}},parseTime:function(a){var b=typeof a;if("number"==b)return a;if("string"==b){b=a.indexOf("ms");if(0<b)return parseFloat(a.substring(0,b));b=a.indexOf("s");if(0<b)return 1E3*parseFloat(a.substring(0,b))}return NaN}}})(window.sliderjs);
(function(a){a.Slider=function(a,f){return new b(a,f)};var b=function(b,f){var d=this,c=a.util,h,g,l={};if(!b)throw"container node required in first argument";f||(f={});g=c.makeEvent({});d.trigger=function(a,b){g.pub(a,b);return d};d.on=function(a,b){g.sub(a,b);return d};d.off=function(a,b){g.del(a,b);return d};d.once=function(a,b){var c=function(){d.off(a,c).off(a,b)};return d.on(a,b).on(a,c)};d.T=h=new SelectorTemplating(b,function(){d.trigger("templated",b)});d.opt=function(a,b){var c=f[a];if(1==
arguments.length)return c;l[a]&&(b=l[a].m.accept(b,c));f[a]=b;d.trigger(a+"Changed",{key:a,old:c,value:b});return d};d.module=function(a){return(a=l[a])&&a.m};d.modules=function(){var b=function(a){var b=[];for(a in l)b.push(a);return b};b.start=function(b){c.each(c.getList(b),function(b){var e=a.modules(b),g;if(!e)throw"module "+b+" not found.";l[b]&&this.stop(b);g=c.extend({init:c.nop,change:c.nop,destroy:c.nop,accept:function(a){return a},fn:function(a){var c=[b];arguments.length&&c.push(a);return d.opt.apply(d,
c)}},e(new a.Sandbox(d,b),c));d[b]=g.fn;f[b]=g.accept(b in f?f[b]:g.def);d.on(b+"Changed",e=function(a){g.change(a.value,a.old)});g.init();l[b]={m:g,c:e};d.trigger(b+"Started")});h.compile();return d};b.stop=function(a){c.each(c.getList(a),function(a){var b=l[a];b&&(b.m.destroy(),d.off(a+"Changed",b.c),delete f[a],delete d[a],delete l[a],d.trigger(a+"Stopped"))});h.compile();return d};return b}();var m=a.modules(),p=f.modules?c.getList(f.modules):m,q;for(q in f)0>=c.indexOf(p,q)&&0<=c.indexOf(m,q)&&
p.push(q);p=c.dif(p,c.getList(f.exceptModules));d.modules.start(p)};a.modules=sliderjs.util.createRegistrable();a.Sandbox=function(a,b){var d=this;d.template=a.T;d.on=function(){a.on.apply(a,arguments);return d};d.once=function(){a.once.apply(a,arguments);return d};d.off=function(){a.off.apply(a,arguments);return d};d.trigger=function(){a.trigger.apply(a,arguments);return d};d.opt=function(b,f){if(1==arguments.length)return a.opt(b);a.opt(b,f);return d};d.value=function(a){var e=[b];arguments.length&&
e.push(a);return d.opt.apply(d,e)};d.ask=function(b,d){var g=a.module(b);if(g)return g[d]}}})(window.sliderjs);
(function(a){this.SelectorTemplating=function(b,e){var f=this,d=[];f.add=function(a,b,g,e){d.push({tmpl:b,cb:g,selector:a,priority:e||0});return f};f.remove=function(b){b=a.indexOf(a.map(d,function(a){return a.tmpl}),b);0<=b&&d.splice(b,1);return f};f.refresh=function(a){f.compile()};f.compile=function(){var c=0,h,g,l,m;f.destroy();h=[].concat(d);for(h.sort(function(a,b){return a.priority!=b.priority?b.priority-a.priority:a.selector<b.selector?-1:1});h.length;)if(g=h[c],l=!g.selector?[b]:a.find(b,
g.selector),l.length)m=!0,l=a.map(l,function(b,c){return a.append(b,g.tmpl(c))}),g.nodes=l,h.splice(c,1),c=0;else if(++c>=h.length){c=0;if(!m)break;m=!1}a.each(d,function(a){a.cb&&a.cb(a.nodes,b)});e&&e();return f};f.destroy=function(){a.html(b,"");a.each(d,function(a){a.nodes=[]});return f}}})(sliderjs.util);
sliderjs.modules("canvasTransition",function(a,b){function e(a){s&&(s.height=a.value,!x&&d())}function f(a){s&&(s.width=a.value,!x&&d())}function d(){var b=w[B?B.value:a.opt("slide")];b&&c(b)}function c(a){var b=s.width;v.drawImage(a,0,0,b,b*a.height/a.width)}function h(){v.clearRect(0,0,s.width,s.height)}function g(){this.sandbox=a;this.$=b;this.canvas=s;this.ctx=v;this.drawImage=c;this.clean=h}function l(b,c){if((s=b[0])&&s.getContext){var e=a.opt("width");s.width=e;!x&&d();e=a.opt("height");s.height=
e;!x&&d();v=s.getContext("2d");m();E=new g}}function m(){s&&("canvas"==t?(b.show(s),d()):b.hide(s))}function p(d,e,g){var f=b.now(),l=a.opt("duration")||0,m=g.render,p=a.opt("easing"),q=g.init&&g.init.call(E,d,e),G=w[d],n=w[e],v=g.commutative&&d>e,p=p&&p.get||function(a){return a};G&&n&&(v&&(d=n,n=G,G=d),x=!0,function L(d){var e=b.now();d!=A||e<f||(e=(e-f)/l,1>e?(requestAnimFrame(function(){L(d)},s),e=p(e),m.call(E,{from:G,to:n,progress:v?1-e:e,data:q},g.params)):(x=!1,h(),c(v?G:n),a.trigger("transitionEnd",
{mode:"canvas"})))}(A=b.uuid()))}function q(b){B=b;"canvas"==t&&v&&p(b.old,b.value,a.value())}function n(a){w=a.images;m()}function r(a){a!=t&&(t=a,m())}var t,s,v,w=[],A,x=!1,B;(function(){if(navigator&&navigator.userAgent){var a=navigator.userAgent.match(/Android ([0-9\.]+)/);if(a&&2.2>parseFloat(a[1]))return!1}a=document.createElement("canvas");return!(!a.getContext||!a.getContext("2d"))})();var E,D={commutative:!0,params:{}},C=b.tmpl('<canvas class="slides"></canvas>'),u={clippedTransition:function(a){return function(b,
c){var d=this.ctx;this.drawImage(b.from);d.save();d.beginPath();a.call(this,b,d,c);d.clip();this.drawImage(b.to);d.restore()}}};return{init:function(){a.template.add(".sliderjs div.slides",C,l);a.on("slideChanged",q).on("heightChanged",e).on("widthChanged",f).on("imagesLoaded",n).on("transitionMode",r);this.change(a.value())},destroy:function(){a.template.remove(C);a.off("slideChanged",q).off("heightChanged",e).off("widthChanged",f).off("imagesLoaded",n).off("transitionMode",r)},accept:function(a,
c){if(!a)return a;"string"==typeof a&&(a={name:a});var d=sliderjs.canvasTransitions(a.name);d||(d=a);if(!d.render){var e=d,g;a:{g=d;for(var f in u)if(g[f]){g=u[f](g[f]);break a}g=void 0}e.render=g}a=b.extend(D,a,d,a);if(!a.render)throw Error("no canvas transition was found.");return a},change:function(b){void 0!==b&&(m(),a.trigger("transitionMode","canvas"))}}});sliderjs.canvasTransitions=sliderjs.util.createRegistrable();
sliderjs.modules("cssTransition",function(a,b){function e(){var c=a.opt("duration")||0,d=a.opt("easing");d&&(d=d.bezier);t&&b.each(t,function(a){b.each(s,function(e){b.css(a,e+"transition-duration",c+"ms");d&&b.css(a,e+"transition-timing-function","cubic-bezier("+d+")")})})}function f(a,c){p&&(b.removeClass(p,n+"clear"),c&&b.removeClass(p,n+c),a&&b.addClass(p,n+a))}function d(a){e()}function c(a){e()}function h(b){b!=q&&("css"!=(q=b)&&f("clear",a.value()),l())}function g(c){b.on(c,v,function(b){var c=
b.target.className;-1!=c.indexOf("slide")&&(-1!=c.indexOf("current")&&"z-index"==b.propertyName)&&a.trigger("transitionEnd",{mode:"css"})})}function l(){e();"css"==q?b.each(r||[],b.show):b.each(r||[],b.hide)}function m(c){p=b.find(c,".sliderjs")[0];t=b.find(c,".slide");r=b.find(c,".slide img");f("css"==q?a.value():"clear");l();g(p)}var p,q,n="tr-",r,t,s=["-webkit-","-moz-","-ms-","-o-",""],v={webkit:"webkitTransitionEnd",opera:"oTransitionEnd",firefox:"transitionend"}[(navigator.userAgent||"").match(/.*(Chrome|Safari).*/)?
"webkit":(navigator.userAgent||"").match(/.*Firefox.*/)?"firefox":"Opera"===navigator.appName?"opera":"webkit"];return{accept:function(a){return a&&"object"==typeof a?a.name:a},init:function(){a.on("templated",m).on("durationChanged",d).on("easingChanged",c).on("transitionMode",h);this.change(a.value())},destroy:function(){a.off("templated",m).off("durationChanged",d).off("easingChanged",c).off("transitionMode",h)},change:function(b,c){void 0!==b&&(f(b,c),a.trigger("transitionMode","css"))}}});
sliderjs.cssTransitions=sliderjs.util.createRegistrable();sliderjs.modules("duration",function(a,b){return{def:1E3,accept:b.parseTime}});
(function(){function a(a,b,d,c){this.get=function(h){if(a==b&&d==c)return h;a:{for(var g=h,l=0;4>l;++l){var m=3*(1-3*d+3*a)*g*g+2*(3*d-6*a)*g+3*a;if(0==m){h=g;break a}g-=((((1-3*d+3*a)*g+(3*d-6*a))*g+3*a)*g-h)/m}h=g}return(((1-3*c+3*b)*h+(3*c-6*b))*h+3*b)*h}}var b={ease:[0.25,0.1,0.25,1],linear:[0,0,1,1],"ease-in":[0.42,0,1,1],"ease-out":[0,0,0.58,1],"ease-in-out":[0.42,0,0.58,1]};sliderjs.modules("easing",function(e,f){return{def:"ease",accept:function(d){if("function"==typeof d)return{get:d};"string"==
typeof d?d={bezier:b[d]}:d instanceof Array&&(d={bezier:d});if(d&&d.bezier&&!d.get){var c=d.bezier;d.get=(new a(c[0],c[1],c[2],c[3])).get}return d}}})})();
sliderjs.modules("fullscreen",function(a,b){function e(){if(document.cancelFullScreen)return document.cancelFullScreen();if(document.webkitCancelFullScreen)return document.webkitCancelFullScreen();if(document.mozCancelFullScreen)return document.mozCancelFullScreen()}function f(){return document.fullScreen||document.mozFullScreen||document.webkitIsFullScreen}function d(){var b=window.innerHeight;a.opt("width",window.innerWidth).opt("height",b)}function c(c){c?(q=a.opt("width"),n=a.opt("height"),b.addClass(r,
p),d(),b.off(window,"resize",d),b.on(window,"resize",d)):(q&&a.opt("width",q),n&&a.opt("height",n),b.removeClass(r,p),b.off(window,"resize",d))}function h(b){if(r){var d;d=t?f():a.opt();d!=b&&(t?b?(b=r,b.requestFullScreen?b.requestFullScreen():b.webkitRequestFullScreen?b.webkitRequestFullScreen():b.mozRequestFullScreen&&b.mozRequestFullScreen()):e():c(b))}}function g(c){r=b.find(c,".sliderjs")[0];h(a.value());b.on(r,"webkitfullscreenchange",l);b.on(r,"mozfullscreenchange",l);b.on(r,"fullscreenchange",
l)}function l(a){f()?c(!0):c(!1)}function m(a){13==a.keyCode&&c(!1)}var p="fullscreen",q,n,r,t=void 0!==f();return{def:!1,init:function(){a.on("templated",g);b.on(window,"keydown",m)},destroy:function(){a.off("templated",g);b.off(window,"keydown",m)},change:function(a){h(a)}}});
sliderjs.modules("fullscreenControl",function(a,b){function e(){var d=a.value();return d.tmpl(b.extend({},d,c))}function f(c,d){var e=c[0];if(e)b.on(e,"click",function(b){b.preventDefault();a.opt("fullscreen",!a.opt("fullscreen"))})}function d(b){27==b.keyCode&&a.opt("fullscreen")&&a.opt("fullscreen",!1)}var c={tmpl:b.tmpl('<a class="fullscreenButton icon" href="javascript:;"></a>')};return{init:function(){a.template.add(".sliderjs div.left",e,f,9);b.on(window,"keydown",d)},accept:function(a){return b.extend({},
c,a)},change:function(b,c){a.template.refresh(e)},destroy:function(){a.template.remove(e);b.off(window,"keydown",d)}}});
sliderjs.modules("glslTransition",function(a,b){function e(a){u.height=a;k&&n();!C&&x()}function f(a){u.width=a;k&&n();!C&&x()}function d(a){u&&e(a.value)}function c(a){u&&f(a.value)}function h(b){H=b;"glsl"==D&&k&&E(b.old,b.value,a.value())}function g(a){F=a.images;p()}function l(a){a!=D&&(D=a,p())}function m(c,d){if((u=c[0])&&u.getContext)b.on(u,"webglcontextlost",function(a){console.log("webglcontextlost");k=null;a.preventDefault()}),b.on(u,"webglcontextrestored",function(b){console.log("webglcontextrestored");
k=B(u);q(a.value())}),f(a.opt("width")),e(a.opt("height")),p(),(k=B(u))?q(a.value()):window.console&&console.log("Unable to get a WebGL context.")}function p(){u&&("glsl"==D?(b.show(u),x()):b.hide(u))}function q(a){a&&(y&&(k.deleteProgram(y),y=null,z={}),y=s([t("attribute vec2 position;attribute vec2 texCoord_in;uniform vec2 resolution;varying vec2 texCoord;void main() {vec2 zeroToOne = position / resolution;vec2 zeroToTwo = zeroToOne * 2.0;vec2 clipSpace = zeroToTwo - 1.0;gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);texCoord = texCoord_in;}",
k.VERTEX_SHADER),t(a.shader,k.FRAGMENT_SHADER)]),k.useProgram(y),r(a.params),a=k.createBuffer(),k.bindBuffer(k.ARRAY_BUFFER,a),k.bufferData(k.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),k.STATIC_DRAW),a=k.getAttribLocation(y,"texCoord_in"),k.enableVertexAttribArray(a),k.vertexAttribPointer(a,2,k.FLOAT,!1,0,0),a=k.createBuffer(),k.bindBuffer(k.ARRAY_BUFFER,a),a=k.getAttribLocation(y,"position"),k.enableVertexAttribArray(a),k.vertexAttribPointer(a,2,k.FLOAT,!1,0,0),n(),x())}function n(){var b=
u.width,c=u.height;k.viewport(0,0,b,c);var d=k.getUniformLocation(y,"resolution");k.uniform2f(d,b,c);(d=F[a.opt("slide")])&&(c=Math.floor(b*d.height/d.width));b=0+b;c=0+c;k.bufferData(k.ARRAY_BUFFER,new Float32Array([0,0,b,0,0,c,0,c,b,0,b,c]),k.STATIC_DRAW)}function r(a){for(var b in a){var c=a[b],d=k.getUniformLocation(y,b);if(c instanceof Array){if("number"==typeof c[0]){var e="uniform"+c.length+"f";k[e]&&k[e].apply(this,[d].concat(c))}}else"number"==typeof c&&k.uniform1f(d,c)}}function t(a,b){var c=
k.createShader(b);k.shaderSource(c,a);k.compileShader(c);if(!k.getShaderParameter(c,k.COMPILE_STATUS))throw lastError=k.getShaderInfoLog(c),c+"':"+lastError;return c}function s(a){var c=k.createProgram();b.each(a,function(a){k.attachShader(c,a)});k.linkProgram(c);if(!k.getProgramParameter(c,k.LINK_STATUS))throw"Linking error:"+k.getProgramInfoLog(c);return c}function v(a){var b=k.createTexture();k.bindTexture(k.TEXTURE_2D,b);k.texImage2D(k.TEXTURE_2D,0,k.RGBA,k.RGBA,k.UNSIGNED_BYTE,a);k.texParameteri(k.TEXTURE_2D,
k.TEXTURE_MAG_FILTER,k.LINEAR);k.texParameteri(k.TEXTURE_2D,k.TEXTURE_MIN_FILTER,k.LINEAR);k.texParameteri(k.TEXTURE_2D,k.TEXTURE_WRAP_S,k.CLAMP_TO_EDGE);k.texParameteri(k.TEXTURE_2D,k.TEXTURE_WRAP_T,k.CLAMP_TO_EDGE);k.bindTexture(k.TEXTURE_2D,null);return b}function w(a,b){if(!a||!b)return!1;var c=v(a),d=v(b);z.from||(z.from=k.getUniformLocation(y,"from"));k.activeTexture(k.TEXTURE0);k.bindTexture(k.TEXTURE_2D,c);k.uniform1i(z.from,0);z.to||(z.to=k.getUniformLocation(y,"to"));k.activeTexture(k.TEXTURE1);
k.bindTexture(k.TEXTURE_2D,d);k.uniform1i(z.to,1);n();return!0}function A(a){z.progress||(z.progress=k.getUniformLocation(y,"progress"));k.uniform1f(z.progress,a)}function x(){var b=F[H?H.value:a.opt("slide")];b&&k&&(A(0),w(b,b)&&k.drawArrays(k.TRIANGLES,0,6))}function B(a){if(a.getContext)for(var b=["webgl","experimental-webgl"],c=0;c<b.length;++c)try{var d=a.getContext(b[c]);if(d)return d}catch(e){}}function E(c,d,e){var g=b.uuid(),f=b.now(),h=a.opt("duration")||0,l=a.opt("easing"),m=e.commutative&&
c>d,l=l&&l.get||function(a){return a};if(w(F[m?d:c],F[m?c:d]))C=!0,function M(c){var d=b.now();c!=g||d<f||(d=(d-f)/h,1>d?(requestAnimFrame(function(){M(c)},u),d=l(d),A(m?1-d:d),k.drawArrays(k.TRIANGLES,0,6)):(C=!1,x(),a.trigger("transitionEnd",{mode:"glsl"})))}(g)}var D,C=!1,u,k,y,J=function(){var a=document.createElement("canvas");return!!B(a)}(),z={},H,F=[],K={commutative:!0,params:{}},I=b.tmpl('<canvas class="slides"></canvas>');return{init:function(){a.template.add(".sliderjs div.slides",I,m);
a.on("slideChanged",h).on("heightChanged",d).on("widthChanged",c).on("imagesLoaded",g).on("transitionMode",l);this.change(a.value())},destroy:function(){a.template.remove(I);a.off("slideChanged",h).off("heightChanged",d).off("widthChanged",c).off("imagesLoaded",g).off("transitionMode",l)},accept:function(a,c){if(!a)return a;"string"==typeof a&&(a={name:a});a=b.extend({},K,a,sliderjs.glslTransitions(a.name),a);if(!a.shader)throw Error("no shader was found.");return a},change:function(b){void 0!==b&&
(p(),k&&q(a.value()),a.trigger("transitionMode","glsl"))},supported:function(){return J}}});sliderjs.glslTransitions=sliderjs.util.createRegistrable();sliderjs.modules("height",function(a,b){return{def:430}});
sliderjs.modules("loader",function(a,b){function e(){var b=a.value();return b.tmpl(b)}function f(a){a=a.value;n&&b.height(n,a?a+"px":"")}function d(c,d){n=c[0];r=b.find(d,".sliderjs")[0];var e=a.opt("height");n&&b.height(n,e?e+"px":"");w&&h()}function c(){r&&b.removeClass(r,"loading");a.trigger("loaderLoaded");s=null}function h(){r&&b.addClass(r,"loading");a.trigger("loaderLoading")}function g(b){if(r)if(s&&s.sum==s.total)c();else{var d=a.value().onLoading;s&&d&&d(s,r);b.id!==v&&(h(),v=b.id)}}function l(a){a&&
(s=a.state);w&&g(a)}function m(a){a&&(s=a.state);w&&g(a)}function p(a){c()}function q(b){a:{switch(b){case "waitingFirst":case "waitingCurrent":case "waitingAll":w=!0;break a}w=!1}t="waitingFirst"==b?"firstSlideLoaded":"waitingCurrent"==b?"currentSlideLoaded":"waitingAll"==b?"imagesLoaded":null;a.off(t,p).once(t,p)}var n,r,t,s,v=-1,w=!0,A={tmpl:b.tmpl('<div class="loader"><p><span class="spinner"></span> <span class="percent"><%= percent %></span> %</p></div>'),percent:0,onLoading:function(a,c){b.html(b.find(c,
".percent")[0],""+Math.floor(100*a.sum/a.total))},mode:"waitingAll"};return{def:A,init:function(){a.template.add(".sliderjs",e,d,10);a.on("heightChanged",f).on("imagesLoading",l).on("imagesLoaded",m);var b=a.value();b.mode&&q(b.mode)},destroy:function(){a.template.remove(e);a.off("heightChanged",f).off("imagesLoading",l).off("imagesLoaded",m)},accept:function(a){"string"==typeof a&&(a={mode:a});return b.extend(A,a)},change:function(b,c){a.template.refresh(e);b.mode&&q(b.mode)}}});
sliderjs.modules("loop",function(a,b){function e(){h=b.now()}function f(){2E3<b.now()-h&&a.opt("slide","next");g=setTimeout(f,a.value())}function d(){g&&clearTimeout(g);g=null}var c=5E3,h=0,g;return{def:"start",init:function(){a.on("pagesClicked",e);this.change(a.value())},destroy:function(){d();a.off("pagesClicked",e)},accept:function(a,d){if("start"==a)return c;if("stop"==a)return 0;a=b.parseTime(a);return!isNaN(a)&&0<a?c=a:0},change:function(b,c){b?(h=0,d(),g=setTimeout(f,a.value())):d()}}});
sliderjs.modules("loopBar",function(a,b){function e(){var b=a.value();return b.tmpl(b)}function f(a,c){if(p=a[0])q=b.find(p,".loopBar-inner")[0],g()}function d(a){n=a.value;l=b.now();q&&h()}function c(a){l=b.now();q&&h()}function h(){var a=n?Math.max(0,Math.min(1,(b.now()-l)/n)):0;a!==m&&b.width(q,Math.round(1E4*(m=a))/100+"%")}function g(){q&&(requestAnimFrame(g,q),h())}var l=b.now(),m,p,q,n=a.opt("loop"),r={width:100,tmpl:b.tmpl('<span class="loopBar" style="width: <%= width %>px;"><span class="loopBar-inner"></span></span>')};
return{init:function(){a.template.add(".sliderjs .header",e,f,-6);a.on("loopChanged",d).on("slideChanged",c);g()},accept:function(a){return b.extend({},r,a)},change:function(b,c){a.template.refresh(e)},destroy:function(){a.template.remove(e);a.off("loopChanged",d).off("slideChanged",c)}}});
sliderjs.modules("nextControl",function(a,b){function e(){var b=a.value();return b.tmpl(b)}function f(c,d){var e=c[0];if(e)b.on(e,"click",function(b){b.preventDefault();a.opt("slide","next").trigger("pagesClicked")})}var d={text:"\u2192",tmpl:b.tmpl('<a class="nextSlide" href="javascript:;"><%= text %></a>')};return{init:function(){a.template.add(".sliderjs .footer",e,f,-9)},accept:function(a){return b.extend({},d,a)},change:function(b,d){a.template.refresh(e)},destroy:function(){a.template.remove(e)}}});
sliderjs.modules("pages",function(a,b){function e(){var c=a.value();return c.tmpl(b.extend({},c,{slides:a.opt("slides")}))}function f(c){if(h=c[0])g=b.find(h,".page"),b.each(g,function(c,d){b.on(c,"click",function(b){b.preventDefault();a.opt("slide",d).trigger("pagesClicked")})}),(c=g[a.opt("slide")])&&b.addClass(c,"current")}function d(b){a.template.refresh(e)}function c(a){if(g){var c=g[a.old];a=g[a.value];c&&b.removeClass(c,"current");a&&b.addClass(a,"current")}}var h,g,l={tmpl:b.tmpl('<span class="pages"> <% if(obj.slides){for(var i=0;i<slides.length;++i){var s=slides[i]; %> <a href="<%= s.image %>" class="page"><%= i+1 %></a> <% }} %> </span>')};
return{def:l,init:function(){a.template.add(".sliderjs .footer",e,f,-9);a.on("slidesChanged",d).on("slideChanged",c)},destroy:function(){a.template.remove(e);a.off("slidesChanged",d).off("slideChanged",c)},accept:function(a){return b.extend(l,a)},change:function(b,c){a.template.refresh(e)}}});
sliderjs.modules("playPauseControl",function(a,b){function e(){var c=a.value();return c.tmpl(b.extend({},c,h))}function f(){c&&(0<a.opt("loop")?(b.addClass(c,"pause"),b.removeClass(c,"play")):(b.addClass(c,"play"),b.removeClass(c,"pause")))}function d(d,e){if(c=d[0])f(),b.on(c,"click",function(b){b.preventDefault();a.opt("loop",!(0<a.opt("loop"))?"start":"stop");f()})}var c,h={tmpl:b.tmpl('<a class="playPauseControl icon" href="javascript:;"></a>')};return{init:function(){a.template.add(".sliderjs div.left",
e,d,7)},accept:function(a){return b.extend({},h,a)},change:function(b,c){a.template.refresh(e)},destroy:function(){a.template.remove(e)}}});
sliderjs.modules("prevControl",function(a,b){function e(){var b=a.value();return b.tmpl(b)}function f(c,d){var e=c[0];if(e)b.on(e,"click",function(b){b.preventDefault();a.opt("slide","prev").trigger("pagesClicked")})}var d={text:"\u2190",tmpl:b.tmpl('<a class="prevSlide" href="javascript:;"><%= text %></a>')};return{init:function(){a.template.add(".sliderjs .footer",e,f,9)},accept:function(a){return b.extend({},d,a)},change:function(b,d){a.template.refresh(e)},destroy:function(){a.template.remove(e)}}});
sliderjs.modules("slide",function(a,b){function e(b){a.value(0)}return{def:0,init:function(){a.on("slidesChanged",e)},destroy:function(){a.off("slidesChanged",e)},accept:function(b,d){switch(typeof b){case "number":return b;case "string":var c=a.opt("slides");if(c&&c.length){if("next"==b)return d+1-c.length*Math.floor((d+1)/c.length);if("prev"==b)return d-1-c.length*Math.floor((d-1)/c.length)}}return 0}}});
sliderjs.modules("slides",function(a,b){function e(){return s({slides:a.value()})}function f(a){q&&b.height(q,a?a+"px":"")}function d(a){f(a.value)}function c(a){var c=a?a+"px":"";n&&b.each(n,function(a){b.width(a,c)})}function h(a){c(a.value)}function g(a,c){if(n){var d=n[c],e=n[a];d&&b.removeClass(d,"current");e&&b.addClass(e,"current")}}function l(d){if(q=d[0])n=b.find(q,".slide"),g(a.opt("slide")),f(a.opt("height")),c(a.opt("width")),p(a.value())}function m(a){g(a.value,a.old)}function p(c){if(c){var d=
{success:0,error:0,abort:0,total:c.length,sum:null},e=function(e,g,f,h){h===t&&(d=b.extend({sum:d.success+d.error+d.abort},d),e&&(++d[e],++d.sum),g==a.opt("slide")&&a.trigger("currentSlideLoaded",{id:h,img:f,state:d}),1==d.success&&a.trigger("firstSlideLoaded",{id:h,i:g,img:f,state:d}),d.sum==c.length?(a.trigger("imagesLoaded",{state:d,id:h,images:r}),t=!1):a.trigger("imagesLoading",{state:d,id:h}))},g=t=b.uuid();r=b.map(c,function(a,c){var d=new Image;b.on(d,"load",function(){e("success",c,d,g)});
b.on(d,"error",function(){e("error",c,d,g)});b.on(d,"abort",function(){e("abort",c,d,g)});d.src=a.image;return d})}}var q,n,r,t,s=b.tmpl('<div class="slides"><% if(obj.slides){for(var i=0;i<slides.length;++i){var s=slides[i]; %> <div class="slide"> <% if(s.link){ %><a target="_blank" href="<%= s.link %>"><% } %> <img src="<%= s.image %>"><% if(s.legend){ %><span class="caption"><%= s.legend %></span> <% } if(s.link){ %></a><% } %> </div> <% }} %> </div>');return{def:[],init:function(){a.template.add(".sliderjs",
e,l,10);a.on("heightChanged",d).on("widthChanged",h).on("slideChanged",m)},destroy:function(){a.template.remove(e);a.off("heightChanged",d).off("widthChanged",h).off("slideChanged",m)},change:function(b,c){a.template.refresh(e);p(b)}}});
sliderjs.modules("template",function(a,b){function e(a){a=a.value;f&&b.width(f,a?a+"px":"")}var f,d=b.tmpl('<div class="sliderjs"></div>'),c=b.tmpl('<div class="header"></div>'),h=b.tmpl('<div class="footer"></div>'),g=b.tmpl('<div class="left"></div>'),l=b.tmpl('<div class="right"></div>');return{fn:function(){return f},init:function(){a.template.add(null,d,function(c){f=c[0];c=a.opt("width");f&&b.width(f,c?c+"px":"")}).add(".sliderjs",c,null,99).add(".sliderjs",g,null,50).add(".sliderjs",l,null,
-50).add(".sliderjs",h,null,-99);a.on("widthChanged",e)},destroy:function(){a.template.remove(c).remove(h).remove(g).remove(l).remove(d);a.off("widthChanged",e)}}});
sliderjs.modules("theme",function(a,b){function e(a,e){d&&(e&&b.each(e,function(a){b.removeClass(d,c+a)}),b.each(a,function(a){b.addClass(d,c+a)}))}function f(c){d=b.find(c,".sliderjs")[0];e(a.value())}var d,c="th-",h=b.getList("black black-icon black-caption black-blue-controls shadow hide-header-hover embed dots pages-border pages-bottom pages-shadow");return{def:h,init:function(){a.on("templated",f)},destroy:function(){a.off("templated",f)},accept:function(a,c){if("object"==typeof a&&!(a instanceof
Array)){var d=void 0!==a.only?b.getList(a.only):c||h,e=b.getList(a.add),f=b.getList(a.remove);return b.dif(d.concat(e),f)}return b.getList(a)},change:function(a,b){e(a,b)}}});sliderjs.themes=sliderjs.util.createRegistrable();
sliderjs.modules("transition",function(a,b){function e(b){if(!b||!b.mode)return!1;b=a.ask(b.mode+f,"supported");return!b||b()}var f="Transition",d={mode:"css",name:"simple"};return{def:d,init:function(){this.change(a.value())},destroy:function(){},accept:function(a,b){if(!a)return a;if(a instanceof Array)for(var f=0;f<a.length;++f){if(e(a[f]))return a[f]}else if(e(a))return a;return d},change:function(b,d){b&&a.opt(b.mode+f,b)}}});
sliderjs.modules("transitions",function(a,b){function e(b){b.transitions[c]&&a.opt("transition",b.transitions[c])}function f(b){if((b=a.value())&&++h>=b.everySlides){if(b&&!(0>=b.transitions.length)){b:{switch(b.change){case "random":c=Math.floor(Math.random()*b.transitions.length);break b;case "circular":c=c+1<b.transitions.length?c+1:0;break b}c=0}e(b)}h=0}}var d={transitions:[],everySlides:3,change:"random"},c=0,h=0;return{init:function(){a.on("transitionEnd",f);this.change(a.value())},destroy:function(){a.off("transitionEnd",
f)},accept:function(a,c){if(a)return a instanceof Array&&(a={transitions:a}),b.extend(d,a)},change:function(a,b){a&&e(a)}}});sliderjs.modules("width",function(a,b){return{def:640}});sliderjs.canvasTransitions("circle",{clippedTransition:function(a,b){var e=b.canvas.width,f=b.canvas.height;b.arc(e/2,f/2,0.6*a.progress*Math.max(e,f),0,2*Math.PI,!1)}});
sliderjs.canvasTransitions("circles",{params:{split:10},clippedTransition:function(a,b,e){var f=b.canvas.width,d=b.canvas.height;a=a.progress;var c,h,g,l,m,p,q,n;h=e.split;g=Math.floor(h*d/f);c=f/h;e=d/g;Math.max(f,d);m=0.7*Math.max(c,e);for(q=0;q<=h;q++)for(n=0;n<=g;n++)d=(q+0.5)*c,l=(n+0.5)*e,p=Math.max(0,Math.min(2*a-d/f,1))*m,b.moveTo(d,l),b.arc(d,l,p,0,2*Math.PI,!1)}});
sliderjs.canvasTransitions("clock",{clippedTransition:function(a,b){var e=b.canvas.width,f=b.canvas.height;b.moveTo(e/2,f/2);b.arc(e/2,f/2,Math.max(e,f),0,2*Math.PI*a.progress,!1)}});sliderjs.canvasTransitions("diamond",{clippedTransition:function(a,b){var e=b.canvas.width,f=b.canvas.height,d=a.progress,c=e/2,h=f/2,f=d*f,e=d*e;b.moveTo(c,h-f);b.lineTo(c+e,h);b.lineTo(c,h+f);b.lineTo(c-e,h)}});
sliderjs.canvasTransitions("horizontalOpen",{clippedTransition:function(a,b){var e=b.canvas.height,f=a.progress;b.rect(0,(1-f)*e/2,b.canvas.width,e*f)}});sliderjs.canvasTransitions("horizontalSunblind",{easing:"easeOutCubic",clippedTransition:function(a,b,e){var f=b.canvas.width,d=b.canvas.height;a=a.progress;var c;e=e.split||6;c=d/e;for(d=0;d<=e;d++)b.rect(0,c*d,f,c*a)}});
sliderjs.canvasTransitions("squares",{easing:"easeOutCubic",clippedTransition:function(a,b,e){var f=b.canvas.width,d=b.canvas.height;a=a.progress;var c,h,g,l,m,p,q,n,r;h=e.split||8;g=Math.floor(h*d/f);c=f/h;e=d/g;for(n=0;n<=h;n++)for(r=0;r<=g;r++)p=c*n,q=e*r,l=Math.max(0,Math.min(3*a-p/f-q/d,1)),m=c*l,l*=e,b.rect(p-m/2,q-l/2,m,l)}});
sliderjs.canvasTransitions("verticalOpen",{clippedTransition:function(a,b,e){var f=b.canvas.width,d=b.canvas.height,c,h,g,l,m,p;e=e.split||8;g=d/(2*e);c=a.progress*f/2;a=f/2-c;p=f/2+c;l=a-g;m=p+g;b.moveTo(a,0);for(h=0;h<=e;h++)f=2*h*g,c=f+g,b.lineTo(l,f),b.lineTo(a,c);b.lineTo(m,d);for(h=e;0<=h;h--)f=2*h*g,c=f-g,b.lineTo(p,f),b.lineTo(m,c)}});
sliderjs.canvasTransitions("verticalSunblind",{clippedTransition:function(a,b,e){var f=b.canvas.width,d=b.canvas.height;a=a.progress;var c,h;e=e.split||10;c=f/e;for(f=0;f<=e;f++)h=Math.max(0,Math.min(2*a-(f+1)/e,1)),b.rect(c*f,0,c*h,d)}});sliderjs.glslTransitions("_",sliderjs.util.extend({params:{size:0.3}},{shader:"//!{ params: { size: 0.3 } }\n#ifdef GL_ES\nprecision highp float;\n#endif\n\n// General parameters\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\n// Custom parameters\nuniform float size;\n\nvoid main() {\n float p = smoothstep(texCoord.x-size, texCoord.x+size, progress*(1.+2.*size) - size);\n vec4 texTo = texture2D(to, texCoord);\n vec4 texFrom = texture2D(from, texCoord);\n vec4 pTo = vec4(\n smoothstep(0.00, 0.50, p), \n smoothstep(0.25, 0.75, p),\n smoothstep(0.50, 1.00, p),\n p);\n vec4 pFrom = vec4(1. - p);\n gl_FragColor = texTo*pTo+texFrom*pFrom;\n}"}));
sliderjs.glslTransitions("blur",sliderjs.util.extend({params:{size:0.02}},{shader:"//!{ params: { size: 0.02 } }\n#ifdef GL_ES\nprecision highp float;\n#endif\n\n// General parameters\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\n// Custom parameters\nuniform float size;\n\nvec4 blur(sampler2D t, vec2 c, float b) {\n vec4 sum = texture2D(t, c);\n sum += texture2D(t, c+b*vec2(-0.326212, -0.405805));\n sum += texture2D(t, c+b*vec2(-0.840144, -0.073580));\n sum += texture2D(t, c+b*vec2(-0.695914, 0.457137));\n sum += texture2D(t, c+b*vec2(-0.203345, 0.620716));\n sum += texture2D(t, c+b*vec2( 0.962340, -0.194983));\n sum += texture2D(t, c+b*vec2( 0.473434, -0.480026));\n sum += texture2D(t, c+b*vec2( 0.519456, 0.767022));\n sum += texture2D(t, c+b*vec2( 0.185461, -0.893124));\n sum += texture2D(t, c+b*vec2( 0.507431, 0.064425));\n sum += texture2D(t, c+b*vec2( 0.896420, 0.412458));\n sum += texture2D(t, c+b*vec2(-0.321940, -0.932615));\n sum += texture2D(t, c+b*vec2(-0.791559, -0.597705));\n return sum / 13.0;\n}\n\nvoid main()\n{\n float pinv = 1.-progress;\n gl_FragColor = pinv*blur(from, texCoord, progress*size) + progress*blur(to, texCoord, pinv*size);\n}"}));
sliderjs.glslTransitions("deformation",sliderjs.util.extend({params:{size:0.05,zoom:20}},{shader:"//!{ params: { size: 0.05, zoom: 20.0 } }\n#ifdef GL_ES\nprecision highp float;\n#endif\n\n// General parameters\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\n// Custom parameters\nuniform float size;\nuniform float zoom;\n\nvoid main() {\n float pinv = 1. - progress;\n vec2 disp = size*vec2(cos(zoom*texCoord.x), sin(zoom*texCoord.y));\n vec4 texTo = texture2D(to, texCoord + pinv*disp);\n vec4 texFrom = texture2D(from, texCoord + progress*disp);\n gl_FragColor = texTo*progress + texFrom*pinv;\n}"}));
sliderjs.glslTransitions("diag",sliderjs.util.extend({},{shader:"#ifdef GL_ES\nprecision highp float;\n#endif\n\n// General parameters\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\n// Custom parameters\nuniform float size;\n\nvoid main() {\n float effectsize = (size > 0.0) ? size : 0.2;\n float pTo = 2.*(progress+effectsize*(2.*progress-1.));\n float pos = texCoord.x+texCoord.y;\n pTo = smoothstep(pos-effectsize, pos+effectsize, pTo);\n float pFrom = 1.0 - pTo;\n gl_FragColor = pTo*texture2D(to,texCoord) + pFrom*texture2D(from,texCoord);\n}"}));
sliderjs.glslTransitions("dislocation",sliderjs.util.extend({},{shader:"#ifdef GL_ES\nprecision highp float;\n#endif\n\n// General parameters\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\n// Custom parameters\nuniform float displacement;\n\nvoid main() {\n float disp = displacement>0.0 ? displacement : 0.2;\n float p = progress;\n float pTo = p;\n float pFrom = 1.-p;\n float d = disp*progress;\n gl_FragColor = texture2D(to, texCoord)*pTo;\n if (pFrom > 0.99) {\n gl_FragColor += pFrom*texture2D(from, texCoord);\n }\n else {\n gl_FragColor += pFrom*0.2*texture2D(from, texCoord);\n gl_FragColor += pFrom*0.2*texture2D(from, texCoord+vec2(d, d));\n gl_FragColor += pFrom*0.2*texture2D(from, texCoord+vec2(-d, d));\n gl_FragColor += pFrom*0.2*texture2D(from, texCoord+vec2(-d, -d));\n gl_FragColor += pFrom*0.2*texture2D(from, texCoord+vec2(d, -d));\n }\n}"}));
sliderjs.glslTransitions("flash",sliderjs.util.extend({params:{insolation:4},easing:"easeOutCubic"},{shader:"//!{ params: { insolation: 4.0 }, easing: 'easeOutCubic' }\n#ifdef GL_ES\nprecision highp float;\n#endif\n\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\n// Custom parameters\nuniform float insolation;\n\nvoid main() {\n gl_FragColor = progress*texture2D(to, texCoord) + (1.-progress)*texture2D(from, texCoord);\n gl_FragColor *= (1.+insolation*max(0., .5-abs(progress-.5)));\n}"}));
sliderjs.glslTransitions("rainbow",sliderjs.util.extend({params:{size:0.3}},{shader:"//!{ params: { size: 0.3 } }\n#ifdef GL_ES\nprecision highp float;\n#endif\n\n// General parameters\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\n// Custom parameters\nuniform float size;\n\nvoid main() {\n float p = smoothstep(texCoord.x-size, texCoord.x+size, progress*(1.+2.*size) - size);\n vec4 texTo = texture2D(to, texCoord);\n vec4 texFrom = texture2D(from, texCoord);\n vec4 pTo = vec4(\n smoothstep(0.00, 0.50, p), \n smoothstep(0.25, 0.75, p),\n smoothstep(0.50, 1.00, p),\n p);\n vec4 pFrom = vec4(1. - p);\n gl_FragColor = texTo*pTo+texFrom*pFrom;\n}"}));
sliderjs.glslTransitions("simple",sliderjs.util.extend({},{shader:"#ifdef GL_ES\nprecision highp float;\n#endif\n\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\nvoid main() {\n gl_FragColor = progress*texture2D(to,texCoord) + (1.0-progress)*texture2D(from,texCoord);\n}"}));sliderjs.glslTransitions("smoothl",sliderjs.util.extend({params:{size:0.3}},{shader:"//!{ params: { size: 0.3 } }\n#ifdef GL_ES\nprecision highp float;\n#endif\n\n// General parameters\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\n// Custom parameters\nuniform float size;\n\nvoid main() {\n float p = smoothstep(texCoord.x-size, texCoord.x+size, progress*(1.+2.*size) - size);\n float pinv = 1.-p;\n vec4 texTo = texture2D(to, texCoord);\n vec4 texFrom = texture2D(from, texCoord);\n gl_FragColor = texTo*p+texFrom*pinv;\n}"}));
sliderjs.glslTransitions("wind",sliderjs.util.extend({params:{size:0.2}},{shader:"//!{ params: { size: 0.2 } }\n#ifdef GL_ES\nprecision highp float;\n#endif\n\n// General parameters\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nvarying vec2 texCoord;\nuniform vec2 resolution;\n\n// Custom parameters\nuniform float size;\n\nfloat rand(vec2 co){\n return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);\n}\n\nvoid main() {\n float pTo = progress*(1.0+2.0*size) - size;\n float r = size * rand(vec2(0, texCoord.y));\n pTo = clamp(1.-(texCoord.x-pTo-r)/size, 0., 1.);\n float pFrom = 1.0 - pTo;\n gl_FragColor = pTo*texture2D(to,texCoord) + pFrom*texture2D(from,texCoord);\n}"}));