Convert to external version of Snowboard

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

@@ -10,6 +10,7 @@ import { delegate } from 'jquery-events-to-dom-events';
  * Functions:
  *  - Adds the "render" jQuery event to Snowboard requests that widgets use to initialise.
  *  - Ensures the CSRF token is included in requests.
+ *  - Initialises controls within AJAX-changed partials.
  *
  * @copyright 2021 Winter.
  * @author Ben Thomson <git@alfreido.com>
@@ -23,6 +24,7 @@ export default class Handler extends Snowboard.Singleton {
     listens() {
         return {
             ready: 'ready',
+            ajaxUpdate: 'onAjaxUpdate',
             ajaxFetchOptions: 'ajaxFetchOptions',
             ajaxUpdateComplete: 'ajaxUpdateComplete',
         };
@@ -43,6 +45,10 @@ export default class Handler extends Snowboard.Singleton {
         document.addEventListener('$render', () => {
             this.snowboard.globalEvent('render');
         });
+        delegate('ajaxUpdate', ['event', 'context', 'data', 'status', 'xhr']);
+        document.addEventListener('$ajaxUpdate', (event) => {
+            this.snowboard.globalEvent('ajaxUpdate', event.target, event.detail.data);
+        });
 
         // Add "render" event for backwards compatibility
         window.jQuery(document).trigger('render');
@@ -121,4 +127,15 @@ export default class Handler extends Snowboard.Singleton {
     getToken() {
         return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
     }
+
+    /**
+     * AJAX update handler.
+     *
+     * Initializes widgets inside an update element from an AJAX response.
+     *
+     * @param {HTMLElement} element
+     */
+    onAjaxUpdate(element) {
+        this.snowboard['backend.ui.controls']().initializeControls(element);
+    }
 }

modules/backend/assets/ui/js/index.js

@@ -1,16 +1,15 @@
 import * as Vue from 'vue';
+import { Control, ControlHandler } from '@wintercms/snowboard-controls';
 import BackendAjaxHandler from './ajax/Handler';
-import BackendUiEventHandler from './ui/EventHandler';
-import BackendUiWidgetHandler from './ui/WidgetHandler';
 
 if (window.Snowboard === undefined) {
     throw new Error('Snowboard must be loaded in order to use the Backend UI.');
 }
 
 ((Snowboard) => {
     Snowboard.addPlugin('backend.ajax.handler', BackendAjaxHandler);
-    Snowboard.addPlugin('backend.ui.eventHandler', BackendUiEventHandler);
-    Snowboard.addPlugin('backend.ui.widgetHandler', BackendUiWidgetHandler);
+    Snowboard.addPlugin('backend.ui.controls', ControlHandler);
+    Snowboard.addAbstract('WinterControl', Control);
 
     // Add the pre-filter immediately
     Snowboard['backend.ajax.handler']().addPrefilter();