From 1452cade272d876277e65215e91b476b4cce4a11 Mon Sep 17 00:00:00 2001
From: Max Shishkin <shishkin.max@gmail.com>
Date: Wed, 3 Jul 2013 00:03:42 +0400
Subject: [PATCH] Add progress tracking

---
 dist/spin.js     | 41 ++++++++++++++++++++++++++++++++++++++++-
 dist/spin.min.js |  2 +-
 index.html       | 30 +++++++++++++++++++++++++++++-
 spin.js          | 41 ++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 110 insertions(+), 4 deletions(-)

diff --git a/dist/spin.js b/dist/spin.js
index c66c607..c974edf 100644
--- a/dist/spin.js
+++ b/dist/spin.js
@@ -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 = {
@@ -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 */
@@ -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
@@ -208,6 +236,7 @@
 
             self.opacity(el, j * o.direction + start, alpha, o)
           }
+
           self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
         })()
       }
@@ -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.
diff --git a/dist/spin.min.js b/dist/spin.min.js
index 7fc8fa6..d2d3aeb 100644
--- a/dist/spin.min.js
+++ b/dist/spin.min.js
@@ -1 +1 @@
-(function(t,e){if(typeof exports=="object")module.exports=e();else if(typeof define=="function"&&define.amd)define(e);else t.Spinner=e()})(this,function(){"use strict";var t=["webkit","Moz","ms","O"],e={},i;function o(t,e){var i=document.createElement(t||"div"),o;for(o in e)i[o]=e[o];return i}function n(t){for(var e=1,i=arguments.length;e<i;e++)t.appendChild(arguments[e]);return t}var r=function(){var t=o("style",{type:"text/css"});n(document.getElementsByTagName("head")[0],t);return t.sheet||t.styleSheet}();function s(t,o,n,s){var a=["opacity",o,~~(t*100),n,s].join("-"),f=.01+n/s*100,l=Math.max(1-(1-t)/o*(100-f),t),d=i.substring(0,i.indexOf("Animation")).toLowerCase(),u=d&&"-"+d+"-"||"";if(!e[a]){r.insertRule("@"+u+"keyframes "+a+"{"+"0%{opacity:"+l+"}"+f+"%{opacity:"+t+"}"+(f+.01)+"%{opacity:1}"+(f+o)%100+"%{opacity:"+t+"}"+"100%{opacity:"+l+"}"+"}",r.cssRules.length);e[a]=1}return a}function a(e,i){var o=e.style,n,r;if(o[i]!==undefined)return i;i=i.charAt(0).toUpperCase()+i.slice(1);for(r=0;r<t.length;r++){n=t[r]+i;if(o[n]!==undefined)return n}}function f(t,e){for(var i in e)t.style[a(t,i)||i]=e[i];return t}function l(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)if(t[o]===undefined)t[o]=i[o]}return t}function d(t){var e={x:t.offsetLeft,y:t.offsetTop};while(t=t.offsetParent)e.x+=t.offsetLeft,e.y+=t.offsetTop;return e}var u={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:1/4,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto",position:"relative"};function p(t){if(typeof this=="undefined")return new p(t);this.opts=l(t||{},p.defaults,u)}p.defaults={};l(p.prototype,{spin:function(t){this.stop();var e=this,n=e.opts,r=e.el=f(o(0,{className:n.className}),{position:n.position,width:0,zIndex:n.zIndex}),s=n.radius+n.length+n.width,a,l;if(t){t.insertBefore(r,t.firstChild||null);l=d(t);a=d(r);f(r,{left:(n.left=="auto"?l.x-a.x+(t.offsetWidth>>1):parseInt(n.left,10)+s)+"px",top:(n.top=="auto"?l.y-a.y+(t.offsetHeight>>1):parseInt(n.top,10)+s)+"px"})}r.setAttribute("role","progressbar");e.lines(r,e.opts);if(!i){var u=0,p=(n.lines-1)*(1-n.direction)/2,c,h=n.fps,m=h/n.speed,y=(1-n.opacity)/(m*n.trail/100),g=m/n.lines;(function v(){u++;for(var t=0;t<n.lines;t++){c=Math.max(1-(u+(n.lines-t)*g)%m*y,n.opacity);e.opacity(r,t*n.direction+p,c,n)}e.timeout=e.el&&setTimeout(v,~~(1e3/h))})()}return e},stop:function(){var t=this.el;if(t){clearTimeout(this.timeout);if(t.parentNode)t.parentNode.removeChild(t);this.el=undefined}return this},lines:function(t,e){var r=0,a=(e.lines-1)*(1-e.direction)/2,l;function d(t,i){return f(o(),{position:"absolute",width:e.length+e.width+"px",height:e.width+"px",background:t,boxShadow:i,transformOrigin:"left",transform:"rotate("+~~(360/e.lines*r+e.rotate)+"deg) translate("+e.radius+"px"+",0)",borderRadius:(e.corners*e.width>>1)+"px"})}for(;r<e.lines;r++){l=f(o(),{position:"absolute",top:1+~(e.width/2)+"px",transform:e.hwaccel?"translate3d(0,0,0)":"",opacity:e.opacity,animation:i&&s(e.opacity,e.trail,a+r*e.direction,e.lines)+" "+1/e.speed+"s linear infinite"});if(e.shadow)n(l,f(d("#000","0 0 4px "+"#000"),{top:2+"px"}));n(t,n(l,d(e.color,"0 0 1px rgba(0,0,0,.1)")))}return t},opacity:function(t,e,i){if(e<t.childNodes.length)t.childNodes[e].style.opacity=i}});function c(){function t(t,e){return o("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',e)}r.addRule(".spin-vml","behavior:url(#default#VML)");p.prototype.lines=function(e,i){var o=i.length+i.width,r=2*o;function s(){return f(t("group",{coordsize:r+" "+r,coordorigin:-o+" "+-o}),{width:r,height:r})}var a=-(i.width+i.length)*2+"px",l=f(s(),{position:"absolute",top:a,left:a}),d;function u(e,r,a){n(l,n(f(s(),{rotation:360/i.lines*e+"deg",left:~~r}),n(f(t("roundrect",{arcsize:i.corners}),{width:o,height:i.width,left:i.radius,top:-i.width>>1,filter:a}),t("fill",{color:i.color,opacity:i.opacity}),t("stroke",{opacity:0}))))}if(i.shadow)for(d=1;d<=i.lines;d++)u(d,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(d=1;d<=i.lines;d++)u(d);return n(e,l)};p.prototype.opacity=function(t,e,i,o){var n=t.firstChild;o=o.shadow&&o.lines||0;if(n&&e+o<n.childNodes.length){n=n.childNodes[e+o];n=n&&n.firstChild;n=n&&n.firstChild;if(n)n.opacity=i}}}var h=f(o("group"),{behavior:"url(#default#VML)"});if(!a(h,"transform")&&h.adj)c();else i=a(h,"animation");return p});
\ No newline at end of file
+!function(t,e){if(typeof exports=="object")module.exports=e();else if(typeof define=="function"&&define.amd)define(e);else t.Spinner=e()}(this,function(){"use strict";var t=["webkit","Moz","ms","O"],e={},i;function r(t,e){var i=document.createElement(t||"div"),r;for(r in e)i[r]=e[r];return i}function o(t){for(var e=1,i=arguments.length;e<i;e++)t.appendChild(arguments[e]);return t}var n=function(){var t=r("style",{type:"text/css"});o(document.getElementsByTagName("head")[0],t);return t.sheet||t.styleSheet}();function s(t,r,o,s){var a=["opacity",r,~~(t*100),o,s].join("-"),f=.01+o/s*100,l=Math.max(1-(1-t)/r*(100-f),t),p=i.substring(0,i.indexOf("Animation")).toLowerCase(),u=p&&"-"+p+"-"||"";if(!e[a]){n.insertRule("@"+u+"keyframes "+a+"{"+"0%{opacity:"+l+"}"+f+"%{opacity:"+t+"}"+(f+.01)+"%{opacity:1}"+(f+r)%100+"%{opacity:"+t+"}"+"100%{opacity:"+l+"}"+"}",n.cssRules.length);e[a]=1}return a}function a(e,i){var r=e.style,o,n;if(r[i]!==undefined)return i;i=i.charAt(0).toUpperCase()+i.slice(1);for(n=0;n<t.length;n++){o=t[n]+i;if(r[o]!==undefined)return o}}function f(t,e){for(var i in e)t.style[a(t,i)||i]=e[i];return t}function l(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var r in i)if(t[r]===undefined)t[r]=i[r]}return t}function p(t){var e={x:t.offsetLeft,y:t.offsetTop};while(t=t.offsetParent)e.x+=t.offsetLeft,e.y+=t.offsetTop;return e}function u(t,e,i,o,n){var s=2*(t+e);if(s<50)s=50;return f(r("div",{innerHTML:"0%"}),{textAlign:"center",width:s+"px",height:s+"px",lineHeight:s+"px",position:"absolute",top:i-s/2+"px",left:o-s/2+"px",color:n})}var c={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:1/4,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto",position:"relative",progress:false,progressTop:0,progressLeft:0};function d(t){if(typeof this=="undefined")return new d(t);this.opts=l(t||{},d.defaults,c)}d.defaults={};l(d.prototype,{spin:function(t){this.stop();var e=this,n=e.opts,s=e.el=f(r(0,{className:n.className}),{position:n.position,width:0,zIndex:n.zIndex}),a=n.radius+n.length+n.width,l,c;if(t){t.insertBefore(s,t.firstChild||null);c=p(t);l=p(s);f(s,{left:(n.left=="auto"?c.x-l.x+(t.offsetWidth>>1):parseInt(n.left,10)+a)+"px",top:(n.top=="auto"?c.y-l.y+(t.offsetHeight>>1):parseInt(n.top,10)+a)+"px"})}s.setAttribute("role","progressbar");e.lines(s,e.opts);if(n.progress){e.progressTracker=u(n.radius,n.length,n.progressTop,n.progressLeft,n.color);o(s,e.progressTracker)}if(!i){var d=0,h=(n.lines-1)*(1-n.direction)/2,g,m=n.fps,y=m/n.speed,x=(1-n.opacity)/(y*n.trail/100),v=y/n.lines;!function w(){d++;for(var t=0;t<n.lines;t++){g=Math.max(1-(d+(n.lines-t)*v)%y*x,n.opacity);e.opacity(s,t*n.direction+h,g,n)}e.timeout=e.el&&setTimeout(w,~~(1e3/m))}()}return e},stop:function(){var t=this.el;if(t){clearTimeout(this.timeout);if(t.parentNode)t.parentNode.removeChild(t);this.el=undefined}return this},setProgress:function(t,e){if(this.progressTracker){e=e||100;this.progressTracker.innerHTML=Math.round(t/e*100)+"%"}},lines:function(t,e){var n=0,a=(e.lines-1)*(1-e.direction)/2,l;function p(t,i){return f(r(),{position:"absolute",width:e.length+e.width+"px",height:e.width+"px",background:t,boxShadow:i,transformOrigin:"left",transform:"rotate("+~~(360/e.lines*n+e.rotate)+"deg) translate("+e.radius+"px"+",0)",borderRadius:(e.corners*e.width>>1)+"px"})}for(;n<e.lines;n++){l=f(r(),{position:"absolute",top:1+~(e.width/2)+"px",transform:e.hwaccel?"translate3d(0,0,0)":"",opacity:e.opacity,animation:i&&s(e.opacity,e.trail,a+n*e.direction,e.lines)+" "+1/e.speed+"s linear infinite"});if(e.shadow)o(l,f(p("#000","0 0 4px "+"#000"),{top:2+"px"}));o(t,o(l,p(e.color,"0 0 1px rgba(0,0,0,.1)")))}return t},opacity:function(t,e,i){if(e<t.childNodes.length)t.childNodes[e].style.opacity=i}});function h(){function t(t,e){return r("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',e)}n.addRule(".spin-vml","behavior:url(#default#VML)");d.prototype.lines=function(e,i){var r=i.length+i.width,n=2*r;function s(){return f(t("group",{coordsize:n+" "+n,coordorigin:-r+" "+-r}),{width:n,height:n})}var a=-(i.width+i.length)*2+"px",l=f(s(),{position:"absolute",top:a,left:a}),p;function u(e,n,a){o(l,o(f(s(),{rotation:360/i.lines*e+"deg",left:~~n}),o(f(t("roundrect",{arcsize:i.corners}),{width:r,height:i.width,left:i.radius,top:-i.width>>1,filter:a}),t("fill",{color:i.color,opacity:i.opacity}),t("stroke",{opacity:0}))))}if(i.shadow)for(p=1;p<=i.lines;p++)u(p,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(p=1;p<=i.lines;p++)u(p);return o(e,l)};d.prototype.opacity=function(t,e,i,r){var o=t.firstChild;r=r.shadow&&r.lines||0;if(o&&e+r<o.childNodes.length){o=o.childNodes[e+r];o=o&&o.firstChild;o=o&&o.firstChild;if(o)o.opacity=i}}}var g=f(r("group"),{behavior:"url(#default#VML)"});if(!a(g,"transform")&&g.adj)h();else i=a(g,"animation");return d});
\ No newline at end of file
diff --git a/index.html b/index.html
index 1caa8c4..c93522f 100644
--- a/index.html
+++ b/index.html
@@ -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">
@@ -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
@@ -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();
@@ -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;
   };
diff --git a/spin.js b/spin.js
index c66c607..c974edf 100644
--- a/spin.js
+++ b/spin.js
@@ -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 = {
@@ -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 */
@@ -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
@@ -208,6 +236,7 @@
 
             self.opacity(el, j * o.direction + start, alpha, o)
           }
+
           self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
         })()
       }
@@ -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.