| 1 |
!function(){"use strict";document.addEventListener("DOMContentLoaded",(function(){t.init()}));const t={init:function(){this.holder=document.querySelectorAll(".qi-block-progress-bar-horizontal"),this.holder.length&&[...this.holder].map((e=>{t.initItem(e)}))},getRealCurrentItem:function(t){return"string"==typeof t&&""!==t&&(t=qiBlocksEditor.qodefGetCurrentBlockElement.get(t)),t},initItem:function(e,r){if(!(e=t.getRealCurrentItem(e)))return;const n="object"!=typeof qiBlocksEditor?qiBlocks:qiBlocksEditor;r&&e.classList.remove("qodef--init"),n.qodefIsInViewport.check(e,(()=>{e.classList.contains("qodef--init")||t.initHorizontalBar(e,r)}))},generateBarData:function(t){const e=parseInt(t.getAttribute("data-active-line-width"),10),r=t.getAttribute("data-active-line-color"),n=parseInt(t.getAttribute("data-inactive-line-width"),10),i=t.getAttribute("data-inactive-line-color"),a=t.getAttribute("data-duration")&&!isNaN(t.getAttribute("data-duration"))?parseInt(t.getAttribute("data-duration"),10):1200,o=t.getAttribute("data-percentage-type"),d=t.clientWidth;let s={strokeWidth:100*e/d,trailWidth:100*n/d,svgStyle:{display:"block",width:"100%"},easing:"easeInOut",duration:a,step:function(e,r){const n=Math.round(100*r.value());t.querySelector(".qodef-m-value-inner").innerHTML=n+'<span class="qodef-m-percentage">%</span>',"floating-above"!==o&&"floating-on"!==o||(t.querySelector(".qodef-m-value").style.left=n+"%")}};return r&&(s.color=r,s.to={color:r}),i&&(s.trailColor=i,s.from={color:i}),s},initHorizontalBar:function(e,r){const n=e.querySelector(".qodef-m-canvas"),i=t.generateBarData(e),a=parseInt(e.getAttribute("data-number"),10)/100;r&&(n.innerHTML="");const o=new ProgressBar.Line(n,i);"yes"===e.getAttribute("data-gradient-fill")&&t.generateGradient(e);const d=e.getAttribute("data-pattern");d&&(e.querySelector("svg").style.backgroundImage='url("'+d+'")'),e.classList.add("qodef--init"),o.animate(a)},generateGradient:function(t){const e="http://www.w3.org/2000/svg",r=document.createElementNS(e,"defs"),n=document.createElementNS(e,"linearGradient"),i=[{color:t.getAttribute("data-gradient-start"),offset:"0%"},{color:t.getAttribute("data-gradient-end"),offset:"100%"}];for(let t=0,r=i.length;t<r;t++){let r=document.createElementNS(e,"stop");r.setAttribute("offset",i[t].offset),r.setAttribute("stop-color",i[t].color),n.appendChild(r)}n.id="Gradient-"+t.getAttribute("data-rand-id"),n.setAttribute("gradientUnits","userSpaceOnUse"),n.setAttribute("x1","0"),n.setAttribute("x2",t.getAttribute("data-number")+"%"),n.setAttribute("y1","0"),n.setAttribute("y2","0"),r.appendChild(n),t.querySelector(".qodef-m-canvas svg").appendChild(r),t.querySelector(".qodef-m-canvas svg path:nth-child(2)").setAttribute("stroke","url(#Gradient-"+t.getAttribute("data-rand-id")+")")}}}(); |
