yetangitu/Oinktube
1
0
Fork 0
mirror of https://github.com/DanielnetoDotCom/YouPHPTube synced 2025-10-03 17:59:55 +02:00
Code Issues Releases Wiki Activity

Add js-circle-progress libs

Browse source
This commit is contained in:
DanieL 2022-09-08 12:40:21 -03:00
parent 2428c83de4
commit e184e09ec1
42 changed files with 25410 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

83
node_modules/js-circle-progress/docs/css/monokai-sublime.css generated vendored Normal file
View file

@ -0,0 +1,83 @@
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f;
}
.hljs,
.hljs-tag,
.hljs-subst {
color: #f8f8f2;
}
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #ae81ff;
}
.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #a6e22e;
}
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
color: #f92672;
}
.hljs-symbol,
.hljs-attribute {
color: #66d9ef;
}
.hljs-params,
.hljs-class .hljs-title {
color: #f8f8f2;
}
.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74;
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}

1
node_modules/js-circle-progress/docs/css/style.css generated vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
node_modules/js-circle-progress/docs/css/style.css.map generated vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/style.scss","../sass/_index.scss","../sass/_examples.scss"],"names":[],"mappings":"AAAA,KACC,uBACA,mBACA,SAED,IACC,SAED,EACC,WACA,iBACA,qBACA,gBAEA,gBAEC,WAKD,iCAEC,YACA,cAED,gBACC,WAIF,WACC,gBACA,YAGD,aACC,gBACA,aACA,0BCvCD,OACC,qBACA,kBACA,cACA,kCAED,iBACC,KACC,UACA,mBAED,IACC,UACA,qBAED,GACC,gBAIF,eACC,oCAED,qBACC,GACC,6BACA,mCAED,IACC,uCAED,IACC,uCAED,IACC,4BAED,KACC,gBAGF,OACC,cAEA,gBACC,kBACA,aACA,eACA,gBACA,kCAED,iBACC,yBACA,YAEA,qBACC,WACA,uBACC,uBACA,wBAIF,wCACC,iBACA,eAED,yCACC,iBACA,eAED,uCACC,aAED,6CACC,aAIA,wDACC,mBACA,qBACA,gBACA,eAED,yDACC,eACA,eACA,eAED,uDACC,aACA,eACA,eAKD,wDACC,wBACA,gBACA,qBACA,gBACC,KACC,sBACA,eAED,GACC,wBACA,gBAIH,yDACC,mBACA,eACA,eAED,uDACC,aACA,eACA,mBACA,UACA,eAKD,wDACC,8BACA,gBACA,qBACA,eACA,sBACC,GACC,wBAED,OACC,sBAED,KACC,uBAIH,yDACC,eACA,eAED,uDACC,aACA,eACA,yBAKD,wDACC,2BACA,gBACA,qBACA,eACA,mBACC,IACC,gBAED,IACC,eAED,KACC,YACA,gBAIH,yDACC,+BACA,eACA,eACA,uBACC,GACC,eAED,IACC,eAED,KACC,gBAIH,uDACC,aACA,eACA,yBAKD,wDACC,kCAED,yDACC,mCACA,eAED,0BACC,KACC,YAED,GACC,gBACA,YACA,qBAGF,2BACC,KACC,eAED,GACC,iBAGF,uDACC,UACA,eACA,mCAED,2DACC,aAED,6DACC,eAMF,kCACC,kCAED,iCACC,kBACA,eAID,uCACC,mCAqBA,2BACC,GACC,eAED,IACC,qBAED,IACC,qBAED,IACC,qBAED,IACC,qBAED,KACC,gBAIH,0DACC,kBACA,eAID,sDACC,kBACA,eAID,sDACC,kBACA,eAID,8HAGC,mBACA,UAIH,YACC,aACA,sBAED,iBACC,UAED,WACC,gBAED,SACC,UACA,iBACA,gEACA,sBAEA,cACC,kBACA,eAGF,eACC,kEACA,6BAGD,kBACC,GACC,2BAED,IACC,4BACA,UAED,IACC,eACA,UAED,KACC,eACA,WAIF,oBACC,GACC,eAED,IACC,eACA,kCAED,IACC,mCACA,kCAED,IACC,gBAIF,6CAGC,kBACA,UACA,eAED,+BAEC,4BAQD,cACC,gBC5YD,OACC,aACA,mBACA,cACA,0BAEA,SACC,WAEA,8BAEC,cAGF,UACC,kBAIF,SAEC,WACA,cACA,iBAKA,gBACA,kBALA,qCALD,SAME,cAMF,gBACC,uBACA,kBACA,YACA,qCAJD,gBAKE,WACA,mBACA,oBAMD,+CACC,YACA,aAIF,UACC,aACA,8BACA,gBAEA,gBACC,cACA,UACA,kBACA,gBACA,mBACA,SACA,gBACA,sBACC,mBACA,aAIF,gBACC,iBACA,WAED,6BACC,kBAED,2BACC,iBAIF,YACC,iBACA,mBACA,gBACA,cAED,OACC,WAED,gBACC,qBACA,cAED,qCACC,WAED,gBACC,aAGA,+DACC,WAED,8DACC,cAED,yCACC,cAED,0CACC,aAIF,MACC,mBACA,gBACA,WAOA,mCACC,iBACA,eAED,oCACC,iBACA,eAED,kCACC,aAKD,mCACC,iBACA,eACA,qBAED,oCACC,iBACA,YAED,kCACC,iBACA,aAKD,mCACC,iBACA,eACA,qBAED,oCACC,iBAKD,mCACC,kBACA,eAED,oCACC,kBACA,YAED,kCACC,UAKD,mCACC,iBACA,YACA,qBAED,oCACC,iBACA,YAED,kCACC,UAKD,mCACC,kBACA,eAED,oCACC,kBACA,eACA,aAED,kCACC,UACA,iBAKD,mCACC,kBACA,YACA,wBACA,qBAED,sDACC,aAED,oCACC,mBAED,kCACC,uDACA,eACA,iBACA,UAKD,mCACC,kBACA,eAED,oCACC,YACA,kBACA,UAED,kCACC,4BACA,eACA,UAKD,oCACC,iBACA,eAED,qCACC,YACA,iBAED,mCACC,4BACA,eAKD,oCACC,iBACA,YACA,sBAED,qCACC,iBACA,YACA,sBACA,sBAED,mCACC,qEACA,aACA,eAKD,oCACC,kBACA,eAED,qCACC,YACA,kBACA,UAED,mCACC,4BACA,eACA,UAKD,oCACC,kBACA,eACA,sBAED,qCACC,eACA,kBACA,aAED,mCACC,6CACA,eACA","file":"style.css"}

335
node_modules/js-circle-progress/docs/examples.html generated vendored Normal file
View file

