You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
11 KiB
1 lines
11 KiB
"use strict";!function(a,b){function c(c){if(void 0===c)throw new Error('Pathformer [constructor]: "element" parameter is required');if(c.constructor===String&&!(c=b.getElementById(c)))throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');if(!(c.constructor instanceof a.SVGElement||/^svg$/i.test(c.nodeName)))throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');this.el=c,this.scan(c)}function d(a,b,c){this.isReady=!1,this.setElement(a,b),this.setOptions(b),this.setCallback(c),this.isReady&&this.init()}c.prototype.TYPES=["line","ellipse","circle","polygon","polyline","rect"],c.prototype.ATTR_WATCH=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],c.prototype.scan=function(a){for(var b,c,d,e,f=a.querySelectorAll(this.TYPES.join(",")),g=0;g<f.length;g++)c=f[g],b=this[c.tagName.toLowerCase()+"ToPath"],d=b(this.parseAttr(c.attributes)),e=this.pathMaker(c,d),c.parentNode.replaceChild(e,c)},c.prototype.lineToPath=function(a){var b={},c=a.x1||0,d=a.y1||0,e=a.x2||0,f=a.y2||0;return b.d="M"+c+","+d+"L"+e+","+f,b},c.prototype.rectToPath=function(a){var b={},c=parseFloat(a.x)||0,d=parseFloat(a.y)||0,e=parseFloat(a.width)||0,f=parseFloat(a.height)||0;return b.d="M"+c+" "+d+" ",b.d+="L"+(c+e)+" "+d+" ",b.d+="L"+(c+e)+" "+(d+f)+" ",b.d+="L"+c+" "+(d+f)+" Z",b},c.prototype.polylineToPath=function(a){var b,c,d={},e=a.points.trim().split(" ");if(-1===a.points.indexOf(",")){var f=[];for(b=0;b<e.length;b+=2)f.push(e[b]+","+e[b+1]);e=f}for(c="M"+e[0],b=1;b<e.length;b++)-1!==e[b].indexOf(",")&&(c+="L"+e[b]);return d.d=c,d},c.prototype.polygonToPath=function(a){var b=c.prototype.polylineToPath(a);return b.d+="Z",b},c.prototype.ellipseToPath=function(a){var b={},c=parseFloat(a.rx)||0,d=parseFloat(a.ry)||0,e=parseFloat(a.cx)||0,f=parseFloat(a.cy)||0,g=e-c,h=f,i=parseFloat(e)+parseFloat(c),j=f;return b.d="M"+g+","+h+"A"+c+","+d+" 0,1,1 "+i+","+j+"A"+c+","+d+" 0,1,1 "+g+","+j,b},c.prototype.circleToPath=function(a){var b={},c=parseFloat(a.r)||0,d=parseFloat(a.cx)||0,e=parseFloat(a.cy)||0,f=d-c,g=e,h=parseFloat(d)+parseFloat(c),i=e;return b.d="M"+f+","+g+"A"+c+","+c+" 0,1,1 "+h+","+i+"A"+c+","+c+" 0,1,1 "+f+","+i,b},c.prototype.pathMaker=function(a,c){var d,e,f=b.createElementNS("http://www.w3.org/2000/svg","path");for(d=0;d<a.attributes.length;d++)e=a.attributes[d],-1===this.ATTR_WATCH.indexOf(e.name)&&f.setAttribute(e.name,e.value);for(d in c)f.setAttribute(d,c[d]);return f},c.prototype.parseAttr=function(a){for(var b,c={},d=0;d<a.length;d++){if(b=a[d],-1!==this.ATTR_WATCH.indexOf(b.name)&&-1!==b.value.indexOf("%"))throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");c[b.name]=b.value}return c};var e,f,g;d.LINEAR=function(a){return a},d.EASE=function(a){return-Math.cos(a*Math.PI)/2+.5},d.EASE_OUT=function(a){return 1-Math.pow(1-a,3)},d.EASE_IN=function(a){return Math.pow(a,3)},d.EASE_OUT_BOUNCE=function(a){var b=1-Math.cos(a*(.5*Math.PI)),c=Math.pow(b,1.5),d=Math.pow(1-a,2);return 1-d+(1-Math.abs(Math.cos(c*(2.5*Math.PI))))*d},d.prototype.setElement=function(c,d){if(void 0===c)throw new Error('Vivus [constructor]: "element" parameter is required');if(c.constructor===String&&!(c=b.getElementById(c)))throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');if(this.parentEl=c,d&&d.file){var e=b.createElement("object");e.setAttribute("type","image/svg+xml"),e.setAttribute("data",d.file),e.setAttribute("built-by-vivus","true"),c.appendChild(e),c=e}switch(c.constructor){case a.SVGSVGElement:case a.SVGElement:this.el=c,this.isReady=!0;break;case a.HTMLObjectElement:var f,g;g=this,f=function(a){if(!g.isReady){if(g.el=c.contentDocument&&c.contentDocument.querySelector("svg"),!g.el&&a)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");return g.el?(c.getAttribute("built-by-vivus")&&(g.parentEl.insertBefore(g.el,c),g.parentEl.removeChild(c),g.el.setAttribute("width","100%"),g.el.setAttribute("height","100%")),g.isReady=!0,g.init(),!0):void 0}},f()||c.addEventListener("load",f);break;default:if(!c)throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}},d.prototype.setOptions=function(b){var c=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],e=["inViewport","manual","autostart"];if(void 0!==b&&b.constructor!==Object)throw new Error('Vivus [constructor]: "options" parameter must be an object');if(b=b||{},b.type&&-1===c.indexOf(b.type))throw new Error("Vivus [constructor]: "+b.type+" is not an existing animation `type`");if(this.type=b.type||c[0],b.start&&-1===e.indexOf(b.start))throw new Error("Vivus [constructor]: "+b.start+" is not an existing `start` option");if(this.start=b.start||e[0],this.isIE=-1!==a.navigator.userAgent.indexOf("MSIE")||-1!==a.navigator.userAgent.indexOf("Trident/")||-1!==a.navigator.userAgent.indexOf("Edge/"),this.duration=g(b.duration,120),this.delay=g(b.delay,null),this.dashGap=g(b.dashGap,1),this.forceRender=b.hasOwnProperty("forceRender")?!!b.forceRender:this.isIE,this.reverseStack=!!b.reverseStack,this.selfDestroy=!!b.selfDestroy,this.onReady=b.onReady,this.map=[],this.frameLength=this.currentFrame=this.delayUnit=this.speed=this.handle=null,this.ignoreInvisible=!!b.hasOwnProperty("ignoreInvisible")&&!!b.ignoreInvisible,this.animTimingFunction=b.animTimingFunction||d.LINEAR,this.pathTimingFunction=b.pathTimingFunction||d.LINEAR,this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")},d.prototype.setCallback=function(a){if(a&&a.constructor!==Function)throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=a||function(){}},d.prototype.mapping=function(){var b,c,d,e,f,h,i,j;for(j=h=i=0,c=this.el.querySelectorAll("path"),b=0;b<c.length;b++)d=c[b],this.isInvisible(d)||(f={el:d,length:Math.ceil(d.getTotalLength())},isNaN(f.length)?a.console&&console.warn&&console.warn("Vivus [mapping]: cannot retrieve a path element length",d):(this.map.push(f),d.style.strokeDasharray=f.length+" "+(f.length+2*this.dashGap),d.style.strokeDashoffset=f.length+this.dashGap,f.length+=this.dashGap,h+=f.length,this.renderPath(b)));for(h=0===h?1:h,this.delay=null===this.delay?this.duration/3:this.delay,this.delayUnit=this.delay/(c.length>1?c.length-1:1),this.reverseStack&&this.map.reverse(),b=0;b<this.map.length;b++){switch(f=this.map[b],this.type){case"delayed":f.startAt=this.delayUnit*b,f.duration=this.duration-this.delay;break;case"oneByOne":f.startAt=i/h*this.duration,f.duration=f.length/h*this.duration;break;case"sync":case"async":case"nsync":f.startAt=0,f.duration=this.duration;break;case"scenario-sync":d=f.el,e=this.parseAttr(d),f.startAt=j+(g(e["data-delay"],this.delayUnit)||0),f.duration=g(e["data-duration"],this.duration),j=void 0!==e["data-async"]?f.startAt:f.startAt+f.duration,this.frameLength=Math.max(this.frameLength,f.startAt+f.duration);break;case"scenario":d=f.el,e=this.parseAttr(d),f.startAt=g(e["data-start"],this.delayUnit)||0,f.duration=g(e["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,f.startAt+f.duration)}i+=f.length,this.frameLength=this.frameLength||this.duration}},d.prototype.drawer=function(){var a=this;if(this.currentFrame+=this.speed,this.currentFrame<=0)this.stop(),this.reset();else{if(!(this.currentFrame>=this.frameLength))return this.trace(),void(this.handle=e(function(){a.drawer()}));this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy()}this.callback(this),this.instanceCallback&&(this.instanceCallback(this),this.instanceCallback=null)},d.prototype.trace=function(){var a,b,c,d;for(d=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength,a=0;a<this.map.length;a++)c=this.map[a],b=(d-c.startAt)/c.duration,b=this.pathTimingFunction(Math.max(0,Math.min(1,b))),c.progress!==b&&(c.progress=b,c.el.style.strokeDashoffset=Math.floor(c.length*(1-b)),this.renderPath(a))},d.prototype.renderPath=function(a){if(this.forceRender&&this.map&&this.map[a]){var b=this.map[a],c=b.el.cloneNode(!0);b.el.parentNode.replaceChild(c,b.el),b.el=c}},d.prototype.init=function(){this.frameLength=0,this.currentFrame=0,this.map=[],new c(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this)},d.prototype.starter=function(){switch(this.start){case"manual":return;case"autostart":this.play();break;case"inViewport":var b=this,c=function(){b.isInViewport(b.parentEl,1)&&(b.play(),a.removeEventListener("scroll",c))};a.addEventListener("scroll",c),c()}},d.prototype.getStatus=function(){return 0===this.currentFrame?"start":this.currentFrame===this.frameLength?"end":"progress"},d.prototype.reset=function(){return this.setFrameProgress(0)},d.prototype.finish=function(){return this.setFrameProgress(1)},d.prototype.setFrameProgress=function(a){return a=Math.min(1,Math.max(0,a)),this.currentFrame=Math.round(this.frameLength*a),this.trace(),this},d.prototype.play=function(a,b){if(this.instanceCallback=null,a&&"function"==typeof a)this.instanceCallback=a,a=null;else if(a&&"number"!=typeof a)throw new Error("Vivus [play]: invalid speed");return b&&"function"==typeof b&&!this.instanceCallback&&(this.instanceCallback=b),this.speed=a||1,this.handle||this.drawer(),this},d.prototype.stop=function(){return this.handle&&(f(this.handle),this.handle=null),this},d.prototype.destroy=function(){this.stop();var a,b;for(a=0;a<this.map.length;a++)b=this.map[a],b.el.style.strokeDashoffset=null,b.el.style.strokeDasharray=null,this.renderPath(a)},d.prototype.isInvisible=function(a){var b,c=a.getAttribute("data-ignore");return null!==c?"false"!==c:!!this.ignoreInvisible&&(b=a.getBoundingClientRect(),!b.width&&!b.height)},d.prototype.parseAttr=function(a){var b,c={};if(a&&a.attributes)for(var d=0;d<a.attributes.length;d++)b=a.attributes[d],c[b.name]=b.value;return c},d.prototype.isInViewport=function(a,b){var c=this.scrollY(),d=c+this.getViewportH(),e=a.getBoundingClientRect(),f=e.height,g=c+e.top,h=g+f;return b=b||0,g+f*b<=d&&h>=c},d.prototype.docElem=a.document.documentElement,d.prototype.getViewportH=function(){var b=this.docElem.clientHeight,c=a.innerHeight;return b<c?c:b},d.prototype.scrollY=function(){return a.pageYOffset||this.docElem.scrollTop},e=function(){return a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame||a.msRequestAnimationFrame||function(b){return a.setTimeout(b,1e3/60)}}(),f=function(){return a.cancelAnimationFrame||a.webkitCancelAnimationFrame||a.mozCancelAnimationFrame||a.oCancelAnimationFrame||a.msCancelAnimationFrame||function(b){return a.clearTimeout(b)}}(),g=function(a,b){var c=parseInt(a,10);return c>=0?c:b},"function"==typeof define&&define.amd?define([],function(){return d}):"object"==typeof exports?module.exports=d:a.Vivus=d}(window,document); |