destroy widgets within overlay using AjaxDestroy. Moving AjaxDestroy to its own file is required to avoid a circular import dependency within ajax.js and overlay.js

Author: lenadax

src/ajax.js

@@ -26,6 +26,7 @@ import {
     http_request
 } from './request.js';
 import {spinner} from './spinner.js';
+import {AjaxDestroy} from './ajaxdestroy.js';
 
 /**
  * Ajax utility mixin.
@@ -547,47 +548,6 @@ export class AjaxDispatcher extends AjaxUtil {
     }
 }
 
-/**
- * DOM parser for destroying JavaScript instances attached to DOM elements
- * going to be removed.
- */
-export class AjaxDestroy extends Parser {
-
-    parse(node) {
-        let instances = node._ajax_attached;
-        if (instances !== undefined) {
-            for (let instance of instances) {
-                // XXX: maybe introduce skip_destroy flag for instances
-                // that do not need to be destroyed
-                if (instance.destroy !== undefined) {
-                    instance.destroy();
-                } else {
-                    console.warn('ts.ajax bound but no destroy method defined: '  + instance.constructor.name);
-                }
-            }
-        }
-
-        let attrs = this.node_attrs(node);
-        if (attrs['ajax:bind']) { // unbind events bound from AjaxDispatcher
-            let evts = attrs['ajax:bind'];
-            $(node).off(evts);
-        }
-        node._ajax_attached = null;
-        let dd = bootstrap.Dropdown.getInstance(node);
-        let tt = bootstrap.Tooltip.getInstance(node);
-        if (dd) {
-            dd.dispose();
-        }
-        if (tt) {
-            tt.dispose();
-        }
-        $(node).empty(); // remove retained comments
-        $(node).off(); // remove event listeners
-        $(node).removeData(); // remove cached data
-        node = null;
-    }
-}
-
 /**
  * Handle for DOM manipulation and Ajax continuation operations.
  */
