Attach original AJAX framework events to Snowboard in Backend

modules/backend/assets/css/winter.css

@@ -1103,4 +1103,4 @@ html.cssanimations .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.f
 .flyout-toggle i{margin:7px 0 0 6px;display:inline-block}
 .flyout-toggle:hover i{color:#fff}
 body.flyout-visible{overflow:hidden}
-body.flyout-visible .flyout-overlay{background-color:rgba(0,0,0,0.3)}
+body.flyout-visible .flyout-overlay{background-color:rgba(0,0,0,0.3)}

modules/backend/assets/ui/js/ajax/Handler.js

@@ -9,12 +9,20 @@ import { delegate } from 'jquery-events-to-dom-events';
  *
  * Functions:
  *  - Adds the "render" jQuery event to Snowboard requests that widgets use to initialise.
+ *  - Hooks into the main jQuery AJAX workflow events of the original AJAX framework (`ajaxPromise` at the beginning
+ *     of an AJAX request, `ajaxDone`/`ajaxRedirected`/`ajaxFail` at the end of the beginning of an AJAX requests)
+ *     and simulates comparable Snowboard events to allow Snowboard functionality that acts on AJAX events to
+ *     to function in the Backend (Flash messages, loader bar)
  *  - Ensures the CSRF token is included in requests.
  *
  * @copyright 2021 Winter.
  * @author Ben Thomson <[email protected]>
  */
 export default class Handler extends Snowboard.Singleton {
+    construct() {
+        this.requests = [];
+    }
+
     /**
      * Event listeners.
      *
@@ -46,6 +54,42 @@ export default class Handler extends Snowboard.Singleton {
 
         // Add "render" event for backwards compatibility
         window.jQuery(document).trigger('render');
+
+        // Add global events for AJAX queries and route them to the Snowboard global events and
+        // necessary UI functionality
+        delegate('ajaxPromise', ['event', 'context']);
+        delegate('ajaxDone', ['event', 'context', 'data']);
+        delegate('ajaxRedirected', ['event']);
+        delegate('ajaxFail', ['event', 'context', 'textStatus']);
+
+        document.addEventListener('$ajaxPromise', (event) => {
+            this.requests[event.target] = Promise.withResolvers();
+            this.snowboard.globalEvent('ajaxStart', this.requests[event.target].promise, {
+                element: event.target,
+                options: {},
+            });
+        });
+        document.addEventListener('$ajaxDone', (event) => {
+            this.requests[event.target].resolve(event.detail.data);
+            this.snowboard.globalEvent('ajaxDone', event.detail.data, {
+                element: event.target,
+                options: {},
+            });
+        });
+        document.addEventListener('$ajaxRedirected', (event) => {
+            this.requests[event.target].resolve();
+            this.snowboard.globalEvent('ajaxDone', event.detail.data, {
+                element: event.target,
+                options: {},
+            });
+        });
+        document.addEventListener('$ajaxFail', (event) => {
+            this.requests[event.target].reject(event.detail.textStatus);
+            this.snowboard.globalEvent('ajaxDone', event.detail.data, {
+                element: event.target,
+                options: {},
+            });
+        });
     }
 
     /**

modules/backend/widgets/mediamanager/assets/js/mediamanager-browser-min.js

@@ -540,4 +540,4 @@ case'undo-resizing':this.undoResizing()
 break}}
 MediaManagerImageCropPopup.prototype.onSelectionChanged=function(c){this.updateSelectionSizeLabel(c.w,c.h)}
 MediaManagerImageCropPopup.DEFAULTS={alias:undefined,onDone:undefined}
-$.wn.mediaManager.imageCropPopup=MediaManagerImageCropPopup}(window.jQuery);
+$.wn.mediaManager.imageCropPopup=MediaManagerImageCropPopup}(window.jQuery);