Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add progress tracking #158

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Add progress tracking #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 40 additions & 1 deletion dist/spin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,26 @@
return o
}

/**
* Returns progress tracker display.
*/
function createProgressTracker(radius, length, offsetTop, offsetLeft, color) {
var dim = 2 * (radius + length)

if (dim < 50) dim = 50

return css(createEl('div', {innerHTML: '0%'}), {
textAlign : 'center',
width : dim + 'px',
height: dim + 'px',
lineHeight: dim + 'px',
position : 'absolute',
top : (offsetTop - dim / 2) + 'px',
left : (offsetLeft - dim / 2) + 'px',
color : color
})
}

// Built-in defaults

var defaults = {
Expand All @@ -149,7 +169,10 @@
className: 'spinner', // CSS class to assign to the element
top: 'auto', // center vertically
left: 'auto', // center horizontally
position: 'relative' // element position
position: 'relative', // element position
progress: false, // show progress tracker
progressTop: 0, // offset top for progress tracker
progressLeft: 0 // offset left for progress tracker
}

/** The constructor */
Expand Down Expand Up @@ -191,6 +214,11 @@
el.setAttribute('role', 'progressbar')
self.lines(el, self.opts)

if (o.progress) {
self.progressTracker = createProgressTracker(o.radius, o.length, o.progressTop, o.progressLeft, o.color)
ins(el, self.progressTracker)
}

if (!useCssAnimations) {
// No CSS animation support, use setTimeout() instead
var i = 0
Expand All @@ -208,6 +236,7 @@

self.opacity(el, j * o.direction + start, alpha, o)
}

self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
})()
}
Expand All @@ -227,6 +256,16 @@
return this
},

/**
* Update progress status.
*/
setProgress: function(completed, total) {
if (this.progressTracker) {
total = total || 100
this.progressTracker.innerHTML = Math.round((completed / total) * 100) + '%'
}
},

/**
* Internal method that draws the individual lines. Will be overwritten
* in VML fallback mode below.
Expand Down
2 changes: 1 addition & 1 deletion dist/spin.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 29 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ <h2>Example</h2>
<br>
<label>Shadow:</label><input type="checkbox" name="shadow"><br>
<label>Hwaccel:</label><input type="checkbox" name="hwaccel"><br>
<b>Progress</b><br>
<label>Enabled:</label><input type="checkbox" name="progress"><br>
<label>Top:</label><input type="text" name="progressTop" min="-120" max="120" step="1" value="0"><br>
<label>Left:</label><input type="text" name="progressLeft" min="-120" max="120" step="1" value="0"><br>
<br>
</form>

<div class="share">
Expand Down Expand Up @@ -118,6 +123,20 @@ <h3>Manual positioning</h3>
The returned element is a DIV with <code>position:relative</code> and no height. The center of the spinner
is positioned at the top left corner of this DIV.
</p>
<h3>Tracking the progress</h3>
<p>
If you wish to track the progress of an operation you need to set <code>progress</code> option to <code>true</code> and use the <code>setProgress(completed /*, total */)</code> method to update the display.
</p>
<pre class="prettyprint">
var spinner = new Spinner({
trackProgress: true
}).spin(target);

spinner.setProgress(30); // 30% completed
</pre>
<p>
To position the progress display inside the spinner you may use the <code>progressTop</code> and <code>progressLeft</code> options. By default the progress display is centered inside the spinner.
</p>
<h3>Hiding the spinner</h3>
<p>
To hide the spinner, invoke the <code>stop()</code> method, which removes the UI elements from the DOM and stops
Expand Down Expand Up @@ -228,7 +247,8 @@ <h2>Contact</h2>
$.fn.spin = function(opts) {
this.each(function() {
var $this = $(this),
data = $this.data();
data = $this.data(),
progress = 0;

if (data.spinner) {
data.spinner.stop();
Expand All @@ -237,6 +257,14 @@ <h2>Contact</h2>
if (opts !== false) {
data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
}

clearInterval($.fn.spin.progressTimer);
if (opts.progress) {
$.fn.spin.progressTimer = setInterval(function () {
data.spinner.setProgress(progress);
progress = (progress + 1) % 101;
}, 500);
}
});
return this;
};
Expand Down
41 changes: 40 additions & 1 deletion spin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,26 @@
return o
}

/**
* Returns progress tracker display.
*/
function createProgressTracker(radius, length, offsetTop, offsetLeft, color) {
var dim = 2 * (radius + length)

if (dim < 50) dim = 50

return css(createEl('div', {innerHTML: '0%'}), {
textAlign : 'center',
width : dim + 'px',
height: dim + 'px',
lineHeight: dim + 'px',
position : 'absolute',
top : (offsetTop - dim / 2) + 'px',
left : (offsetLeft - dim / 2) + 'px',
color : color
})
}

// Built-in defaults

var defaults = {
Expand All @@ -149,7 +169,10 @@
className: 'spinner', // CSS class to assign to the element
top: 'auto', // center vertically
left: 'auto', // center horizontally
position: 'relative' // element position
position: 'relative', // element position
progress: false, // show progress tracker
progressTop: 0, // offset top for progress tracker
progressLeft: 0 // offset left for progress tracker
}

/** The constructor */
Expand Down Expand Up @@ -191,6 +214,11 @@
el.setAttribute('role', 'progressbar')
self.lines(el, self.opts)

if (o.progress) {
self.progressTracker = createProgressTracker(o.radius, o.length, o.progressTop, o.progressLeft, o.color)
ins(el, self.progressTracker)
}

if (!useCssAnimations) {
// No CSS animation support, use setTimeout() instead
var i = 0
Expand All @@ -208,6 +236,7 @@

self.opacity(el, j * o.direction + start, alpha, o)
}

self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
})()
}
Expand All @@ -227,6 +256,16 @@
return this
},

/**
* Update progress status.
*/
setProgress: function(completed, total) {
if (this.progressTracker) {
total = total || 100
this.progressTracker.innerHTML = Math.round((completed / total) * 100) + '%'
}
},

/**
* Internal method that draws the individual lines. Will be overwritten
* in VML fallback mode below.
Expand Down