6 (function ($, Drupal) {
11 * Theme function for the progress bar.
14 * The id for the progress bar.
17 * The HTML for the progress bar.
19 Drupal.theme.progressBar = function (id) {
20 return '<div id="' + id + '" class="progress" aria-live="polite">' +
21 '<div class="progress__label"> </div>' +
22 '<div class="progress__track"><div class="progress__bar"></div></div>' +
23 '<div class="progress__percentage"></div>' +
24 '<div class="progress__description"> </div>' +
29 * A progressbar object. Initialized with the given id. Must be inserted into
30 * the DOM afterwards through progressBar.element.
32 * Method is the function which will perform the HTTP request to get the
33 * progress bar state. Either "GET" or "POST".
36 * pb = new Drupal.ProgressBar('myProgressBar');
37 * some_element.appendChild(pb.element);
42 * The id for the progressbar.
43 * @param {function} updateCallback
44 * Callback to run on update.
45 * @param {string} method
47 * @param {function} errorCallback
48 * Callback to call on error.
50 Drupal.ProgressBar = function (id, updateCallback, method, errorCallback) {
52 this.method = method || 'GET';
53 this.updateCallback = updateCallback;
54 this.errorCallback = errorCallback;
56 // The WAI-ARIA setting aria-live="polite" will announce changes after
58 // have completed their current activity and not interrupt the screen
60 this.element = $(Drupal.theme('progressBar', id));
63 $.extend(Drupal.ProgressBar.prototype, /** @lends Drupal.ProgressBar# */{
66 * Set the percentage and status message for the progressbar.
68 * @param {number} percentage
69 * The progress percentage.
70 * @param {string} message
71 * The message to show the user.
72 * @param {string} label
73 * The text for the progressbar label.
75 setProgress: function (percentage, message, label) {
76 if (percentage >= 0 && percentage <= 100) {
77 $(this.element).find('div.progress__bar').css('width', percentage + '%');
78 $(this.element).find('div.progress__percentage').html(percentage + '%');
80 $('div.progress__description', this.element).html(message);
81 $('div.progress__label', this.element).html(label);
82 if (this.updateCallback) {
83 this.updateCallback(percentage, message, this);
88 * Start monitoring progress via Ajax.
91 * The URI to use for monitoring.
92 * @param {number} delay
93 * The delay for calling the monitoring URI.
95 startMonitoring: function (uri, delay) {
102 * Stop monitoring progress via Ajax.
104 stopMonitoring: function () {
105 clearTimeout(this.timer);
106 // This allows monitoring to be stopped from within the callback.
111 * Request progress data from server.
113 sendPing: function () {
115 clearTimeout(this.timer);
119 // When doing a post request, you need non-null data. Otherwise a
120 // HTTP 411 or HTTP 406 (with Apache mod_security) error may result.
122 if (uri.indexOf('?') === -1) {
128 uri += '_format=json';
134 success: function (progress) {
136 if (progress.status === 0) {
137 pb.displayError(progress.data);
141 pb.setProgress(progress.percentage, progress.message, progress.label);
142 // Schedule next timer.
143 pb.timer = setTimeout(function () { pb.sendPing(); }, pb.delay);
145 error: function (xmlhttp) {
146 var e = new Drupal.AjaxError(xmlhttp, pb.uri);
147 pb.displayError('<pre>' + e.message + '</pre>');
154 * Display errors on the page.
156 * @param {string} string
157 * The error message to show the user.
159 displayError: function (string) {
160 var error = $('<div class="messages messages--error"></div>').html(string);
161 $(this.element).before(error).hide();
163 if (this.errorCallback) {
164 this.errorCallback(this);