www.aleph1.co.uk Git - yaffs-website/blob - web/core/misc/progress.js

   1 /**
   2  * @file
   3  * Progress bar.
   4  */
   5
   6 (function ($, Drupal) {
   7
   8   'use strict';
   9
  10   /**
  11    * Theme function for the progress bar.
  12    *
  13    * @param {string} id
  14    *   The id for the progress bar.
  15    *
  16    * @return {string}
  17    *   The HTML for the progress bar.
  18    */
  19   Drupal.theme.progressBar = function (id) {
  20     return '<div id="' + id + '" class="progress" aria-live="polite">' +
  21       '<div class="progress__label">&nbsp;</div>' +
  22       '<div class="progress__track"><div class="progress__bar"></div></div>' +
  23       '<div class="progress__percentage"></div>' +
  24       '<div class="progress__description">&nbsp;</div>' +
  25       '</div>';
  26   };
  27
  28   /**
  29    * A progressbar object. Initialized with the given id. Must be inserted into
  30    * the DOM afterwards through progressBar.element.
  31    *
  32    * Method is the function which will perform the HTTP request to get the
  33    * progress bar state. Either "GET" or "POST".
  34    *
  35    * @example
  36    * pb = new Drupal.ProgressBar('myProgressBar');
  37    * some_element.appendChild(pb.element);
  38    *
  39    * @constructor
  40    *
  41    * @param {string} id
  42    *   The id for the progressbar.
  43    * @param {function} updateCallback
  44    *   Callback to run on update.
  45    * @param {string} method
  46    *   HTTP method to use.
  47    * @param {function} errorCallback
  48    *   Callback to call on error.
  49    */
  50   Drupal.ProgressBar = function (id, updateCallback, method, errorCallback) {
  51     this.id = id;
  52     this.method = method || 'GET';
  53     this.updateCallback = updateCallback;
  54     this.errorCallback = errorCallback;
  55
  56     // The WAI-ARIA setting aria-live="polite" will announce changes after
  57     // users
  58     // have completed their current activity and not interrupt the screen
  59     // reader.
  60     this.element = $(Drupal.theme('progressBar', id));
  61   };
  62
  63   $.extend(Drupal.ProgressBar.prototype, /** @lends Drupal.ProgressBar# */{
  64
  65     /**
  66      * Set the percentage and status message for the progressbar.
  67      *
  68      * @param {number} percentage
  69      *   The progress percentage.
  70      * @param {string} message
  71      *   The message to show the user.
  72      * @param {string} label
  73      *   The text for the progressbar label.
  74      */
  75     setProgress: function (percentage, message, label) {
  76       if (percentage >= 0 && percentage <= 100) {
  77         $(this.element).find('div.progress__bar').css('width', percentage + '%');
  78         $(this.element).find('div.progress__percentage').html(percentage + '%');
  79       }
  80       $('div.progress__description', this.element).html(message);
  81       $('div.progress__label', this.element).html(label);
  82       if (this.updateCallback) {
  83         this.updateCallback(percentage, message, this);
  84       }
  85     },
  86
  87     /**
  88      * Start monitoring progress via Ajax.
  89      *
  90      * @param {string} uri
  91      *   The URI to use for monitoring.
  92      * @param {number} delay
  93      *   The delay for calling the monitoring URI.
  94      */
  95     startMonitoring: function (uri, delay) {
  96       this.delay = delay;
  97       this.uri = uri;
  98       this.sendPing();
  99     },
 100
 101     /**
 102      * Stop monitoring progress via Ajax.
 103      */
 104     stopMonitoring: function () {
 105       clearTimeout(this.timer);
 106       // This allows monitoring to be stopped from within the callback.
 107       this.uri = null;
 108     },
 109
 110     /**
 111      * Request progress data from server.
 112      */
 113     sendPing: function () {
 114       if (this.timer) {
 115         clearTimeout(this.timer);
 116       }
 117       if (this.uri) {
 118         var pb = this;
 119         // When doing a post request, you need non-null data. Otherwise a
 120         // HTTP 411 or HTTP 406 (with Apache mod_security) error may result.
 121         var uri = this.uri;
 122         if (uri.indexOf('?') === -1) {
 123           uri += '?';
 124         }
 125         else {
 126           uri += '&';
 127         }
 128         uri += '_format=json';
 129         $.ajax({
 130           type: this.method,
 131           url: uri,
 132           data: '',
 133           dataType: 'json',
 134           success: function (progress) {
 135             // Display errors.
 136             if (progress.status === 0) {
 137               pb.displayError(progress.data);
 138               return;
 139             }
 140             // Update display.
 141             pb.setProgress(progress.percentage, progress.message, progress.label);
 142             // Schedule next timer.
 143             pb.timer = setTimeout(function () { pb.sendPing(); }, pb.delay);
 144           },
 145           error: function (xmlhttp) {
 146             var e = new Drupal.AjaxError(xmlhttp, pb.uri);
 147             pb.displayError('<pre>' + e.message + '</pre>');
 148           }
 149         });
 150       }
 151     },
 152
 153     /**
 154      * Display errors on the page.
 155      *
 156      * @param {string} string
 157      *   The error message to show the user.
 158      */
 159     displayError: function (string) {
 160       var error = $('<div class="messages messages--error"></div>').html(string);
 161       $(this.element).before(error).hide();
 162
 163       if (this.errorCallback) {
 164         this.errorCallback(this);
 165       }
 166     }
 167   });
 168
 169 })(jQuery, Drupal);