Add Promise queue to prevent overlapping dialogue boxes #841 (#1002)

www/js/lib/uiUtil.js

@@ -24,14 +24,14 @@
 // DEV: Put your RequireJS definition in the rqDef array below, and any function exports in the function parenthesis of the define statement
 // We need to do it this way in order to load WebP polyfills conditionally. The WebP polyfills are only needed by a few old browsers, so loading them
 // only if needed saves approximately 1MB of memory.
-var rqDef = ['settingsStore'];
+var rqDef = ['settingsStore', 'util'];
 
 // Add WebP polyfill only if webpHero was loaded in init.js
 if (webpMachine) {
     rqDef.push('webpHeroBundle');
 }
 
-define(rqDef, function(settingsStore) {
+define(rqDef, function(settingsStore, util) {
 
     /**
      * Displays a Bootstrap alert or confirm dialog box depending on the options provided
@@ -49,6 +49,7 @@ define(rqDef, function(settingsStore) {
         approveConfirmLabel = approveConfirmLabel || 'Confirm';
         closeMessageLabel = closeMessageLabel || 'Okay';
         label = label || (isConfirm ? 'Confirmation' : 'Message');
+        return util.PromiseQueue.enqueue(function () {
             return new Promise(function (resolve, reject) {
                 if (!message) reject('Missing body message');
                 // Set the text to the modal and its buttons
@@ -139,6 +140,7 @@ define(rqDef, function(settingsStore) {
                 // Set focus to the first focusable element inside the modal
                 modal.focus();
             });
+        });
     }
   
     /**

www/js/lib/util.js

@@ -194,6 +194,52 @@ define([], function() {
     }
 
     /**
+     * Queues Promise Factories* to be resolved or rejected sequentially. This helps to avoid overlapping Promise functions.
+     * Primarily used by uiUtil.systemAlert, to prevent alerts showing while others are being displayed.
+     * 
+     *   *A Promise Factory is merely a Promise wrapped in a function to prevent it from executing immediately. E.g. to use
+     *   this function with a Promise, call it like this (or, more likely, use your own pre-wrapped Promise):
+     * 
+     *      return util.PromiseQueue.enqueue(function () {
+     *          return new Promise(function (resolve, reject) { ... });
+     *      });
+     * 
+     * Adapted from https://medium.com/@karenmarkosyan/how-to-manage-promises-into-dynamic-queue-with-vanilla-javascript-9d0d1f8d4df5
+     * 
+     * @type {Object} PromiseQueue
+     * @property {Function} enqueue Queues a Promise Factory. Call this function repeatedly to queue Promises sequentially
+     * @param {Function<Promise>} promiseFactory A Promise wrapped in an ordinary function
+     * @returns {Promise} A Promise that resolves or rejects with the resolved/rejected value of the Promise Factory
+     */
+    var PromiseQueue = {
+        _queue: [],
+        _working: false,
+        enqueue: function (promiseFactory) {
+            var that = this;
+            return new Promise(function (resolve, reject) {
+                that._queue.push({promise: promiseFactory, resolve: resolve, reject: reject});
+                if (!that._working) that._dequeue();
+            });
+        },
+        _dequeue: function () {
+            this._working = true;
+            var that = this;
+            var deferred = this._queue.shift();
+            if (!deferred) {
+                this._working = false;
+                return false;
+            }
+            return deferred.promise().then(function (val) {
+                deferred.resolve(val);
+            }).catch(function (err) {
+                deferred.reject(err);
+            }).finally(function () {
+                return that._dequeue();
+            });
+        }
+    };
+
+    /*
      * Functions and classes exposed by this module
      */
     return {
@@ -203,6 +249,7 @@ define([], function() {
         readFloatFrom4Bytes: readFloatFrom4Bytes,
         readFileSlice: readFileSlice,
         binarySearch: binarySearch,
-        leftShift: leftShift
+        leftShift: leftShift,
+        PromiseQueue: PromiseQueue
     };
 });