https://codelamp.co.uk/js/progress.js?build=BUILDTOKEN

1/**
2 * Wrap the ProgressCircle
3 */
4var progress = {
5  
6  circle: null,
7  started: false,
8  completed: false,
9  instances: null,
10  userdata: null,
11  thens: null,
12  hints: null,
13  ui: null,
14  
15  create: function(config){
16    return this.prep.apply(Object.create(this), arguments);
17  },
18  
19  prep: function(config){
20    this.config = config;
21    this.config.canvas = this.config.canvas || {};
22    this.config.canvas.width = this.config.canvas.width || 100;
23    this.config.canvas.height = this.config.canvas.height || 100;
24    this.config.canvas.style = this.config.canvas.style || '';
25    this.config.userdata = null;
26    this.instances = {};
27    this.thens = [];
28    this.hints = this.config.hints || {};
29    this.ui = {};
30    this.ui.element = jQuery(this.config.target);
31    this.ui.canvas = jQuery('<canvas ' + 
32      'width="' + this.config.canvas.width + '" ' + 
33      'height="' + this.config.canvas.height + '"' + 
34      'style="' + this.config.canvas.style + '"' + 
35    '></canvas>');
36    this.ui.element.append(this.ui.canvas);
37    this.circle = new ProgressCircle({ canvas: this.ui.canvas.get(0) });
38    return this;
39  },
40  

41  checkState: function(){
42    if ( this.completed ) return;
43    this.completed = true;
44    for ( var key in this.instances ) {
45      this.completed &= this.instances[key].last.state >= 1;
46    }
47    if ( this.completed ) {
48      this.stop();
49      this.triggerThens();
50    }
51  },
52  
53  start: function(interval){
54    this.started = true;
55    this.completed = false;
56    this.circle.start(interval);
57  },
58  
59  update: function(info){
60    for ( key in info ) {
61      if ( this.started ) {
62        this.instances[key]
63          .pushState(info[key])
64          .pushDescription(key + ' ' + Math.round(info[key] * 100) + '%')
65        ;
66      }
67      else {
68        this.instances[key] = this.item.create(key, this);
69      }
70    }
71    if ( !this.started ) { this.start(50); }
72  },
73  
74  stop: function(){
75    this.started = false;
76    this.circle.stop();
77  },
78  
79  userdata: function(ud){
80    this.config.userdata = ud;
81    return this;
82  },
83  
84  then: function(method){
85    this.thens.push(method);
86    return this;
87  },
88  
89  triggerThens: function(){
90    for ( var i=0; i<this.thens.length; i++ ) {
91      this.thens[i].apply(this, [this.config.userdata]);
92    }
93    this.thens = [];
94  },
95  
96  fadeOut: function(callback){
97    for ( var i=0, a=this.circle.circles; i<a.length; i++ ) {
98      if ( a[i] && a[i].infoText ) {
99        jQuery(a[i].infoText).fadeOut('slow', callback);
100      }
101    }
102    jQuery(this.circle.canvas).fadeOut('slow', callback);
103    return this;
104  }
105  
106};
107
108/**
109 * Track an individual progress bar within the Circle parent
110 */
111progress.item = {
112  
113  owner: null,
114  last: null,
115  states: null,
116  descriptions: null,
117  
118  create: function(key, owner){
119    return this.prep.apply(Object.create(this), arguments);
120  },
121
122  prep: function(key, owner){
123    this.owner = owner;
124    this.last = { state: 0, description: '' };
125    this.states = [];
126    this.descriptions = [];
127    this.owner.circle.addEntry({
128      fillColor: this.owner.hints[key] ? this.owner.hints[key] : 'rgba(255, 255, 255, 1)',
129      progressListener: this.getState.bind(this),
130      infoListener: this.getDescription.bind(this)
131    });
132    return this;
133  },
134  

135  pushState: function(v){
136    this.states.push(v);
137    return this;
138  },
139
140  pushDescription: function(v){
141    this.descriptions.push(v);
142    return this;
143  },
144  
145  getState: function(){
146    if ( this.states.length ) { this.last.state = this.states.shift(); }
147    this.owner.checkState();
148    return this.last.state * 0.99;
149  },
150
151  getDescription: function(){
152    if ( this.descriptions.length ) { this.last.description = this.descriptions.shift(); }
153    return this.last.description;
154  }
155  
156};