Remove the old non-element modal

CHANGES.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 11.0.0 (Unreleased)
+
+Breaking changes:
+- Remove the old `_converse.BootstrapModal` in favor of `_converse.BaseModal`
+  which is a web component.
+
 ## 10.1.5 (2023-06-29)
 
 - #3209: Fix error when importing the `converse` global with bootstrap modal API

src/plugins/modal/base.js

@@ -1,90 +0,0 @@
-import bootstrap from "bootstrap.native";
-import sizzle from 'sizzle';
-import tplAlertComponent from "./templates/modal-alert.js";
-import { View } from '@converse/skeletor/src/view.js';
-import { api, log } from '@converse/headless';
-import { hasClass, addClass, removeElement, removeClass } from '../../utils/html.js';
-import { render } from 'lit';
-
-import './styles/_modal.scss';
-
-
-const BaseModal = View.extend({
-    className: "modal",
-    persistent: false, // Whether this modal should persist in the DOM once it's been closed
-    events: {
-        'click  .nav-item .nav-link': 'switchTab'
-    },
-
-    initialize (options) {
-        if (!this.id) {
-            throw new Error("Each modal class must have a unique id attribute");
-        }
-        // Allow properties to be set via passed in options
-        Object.assign(this, options);
-
-        this.render()
-
-        this.el.setAttribute('tabindex', '-1');
-        this.el.setAttribute('role', 'dialog');
-        this.el.setAttribute('aria-hidden', 'true');
-        const label_id = this.el.querySelector('.modal-title').getAttribute('id');
-        label_id && this.el.setAttribute('aria-labelledby', label_id);
-
-        this.insertIntoDOM();
-        const Modal = bootstrap.Modal;
-        this.modal = new Modal(this.el, {
-            backdrop: true,
-            keyboard: true
-        });
-        this.el.addEventListener('hide.bs.modal', () => this.onHide(), false);
-    },
-
-    onHide () {
-        removeClass('selected', this.trigger_el);
-        !this.persistent && api.modal.remove(this);
-    },
-
-    insertIntoDOM () {
-        const container_el = document.querySelector("#converse-modals");
-        container_el.insertAdjacentElement('beforeEnd', this.el);
-    },
-
-    switchTab (ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        sizzle('.nav-link.active', this.el).forEach(el => {
-            removeClass('active', this.el.querySelector(el.getAttribute('href')));
-            removeClass('active', el);
-        });
-        addClass('active', ev.target);
-        addClass('active', this.el.querySelector(ev.target.getAttribute('href')))
-    },
-
-    alert (message, type='primary') {
-        const body = this.el.querySelector('.modal-alert');
-        if (body === null) {
-            log.error("Could not find a .modal-alert element in the modal to show an alert message in!");
-            return;
-        }
-        // FIXME: Instead of adding the alert imperatively, we should
-        // find a way to let the modal rerender with an alert message
-        render(tplAlertComponent({'type': `alert-${type}`, 'message': message}), body);
-        const el = body.firstElementChild;
-        setTimeout(() => {
-            addClass('fade-out', el);
-            setTimeout(() => removeElement(el), 600);
-        }, 5000);
-    },
-
-    show (ev) {
-        if (ev) {
-            ev.preventDefault();
-            this.trigger_el = ev.target;
-            !hasClass('chat-image', this.trigger_el) && addClass('selected', this.trigger_el);
-        }
-        this.modal.show();
-    }
-});
-
-export default BaseModal;

src/plugins/modal/index.js

@@ -2,18 +2,16 @@
  * @copyright The Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
-import BootstrapModal from './base.js';
+import BaseModal from './modal.js';
 import modal_api from './api.js';
-import { _converse, api, converse } from "@converse/headless";
-
-converse.env.BootstrapModal = BootstrapModal; // expose to plugins
+import { _converse, api, converse } from '@converse/headless';
 
+Object.assign(converse.env, { BaseModal });
 
 converse.plugins.add('converse-modal', {
-
     initialize () {
         api.listen.on('disconnect', () => {
-            const container = document.querySelector("#converse-modals");
+            const container = document.querySelector('#converse-modals');
             if (container) {
                 container.innerHTML = '';
             }
@@ -22,5 +20,5 @@ converse.plugins.add('converse-modal', {
         api.listen.on('clearSession', () => api.modal.removeAll());
 
         Object.assign(_converse.api, modal_api);
-    }
+    },
 });