SVGBar.min.js

!function(){function t(t){return Array.isArray(t)?t:"NodeList"==t.constructor.name||"HTMLCollection"==t.constructor.name?Array.from(t):new Array(t)}function e(t,e){var i=new CustomEvent("progressChanged",{detail:{progress:e},bubbles:!0,cancelable:!0});t.getPath().dispatchEvent(i)}SVGBar=function(){var e;this.is_pathline_visible=!1,this.is_animating=!1,this.animation_start_time;var i={svg:document.getElementsByTagName("svg")[0],animation_length:5e3};arguments[0]&&"object"==typeof arguments[0]?this.options=function(t,e){var i;for(i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t}(i,arguments[0]):this.options=i,this.options.progress_path?this.options.paths=t(this.options.progress_path):this.options.paths=t(this.options.svg.getElementsByClassName("progress_path")),this.options.mask||(this.options.mask=this.options.svg.getElementsByClassName("mask")[0]);var s,n,a,o=this.options.track_mouse;"x"!=o&&"y"!=o&&"-x"!=o&&"-y"!=o||(s=this,n=this.options.svg,"x"==(a=o).substr(-1)?n.addEventListener("mousemove",function(t){var e=n.getBoundingClientRect(),i=window.pageXOffset||document.documentElement.scrollLeft,o=(t.pageX-(e.left+i))/e.width;"-"==a.substr(0,1)&&(o=1-o),s.setProgress(o)}):n.addEventListener("mousemove",function(t){var e=n.getBoundingClientRect(),i=window.pageYOffset||document.documentElement.scrollTop,o=(t.pageY-(e.top+i))/e.height;"-"==a.substr(0,1)&&(o=1-o),s.setProgress(o)})),this.setPath=function(t){return null!=t&&"true"==t.getAttribute("data-svgbar-ispath")&&(e=t,i=this.options.paths,s=this,[].forEach.call(i,function(t){t.style.strokeDashoffset=t.getTotalLength(),t.style.animation="none";var t=document.querySelector("#"+t.getAttribute("data-svgbar-path_line-id"));t.style.opacity=0}),s.displayPathLine(s.is_pathline_visible),s.setAnimationState(s.is_animating),!0);var i,s},this.getPath=function(){return e},function(t,e,i){var s,n="http://www.w3.org/2000/svg";t.getElementsByTagName("defs").length>0?s=t.getElementsByTagName("defs")[0]:(s=document.createElementNS(n,"defs"),t.appendChild(s));var a="svgbar-mask-"+Date.now().toString().slice(-8),o=document.createElementNS(n,"clipPath");o.setAttribute("id",a),s.appendChild(o);var r=i.cloneNode(!0);o.appendChild(r);var h=0;[].forEach.call(e,function(e){var i="svgbar-path-line-"+Date.now().toString().slice(-8)+h,s="svgbar-anim-"+Date.now().toString().slice(-8)+h,n=e.getTotalLength(),o=e.cloneNode(!0);o.setAttribute("id",i),o.removeAttribute("class"),o.classList.add("path_line"),o.style.opacity=0,t.appendChild(o),e.style.clipPath="url(#"+a+")",e.style.strokeDasharray=n+" "+n,e.style.strokeDashoffset=n,e.setAttribute("data-svgbar-anim-name",s),e.setAttribute("data-svgbar-path_line-id",i),e.setAttribute("data-svgbar-ispath",!0);var r=document.createElement("style");r.type="text/css",r.innerHTML="@keyframes "+s+" { 0% {stroke-dashoffset: "+n+";} 100% {stroke-dashoffset: 0;} }",document.getElementsByTagName("head")[0].appendChild(r),h++})}(this.options.svg,this.options.paths,this.options.mask),this.setPath(this.options.paths[0])},SVGBar.prototype.setAnimationState=function(t){return this.is_animating=t,t?(this.getPath().style.animation=this.getPath().getAttribute("data-svgbar-anim-name")+" "+this.options.animation_length+"ms linear alternate infinite",this.animation_start_time=Date.now(),function t(i){percent=(Date.now()-i.animation_start_time)/i.options.animation_length%2;percent=percent>1?2-percent:percent;e(i,percent);i.is_animating&&window.requestAnimationFrame(function(){t(i)})}(this)):this.getPath().style.animation="none",this},SVGBar.prototype.toggleAnimationState=function(){return this.setAnimationState(!this.is_animating),this.is_animating},SVGBar.prototype.displayPathLine=function(t){var e=document.querySelector("#"+this.getPath().getAttribute("data-svgbar-path_line-id"));return this.is_pathline_visible=t,e.style.opacity=t?1:0,this},SVGBar.prototype.togglePathLine=function(){return this.displayPathLine(!this.is_pathline_visible),this.is_pathline_visible},SVGBar.prototype.setProgress=function(t){var i=this.getPath().getTotalLength();return this.getPath().style.strokeDashoffset=i-i*t,e(this,t),this}}();