Drupal 8.0.0 beta 12. More info: https://www.drupal.org/node/2514176
This commit is contained in:
commit
9921556621
13277 changed files with 1459781 additions and 0 deletions
core/misc
157
core/misc/progress.js
Normal file
157
core/misc/progress.js
Normal file
|
@ -0,0 +1,157 @@
|
|||
/**
|
||||
* @file
|
||||
* Progress bar.
|
||||
*/
|
||||
|
||||
(function ($, Drupal) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Theme function for the progress bar.
|
||||
*
|
||||
* @param {string} id
|
||||
*
|
||||
* @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>';
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @param {function} updateCallback
|
||||
* @param {string} method
|
||||
* @param {function} errorCallback
|
||||
*/
|
||||
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, /** @lends Drupal.ProgressBar# */{
|
||||
|
||||
/**
|
||||
* Set the percentage and status message for the progressbar.
|
||||
*
|
||||
* @param {number} percentage
|
||||
* @param {string} message
|
||||
* @param {string} label
|
||||
*/
|
||||
setProgress: function (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
|
||||
* @param {number} delay
|
||||
*/
|
||||
startMonitoring: function (uri, delay) {
|
||||
this.delay = delay;
|
||||
this.uri = uri;
|
||||
this.sendPing();
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop monitoring progress via Ajax.
|
||||
*/
|
||||
stopMonitoring: function () {
|
||||
clearTimeout(this.timer);
|
||||
// This allows monitoring to be stopped from within the callback.
|
||||
this.uri = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Request progress data from server.
|
||||
*/
|
||||
sendPing: function () {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
if (this.uri) {
|
||||
var 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.
|
||||
var uri = this.uri;
|
||||
if (uri.indexOf('?') === -1) {
|
||||
uri += '?';
|
||||
}
|
||||
else {
|
||||
uri += '&';
|
||||
}
|
||||
uri += '_format=json';
|
||||
$.ajax({
|
||||
type: this.method,
|
||||
url: uri,
|
||||
data: '',
|
||||
success: function (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(function () { pb.sendPing(); }, pb.delay);
|
||||
},
|
||||
error: function (xmlhttp) {
|
||||
var e = new Drupal.AjaxError(xmlhttp, pb.uri);
|
||||
pb.displayError('<pre>' + e.message + '</pre>');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Display errors on the page.
|
||||
*
|
||||
* @param {string} string
|
||||
*/
|
||||
displayError: function (string) {
|
||||
var error = $('<div class="messages messages--error"></div>').html(string);
|
||||
$(this.element).before(error).hide();
|
||||
|
||||
if (this.errorCallback) {
|
||||
this.errorCallback(this);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, Drupal);
|
Reference in a new issue