@ -0,0 +1,335 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Examples - Circle Progress</title>
<meta name="description" content="Circle Progress examples. Circle Progress is responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JavaScript and jQuery plugin.">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:900|Varela+Round|Dosis:300">
<link rel="stylesheet" href="css/monokai-sublime.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="about">
<h1>Circle Progress examples</h1>
<p>Each example is accompanied by JavaScript and CSS code. You can switch between plain JS and jQuery snippets.</p>
<p>Read <a href="https://github.com/tigrr/circle-progress">the documentation on GitHub</a></p>
</div>
<div class="examples">
<div class="example">
<div class="example-figure">
<div class="progress progress-1"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'percent'});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 60, textFormat: 'percent'});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 6px;
stroke: hsl(39, 100%, 50%);
}
.circle-progress-circle {
stroke-width: 6px;
stroke: hsl(39, 100%, 85%);
}
.circle-progress-text {
fill: hsl(39, 100%, 50%);
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-2"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 60});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 60});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 6px;
stroke: hsl(320, 80%, 60%);
stroke-dasharray: 4 1;
}
.circle-progress-circle {
stroke-width: 6px;
stroke: #eee;
}
.circle-progress-text {
font-weight: bold;
fill: hsl(180, 80%, 47%);
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-3"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 60});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 60});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 6px;
stroke: hsl(280, 90%, 50%);
stroke-linecap: round;
}
.circle-progress-circle {
stroke-width: 2px;
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-4"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'vertical'});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 60, textFormat: 'vertical'});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 50px;
stroke: hsl(160, 63%, 55%);
}
.circle-progress-circle {
stroke-width: 50px;
stroke: #999;
}
.circle-progress-text {
fill: white;
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-5"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'vertical'});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 60, textFormat: 'vertical'});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 6px;
stroke: white;
stroke-linecap: round;
}
.circle-progress-circle {
stroke-width: 8px;
stroke: #888;
}
.circle-progress-text {
fill: #888;
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-6"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'vertical'});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 60, textFormat: 'vertical'});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 50px;
stroke: hsl(100, 90%, 70%);
}
.circle-progress-circle {
stroke-width: 40px;
stroke: hsl(100, 15%, 60%);
fill: hsl(100, 15%, 60%);
}
.circle-progress-text {
fill: white;
font-weight: bold;
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-7"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 12, value: 9, textFormat: function(value, max) {return value + ' dots';}});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 12, value: 9, textFormat: function(value, max) {return value + ' dots';}});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 11px;
stroke: aqua;
stroke-dasharray: 0 23.3;
stroke-linecap: round;
}
.progress[aria-valuenow="0"] .circle-progress-value {
display: none;
}
.circle-progress-circle {
stroke: transparent;
}
.circle-progress-text {
font-family: "Gotham rounded";
font-size: 13px;
fill: fuchsia;
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-8"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 40, textFormat: 'valueOnCircle'});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 40, textFormat: 'valueOnCircle'});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">
</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-9"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 40, textFormat: 'percent'});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 40, textFormat: 'percent'});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 12px;
stroke: hsl(210, 100%, 45%);
}
.circle-progress-circle {
stroke: white;
stroke-width: 22px;
fill: #666;
}
.circle-progress-text {
font-family: "Georgia";
font-size: 13px;
fill: white;
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-10"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 80, textFormat: 'percent'});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 80, textFormat: 'percent'});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 2px;
stroke: aquamarine;
}
.circle-progress-circle {
stroke: #ddd;
stroke-width: 2px;
}
.circle-progress-text {
font-family: "Georgia";
font-size: 13px;
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-11"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'percent'});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 60, textFormat: 'percent'});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 6px;
stroke: hsl(100, 100%, 60%);
stroke-dasharray: 0.6 3;
}
.circle-progress-circle {
stroke-width: 6px;
stroke: #ddd;
stroke-dasharray: 0.6 3;
stroke-dashoffset: 1.6;
}
.circle-progress-text {
font-family: "Gotham Rounded Light";
fill: hsl(100, 81%, 55%);
font-size: 26px;
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-12"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 100, value: 75, textFormat: 'percent', startAngle: -90});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 100, value: 75, textFormat: 'percent', startAngle: -90});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 12px;
stroke: darkmagenta;
}
.circle-progress-circle {
stroke: white;
stroke-width: 11px;
fill: #666;
}
.circle-progress-text {
font-family: "Georgia";
font-size: 13px;
fill: white;
}</code></pre>
</div>
<div class="example">
<div class="example-figure">
<div class="progress progress-13"></div>
</div>
<h3><a class="select-variant" href="#vanilla" data-variant="vanilla">JS</a><span class="slash"> / </span><a class="select-variant" href="#jquery" data-variant="jquery">jQuery</a></h3>
<pre class="variant-vanilla"><code class="code js">new CircleProgress('.progress', {max: 4, value: 3, textFormat: 'vertical', clockwise: false, animation: 'none'});</code></pre>
<pre class="variant-jquery"><code class="code js">$('.progress').circleProgress({max: 4, value: 3, textFormat: 'vertical', clockwise: false, animation: 'none'});</code></pre>
<h3>CSS</h3>
<pre><code class="code css">.circle-progress-value {
stroke-width: 25px;
stroke: hsl(210, 100%, 45%);
stroke-dasharray: 58 1;
}
.circle-progress-circle {
stroke: hsl(210, 100%, 85%);
stroke-width: 25px;
fill: hsl(210, 100%, 85%);
}
.circle-progress-text {
font-family: "Gotham";
font-size: 16px;
fill: hsl(210, 100%, 45%);
}</code></pre>
</div>
</div><!-- .examples -->
<footer class="site-footer">
© 2018 <a href="https://github.com/tigrr">Tigran Sargsyan</a>
</footer>
</div><!-- .container -->
<!-- <script src="../lib/jquery-3.3.1.js"></script> -->
<!-- <script src="../lib/jquery.ui.widget.js"></script> -->
<script src="js/highlight.pack.js"></script>
<!-- <script src="../src/innersvg.js"></script>
<script src="../src/svgpaper.js"></script>
<script src="../src/animator.js"></script>
<script src="../src/circle-progress.js"></script> -->
<script src="js/circle-progress.js"></script>
<!-- <script src="//github.com/tigrr/circle-progress/raw/master/dist/circle-progress.js"></script> -->
<!-- <script src="../dist/jquery.circle-progress.js"></script> -->
<script src="js/demo.js"></script>
</body>
</html>

56
node_modules/js-circle-progress/docs/index.html generated vendored Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Progress: JavaScript circular progress bar plugin</title>
<meta name="description" content="Circle Progress is responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JavaScript and jQuery plugin.">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="css/monokai-sublime.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="intro">
<div class="example">
<div class="progress"></div>
<div class="intro-text">
<div class="intro-text-body">
<h1 class="intro-heading">Meet Circle Progress!</h1>
<ul class="qualities">
<li class="quality responsive"><div class="quality-inner"><span class="check">✔</span> Responsive</div></li>
<li class="quality animated"><div class="quality-inner"><span class="check">✔</span> Animated</div></li>
<li class="quality stylable"><div class="quality-inner"><span class="check">✔</span> Stylable with CSS</div></li>
<li class="quality accessible"><div class="quality-inner"><span class="check">✔</span> Accessible</div></li>
</ul>
<p class="quality-last">circular progressbar, available as vanilla JS and jQuery plugin.
<p class="quality-lastest">Read <a href="https://github.com/tigrr/circle-progress">📄 the docs</a> and see <a href="examples.html">🎨 examples</a>
</div>
<footer class="intro-footer">
© 2018 <a href="https://github.com/tigrr">Tigran Sargsyan</a>
</footer>
</div>
</div>
</div><!-- .intro -->
</div>
<!-- <script src="../lib/jquery-3.3.1.js"></script> -->
<!-- <script src="../lib/jquery.ui.widget.js"></script> -->
<script src="js/highlight.pack.js"></script>
<!-- <script src="../src/innersvg.js"></script>
<script src="../src/svgpaper.js"></script>
<script src="../src/animator.js"></script>
<script src="../src/circle-progress.js"></script> -->
<script src="js/circle-progress.js"></script>
<!-- <script src="//github.com/tigrr/circle-progress/raw/master/dist/circle-progress.js"></script> -->
<!-- <script src="../dist/jquery.circle-progress.js"></script> -->
<script src="js/home.js"></script>
</body>
</html>

