Attach original AJAX framework events to Snowboard in Backend (winter…

…cms#1235)

Replaces wintercms#1234, fixes wintercms#1233.

Instead of loading framework.extras.css, which appears to be excluded from the Backend, this PR hooks the necessary original AJAX framework events into Snowboard's events, allowing the applicable events to execute UI functionality such as data-attach-loading and the Stripe loader.

This is technically a stop-gap solution for now, since it doesn't emulate a full Snowboard request, so there's the potential for custom Snowboard event listeners to break if they are relying on Snowboard request information, but I'm not aware of that happening yet in core.

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);