6 (function ($, Drupal) {
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) {
17 return `<div id="${id}" class="progress" aria-live="polite">` +
18 '<div class="progress__label"> </div>' +
19 '<div class="progress__track"><div class="progress__bar"></div></div>' +
20 '<div class="progress__percentage"></div>' +
21 '<div class="progress__description"> </div>' +
26 * A progressbar object. Initialized with the given id. Must be inserted into
27 * the DOM afterwards through progressBar.element.
29 * Method is the function which will perform the HTTP request to get the
30 * progress bar state. Either "GET" or "POST".
33 * pb = new Drupal.ProgressBar('myProgressBar');
34 * some_element.appendChild(pb.element);
39 * The id for the progressbar.
40 * @param {function} updateCallback
41 * Callback to run on update.
42 * @param {string} method
44 * @param {function} errorCallback
45 * Callback to call on error.
47 Drupal.ProgressBar = function (id, updateCallback, method, errorCallback) {
49 this.method = method || 'GET';
50 this.updateCallback = updateCallback;
51 this.errorCallback = errorCallback;
53 // The WAI-ARIA setting aria-live="polite" will announce changes after
55 // have completed their current activity and not interrupt the screen
57 this.element = $(Drupal.theme('progressBar', id));
60 $.extend(Drupal.ProgressBar.prototype, /** @lends Drupal.ProgressBar# */{
63 * Set the percentage and status message for the progressbar.
65 * @param {number} percentage
66 * The progress percentage.
67 * @param {string} message
68 * The message to show the user.
69 * @param {string} label
70 * The text for the progressbar label.
72 setProgress(percentage, message, label) {
73 if (percentage >= 0 && percentage <= 100) {
74 $(this.element).find('div.progress__bar').css('width', `${percentage}%`);
75 $(this.element).find('div.progress__percentage').html(`${percentage}%`);
77 $('div.progress__description', this.element).html(message);
78 $('div.progress__label', this.element).html(label);
79 if (this.updateCallback) {
80 this.updateCallback(percentage, message, this);
85 * Start monitoring progress via Ajax.
88 * The URI to use for monitoring.
89 * @param {number} delay
90 * The delay for calling the monitoring URI.
92 startMonitoring(uri, delay) {
99 * Stop monitoring progress via Ajax.
102 clearTimeout(this.timer);
103 // This allows monitoring to be stopped from within the callback.
108 * Request progress data from server.
112 clearTimeout(this.timer);
116 // When doing a post request, you need non-null data. Otherwise a
117 // HTTP 411 or HTTP 406 (with Apache mod_security) error may result.
119 if (uri.indexOf('?') === -1) {
125 uri += '_format=json';
133 if (progress.status === 0) {
134 pb.displayError(progress.data);
138 pb.setProgress(progress.percentage, progress.message, progress.label);
139 // Schedule next timer.
140 pb.timer = setTimeout(() => {
145 const e = new Drupal.AjaxError(xmlhttp, pb.uri);
146 pb.displayError(`<pre>${e.message}</pre>`);
153 * Display errors on the page.
155 * @param {string} string
156 * The error message to show the user.
158 displayError(string) {
159 const error = $('<div class="messages messages--error"></div>').html(string);
160 $(this.element).before(error).hide();
162 if (this.errorCallback) {
163 this.errorCallback(this);