defectivebydesign.org/20130319/files/misc/progress.js

   1 (function ($) {
   2
   3 /**
   4  * A progressbar object. Initialized with the given id. Must be inserted into
   5  * the DOM afterwards through progressBar.element.
   6  *
   7  * method is the function which will perform the HTTP request to get the
   8  * progress bar state. Either "GET" or "POST".
   9  *
  10  * e.g. pb = new progressBar('myProgressBar');
  11  *      some_element.appendChild(pb.element);
  12  */
  13 Drupal.progressBar = function (id, updateCallback, method, errorCallback) {
  14   var pb = this;
  15   this.id = id;
  16   this.method = method || 'GET';
  17   this.updateCallback = updateCallback;
  18   this.errorCallback = errorCallback;
  19
  20   // The WAI-ARIA setting aria-live="polite" will announce changes after users
  21   // have completed their current activity and not interrupt the screen reader.
  22   this.element = $('<div class="progress" aria-live="polite"></div>').attr('id', id);
  23   this.element.html('<div class="bar"><div class="filled"></div></div>' +
  24                     '<div class="percentage"></div>' +
  25                     '<div class="message">&nbsp;</div>');
  26 };
  27
  28 /**
  29  * Set the percentage and status message for the progressbar.
  30  */
  31 Drupal.progressBar.prototype.setProgress = function (percentage, message) {
  32   if (percentage >= 0 && percentage <= 100) {
  33     $('div.filled', this.element).css('width', percentage + '%');
  34     $('div.percentage', this.element).html(percentage + '%');
  35   }
  36   $('div.message', this.element).html(message);
  37   if (this.updateCallback) {
  38     this.updateCallback(percentage, message, this);
  39   }
  40 };
  41
  42 /**
  43  * Start monitoring progress via Ajax.
  44  */
  45 Drupal.progressBar.prototype.startMonitoring = function (uri, delay) {
  46   this.delay = delay;
  47   this.uri = uri;
  48   this.sendPing();
  49 };
  50
  51 /**
  52  * Stop monitoring progress via Ajax.
  53  */
  54 Drupal.progressBar.prototype.stopMonitoring = function () {
  55   clearTimeout(this.timer);
  56   // This allows monitoring to be stopped from within the callback.
  57   this.uri = null;
  58 };
  59
  60 /**
  61  * Request progress data from server.
  62  */
  63 Drupal.progressBar.prototype.sendPing = function () {
  64   if (this.timer) {
  65     clearTimeout(this.timer);
  66   }
  67   if (this.uri) {
  68     var pb = this;
  69     // When doing a post request, you need non-null data. Otherwise a
  70     // HTTP 411 or HTTP 406 (with Apache mod_security) error may result.
  71     $.ajax({
  72       type: this.method,
  73       url: this.uri,
  74       data: '',
  75       dataType: 'json',
  76       success: function (progress) {
  77         // Display errors.
  78         if (progress.status == 0) {
  79           pb.displayError(progress.data);
  80           return;
  81         }
  82         // Update display.
  83         pb.setProgress(progress.percentage, progress.message);
  84         // Schedule next timer.
  85         pb.timer = setTimeout(function () { pb.sendPing(); }, pb.delay);
  86       },
  87       error: function (xmlhttp) {
  88         pb.displayError(Drupal.ajaxError(xmlhttp, pb.uri));
  89       }
  90     });
  91   }
  92 };
  93
  94 /**
  95  * Display errors on the page.
  96  */
  97 Drupal.progressBar.prototype.displayError = function (string) {
  98   var error = $('<div class="messages error"></div>').html(string);
  99   $(this.element).before(error).hide();
 100
 101   if (this.errorCallback) {
 102     this.errorCallback(this);
 103   }
 104 };
 105
 106 })(jQuery);