root / drupal7 / sites / all / themes / bootstrap / js / misc / _progress.js @ 024de6ea
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-wrapper" aria-live="polite"></div>'); |
23 |
this.element.html('<div id ="' + id + '" class="progress progress-striped active">' + |
24 |
'<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
|
25 |
'<div class="percentage sr-only"></div>' +
|
26 |
'</div></div>' +
|
27 |
'</div><div class="percentage pull-right"></div>' +
|
28 |
'<div class="message"> </div>');
|
29 |
}; |
30 |
|
31 |
/**
|
32 |
* Set the percentage and status message for the progressbar.
|
33 |
*/
|
34 |
Drupal.progressBar.prototype.setProgress = function (percentage, message) { |
35 |
if (percentage >= 0 && percentage <= 100) { |
36 |
$('div.progress-bar', this.element).css('width', percentage + '%'); |
37 |
$('div.progress-bar', this.element).attr('aria-valuenow', percentage); |
38 |
$('div.percentage', this.element).html(percentage + '%'); |
39 |
} |
40 |
$('div.message', this.element).html(message); |
41 |
if (this.updateCallback) { |
42 |
this.updateCallback(percentage, message, this); |
43 |
} |
44 |
}; |
45 |
|
46 |
/**
|
47 |
* Start monitoring progress via Ajax.
|
48 |
*/
|
49 |
Drupal.progressBar.prototype.startMonitoring = function (uri, delay) { |
50 |
this.delay = delay;
|
51 |
this.uri = uri;
|
52 |
this.sendPing();
|
53 |
}; |
54 |
|
55 |
/**
|
56 |
* Stop monitoring progress via Ajax.
|
57 |
*/
|
58 |
Drupal.progressBar.prototype.stopMonitoring = function () { |
59 |
clearTimeout(this.timer);
|
60 |
// This allows monitoring to be stopped from within the callback.
|
61 |
this.uri = null; |
62 |
}; |
63 |
|
64 |
/**
|
65 |
* Request progress data from server.
|
66 |
*/
|
67 |
Drupal.progressBar.prototype.sendPing = function () { |
68 |
if (this.timer) { |
69 |
clearTimeout(this.timer);
|
70 |
} |
71 |
if (this.uri) { |
72 |
var pb = this; |
73 |
// When doing a post request, you need non-null data. Otherwise a
|
74 |
// HTTP 411 or HTTP 406 (with Apache mod_security) error may result.
|
75 |
$.ajax({
|
76 |
type: this.method, |
77 |
url: this.uri, |
78 |
data: '', |
79 |
dataType: 'json', |
80 |
success: function (progress) { |
81 |
// Display errors.
|
82 |
if (progress.status == 0) { |
83 |
pb.displayError(progress.data); |
84 |
return;
|
85 |
} |
86 |
// Update display.
|
87 |
pb.setProgress(progress.percentage, progress.message); |
88 |
// Schedule next timer.
|
89 |
pb.timer = setTimeout(function () { pb.sendPing(); }, pb.delay);
|
90 |
}, |
91 |
error: function (xmlhttp) { |
92 |
pb.displayError(Drupal.ajaxError(xmlhttp, pb.uri)); |
93 |
} |
94 |
}); |
95 |
} |
96 |
}; |
97 |
|
98 |
/**
|
99 |
* Display errors on the page.
|
100 |
*/
|
101 |
Drupal.progressBar.prototype.displayError = function (string) { |
102 |
var error = $('<div class="alert alert-block alert-error"><a class="close" data-dismiss="alert" href="#">×</a><h4>Error message</h4></div>').append(string); |
103 |
$(this.element).before(error).hide(); |
104 |
|
105 |
if (this.errorCallback) { |
106 |
this.errorCallback(this); |
107 |
} |
108 |
}; |
109 |
|
110 |
})(jQuery); |