8 * Theme function for the progress bar.
11 * The id for the progress bar.
14 * The HTML for the progress bar.
16 Drupal.theme.progressBar = function(id) {
18 `<div id="${id}" class="progress" aria-live="polite">` +
19 '<div class="progress__label"> </div>' +
20 '<div class="progress__track"><div class="progress__bar"></div></div>' +
21 '<div class="progress__percentage"></div>' +
22 '<div class="progress__description"> </div>' +
28 * A progressbar object. Initialized with the given id. Must be inserted into
29 * the DOM afterwards through progressBar.element.
31 * Method is the function which will perform the HTTP request to get the
32 * progress bar state. Either "GET" or "POST".
35 * pb = new Drupal.ProgressBar('myProgressBar');
36 * some_element.appendChild(pb.element);
41 * The id for the progressbar.
42 * @param {function} updateCallback
43 * Callback to run on update.
44 * @param {string} method
46 * @param {function} errorCallback
47 * Callback to call on error.
49 Drupal.ProgressBar = function(id, updateCallback, method, errorCallback) {
51 this.method = method || 'GET';
52 this.updateCallback = updateCallback;
53 this.errorCallback = errorCallback;
55 // The WAI-ARIA setting aria-live="polite" will announce changes after
57 // have completed their current activity and not interrupt the screen
59 this.element = $(Drupal.theme('progressBar', id));
63 Drupal.ProgressBar.prototype,
64 /** @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(percentage, message, label) {
76 if (percentage >= 0 && percentage <= 100) {
78 .find('div.progress__bar')
79 .css('width', `${percentage}%`);
81 .find('div.progress__percentage')
82 .html(`${percentage}%`);
84 $('div.progress__description', this.element).html(message);
85 $('div.progress__label', this.element).html(label);
86 if (this.updateCallback) {
87 this.updateCallback(percentage, message, this);
92 * Start monitoring progress via Ajax.
95 * The URI to use for monitoring.
96 * @param {number} delay
97 * The delay for calling the monitoring URI.
99 startMonitoring(uri, delay) {
106 * Stop monitoring progress via Ajax.
109 clearTimeout(this.timer);
110 // This allows monitoring to be stopped from within the callback.
115 * Request progress data from server.
119 clearTimeout(this.timer);
123 // When doing a post request, you need non-null data. Otherwise a
124 // HTTP 411 or HTTP 406 (with Apache mod_security) error may result.
126 if (uri.indexOf('?') === -1) {
131 uri += '_format=json';
139 if (progress.status === 0) {
140 pb.displayError(progress.data);
149 // Schedule next timer.
150 pb.timer = setTimeout(() => {
155 const e = new Drupal.AjaxError(xmlhttp, pb.uri);
156 pb.displayError(`<pre>${e.message}</pre>`);
163 * Display errors on the page.
165 * @param {string} string
166 * The error message to show the user.
168 displayError(string) {
169 const error = $('<div class="messages messages--error"></div>').html(
176 if (this.errorCallback) {
177 this.errorCallback(this);