https://www.basilhadad.com/misc/progress.js

1// $Id: progress.js,v 1.10.2.2 2006/12/01 14:57:29 killes Exp $
2
3/**
4 * A progressbar object. Initialized with the given id. Must be inserted into
5 * the DOM afterwards through progressBar.element.
6 *
7 * method is the function which will perform the HTTP request to get the
8 * progress bar state. Either HTTPGet or HTTPPost.
9 *
10 * e.g. pb = new progressBar('myProgressBar');
11 *      some_element.appendChild(pb.element);
12 */
13function progressBar(id, updateCallback, method, errorCallback) {
14  var pb = this;
15  this.id = id;
16  this.method = method ? method : HTTPGet;
17  this.updateCallback = updateCallback;
18  this.errorCallback = errorCallback;
19
20  this.element = document.createElement('div');
21  this.element.id = id;
22  this.element.className = 'progress';
23  this.element.innerHTML = '<div class="percentage"></div>'+
24                           '<div class="message">&nbsp;</div>'+
25                           '<div class="bar"><div class="filled"></div></div>';
26}
27
28/**
29 * Set the percentage and status message for the progressbar.
30 */
31progressBar.prototype.setProgress = function (percentage, message) {
32  var divs = this.element.getElementsByTagName('div');
33  var div;
34  for (var i = 0; div = divs[i]; ++i) {
35    if (percentage >= 0) {
36      if (hasClass(divs[i], 'filled')) {
37        divs[i].style.width = percentage + '%';
38      }
39      if (hasClass(divs[i], 'percentage')) {
40        divs[i].innerHTML = percentage + '%';
41      }
42    }
43    if (hasClass(divs[i], 'message')) {
44      divs[i].innerHTML = message;
45    }
46  }
47  if (this.updateCallback) {
48    this.updateCallback(percentage, message, this);
49  }
50}
51
52/**
53 * Start monitoring progress via Ajax.
54 */
55progressBar.prototype.startMonitoring = function (uri, delay) {
56  this.delay = delay;
57  this.uri = uri;
58  this.sendPing();
59}
60
61/**
62 * Stop monitoring progress via Ajax.
63 */
64progressBar.prototype.stopMonitoring = function () {
65  clearTimeout(this.timer);
66  // This allows monitoring to be stopped from within the callback
67  this.uri = null;
68}
69
70/**
71 * Request progress data from server.
72 */
73progressBar.prototype.sendPing = function () {
74  if (this.timer) {
75    clearTimeout(this.timer);
76  }
77  if (this.uri) {
78    this.method(this.uri, this.receivePing, this, '');
79  }
80}
81
82/**
83 * HTTP callback function. Passes data back to the progressbar and sets a new
84 * timer for the next ping.
85 */
86progressBar.prototype.receivePing = function (string, xmlhttp, pb) {
87  if (xmlhttp.status != 200) {
88    return pb.displayError('An HTTP error '+ xmlhttp.status +' occured.\n'+ pb.uri);
89  }
90  // Parse response
91  var progress = parseJson(string);
92  // Display errors
93  if (progress.status == 0) {
94    pb.displayError(progress.data);
95    return;
96  }
97
98  // Update display
99  pb.setProgress(progress.percentage, progress.message);
100  // Schedule next timer
101  pb.timer = setTimeout(function() { pb.sendPing(); }, pb.delay);
102}
103
104/**
105 * Display errors on the page.
106 */
107progressBar.prototype.displayError = function (string) {
108  var error = document.createElement('div');
109  error.className = 'error';
110  error.innerHTML = string;
111
112  this.element.style.display = 'none';
113  this.element.parentNode.insertBefore(error, this.element);
114
115  if (this.errorCallback) {
116    this.errorCallback(this);
117  }
118}