root / drupal7 / misc / progress.js @ 2196f227
1 |
(function ($) { |
---|---|
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 "GET" or "POST".
|
9 |
*
|
10 |
* e.g. pb = new progressBar('myProgressBar');
|
11 |
* some_element.appendChild(pb.element);
|
12 |
*/
|
13 |
Drupal.progressBar = function (id, updateCallback, method, errorCallback) { |
14 |
var pb = this; |
15 |
this.id = id;
|
16 |
this.method = method || 'GET'; |
17 |
this.updateCallback = updateCallback;
|
18 |
this.errorCallback = errorCallback;
|
19 |
|
20 |
// The WAI-ARIA setting aria-live="polite" will announce changes after users
|
21 |
// have completed their current activity and not interrupt the screen reader.
|
22 |
this.element = $('<div class="progress" aria-live="polite"></div>').attr('id', id); |
23 |
this.element.html('<div class="bar"><div class="filled"></div></div>' + |
24 |
'<div class="percentage"></div>' +
|
25 |
'<div class="message"> </div>');
|
26 |
}; |
27 |
|
28 |
/**
|
29 |
* Set the percentage and status message for the progressbar.
|
30 |
*/
|
31 |
Drupal.progressBar.prototype.setProgress = function (percentage, message) { |
32 |
if (percentage >= 0 && percentage <= 100) { |
33 |
$('div.filled', this.element).css('width', percentage + '%'); |
34 |
$('div.percentage', this.element).html(percentage + '%'); |
35 |
} |
36 |
$('div.message', this.element).html(message); |
37 |
if (this.updateCallback) { |
38 |
this.updateCallback(percentage, message, this); |
39 |
} |
40 |
}; |
41 |
|
42 |
/**
|
43 |
* Start monitoring progress via Ajax.
|
44 |
*/
|
45 |
Drupal.progressBar.prototype.startMonitoring = function (uri, delay) { |
46 |
this.delay = delay;
|
47 |
this.uri = uri;
|
48 |
this.sendPing();
|
49 |
}; |
50 |
|
51 |
/**
|
52 |
* Stop monitoring progress via Ajax.
|
53 |
*/
|
54 |
Drupal.progressBar.prototype.stopMonitoring = function () { |
55 |
clearTimeout(this.timer);
|
56 |
// This allows monitoring to be stopped from within the callback.
|
57 |
this.uri = null; |
58 |
}; |
59 |
|
60 |
/**
|
61 |
* Request progress data from server.
|
62 |
*/
|
63 |
Drupal.progressBar.prototype.sendPing = function () { |
64 |
if (this.timer) { |
65 |
clearTimeout(this.timer);
|
66 |
} |
67 |
if (this.uri) { |
68 |
var pb = this; |
69 |
// When doing a post request, you need non-null data. Otherwise a
|
70 |
// HTTP 411 or HTTP 406 (with Apache mod_security) error may result.
|
71 |
$.ajax({
|
72 |
type: this.method, |
73 |
url: this.uri, |
74 |
data: '', |
75 |
dataType: 'json', |
76 |
success: function (progress) { |
77 |
// Display errors.
|
78 |
if (progress.status == 0) { |
79 |
pb.displayError(progress.data); |
80 |
return;
|
81 |
} |
82 |
// Update display.
|
83 |
pb.setProgress(progress.percentage, progress.message); |
84 |
// Schedule next timer.
|
85 |
pb.timer = setTimeout(function () { pb.sendPing(); }, pb.delay);
|
86 |
}, |
87 |
error: function (xmlhttp) { |
88 |
pb.displayError(Drupal.ajaxError(xmlhttp, pb.uri)); |
89 |
} |
90 |
}); |
91 |
} |
92 |
}; |
93 |
|
94 |
/**
|
95 |
* Display errors on the page.
|
96 |
*/
|
97 |
Drupal.progressBar.prototype.displayError = function (string) { |
98 |
var error = $('<div class="messages error"></div>').html(string); |
99 |
$(this.element).before(error).hide(); |
100 |
|
101 |
if (this.errorCallback) { |
102 |
this.errorCallback(this); |
103 |
} |
104 |
}; |
105 |
|
106 |
})(jQuery); |