Skip to content

Commit

Permalink
- Fixes examples
Browse files Browse the repository at this point in the history 
- Use webpack to bundle example files
  • Loading branch information
@s-yadav
s-yadav committed Sep 15, 2019
1 parent 5515649 commit 77e062b
Show file tree
Hide file tree
Showing 8 changed files with 2,996 additions and 176 deletions.
4 changes: 2 additions & 2 deletions dist/radialIndicator.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*
radialIndicator.js v 1.4.0
radialIndicator.js v 2.0.0
Author: Sudhanshu Yadav
Copyright (c) 2015,2016 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
Demo on: ignitersworld.com/lab/radialIndicator.html
Updated: Jannik Gysi, 20.08.2019
*/
;(function (factory) {
/** support UMD ***/
Expand Down
25 changes: 25 additions & 0 deletions docs/bundle.js
View file

Large diffs are not rendered by default.

39 changes: 19 additions & 20 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="/assets/highlights/styles/atom-one-dark.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/assets/highlights/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script type="module" src="./radialIndicatorExamples.js"></script>
Expand Down Expand Up @@ -245,20 +244,20 @@ <h2 id="examples">Radial Indicator Examples</h2>
<div class="no-config">
<h3 id="no-config">No Config</h3>
<div class="indicator"></div>
<div class="actions">
<form class="actions" action="javascript:event.preventDefault()">
<input class="input" type="number" value="0"/>
<button class="button">Animate</button>
</div>
</form>
</div>
</div>
<div class="info">
<div class="some-config">
<h3 id="some-config">Some Config</h3>
<div class="indicator"></div>
<div class="actions">
<form class="actions" action="javascript:event.preventDefault()">
<input class="input" type="number" value="0"/>
<button class="button">Animate</button>
</div>
</form>
<pre><code>
radialIndicator(".indicatorContainer", {
barColor: '#87CEEB',
Expand All @@ -274,10 +273,10 @@ <h3 id="some-config">Some Config</h3>
<div class="no-number">
<h3 id ="no-number">No Number</h3>
<div class="indicator"></div>
<div class="actions">
<form class="actions" action="javascript:event.preventDefault()">
<input class="input" type="number" value="40"/>
<button class="button">Animate</button>
</div>
</form>
<pre><code>
radialIndicator(".indicatorContainer", {
displayNumber: false,
Expand All @@ -290,10 +289,10 @@ <h3 id ="no-number">No Number</h3>
<div class="color-range">
<h3 id = "color-range">Color Range</h3>
<div class="indicator"></div>
<div class="actions">
<form class="actions" action="javascript:event.preventDefault()">
<input class="input" type="number" value="70"/>
<button class="button">Animate</button>
</div>
</form>
<pre><code>
radialIndicator(".indicatorContainer", {
barColor: {
Expand All @@ -312,10 +311,10 @@ <h3 id = "color-range">Color Range</h3>
<div class="duration">
<h3 id = "duration">Duration</h3>
<div class="indicator"></div>
<div class="actions">
<form class="actions" action="javascript:event.preventDefault()">
<input class="input" type="number" value="0"/>
<button class="button">Animate</button>
</div>
</form>
<p>You can either define the duration from 0 to 100% via properties. Every animate() call then calculates
the
duration</p>
Expand All @@ -335,10 +334,10 @@ <h3 id = "duration">Duration</h3>
<div class="easing">
<h3 id="easing">Easing</h3>
<div class="indicator"></div>
<div class="actions">
<form class="actions" action="javascript:event.preventDefault()">
<input class="input" type="number" value="0"/>
<button class="button">Animate</button>
</div>
</form>
<p>You can pass your own easing function that takes a progress parameter and returns the updated progress. Take
a look at <a href="https://gist.github.com/gre/1650294">this</a> gist</p>
<pre><code>
Expand All @@ -358,10 +357,10 @@ <h3 id="easing">Easing</h3>
<div class="min-max">
<h3 id = "min-max">Min & Max Value</h3>
<div class="indicator"></div>
<div class="actions">
<form class="actions" action="javascript:event.preventDefault()">
<input class="input" type="number" value="1000"/>
<button class="button">Animate</button>
</div>
</form>
<pre><code>
radialIndicator(".indicatorContainer", {
minValue: 1000,
Expand All @@ -374,10 +373,10 @@ <h3 id = "min-max">Min & Max Value</h3>
<div class="formatting">
<h3 id="formatting">Formatting</h3>
<div class="indicator"></div>
<div class="actions">
<form class="actions" action="javascript:event.preventDefault()">
<input class="input" type="number" value="750000"/>
<button class="button">Animate</button>
</div>
</form>
<pre><code>
radialIndicator(".indicatorContainer", {
radius: 70,
Expand All @@ -396,10 +395,10 @@ <h3 id="image-content">Image or other content inside indicator</h3>
<div id="indicatorImage"></div>
<img src="/assets/indicator_img_content.png" alt="indicator image" id="prgLogo"/>
</div>
<div class="actions">
<form class="actions" action="javascript:event.preventDefault()">
<input class="input" type="number" value="0"/>
<button class="button">Animate</button>
</div>
</form>
<p>Wrap your content and the indicator inside a wrapper</p>
<pre><code class="html">
&lt;pre&gt;&lt;code&gt;&lt;div id=&quot;indicatorContainerWrap&quot;&gt;
Expand Down Expand Up @@ -639,5 +638,5 @@ <h3 id="angular-di">Getting instance of indicator through DI</h3>
}]);
</code></pre>
</div>
</body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
165 changes: 80 additions & 85 deletions docs/radialIndicatorExamples.js
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,103 @@
import "../src/radialIndicator.js";
import $ from 'jquery';
import radialIndicator from '../src/radialIndicator.js';

const noConfig = radialIndicator(".no-config .indicator", {});
const noConfigButton = document.querySelector(".no-config .button");
const noConfigInput = document.querySelector(".no-config .input");
noConfigButton.addEventListener("click", () => {
const noConfig = radialIndicator('.no-config .indicator', {});
const noConfigButton = document.querySelector('.no-config .button');
const noConfigInput = document.querySelector('.no-config .input');
noConfigButton.addEventListener('click', () => {
noConfig.animate(noConfigInput.value);
})
});

const someConfig = radialIndicator(".some-config .indicator", {
const someConfig = radialIndicator('.some-config .indicator', {
barColor: '#87CEEB',
barWidth: 10,
initValue: 40,
roundCorner : true,
percentage: true
roundCorner: true,
percentage: true,
});
const someConfigButton = document.querySelector(".some-config .button");
const someConfigInput = document.querySelector(".some-config .input");
someConfigButton.addEventListener("click", () => {
const someConfigButton = document.querySelector('.some-config .button');
const someConfigInput = document.querySelector('.some-config .input');
someConfigButton.addEventListener('click', () => {
someConfig.animate(someConfigInput.value);
})
});

const noNumber = radialIndicator(".no-number .indicator", {
const noNumber = radialIndicator('.no-number .indicator', {
displayNumber: false,
initValue: 40
initValue: 40,
});
const noNumberButton = document.querySelector(".no-number .button");
const noNumberInput = document.querySelector(".no-number .input");
noNumberButton.addEventListener("click", () => {
const noNumberButton = document.querySelector('.no-number .button');
const noNumberInput = document.querySelector('.no-number .input');
noNumberButton.addEventListener('click', () => {
noNumber.animate(noNumberInput.value);
})
});

const colorRange = radialIndicator(".color-range .indicator", {
const colorRange = radialIndicator('.color-range .indicator', {
barColor: {
0: '#FF0000',
33: '#FFFF00',
66: '#0066FF',
100: '#33CC33'
100: '#33CC33',
},
initValue: 70,
percentage: true
percentage: true,
});
const colorRangeButton = document.querySelector(".color-range .button");
const colorRangeInput = document.querySelector(".color-range .input");
colorRangeButton.addEventListener("click", () => {
const colorRangeButton = document.querySelector('.color-range .button');
const colorRangeInput = document.querySelector('.color-range .input');
colorRangeButton.addEventListener('click', () => {
colorRange.animate(colorRangeInput.value);
})
});

const duration = radialIndicator(".duration .indicator", {
duration: 5000
const duration = radialIndicator('.duration .indicator', {
duration: 5000,
});
const durationButton = document.querySelector(".duration .button");
const durationInput = document.querySelector(".duration .input");
durationButton.addEventListener("click", () => {
const durationButton = document.querySelector('.duration .button');
const durationInput = document.querySelector('.duration .input');
durationButton.addEventListener('click', () => {
duration.animate(durationInput.value);
})
});

const easing = radialIndicator(".easing .indicator", {
easing: (t) => { return t*t }
const easing = radialIndicator('.easing .indicator', {
easing: (t) => { return t * t; },
});
const easingButton = document.querySelector(".easing .button");
const easingInput = document.querySelector(".easing .input");
easingButton.addEventListener("click", () => {
const easingButton = document.querySelector('.easing .button');
const easingInput = document.querySelector('.easing .input');
easingButton.addEventListener('click', () => {
easing.animate(easingInput.value);
})
});

const minMax = radialIndicator(".min-max .indicator", {
const minMax = radialIndicator('.min-max .indicator', {
minValue: 1000,
maxValue: 100000
maxValue: 100000,
});
const minMaxButton = document.querySelector(".min-max .button");
const minMaxInput = document.querySelector(".min-max .input");
minMaxButton.addEventListener("click", () => {
const minMaxButton = document.querySelector('.min-max .button');
const minMaxInput = document.querySelector('.min-max .input');
minMaxButton.addEventListener('click', () => {
minMax.animate(minMaxInput.value);
})
});

const formatting = radialIndicator(".formatting .indicator", {
const formatting = radialIndicator('.formatting .indicator', {
radius: 70,
initValue: 750000,
minValue: 10000,
maxValue: 10000000,
format: '$ ##,###,###'
format: '$ ##,###,###',
});
const formattingButton = document.querySelector(".formatting .button");
const formattingInput = document.querySelector(".formatting .input");
formattingButton.addEventListener("click", () => {
const formattingButton = document.querySelector('.formatting .button');
const formattingInput = document.querySelector('.formatting .input');
formattingButton.addEventListener('click', () => {
formatting.animate(formattingInput.value);
})
});

const imageContent = radialIndicator(".image-content #indicatorImage", {
displayNumber: false
const imageContent = radialIndicator('.image-content #indicatorImage', {
displayNumber: false,
});
const imageContentButton = document.querySelector(".image-content .button");
const imageContentInput = document.querySelector(".image-content .input");
imageContentButton.addEventListener("click", () => {
const imageContentButton = document.querySelector('.image-content .button');
const imageContentInput = document.querySelector('.image-content .input');
imageContentButton.addEventListener('click', () => {
imageContent.animate(imageContentInput.value);
})
});

const clock = radialIndicator(".clock .indicator", {
const clock = radialIndicator('.clock .indicator', {
radius: 60,
barWidth: 5,
barColor: '#FF0000',
Expand All @@ -107,51 +108,48 @@ const clock = radialIndicator(".clock .indicator", {
format: (value) => {
const date = new Date();
return date.getHours() + ':' + date.getMinutes();
}
},
});
setInterval(() => {
clock.value(new Date().getSeconds() + 1);
}, 1000);


$(document).ready(function () {
//file upload example
const container = $('#uploadIndicatorWrapper'),
msgHolder = container.find('.rad-cntnt'),
containerProg = container.radialIndicator({
radius: 100,
percentage: true,
displayNumber: false
}).data('radialIndicator');

// file upload example
const container = $('#uploadIndicatorWrapper');
const msgHolder = container.find('.rad-cntnt');
const containerProg = container.radialIndicator({
radius: 100,
percentage: true,
displayNumber: false,
}).data('radialIndicator');

container.on({
'dragenter': function (e) {
msgHolder.html("Drop here");
dragenter: function (e) {
msgHolder.html('Drop here');
},
'dragleave': function (e) {
msgHolder.html("Click / Drop file to select.");
dragleave: function (e) {
msgHolder.html('Click / Drop file to select.');
},
'drop': function (e) {
drop: function (e) {
e.preventDefault();
handleFileUpload(e.originalEvent.dataTransfer.files);
}
},
});

$('#prgFileSelector').on('change', function () {
handleFileUpload(this.files);
});

function handleFileUpload(files) {
function handleFileUpload (files) {
msgHolder.hide();
containerProg.option('displayNumber', true);

const file = files[0],
fd = new FormData();
const file = files[0];
const fd = new FormData();

fd.append('file', file);


$.ajax({
url: 'service/upload.php',
type: 'POST',
Expand All @@ -164,21 +162,18 @@ $(document).ready(function () {
},
xhr: function () {
const xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function (e) {
// Upload progress
xhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
const percentComplete = (e.loaded || e.position) * 100 / e.total;
//Do something with upload progress
// Do something with upload progress
console.log(percentComplete);
containerProg.animate(percentComplete);
}
}, false);

return xhr;
}
},
});

}
});


Loading

0 comments on commit 77e062b

Please sign in to comment.