936
node_modules/js-circle-progress/docs/js/circle-progress.js generated vendored Normal file
View file

@ -0,0 +1,936 @@
/*!
* Circle Progress - v0.2.4 - 2022-05-16
* https://tigrr.github.io/circle-progress/
* Copyright (c) Tigran Sargsyan
* Licensed MIT
*/
'use strict';
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if ((typeof module === "undefined" ? "undefined" : _typeof(module)) === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.CircleProgress = factory();
}
})(typeof self !== 'undefined' ? self : void 0, function () {
// Source: https://github.com/rogodec/svg-innerhtml-polyfill
(function () {
try {
if (typeof SVGElement === 'undefined' || Boolean(SVGElement.prototype.innerHTML)) {
return;
}
} catch (e) {
return;
}
function serializeNode(node) {
switch (node.nodeType) {
case 1:
return serializeElementNode(node);
case 3:
return serializeTextNode(node);
case 8:
return serializeCommentNode(node);
}
}
function serializeTextNode(node) {
return node.textContent.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
function serializeCommentNode(node) {
return '<!--' + node.nodeValue + '-->';
}
function serializeElementNode(node) {
var output = '';
output += '<' + node.tagName;
if (node.hasAttributes()) {
[].forEach.call(node.attributes, function (attrNode) {
output += ' ' + attrNode.name + '="' + attrNode.value + '"';
});
}
output += '>';
if (node.hasChildNodes()) {
[].forEach.call(node.childNodes, function (childNode) {
output += serializeNode(childNode);
});
}
output += '</' + node.tagName + '>';
return output;
}
Object.defineProperty(SVGElement.prototype, 'innerHTML', {
get: function get() {
var output = '';
[].forEach.call(this.childNodes, function (childNode) {
output += serializeNode(childNode);
});
return output;
},
set: function set(markup) {
while (this.firstChild) {
this.removeChild(this.firstChild);
}
try {
var dXML = new DOMParser();
dXML.async = false;
var sXML = '<svg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'>' + markup + '</svg>';
var svgDocElement = dXML.parseFromString(sXML, 'text/xml').documentElement;
[].forEach.call(svgDocElement.childNodes, function (childNode) {
this.appendChild(this.ownerDocument.importNode(childNode, true));
}.bind(this));
} catch (e) {
throw new Error('Error parsing markup string');
}
}
});
Object.defineProperty(SVGElement.prototype, 'innerSVG', {
get: function get() {
return this.innerHTML;
},
set: function set(markup) {
this.innerHTML = markup;
}
});
})();
'use strict';
var svgpaper = function () {
var paper, paperproto, _element, elementproto;
/**
* Create new paper holding a new SVG element
* @param {(HTMLElement|string)} container Container element or selector string
* @param {(number|string)} width SVG width
* @param {(number|string)} height SVG height
* @param {Document} [doc=document] HTML document. Defaults to current document
* @return {Object} The paper
*/
paper = function paper(container, width, height, doc) {
var svg, me;
doc = doc || document;
me = Object.create(paperproto);
if (typeof container === 'string') container = doc.querySelector(container);
if (!container) return;
svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('version', '1.1');
if (width) svg.setAttribute('width', width);
if (height) svg.setAttribute('height', height);
if (width && height) svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
container.appendChild(svg);
me.svg = svg;
return me;
};
paperproto = {
/**
* Create a new SVG element
* @param {string} name Element name
* @param {Object} attrs Map of attributes
* @param {string} content Element content
* @param {SVGElement} [parent] An element to append to. Defaults to the root SVG element
* @return {object} Element
*/
element: function element(name, attrs, content, parent) {
var el;
el = _element(this, name, attrs, parent);
if (content) el.el.innerHTML = content;
return el;
}
};
/**
* General purpose element maker
* @param {Object} paper SVG Paper
* @param {string} name Element tag name
* @param {Object} attrs Attributes for the element
* @param {SVGElement} [parent] Another SVG Element to append the
* @param {Document} [doc] Document
* @return {Object} Element
*/
_element = function _element(paper, name, attrs, parent, doc) {
var attrNames, me;
doc = doc || document;
me = Object.create(elementproto);
me.el = doc.createElementNS('http://www.w3.org/2000/svg', name);
me.attr(attrs);
(parent ? parent.el || parent : paper.svg).appendChild(me.el);
return me;
};
elementproto = {
/**
* Set an attribute to a value
* @param {string} name Attribute name
* @param {*} value Attribute value
* @return {object} The element
* */
/**
* Set attributes
* @param {object} attrs Map of name - values
* @return {object} The element
*/
attr: function attr(name, value) {
if (name === undefined) return this;
if (_typeof(name) === 'object') {
for (var key in name) {
this.attr(key, name[key]);
}
return this;
}
if (value === undefined) return this.el.getAttributeNS(null, name);
this.el.setAttribute(name, value);
return this;
},
/**
* Set content (innerHTML) for the element
* @param {string} content String of SVG
* @return {object} The element
*/
content: function content(_content) {
this.el.innerHTML = _content;
return this;
}
}; // Export paper.
return paper;
}();
'use strict';
/**
* Change any value using an animation easing function.
* @param {string} Easing function.
* @param {number} The initial value
* @param {number} Change in value
* @param {number} Animation duration
* @param {Function} Callback to be called on each iteration. The callback is passed one argument: current value.
*/
var animator = function animator(easing, startValue, valueChange, dur, cb) {
var easeFunc = typeof easing === 'string' ? animator.easings[easing] : easing;
var tStart;
var frame = function frame(t) {
if (!tStart) tStart = t;
t -= tStart;
t = Math.min(t, dur);
var curVal = easeFunc(t, startValue, valueChange, dur);
cb(curVal);
if (t < dur) requestAnimationFrame(frame);else cb(startValue + valueChange);
};
requestAnimationFrame(frame);
};
/**
* Map of easings' strings to functions
* Easing functions from http://gizma.com/easing/
* @type {Object}
*/
animator.easings = {
linear: function linear(t, b, c, d) {
return c * t / d + b;
},
easeInQuad: function easeInQuad(t, b, c, d) {
t /= d;
return c * t * t + b;
},
easeOutQuad: function easeOutQuad(t, b, c, d) {
t /= d;
return -c * t * (t - 2) + b;
},
easeInOutQuad: function easeInOutQuad(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
},
easeInCubic: function easeInCubic(t, b, c, d) {
t /= d;
return c * t * t * t + b;
},
easeOutCubic: function easeOutCubic(t, b, c, d) {
t /= d;
t--;
return c * (t * t * t + 1) + b;
},
easeInOutCubic: function easeInOutCubic(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t * t + b;
t -= 2;
return c / 2 * (t * t * t + 2) + b;
},
easeInQuart: function easeInQuart(t, b, c, d) {
t /= d;
return c * t * t * t * t + b;
},
easeOutQuart: function easeOutQuart(t, b, c, d) {
t /= d;
t--;
return -c * (t * t * t * t - 1) + b;
},
easeInOutQuart: function easeInOutQuart(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t * t * t + b;
t -= 2;
return -c / 2 * (t * t * t * t - 2) + b;
},
easeInQuint: function easeInQuint(t, b, c, d) {
t /= d;
return c * t * t * t * t * t + b;
},
easeOutQuint: function easeOutQuint(t, b, c, d) {
t /= d;
t--;
return c * (t * t * t * t * t + 1) + b;
},
easeInOutQuint: function easeInOutQuint(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t * t * t * t + b;
t -= 2;
return c / 2 * (t * t * t * t * t + 2) + b;
},
easeInSine: function easeInSine(t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOutSine: function easeOutSine(t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOutSine: function easeInOutSine(t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
},
easeInExpo: function easeInExpo(t, b, c, d) {
return c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOutExpo: function easeOutExpo(t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOutExpo: function easeInOutExpo(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
t--;
return c / 2 * (-Math.pow(2, -10 * t) + 2) + b;
},
easeInCirc: function easeInCirc(t, b, c, d) {
t /= d;
return -c * (Math.sqrt(1 - t * t) - 1) + b;
},
easeOutCirc: function easeOutCirc(t, b, c, d) {
t /= d;
t--;
return c * Math.sqrt(1 - t * t) + b;
},
easeInOutCirc: function easeInOutCirc(t, b, c, d) {
t /= d / 2;
if (t < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
t -= 2;
return c / 2 * (Math.sqrt(1 - t * t) + 1) + b;
}
};
/* globals svgpaper, animator */
var CircleProgress = function () {
/**
* Utility functions
* @type {Object}
*/
var util = {
/**
* Mathematical functions
* @type {Object}
*/
math: {
/**
* Convert polar coordinates (radius, angle) to cartesian ones (x, y)
* @param {float} r Radius
* @param {float} angle Angle
* @return {object} Cartesian coordinates as object: {x, y}
*/
polarToCartesian: function polarToCartesian(r, angle) {
return {
x: r * Math.cos(angle * Math.PI / 180),
y: r * Math.sin(angle * Math.PI / 180)
};
}
}
};
/**
* Create a new Circle Progress bar
* @global
* @class Circle Progress class
*/
var CircleProgress = /*#__PURE__*/function () {
_createClass(CircleProgress, [{
key: "value",
get: function get() {
return this._attrs.value;
},
set: function set(val) {
this.attr('value', val);
}
}, {
key: "min",
get: function get() {
return this._attrs.min;
},
set: function set(val) {
this.attr('min', val);
}
}, {
key: "max",
get: function get() {
return this._attrs.max;
},
set: function set(val) {
this.attr('max', val);
}
}, {
key: "startAngle",
get: function get() {
return this._attrs.startAngle;
},
set: function set(val) {
this.attr('startAngle', val);
}
}, {
key: "clockwise",
get: function get() {
return this._attrs.clockwise;
},
set: function set(val) {
this.attr('clockwise', val);
}
}, {
key: "constrain",
get: function get() {
return this._attrs.constrain;
},
set: function set(val) {
this.attr('constrain', val);
}
}, {
key: "indeterminateText",
get: function get() {
return this._attrs.indeterminateText;
},
set: function set(val) {
this.attr('indeterminateText', val);
}
}, {
key: "textFormat",
get: function get() {
return this._attrs.textFormat;
},
set: function set(val) {
this.attr('textFormat', val);
}
}, {
key: "animation",
get: function get() {
return this._attrs.animation;
},
set: function set(val) {
this.attr('animation', val);
}
}, {
key: "animationDuration",
get: function get() {
return this._attrs.animationDuration;
},
set: function set(val) {
this.attr('animationDuration', val);
}
/**
* Construct the new CircleProgress instance
* @constructs
* @param {(HTMLElement|string)} el Either HTML element or a selector string
* @param {Object} opts Options
* @param {Document} [doc] Document
*/
}]);
function CircleProgress(el) {
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var doc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document;
_classCallCheck(this, CircleProgress);
var circleThickness;
if (typeof el === 'string') el = doc.querySelector(el);
if (!el) throw new Error('CircleProgress: you must pass the container element as the first argument'); // If element is already circleProgress, return the circleProgress object.
if (el.circleProgress) return el.circleProgress;
el.circleProgress = this;
this.doc = doc;
el.setAttribute('role', 'progressbar');
this.el = el;
opts = _objectSpread(_objectSpread({}, CircleProgress.defaults), opts);
Object.defineProperty(this, '_attrs', {
value: {},
enumerable: false
});
circleThickness = opts.textFormat === 'valueOnCircle' ? 16 : 8;
this.graph = {
paper: svgpaper(el, 100, 100),
value: 0
};
this.graph.paper.svg.setAttribute('class', 'circle-progress');
this.graph.circle = this.graph.paper.element('circle').attr({
"class": 'circle-progress-circle',
cx: 50,
cy: 50,
r: 50 - circleThickness / 2,
fill: 'none',
stroke: '#ddd',
'stroke-width': circleThickness
});
this.graph.sector = this.graph.paper.element('path').attr({
d: CircleProgress._makeSectorPath(50, 50, 50 - circleThickness / 2, 0, 0),
"class": 'circle-progress-value',
fill: 'none',
stroke: '#00E699',
'stroke-width': circleThickness
});
this.graph.text = this.graph.paper.element('text', {
"class": 'circle-progress-text',
x: 50,
y: 50,
'font': '16px Arial, sans-serif',
'text-anchor': 'middle',
fill: '#999'
});
this._initText();
this.attr(['indeterminateText', 'textFormat', 'startAngle', 'clockwise', 'animation', 'animationDuration', 'constrain', 'min', 'max', 'value'].filter(function (key) {
return key in opts;
}).map(function (key) {
return [key, opts[key]];
}));
}
/**
* Set attributes
* @param {(Array|Object)} attrs Attributes as an array [[key,value],...] or map {key: value,...}
* @return {CircleProgress} The CircleProgress instance
*/
_createClass(CircleProgress, [{
key: "attr",
value: function attr(attrs) {
var _this = this;
if (typeof attrs === 'string') {
if (arguments.length === 1) return this._attrs[attrs];
this._set(arguments[0], arguments[1]);
this._updateGraph();
return this;
} else if (_typeof(attrs) !== 'object') {
throw new TypeError("Wrong argument passed to attr. Expected object, got \"".concat(_typeof(attrs), "\""));
}
if (!Array.isArray(attrs)) {
attrs = Object.keys(attrs).map(function (key) {
return [key, attrs[key]];
});
}
attrs.forEach(function (attr) {
return _this._set(attr[0], attr[1]);
});
this._updateGraph();
return this;
}
/**
* Set an attribute to a value
* @private
* @param {string} key Attribute name
* @param {*} val Attribute value
*/
}, {
key: "_set",
value: function _set(key, val) {
var ariaAttrs = {
value: 'aria-valuenow',
min: 'aria-valuemin',
max: 'aria-valuemax'
},
circleThickness;
val = this._formatValue(key, val);
if (val === undefined) throw new TypeError("Failed to set the ".concat(key, " property on CircleProgress: The provided value is non-finite."));
if (this._attrs[key] === val) return;
if (key === 'min' && val >= this.max) return;
if (key === 'max' && val <= this.min) return;
if (key === 'value' && val !== undefined && this.constrain) {
if (this.min != null && val < this.min) val = this.min;
if (this.max != null && val > this.max) val = this.max;
}
this._attrs[key] = val;
if (key in ariaAttrs) {
if (val !== undefined) this.el.setAttribute(ariaAttrs[key], val);else this.el.removeAttribute(ariaAttrs[key]);
}
if (['min', 'max', 'constrain'].indexOf(key) !== -1 && (this.value > this.max || this.value < this.min)) {
this.value = Math.min(this.max, Math.max(this.min, this.value));
}
if (key === 'textFormat') {
this._initText();
circleThickness = val === 'valueOnCircle' ? 16 : 8;
this.graph.sector.attr('stroke-width', circleThickness);
this.graph.circle.attr('stroke-width', circleThickness);
}
}
/**
* Format attribute value according to its type
* @private
* @param {string} key Attribute name
* @param {*} val Attribute value
* @return {*} Formatted attribute value
*/
}, {
key: "_formatValue",
value: function _formatValue(key, val) {
switch (key) {
case 'value':
case 'min':
case 'max':
val = parseFloat(val);
if (!isFinite(val)) val = undefined;
break;
case 'startAngle':
val = parseFloat(val);
if (!isFinite(val)) val = undefined;else val = Math.max(0, Math.min(360, val));
break;
case 'clockwise':
case 'constrain':
val = !!val;
break;
case 'indeterminateText':
val = '' + val;
break;
case 'textFormat':
if (typeof val !== 'function' && ['valueOnCircle', 'horizontal', 'vertical', 'percent', 'value', 'none'].indexOf(val) === -1) {
throw new Error("Failed to set the \"textFormat\" property on CircleProgress: the provided value \"".concat(val, "\" is not a legal textFormat identifier."));
}
break;
case 'animation':
if (typeof val !== 'string' && typeof val !== 'function') {
throw new TypeError("Failed to set \"animation\" property on CircleProgress: the value must be either string or function, ".concat(_typeof(val), " passed."));
}
if (typeof val === 'string' && val !== 'none' && !animator.easings[val]) {
throw new Error("Failed to set \"animation\" on CircleProgress: the provided value ".concat(val, " is not a legal easing function name."));
}
break;
}
return val;
}
/**
* Convert current value to angle
* The caller is responsible to check if the state is not indeterminate.
* This is done for optimization purposes as this method is called from within an animation.
* @private
* @return {float} Angle in degrees
*/
}, {
key: "_valueToAngle",
value: function _valueToAngle() {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.value;
return Math.min(360, Math.max(0, (value - this.min) / (this.max - this.min) * 360));
}
/**
* Check wether the progressbar is in indeterminate state
* @private
* @return {bool} True if the state is indeterminate, false if it is determinate
*/
}, {
key: "_isIndeterminate",
value: function _isIndeterminate() {
return !(typeof this.value === 'number' && typeof this.max === 'number' && typeof this.min === 'number');
}
/**
* Make sector path for use in the "d" path attribute
* @private
* @param {float} cx Center x
* @param {float} cy Center y
* @param {float} r Radius
* @param {float} startAngle Start angle relative to straight upright axis
* @param {float} angle Angle to rotate relative to straight upright axis
* @param {bool} clockwise Direction of rotation. Clockwise if truethy, anticlockwise if falsy
* @return {string} Path string
*/
}, {
key: "_positionValueText",
/**
* Position the value text on the circle
* @private
* @param {float} angle Angle at which to position the text
* @param {float} r Circle radius measured to the middle of the stroke
* as returned by {@link CircleProgress#_getRadius}, where text should be.
* The radius is passed rather than calculated inside the function
* for optimization purposes as this method is called from within an animation.
*/
value: function _positionValueText(angle, r) {
var coords = util.math.polarToCartesian(r, angle);
this.graph.textVal.attr({
x: 50 + coords.x,
y: 50 + coords.y
});
}
/**
* Generate text representation of the values based on {@link CircleProgress#textFormat}
* @private
* TODO: Remove offsets in em when support for IE is dropped
*/
}, {
key: "_initText",
value: function _initText() {
this.graph.text.content('');
switch (this.textFormat) {
case 'valueOnCircle':
this.graph.textVal = this.graph.paper.element('tspan', {
x: 0,
y: 0,
dy: '0.4em',
"class": 'circle-progress-text-value',
'font-size': '12',
fill: this.textFormat === 'valueOnCircle' ? '#fff' : '#888'
}, '', this.graph.text);
this.graph.textMax = this.graph.paper.element('tspan', {
x: 50,
y: 50,
"class": 'circle-progress-text-max',
'font-size': '22',
'font-weight': 'bold',
fill: '#ddd'
}, '', this.graph.text); // IE
if (!this.graph.text.el.hasAttribute('dominant-baseline')) this.graph.textMax.attr('dy', '0.4em');
break;
case 'horizontal':
this.graph.textVal = this.graph.paper.element('tspan', {
"class": 'circle-progress-text-value'
}, '', this.graph.text);
this.graph.textSeparator = this.graph.paper.element('tspan', {
"class": 'circle-progress-text-separator'
}, '/', this.graph.text);
this.graph.textMax = this.graph.paper.element('tspan', {
"class": 'circle-progress-text-max'
}, '', this.graph.text);
break;
case 'vertical':
if (this.graph.text.el.hasAttribute('dominant-baseline')) this.graph.text.attr('dominant-baseline', 'text-after-edge');
this.graph.textVal = this.graph.paper.element('tspan', {
"class": 'circle-progress-text-value',
x: 50,
dy: '-0.2em'
}, '', this.graph.text);
this.graph.textSeparator = this.graph.paper.element('tspan', {
"class": 'circle-progress-text-separator',
x: 50,
dy: '0.1em',
"font-family": "Arial, sans-serif"
}, '___', this.graph.text);
this.graph.textMax = this.graph.paper.element('tspan', {
"class": 'circle-progress-text-max',
x: 50,
dy: '1.2em'
}, '', this.graph.text);
break;
}
if (this.textFormat !== 'vertical') {
if (this.graph.text.el.hasAttribute('dominant-baseline')) this.graph.text.attr('dominant-baseline', 'central'); // IE
else this.graph.text.attr('dy', '0.4em');
}
}
/**
* Update graphics
* @private
*/
}, {
key: "_updateGraph",
value: function _updateGraph() {
var _this2 = this;
var startAngle = this.startAngle - 90;
var r = this._getRadius();
if (!this._isIndeterminate()) {
var clockwise = this.clockwise;
var angle = this._valueToAngle();
this.graph.circle.attr('r', r);
if (this.animation !== 'none' && this.value !== this.graph.value) {
animator(this.animation, this.graph.value, this.value - this.graph.value, this.animationDuration, function (value) {
_this2._updateText(Math.round(value), (2 * startAngle + angle) / 2, r);
angle = _this2._valueToAngle(value);
_this2.graph.sector.attr('d', CircleProgress._makeSectorPath(50, 50, r, startAngle, angle, clockwise));
});
} else {
this.graph.sector.attr('d', CircleProgress._makeSectorPath(50, 50, r, startAngle, angle, clockwise));
this._updateText(this.value, (2 * startAngle + angle) / 2, r);
}
this.graph.value = this.value;
} else {
this._updateText(this.value, startAngle, r);
}
}
/**
* Update texts
*/
}, {
key: "_updateText",
value: function _updateText(value, angle, r) {
if (typeof this.textFormat === 'function') {
this.graph.text.content(this.textFormat(value, this.max));
} else if (this.textFormat === 'value') {
this.graph.text.el.textContent = value !== undefined ? value : this.indeterminateText;
} else if (this.textFormat === 'percent') {
this.graph.text.el.textContent = (value !== undefined && this.max != null ? Math.round(value / this.max * 100) : this.indeterminateText) + '%';
} else if (this.textFormat === 'none') {
this.graph.text.el.textContent = '';
} else {
this.graph.textVal.el.textContent = value !== undefined ? value : this.indeterminateText;
this.graph.textMax.el.textContent = this.max !== undefined ? this.max : this.indeterminateText;
}
if (this.textFormat === 'valueOnCircle') {
this._positionValueText(angle, r);
}
}
/**
* Get circles' radius based on the calculated stroke widths of the value path and circle
* @private
* @return {float} The radius
*/
}, {
key: "_getRadius",
value: function _getRadius() {
return 50 - Math.max(parseFloat(this.doc.defaultView.getComputedStyle(this.graph.circle.el, null)['stroke-width']), parseFloat(this.doc.defaultView.getComputedStyle(this.graph.sector.el, null)['stroke-width'])) / 2;
}
}], [{
key: "_makeSectorPath",
value: function _makeSectorPath(cx, cy, r, startAngle, angle, clockwise) {
clockwise = !!clockwise;
if (angle > 0 && angle < 0.3) {
// Tiny angles smaller than ~0.3° can produce weird-looking paths
angle = 0;
} else if (angle > 359.999) {
// If progress is full, notch it back a little, so the path doesn't become 0-length
angle = 359.999;
}
var endAngle = startAngle + angle * (clockwise * 2 - 1),
startCoords = util.math.polarToCartesian(r, startAngle),
endCoords = util.math.polarToCartesian(r, endAngle),
x1 = cx + startCoords.x,
x2 = cx + endCoords.x,
y1 = cy + startCoords.y,
y2 = cy + endCoords.y;
return ["M", x1, y1, "A", r, r, 0, +(angle > 180), +clockwise, x2, y2].join(' ');
}
}]);
return CircleProgress;
}();
CircleProgress.defaults = {
startAngle: 0,
min: 0,
max: 1,
constrain: true,
indeterminateText: '?',
clockwise: true,
textFormat: 'horizontal',
animation: 'easeInOutCubic',
animationDuration: 600
}; // Export circleProgress.
return CircleProgress;
}(); // Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return CircleProgress;
});

101
node_modules/js-circle-progress/docs/js/demo.js generated vendored Normal file
View file

@ -0,0 +1,101 @@
'use strict';
// IE11 polyfills
if (!Element.prototype.matches)
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this;
if (!document.documentElement.contains(el)) return null;
do {
if (el.matches(s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
// Examples
var options = [
{max: 100, value: 60, textFormat: 'percent'},
{max: 100, value: 60},
{max: 100, value: 60},
{max: 100, value: 60, textFormat: 'vertical'},
{max: 100, value: 60, textFormat: 'vertical'},
{max: 100, value: 60, textFormat: 'vertical'},
{max: 12, value: 9, textFormat: function(value, max) {
return value + ' dots';
}},
{max: 100, value: 40, textFormat: 'valueOnCircle'},
{max: 100, value: 40, textFormat: 'percent'},
{max: 100, value: 80, textFormat: 'percent'},
{max: 100, value: 60, textFormat: 'percent'},
{max: 100, value: 75, textFormat: 'percent', startAngle: -90},
{max: 4, value: 3, textFormat: 'vertical', clockwise: false, animation: 'none'},
];
options.forEach(function(opts, i) {
var exampleEl = document.querySelector('.example:nth-child(' + (i + 1) + ')');
new CircleProgress(exampleEl.querySelector('.progress'), opts);
// $(exampleEl.querySelector('.progress')).circleProgress(opts);
var optsStr = '{\n';
for(var name in opts) {
var value = opts[name];
if(typeof value === 'string') {
value = '\'' + value + '\'';
}
optsStr += '\t' + name + ': ' + value + ',\n';
}
optsStr += '}';
exampleEl.querySelector('.variant-vanilla code').innerText = 'new CircleProgress(\'.progress\', ' + optsStr + ');';
exampleEl.querySelector('.variant-jquery code').innerText = '$(\'.progress\').circleProgress(' + optsStr + ');';
exampleEl.querySelector('.example-figure').insertAdjacentHTML('beforeend', '<div class="controls">' +
'<label><input type="number" name="min" value="0">min</label>' +
'<label><input type="number" name="value" value="' + opts.value + '">value</label>' +
'<label><input type="number" name="max" value="' + opts.max + '">max</label>' +
'</div>');
});
hljs.initHighlightingOnLoad();
Array.prototype.slice.call(document.querySelectorAll('.select-variant')).forEach(function(btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
if(this.dataset.variant === 'vanilla') {
document.body.classList.remove('show-variant-jquery');
document.body.classList.add('show-variant-vanilla');
} else {
document.body.classList.remove('show-variant-vanilla');
document.body.classList.add('show-variant-jquery');
}
});
});
Array.prototype.slice.call(document.querySelectorAll('.code')).forEach(function(el) {
el.addEventListener('click', function() {
var r = document.createRange();
r.selectNode(this);
var s = document.getSelection();
s.empty();
s.addRange(r);
});
});
document.body.addEventListener('change', function(e) {
if(e.target.nodeName !== 'INPUT') return;
var key = e.target.name;
var exampleEl = e.target.closest('.example');
var cp = exampleEl.querySelector('.progress').circleProgress;
cp[key] = e.target.value;
Array.prototype.slice.call(exampleEl.querySelectorAll('.controls input')).forEach(function(input) {
input.value = cp[input.name];
});
});

2
node_modules/js-circle-progress/docs/js/highlight.pack.js generated vendored Normal file
View file

File diff suppressed because one or more lines are too long

57
node_modules/js-circle-progress/docs/js/home.js generated vendored Normal file
View file

@ -0,0 +1,57 @@
'use strict';
var introEl = document.querySelector('.intro');
var cp = new CircleProgress(document.querySelector('.progress'), {max: 100, value: 60, textFormat: 'value', animation: 'easeInOutCubic'});
cp.graph.paper.svg.setAttribute('viewBox', '-10 -10 120 120');
setTimeout(function() {
introEl.dataset.demo = 'responsive';
}, 3000);
setTimeout(function() {
introEl.dataset.demo = 'animated';
setTimeout(function() {
cp.value = 90;
setTimeout(function() {
cp.value = 20;
}, 800);
setTimeout(function() {
cp.value = 60;
}, 1600);
}, 700);
}, 5700);
setTimeout(function() {
introEl.dataset.demo = 'stylable';
var i = 0;
var interv = setInterval(function() {
i += 1;
if(i === 6) {
cp.textFormat = 'valueOnCircle';
cp.graph.text.el.style.transition = 'none';
cp.graph.text.el.style.transform = 'none';
clearInterval(interv);
return;
}
cp.el.dataset.style = i;
if(i === 5) {
updateGraph();
setTimeout(function() {
introEl.dataset.demo = 'accessible';
}, 700);
}
}, 1600);
function updateGraph() {
cp._updateGraph();
if(i < 6) {
requestAnimationFrame(updateGraph);
}
}
}, 8500);
setTimeout(function() {
introEl.dataset.demo = 'finished';
}, 19000);

316
node_modules/js-circle-progress/docs/sass/_examples.scss generated vendored Normal file
View file

@ -0,0 +1,316 @@
.about {
padding: 25px;
background: hsl(0, 0%, 22%);
color: hsl(0, 0%, 92%);
border-radius: 0 0 3px 3px;
a {
color: hsl(210, 100%, 60%);
&:hover,
&:focus {
color: hsl(240, 90%, 80%);
}
}
h1 {
text-align: center;
}
}
.example {
@extend %clearfix;
clear: both;
margin: 30px 0;
padding: 10px 5px;
@media screen and (min-width: 50rem) {
padding: 25px;
// box-shadow: 1px 1px 7px rgba(0, 0, 0, .3);
}
background: white;
border-radius: 3px;
}
.example-figure {
width: -moz-min-content;
width: min-content;
margin: auto;
@media screen and (min-width: 50rem) {
float: left;
padding-top: 2.4rem;
padding-right: 80px;
}
}
[class^="progress"],
[class*=" progress"] {
> svg {
width: 300px;
height: 300px;
}
}
.controls {
display: flex;
justify-content: space-between;
margin-top: 20px;
input {
display: block;
width: 4em;
padding: .3em .6em;
text-align: left;
background: hsl(0, 0%, 85%);
border: 0;
font-size: .85em;
&:focus {
background: hsl(0, 0%, 70%);
outline: none;
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
}
label {
font-weight: bold;
color: hsl(0, 0%, 40%);
}
label:nth-child(2) {
text-align: center;
}
label:last-child {
text-align: right;
}
}
.example h3 {
font-size: 1.1rem;
line-height: 1.4rem;
margin: 1rem 0 0;
color: hsl(14, 80%, 50%);
}
.slash {
color: gray;
}
.select-variant {
text-decoration: none;
color: inherit;
}
.select-variant[data-variant=jquery] {
color: gray;
}
.variant-jquery {
display: none;
}
body.show-variant-jquery {
.select-variant[data-variant=vanilla] {
color: gray;
}
.select-variant[data-variant=jquery] {
color: inherit;
}
.variant-jquery {
display: block;
}
.variant-vanilla {
display: none;
}
}
.code {
background: hsl(0, 0%, 22%);
-moz-tab-size: 4;
tab-size: 4;
}
.progress-1 {
.circle-progress-value {
stroke-width: 6px;
stroke: hsl(39, 100%, 50%);
}
.circle-progress-circle {
stroke-width: 6px;
stroke: hsl(39, 100%, 85%);
}
.circle-progress-text {
fill: hsl(39, 100%, 50%);
}
}
.progress-2 {
.circle-progress-value {
stroke-width: 6px;
stroke: hsl(320, 80%, 60%);
stroke-dasharray: 4 1;
}
.circle-progress-circle {
stroke-width: 6px;
stroke: #eee;
}
.circle-progress-text {
font-weight: bold;
fill: hsl(180, 80%, 47%);
}
}
.progress-3 {
.circle-progress-value {
stroke-width: 6px;
stroke: hsl(280, 90%, 50%);
stroke-linecap: round;
}
.circle-progress-circle {
stroke-width: 2px;
}
}
.progress-4 {
.circle-progress-value {
stroke-width: 50px;
stroke: hsl(160, 63%, 55%);
}
.circle-progress-circle {
stroke-width: 50px;
stroke: #999;
}
.circle-progress-text {
fill: white;
}
}
.progress-5 {
.circle-progress-value {
stroke-width: 6px;
stroke: white;
stroke-linecap: round;
}
.circle-progress-circle {
stroke-width: 8px;
stroke: #888;
}
.circle-progress-text {
fill: #888;
}
}
.progress-6 {
.circle-progress-value {
stroke-width: 50px;
stroke: hsl(100, 90%, 70%);
}
.circle-progress-circle {
stroke-width: 40px;
stroke: hsl(100, 15%, 60%);
fill: hsl(100, 15%, 60%);
}
.circle-progress-text {
fill: white;
font-weight: bold;
}
}
.progress-7 {
.circle-progress-value {
stroke-width: 11px;
stroke: aqua;
stroke-dasharray: 0 23.3;
stroke-linecap: round;
}
&[aria-valuenow="0"] .circle-progress-value {
display: none;
}
.circle-progress-circle {
stroke: transparent;
}
.circle-progress-text {
font-family: "Varela Round", "Gotham rounded", sans-serif;
font-size: 13px;
font-weight: bold;
fill: fuchsia;
}
}
.progress-9 {
.circle-progress-value {
stroke-width: 12px;
stroke: hsl(210, 100%, 45%);
}
.circle-progress-circle {
stroke: white;
stroke-width: 22px;
fill: #666;
}
.circle-progress-text {
font-family: "Georgia", serif;
font-size: 13px;
fill: white;
}
}
.progress-10 {
.circle-progress-value {
stroke-width: 2px;
stroke: aquamarine;
}
.circle-progress-circle {
stroke: #ddd;
stroke-width: 2px;
}
.circle-progress-text {
font-family: "Georgia", serif;
font-size: 13px;
}
}
.progress-11 {
.circle-progress-value {
stroke-width: 6px;
stroke: hsl(100, 100%, 60%);
stroke-dasharray: 0.6 3;
}
.circle-progress-circle {
stroke-width: 6px;
stroke: #ddd;
stroke-dasharray: 0.6 3;
stroke-dashoffset: 1.6;
}
.circle-progress-text {
font-family: "Dosis", "Varela Round", "Gotham Rounded Light", sans-serif;
fill: hsl(100, 81%, 55%);
font-size: 26px;
}
}
.progress-12 {
.circle-progress-value {
stroke-width: 12px;
stroke: darkmagenta;
}
.circle-progress-circle {
stroke: white;
stroke-width: 11px;
fill: #666;
}
.circle-progress-text {
font-family: "Georgia", serif;
font-size: 13px;
fill: white;
}
}
.progress-13 {
.circle-progress-value {
stroke-width: 25px;
stroke: hsl(210, 100%, 45%);
stroke-dasharray: 58 1;
}
.circle-progress-circle {
stroke: hsl(210, 100%, 85%);
stroke-width: 25px;
fill: hsl(210, 100%, 85%);
}
.circle-progress-text {
font-family: "Montserrat", "Gotham", sans-serif;
font-size: 16px;
fill: hsl(210, 100%, 45%);
}
}

398
node_modules/js-circle-progress/docs/sass/_index.scss generated vendored Normal file
View file

@ -0,0 +1,398 @@
.check {
display: inline-block;
margin-right: .5em;
color: hsl(142, 80%, 40%);
animation: check .1s .7s backwards;
}
@keyframes check {
from {
opacity: 0;
transform: scale(0);
}
80% {
opacity: 1;
transform: scale(1.3);
}
to {
transform: none;
}
}
.intro-heading {
animation: bounce-in .4s ease-in-out;
}
@keyframes bounce-in {
0% {
transform: translateY(-2.7em);
animation-timing-function: ease-out;
}
50% {
transform: translateY(10px) scaleY(1.4);
}
75% {
transform: translateY(-6px) scaleY(1.2);
}
90% {
transform: translateY(2.5px);
}
100% {
transform: none;
}
}
.intro {
color: hsl(0, 0%, 30%);
.example {
position: relative;
display: flex;
flex-wrap: wrap;
overflow: hidden;
min-height: calc(300px + 25px * 2);
}
.progress {
padding: 20px 50px 0 20px;
width: 300px;
> svg {
width: 100%;
* {
transform-box: fill-box;
transform-origin: center;
}
}
.circle-progress-value {
stroke-width: 6px;
stroke: hsl(39, 100%, 50%);
}
.circle-progress-circle {
stroke-width: 6px;
stroke: hsl(39, 100%, 85%);
}
.circle-progress-text {
fill: hsl(39, 100%, 50%);
}
.circle-progress-text-value {
fill: inherit;
}
&[data-style="1"] {
.circle-progress-value {
transition: .4s .3s;
stroke-linecap: round;
stroke-width: 12;
stroke: hsl(300, 80%, 64%);
}
.circle-progress-circle {
transition: .4s;
stroke: hsl(300, 80%, 85%);
stroke-width: 3;
}
.circle-progress-text {
fill: hsl(0, 0%, 30%);
font-size: 22px;
transition: .4s;
}
}
&[data-style="2"] {
.circle-progress-value {
animation: .4s dots both;
stroke-width: 12;
stroke-linecap: round;
@keyframes dots {
from {
stroke-dasharray: 14 2;
stroke: hsl(300, 80%, 64%);
}
to {
stroke-dasharray: 0 17.7;
stroke: hsl(333, 100%, 50%);
}
}
}
.circle-progress-circle {
transition: .4s .4s;
stroke-width: 0;
stroke: hsl(0, 0%, 85%);
}
.circle-progress-text {
fill: hsl(0, 0%, 30%);
font-size: 22px;
transform: scale(0);
opacity: 0;
transition: .4s;
}
}
&[data-style="3"] {
.circle-progress-value {
animation: grow-value .5s both;
stroke-width: 12;
stroke-linecap: round;
stroke: hsl(333, 100%, 50%);
@keyframes grow-value {
0% {
stroke-dasharray: 0 17.7;
}
99.99% {
stroke-dasharray: 14 2;
}
100% {
stroke-dasharray: none;
}
}
}
.circle-progress-circle {
stroke-width: 0;
stroke: hsl(0, 0%, 85%);
}
.circle-progress-text {
fill: hsl(333, 100%, 50%);
font-size: 16px;
transition: transform .4s;
}
}
&[data-style="4"] {
.circle-progress-value {
animation: value-4 .5s both;
stroke-width: 12;
stroke-linecap: round;
stroke: hsl(333, 100%, 50%);
@keyframes value-4 {
30% {
stroke-width: 12;
}
80% {
stroke-width: 2;
}
100% {
stroke: white;
stroke-width: 4;
}
}
}
.circle-progress-circle {
animation: grow-circle .5s both;
stroke-width: 0;
stroke: hsl(0, 0%, 85%);
@keyframes grow-circle {
0% {
stroke-width: 0;
}
37% {
stroke-width: 6;
}
100% {
stroke-width: 6;
}
}
}
.circle-progress-text {
fill: hsl(0, 0%, 85%);
font-size: 16px;
transition: transform .4s;
}
}
&[data-style="5"] {
.circle-progress-value {
animation: .4s grow-xxl-value both;
}
.circle-progress-circle {
animation: .4s grow-xxl-circle both;
stroke: hsl(0, 0%, 85%);
}
@keyframes grow-xxl-value {
from {
stroke: white;
}
to {
stroke-width: 50;
stroke: hsl(210, 100%, 60%);
stroke-linecap: butt;
}
}
@keyframes grow-xxl-circle {
from {
stroke-width: 6;
}
to {
stroke-width: 50;
}
}
.circle-progress-text {
fill: hsl(0, 0%, 100%);
transition: .4s;
transform: translate(23.7px, 7.7px);
}
.circle-progress-text-max {
display: none;
}
.circle-progress-text-value {
font-size: 16px;
}
}
}
&:not([data-demo]) {
.progress {
animation: check .2s .6s backwards;
}
.quality {
visibility: hidden;
animation: none;
}
}
&[data-demo=responsive] {
.progress {
animation: demo-responsive 1.6s .7s;
// @keyframes demo-responsive {
// 0% {
// width: 300px;
// }
// 15% {
// width: 100px;
// }
// 30% {
// width: 100px;
// }
// 45% {
// width: 450px;
// }
// 85% {
// width: 450px;
// }
// 100% {
// width: 300px;
// }
// }
@keyframes demo-responsive {
0% {
transform: none;
}
12% {
transform: scale(.3);
}
40% {
transform: scale(.3);
}
55% {
transform: scale(1.3);
}
92% {
transform: scale(1.3);
}
100% {
transform: none;
}
}
}
.quality.responsive ~ .quality {
visibility: hidden;
animation: none;
}
}
&[data-demo=animated] {
.quality.animated ~ .quality {
visibility: hidden;
animation: none;
}
}
&[data-demo=stylable] {
.quality.stylable ~ .quality {
visibility: hidden;
animation: none;
}
}
&[data-demo=finished] {
.quality-last,
.quality-lastest,
.intro-footer {
visibility: visible;
opacity: 1;
}
}
}
.intro-text {
display: flex;
flex-direction: column;
}
.intro-text-body {
flex: auto;
}
.qualities {
list-style: none;
}
.quality {
opacity: 0;
font-weight: bold;
animation: pop-in .4s cubic-bezier(0.74, 0.92, 0.71, 1) forwards;
transform-origin: left;
&.last {
visibility: hidden;
animation: none;
}
}
.quality-inner {
animation: skidding .4s cubic-bezier(0.74, 0.92, 0.71, 1) forwards;
transform-origin: bottom left;
}
@keyframes pop-in {
0% {
transform: translateX(100%);
}
80% {
transform: translateX(-10px);
opacity: 1;
}
92% {
transform: none;
opacity: 1;
}
100% {
transform: none;
opacity: 1;
}
}
@keyframes skidding {
0% {
transform: none;
}
50% {
transform: none;
animation-timing-function: ease-in;
}
80% {
transform: skewX(30deg) scaleX(.9);
animation-timing-function: ease-in;
}
92% {
transform: none;
}
}
.quality-last,
.quality-lastest,
.intro-footer {
visibility: hidden;
opacity: 0;
transition: .3s;
}
.intro-footer,
.quality-lastest {
transition: 3s 1.5s ease-out;
}
// @for $i from 1 through 5 {
// .popin-#{$i} {
// animation-delay: $i * 3s;
// }
// }
.intro-footer {
font-size: .9rem;
}

45
node_modules/js-circle-progress/docs/sass/style.scss generated vendored Normal file
View file

@ -0,0 +1,45 @@
body {
font-family: sans-serif;
background: hsl(0, 0%, 90%);
margin: 0;
}
pre {
margin: 0;
}
a {
color: hsl(210, 100%, 40%);
font-weight: bold;
text-decoration: none;
transition: .25s;
&:hover,
&:focus {
color: hsl(250, 100%, 20%);
}
}
%clearfix {
&::before,
&::after {
content: " ";
display: table;
}
&::after {
clear: both;
}
}
.container {
max-width: 60rem;
margin: auto;
}
.site-footer {
background: white;
padding: 25px;
border-radius: 3px 3px 0 0;
}
@import "index";
@import "examples";