UNPKG

circular-timer-progress-bar

Version:

SVG-based native JS circular timer progress bar.

3 lines (2 loc) 3.87 kB
function t(t,i,n,s){void 0===i&&(i=0),void 0===n&&(n=!0),void 0===s&&(s=!0);var r=t.widthContainer||300,o=t.heightContainer||300;this.container=new e(t.container,{width:r+"px",height:o+"px",style:"background-color: "+(t.colorContainer||"inherit")}),this.strokeWidth=t.strokeWidth,this.circle=new e("circle",{fill:"none",stroke:t.colorCircle||"lightgray"}),this.container.appendChild(this.circle),this.path=new e("path",{fill:"none",stroke:t.colorPath||"black",d:""}),this.container.appendChild(this.path);var h=!document.documentMode&&!!window.StyleMedia;this.fontSize=t.fontSize||0,this.colorText=t.colorText||"black",this.text=new e("text",{fill:this.colorText,"text-anchor":"middle","alignment-baseline":"middle","dominant-baseline":"middle",dy:(h?.6:0)+"ex","font-family":t.fontFamily||"sans-serif"}),this.container.appendChild(this.text),this.colorAlert=t.colorAlert||"red",this.nDecimals=i;var l=r>o?o:r;this.cx=r/2,this.cy=o/2,this.r=l/2*.85,this.circle.set("cx",this.cx),this.circle.set("cy",this.cy),this.circle.set("r",this.r),this.circle.set("stroke-width",this.strokeWidth||l/10),this.path.set("stroke-width",(this.strokeWidth||l/10)+1),this.text.set("font-size",(this.fontSize>0?this.fontSize:l/6)+"px"),this.text.set("x",r/2),this.text.set("y",o/2),s||(this.circle.set("visibility","hidden"),this.path.set("visibility","hidden")),n?this.text.element().textContent=100:this.text.set("visibility","hidden"),this.running=!1}function e(t,e){"string"==typeof t?this.create(t):"object"==typeof t&&this.wrap(t),this.setBulk(e||null)}t.prototype.polarToCartesian=function(t,e,i,n){var s=(n-90)*Math.PI/180;return{x:t+i*Math.cos(s),y:e+i*Math.sin(s)}},t.prototype.describeArc=function(t,e,i,n,s){var r=this.polarToCartesian(t,e,i,s),o=this.polarToCartesian(t,e,i,n);return["M",r.x,r.y,"A",i,i,0,s-n<=180?"0":"1",0,o.x,o.y].join(" ")},t.prototype.secondsLeft=function(t,e){return t*(e/360)/1e3},t.prototype.formatTime=function(t,e){return t.toFixed(e)},t.prototype.frame=function(t){var e;0===t.degrees?t.infinite?t.degrees=360:(clearInterval(t.id),t.running=!1):(t.degrees--,e=t.infinite?t.describeArc(t.cx,t.cy,t.r,t.degrees-75,t.degrees):t.describeArc(t.cx,t.cy,t.r,t.degrees,360),t.path.set("d",e));var i=t.secondsLeft(t.time,t.degrees);t.text.element().textContent=t.formatTime(i,t.nDecimals),t.alertTime>0&&i<t.alertTime&&t.text.set("fill",t.colorAlert)},t.prototype.run=function(t,e){void 0===e&&(e=0),this.infinite="inf"===t,this.infinite&&this.text.set("visibility","hidden"),this.text.set("fill",this.colorText),this.alertTime=e/1e3,this.time=this.infinite?3e3:t,this.degrees=360,this.speed=this.time/this.degrees,this.running=!0,this.id=setInterval(this.frame,this.speed,this)},t.prototype.isRunning=function(){return this.running},t.prototype.pause=function(){this.running=!1,clearInterval(this.id)},t.prototype.isPaused=function(){return!this.running},t.prototype.resume=function(){this.running=!0,this.id=setInterval(this.frame,this.speed,this)},e.prototype.create=function(t){this.elem=document.createElementNS("http://www.w3.org/2000/svg",t)},e.prototype.wrap=function(t){this.elem=t},e.prototype.get=function(t){return this.elem.getAttributeNS(null,t)},e.prototype.set=function(t,e){this.elem.setAttributeNS(null,t,e)},e.prototype.setBulk=function(t){if(null!==t)for(var e in t)t.hasOwnProperty(e)&&this.set(e,t[e])},e.prototype.addClass=function(t){this.elem.classList.add(t)},e.prototype.removeClass=function(t){this.elem.classList.remove(t)},e.prototype.addEventListener=function(t,e){this.elem.addEventListener(t,e)},e.prototype.removeEventListener=function(t,e){this.elem.removeEventListener(t,e)},e.prototype.appendChild=function(t){this.elem.appendChild(t.element())},e.prototype.removeChild=function(t){this.elem.removeChild(t.element())},e.prototype.element=function(){return this.elem},module.exports=t; //# sourceMappingURL=index.js.map