diff options
Diffstat (limited to 'core/misc/progress.js')
| -rw-r--r-- | core/misc/progress.js | 244 |
1 files changed, 162 insertions, 82 deletions
diff --git a/core/misc/progress.js b/core/misc/progress.js index 8c1a6ff3fb8..24c13af0cc3 100644 --- a/core/misc/progress.js +++ b/core/misc/progress.js @@ -1,100 +1,180 @@ /** -* DO NOT EDIT THIS FILE. -* See the following change record for more information, -* https://www.drupal.org/node/2815083 -* @preserve -**/ + * @file + * Progress bar. + */ (function ($, Drupal) { + /** + * Theme function for the progress bar. + * + * @param {string} id + * The id for the progress bar. + * + * @return {string} + * The HTML for the progress bar. + */ Drupal.theme.progressBar = function (id) { - return `<div id="${id}" class="progress" aria-live="polite">` + '<div class="progress__label"> </div>' + '<div class="progress__track"><div class="progress__bar"></div></div>' + '<div class="progress__percentage"></div>' + '<div class="progress__description"> </div>' + '</div>'; + return ( + `<div id="${id}" class="progress" aria-live="polite">` + + '<div class="progress__label"> </div>' + + '<div class="progress__track"><div class="progress__bar"></div></div>' + + '<div class="progress__percentage"></div>' + + '<div class="progress__description"> </div>' + + '</div>' + ); }; + /** + * A progressbar object. Initialized with the given id. Must be inserted into + * the DOM afterwards through progressBar.element. + * + * Method is the function which will perform the HTTP request to get the + * progress bar state. Either "GET" or "POST". + * + * @example + * pb = new Drupal.ProgressBar('myProgressBar'); + * some_element.appendChild(pb.element); + * + * @constructor + * + * @param {string} id + * The id for the progressbar. + * @param {function} updateCallback + * Callback to run on update. + * @param {string} method + * HTTP method to use. + * @param {function} errorCallback + * Callback to call on error. + */ Drupal.ProgressBar = function (id, updateCallback, method, errorCallback) { this.id = id; this.method = method || 'GET'; this.updateCallback = updateCallback; this.errorCallback = errorCallback; + + // The WAI-ARIA setting aria-live="polite" will announce changes after + // users + // have completed their current activity and not interrupt the screen + // reader. this.element = $(Drupal.theme('progressBar', id)); }; - $.extend(Drupal.ProgressBar.prototype, { - setProgress(percentage, message, label) { - if (percentage >= 0 && percentage <= 100) { - $(this.element).find('div.progress__bar').css('width', `${percentage}%`); - $(this.element).find('div.progress__percentage').html(`${percentage}%`); - } - - $('div.progress__description', this.element).html(message); - $('div.progress__label', this.element).html(label); - - if (this.updateCallback) { - this.updateCallback(percentage, message, this); - } - }, - - startMonitoring(uri, delay) { - this.delay = delay; - this.uri = uri; - this.sendPing(); - }, - - stopMonitoring() { - clearTimeout(this.timer); - this.uri = null; - }, - - sendPing() { - if (this.timer) { + $.extend( + Drupal.ProgressBar.prototype, + /** @lends Drupal.ProgressBar# */ { + /** + * Set the percentage and status message for the progressbar. + * + * @param {number} percentage + * The progress percentage. + * @param {string} message + * The message to show the user. + * @param {string} label + * The text for the progressbar label. + */ + setProgress(percentage, message, label) { + if (percentage >= 0 && percentage <= 100) { + $(this.element) + .find('div.progress__bar') + .css('width', `${percentage}%`); + $(this.element) + .find('div.progress__percentage') + .html(`${percentage}%`); + } + $('div.progress__description', this.element).html(message); + $('div.progress__label', this.element).html(label); + if (this.updateCallback) { + this.updateCallback(percentage, message, this); + } + }, + + /** + * Start monitoring progress via Ajax. + * + * @param {string} uri + * The URI to use for monitoring. + * @param {number} delay + * The delay for calling the monitoring URI. + */ + startMonitoring(uri, delay) { + this.delay = delay; + this.uri = uri; + this.sendPing(); + }, + + /** + * Stop monitoring progress via Ajax. + */ + stopMonitoring() { clearTimeout(this.timer); - } - - if (this.uri) { - const pb = this; - let uri = this.uri; - - if (uri.indexOf('?') === -1) { - uri += '?'; - } else { - uri += '&'; + // This allows monitoring to be stopped from within the callback. + this.uri = null; + }, + + /** + * Request progress data from server. + */ + sendPing() { + if (this.timer) { + clearTimeout(this.timer); } - - uri += '_format=json'; - $.ajax({ - type: this.method, - url: uri, - data: '', - dataType: 'json', - - success(progress) { - if (progress.status === 0) { - pb.displayError(progress.data); - return; - } - - pb.setProgress(progress.percentage, progress.message, progress.label); - pb.timer = setTimeout(() => { - pb.sendPing(); - }, pb.delay); - }, - - error(xmlhttp) { - const e = new Drupal.AjaxError(xmlhttp, pb.uri); - pb.displayError(`<pre>${e.message}</pre>`); + if (this.uri) { + const pb = this; + // When doing a post request, you need non-null data. Otherwise a + // HTTP 411 or HTTP 406 (with Apache mod_security) error may result. + let uri = this.uri; + if (uri.indexOf('?') === -1) { + uri += '?'; + } else { + uri += '&'; } - - }); - } + uri += '_format=json'; + $.ajax({ + type: this.method, + url: uri, + data: '', + dataType: 'json', + success(progress) { + // Display errors. + if (progress.status === 0) { + pb.displayError(progress.data); + return; + } + // Update display. + pb.setProgress( + progress.percentage, + progress.message, + progress.label, + ); + // Schedule next timer. + pb.timer = setTimeout(() => { + pb.sendPing(); + }, pb.delay); + }, + error(xmlhttp) { + const e = new Drupal.AjaxError(xmlhttp, pb.uri); + pb.displayError(`<pre>${e.message}</pre>`); + }, + }); + } + }, + + /** + * Display errors on the page. + * + * @param {string} string + * The error message to show the user. + */ + displayError(string) { + const error = $('<div class="messages messages--error"></div>').html( + string, + ); + $(this.element).before(error).hide(); + + if (this.errorCallback) { + this.errorCallback(this); + } + }, }, - - displayError(string) { - const error = $('<div class="messages messages--error"></div>').html(string); - $(this.element).before(error).hide(); - - if (this.errorCallback) { - this.errorCallback(this); - } - } - - }); -})(jQuery, Drupal);
\ No newline at end of file + ); +})(jQuery, Drupal); |