@@ -613,8 +573,7 @@ export class AjaxHandle extends AjaxUtil {
             context;
         if (mode === 'replace') {
             let old_context = $(selector);
-            this.destroy(old_context.children());
-            old_context.empty();
+            this.destroy(old_context);
             old_context.replaceWith(payload);
             context = $(selector);
             if (context.length) {
@@ -1161,7 +1120,7 @@ export class Ajax extends AjaxUtil {
 }
 
 let ajax = new Ajax();
-export {ajax};
+export {ajax, AjaxDestroy};
 
 $.fn.tsajax = function() {
     ajax.bind(this);

src/ajaxdestroy.js

@@ -0,0 +1,54 @@
+import {Parser} from "./parser";
+import $ from 'jquery';
+
+/**
+ * DOM parser for destroying JavaScript instances attached to DOM elements
+ * going to be removed.
+ */
+export class AjaxDestroy extends Parser {
+
+    parse(node) {
+        let instances = node._ajax_attached;
+        if (instances !== undefined) {
+            for (let instance of instances) {
+                if (instance.destroy !== undefined) {
+                    instance.destroy();
+                } else {
+                    console.warn('ts.ajax bound but no destroy method defined: '  + instance.constructor.name);
+                }
+            }
+        }
+
+        let attrs = this.node_attrs(node);
+        if (attrs['ajax:bind']) { // unbind events bound from AjaxDispatcher
+            let evts = attrs['ajax:bind'];
+            $(node).off(evts);
+        }
+        if (window.bootstrap) {
+            let dd = window.bootstrap.Dropdown.getInstance(node);
+            let tt = window.bootstrap.Tooltip.getInstance(node);
+            if (dd) {
+                dd.dispose();
+            }
+            if (tt) {
+                tt.dispose();
+            }
+        }
+        $(node).empty(); // remove retained comments
+        $(node).off(); // remove event listeners
+        $(node).removeData(); // remove cached data
+        node = null;
+    }
+}
+
+/**
+ * Destroys an AJAX-bound element.
+ *
+ * @param {HTMLElement|jQuery} elem - The element to destroy. Can be a jQuery object or a DOM element.
+ * @returns {void}
+ */
+export function ajax_destroy(elem) {
+    elem = elem instanceof $ ? elem.get(0) : elem;
+    let handle = new AjaxDestroy();
+    handle.walk(elem);
+}

src/overlay.js

@@ -5,6 +5,7 @@ import {
     set_default,
     uuid4
 } from './utils.js';
+import {ajax_destroy} from './ajaxdestroy.js';
 
 export class Overlay extends Events {
 
@@ -23,7 +24,7 @@ export class Overlay extends Events {
 
     compile() {
         compile_template(this, `
-          <div class="modal fade ${this.css}" id="${this.uid}" t-elem="elem" data-bs-backdrop="static">
+          <div class="modal ${this.css}" id="${this.uid}" t-elem="elem">
             <div class="modal-dialog">
               <div class="modal-content">
                 <div class="modal-header">
@@ -44,7 +45,6 @@ export class Overlay extends Events {
         $('body').addClass('modal-open');
         this.container.append(this.elem);
         this.elem.show();
-        this.elem.modal('show');
         this.is_open = true;
         this.trigger('on_open');
     }
@@ -53,9 +53,9 @@ export class Overlay extends Events {
         if ($('.modal:visible').length === 1) {
             $('body').removeClass('modal-open');
         }
-        this.elem.modal('hide');
-        this.elem.remove();
+        ajax_destroy(this.elem);
         this.is_open = false;
+        this.elem.removeData('overlay').remove();
         this.trigger('on_close');
     }
 }
@@ -84,7 +84,7 @@ export class Message extends Overlay {
         opts.content = opts.message ? opts.message : opts.content;
         opts.css = opts.flavor ? opts.flavor : opts.css;
         super(opts);
-        this.compile_actions()
+        this.compile_actions();
     }
 
     compile_actions() {

tests/test_overlay.js

@@ -52,16 +52,14 @@ QUnit.module('treibstoff.overlay', hooks => {
 
         let body = $('body');
         assert.true(body.hasClass('modal-open'));
-        assert.deepEqual(body.css('padding-right'), '13px');
-        assert.deepEqual(body.css('overflow-x'), 'hidden');
+        // assert.deepEqual(body.css('overflow-x'), 'hidden');
 
         ol.close();
         assert.deepEqual(container.children().length, 0);
         assert.false(ol.elem.is(':visible'));
 
         assert.false(body.hasClass('modal-open'));
-        assert.deepEqual(body.css('padding-right'), '0px');
-        assert.deepEqual(body.css('overflow-x'), 'auto');
+        // assert.deepEqual(body.css('overflow-x'), 'auto');
     });
 
     QUnit.test('Test Overlay events', assert => {

tests/test_widget.js

@@ -189,7 +189,7 @@ QUnit.module('treibstoff.widget', hooks => {
             assert.step('External on_click');
         });
 
-        assert.deepEqual(button.unselected_class, 'btn-default');
+        assert.deepEqual(button.unselected_class, 'btn-primary');
         assert.deepEqual(button.selected_class, 'btn-success');
 
         button.selected = true;

treibstoff/bundle/treibstoff.bundle.js

@@ -554,6 +554,45 @@ var ts = (function (exports, $) {
         }
     }
 
+    class AjaxDestroy extends Parser {
+        parse(node) {
+            let instances = node._ajax_attached;
+            if (instances !== undefined) {
+                for (let instance of instances) {
+                    if (instance.destroy !== undefined) {
+                        instance.destroy();
+                    } else {
+                        console.warn('ts.ajax bound but no destroy method defined: '  + instance.constructor.name);
+                    }
+                }
+            }
+            let attrs = this.node_attrs(node);
+            if (attrs['ajax:bind']) {
+                let evts = attrs['ajax:bind'];
+                $(node).off(evts);
+            }
+            if (window.bootstrap) {
+                let dd = window.bootstrap.Dropdown.getInstance(node);
+                let tt = window.bootstrap.Tooltip.getInstance(node);
+                if (dd) {
+                    dd.dispose();
+                }
+                if (tt) {
+                    tt.dispose();
+                }
+            }
+            $(node).empty();
+            $(node).off();
+            $(node).removeData();
+            node = null;
+        }
+    }
+    function ajax_destroy(elem) {
+        elem = elem instanceof $ ? elem.get(0) : elem;
+        let handle = new AjaxDestroy();
+        handle.walk(elem);
+    }
+
     class Overlay extends Events {
         constructor(opts) {
             super();
@@ -569,7 +608,7 @@ var ts = (function (exports, $) {
         }
         compile() {
             compile_template(this, `
-          <div class="modal fade ${this.css}" id="${this.uid}" t-elem="elem" data-bs-backdrop="static">
+          <div class="modal ${this.css}" id="${this.uid}" t-elem="elem">
             <div class="modal-dialog">
               <div class="modal-content">
                 <div class="modal-header">
@@ -589,17 +628,16 @@ var ts = (function (exports, $) {
             $('body').addClass('modal-open');
             this.container.append(this.elem);
             this.elem.show();
-            this.elem.modal('show');
             this.is_open = true;
             this.trigger('on_open');
         }
         close() {
             if ($('.modal:visible').length === 1) {
                 $('body').removeClass('modal-open');
             }
-            this.elem.modal('hide');
-            this.elem.remove();
+            ajax_destroy(this.elem);
             this.is_open = false;
+            this.elem.removeData('overlay').remove();
             this.trigger('on_close');
         }
     }
@@ -1190,38 +1228,6 @@ var ts = (function (exports, $) {
             }
         }
     }
-    class AjaxDestroy extends Parser {
-        parse(node) {
-            let instances = node._ajax_attached;
-            if (instances !== undefined) {
-                for (let instance of instances) {
-                    if (instance.destroy !== undefined) {
-                        instance.destroy();
-                    } else {
-                        console.warn('ts.ajax bound but no destroy method defined: '  + instance.constructor.name);
-                    }
-                }
-            }
-            let attrs = this.node_attrs(node);
-            if (attrs['ajax:bind']) {
-                let evts = attrs['ajax:bind'];
-                $(node).off(evts);
-            }
-            node._ajax_attached = null;
-            let dd = bootstrap.Dropdown.getInstance(node);
-            let tt = bootstrap.Tooltip.getInstance(node);
-            if (dd) {
-                dd.dispose();
-            }
-            if (tt) {
-                tt.dispose();
-            }
-            $(node).empty();
-            $(node).off();
-            $(node).removeData();
-            node = null;
-        }
-    }
     class AjaxHandle extends AjaxUtil {
         constructor(ajax) {
             super();
@@ -1241,8 +1247,7 @@ var ts = (function (exports, $) {
                 context;
             if (mode === 'replace') {
                 let old_context = $(selector);
-                this.destroy(old_context.children());
-                old_context.empty();
+                this.destroy(old_context);
                 old_context.replaceWith(payload);
                 context = $(selector);
                 if (context.length) {