Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Maybe we could improve the way(s) developers can implement custom progress indicators.
What do you think about the following code which is a refactored version of the current 8.x-dev code:
Drupal.ajax.prototype.beforeSend = function (xmlhttprequest, options) {
// ...
// Insert progress indicator
var progressIndicatorMethod = 'setProgressIndicator' + this.progress.type.slice(0,1).toUpperCase() + this.progress.type.slice(1).toLowerCase();
if (this[progressIndicatorMethod] && this[progressIndicatorMethod].call) {
this[progressIndicatorMethod].call(this);
$(this.element).after(this.progress.element);
}
};
So we simply factor out the method for the existing progress indicators, having the side effect of allowing custom progress indicators:
Drupal.ajax.prototype.setProgressIndicatorProgressbar = function() {
var progressBar = new Drupal.progressBar('ajax-progress-' + this.element.id, eval(this.progress.update_callback), this.progress.method, eval(this.progress.error_callback));
if (this.progress.message) {
progressBar.setProgress(-1, this.progress.message);
}
if (this.progress.url) {
progressBar.startMonitoring(this.progress.url, this.progress.interval || 1500);
}
this.progress.element = $(progressBar.element).addClass('ajax-progress ajax-progress-bar');
this.progress.object = progressBar;
};
Drupal.ajax.prototype.setProgressIndicatorThrobber = function() {
this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber"> </div></div>');
if (this.progress.message) {
$('.throbber', this.progress.element).after('<div class="message">' + this.progress.message + '</div>');
}
$(this.element).after(this.progress.element);
};
This way developers can use their custom progress indicators simply by using:
$form = array(
'element' => array(
'#type' => 'textfield',
'#ajax' => array(
'callback' => 'mymodule_ajax_callback',
'wrapper' => 'ajax-wrapper',
'progress' => array(
'type' => 'custom'
// Additional custom options
),
),
),
);
And then implementing:
Drupal.ajax.prototype.setProgressIndicatorCustom = function() {
// Setting this.progress.element is the only necessary thing to happen in here.
this.progress.element = $('<div class="ajax-progress ajax-progress-custom">indicator</div>');
};
Comments
Comment #1
nod_+1 for cleaning this up.
Comment #2
nod_#1533366: Simplify and optimize Drupal.ajax() instantiation and implementation
Comment #2.0
nod_fixed a typo in code
Comment #3
kalidasan CreditAttribution: kalidasan commentedIf we want to place progress bar "before" or "after" any element, please use below code.