walkway.min.js

!function(t,e){"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e():t.Walkway=e()}(this,function(t){"use strict";function e(t){var e=["path","line","polyline"],n=e.reduce(function(e,n){return e+t+" "+n+", "},"");return n.slice(0,-2)}function n(t){return this instanceof n?("string"==typeof t&&(t={selector:t}),t.selector?(this.opts=t,this.selector=t.selector,this.duration=t.duration||500,this.easing="function"==typeof t.easing?t.easing:l[t.easing]||l.easeInOutCubic,this.id=!1,this.elements=this.getElements(),this.callback=t.callback,this.setInitialStyles(),h=h.concat(this.elements),void f.push(this)):this.error("A selector needs to be specified")):new n(t)}function i(t,e,n){this.el=t,this.duration=e,this.easing=n,this.animationStart=null,this.animationStarted=!1}function a(t,e,n){i.call(this,t,e,n),this.length=t.getTotalLength()}function o(t,e,n){i.call(this,t,e,n),this.length=u(t)}function r(t,e,n){i.call(this,t,e,n),this.length=s(t)}function s(t){var e,n,i,a,o,r=0,s=t.points.numberOfItems;for(o=1;o<s;o++)e=t.points.getItem(o-1).x,n=t.points.getItem(o).x,i=t.points.getItem(o-1).y,a=t.points.getItem(o).y,r+=Math.sqrt(Math.pow(e-n,2)+Math.pow(i-a,2));return r}function u(t){var e=t.getAttribute("x1"),n=t.getAttribute("x2"),i=t.getAttribute("y1"),a=t.getAttribute("y2");return Math.sqrt(Math.pow(e-n,2)+Math.pow(i-a,2))}var c=0;window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,window.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame,window.requestAnimationFrame||(window.requestAnimationFrame=function(t){var e=(new Date).getTime(),n=Math.max(0,16-(e-c)),i=window.setTimeout(function(){t(e+n)},n);return c=e+n,i}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)});var l={linear:function(t){return t},easeInQuad:function(t){return t*t},easeOutQuad:function(t){return t*(2-t)},easeInOutQuad:function(t){return t<.5?2*t*t:-1+(4-2*t)*t},easeInCubic:function(t){return t*t*t},easeOutCubic:function(t){return--t*t*t+1},easeInOutCubic:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easeInQuart:function(t){return t*t*t*t},easeOutQuart:function(t){return 1- --t*t*t*t},easeInOutQuart:function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},easeInQuint:function(t){return t*t*t*t*t},easeOutQuint:function(t){return 1+--t*t*t*t*t},easeInOutQuint:function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t}},h=[],f=[];return document.addEventListener("visibilitychange",function(){if(document.hidden){for(var t=0,e=f.length;t<e;t++)f[t].cancel();for(var n=0,i=h.length;n<i;n++)h[n].complete()}},!1),n.prototype={constructor:n,error:function(t){console.error("Walkway error: "+t)},getElements:function(){var t=this,n=e(this.selector),i=document.querySelectorAll(n);return i=Array.prototype.slice.call(i),i.map(function(e){return"path"===e.tagName?new a(e,t.duration,t.easing):"line"===e.tagName?new o(e,t.duration,t.easing):"polyline"===e.tagName?new r(e,t.duration,t.easing):void 0})},setInitialStyles:function(){this.elements.forEach(function(t){t.el.style.strokeDasharray=t.length+" "+t.length,t.el.style.strokeDashoffset=t.length})},draw:function(t){var e=this.elements.length,n=this.elements.filter(function(t){return t.done}).length===e,i=null,a=!1;if(this.callback=t||this.callback,n)return this.callback&&"function"==typeof this.callback&&this.callback(),void this.cancel();for(;e--;)i=this.elements[e],a=i.update(),a&&(i.done=!0);this.id=window.requestAnimationFrame(this.draw.bind(this,t))},cancel:function(){window.cancelAnimationFrame(this.id)},redraw:function(){this.cancel(),this.elements.forEach(function(t){t.reset()}),this.draw()}},i.prototype={constructor:i,update:function(){this.animationStarted||(this.animationStart=Date.now(),this.animationStarted=!0);var t=this.easing((Date.now()-this.animationStart)/this.duration);return this.fill(t),t>=1},fill:function(t){var e=Math.ceil(this.length*(1-t));this.el.style.strokeDashoffset=e<0?0:Math.abs(e)},complete:function(){this.fill(1)},reset:function(){this.done=!1,this.animationStart=0,this.animationStarted=!1,this.fill(0)}},a.prototype=o.prototype=r.prototype=Object.create(i.prototype),n});