Create directory for modal plugin

src/modals/add-contact.js

@@ -1,5 +1,5 @@
 import 'shared/autocomplete/index.js';
-import BootstrapModal from "./base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import compact from 'lodash-es/compact';
 import debounce from 'lodash-es/debounce';
 import tpl_add_contact_modal from "./templates/add-contact.js";

src/modals/image.js

@@ -1,4 +1,4 @@
-import BootstrapModal from "./base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import tpl_image_modal from "./templates/image.js";
 
 

src/modals/message-versions.js

@@ -1,4 +1,4 @@
-import BootstrapModal from "./base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import tpl_message_versions_modal from "./templates/message-versions.js";
 
 

src/modals/muc-commands.js

@@ -1,5 +1,5 @@
-import BootstrapModal from "./base.js";
-import { __ } from '../i18n';
+import BootstrapModal from "plugins/modal/base.js";
+import { __ } from 'i18n';
 import { api, converse } from "@converse/headless/core";
 import log from "@converse/headless/log";
 import tpl_muc_commands_modal from "../templates/muc_commands-modal.js";

src/modals/muc-details.js

@@ -1,6 +1,6 @@
-import BootstrapModal from "./base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import tpl_muc_details from "./templates/muc-details.js";
-import { __ } from '../i18n';
+import { __ } from 'i18n';
 
 
 export default BootstrapModal.extend({

src/modals/muc-invite.js

@@ -1,5 +1,5 @@
 import 'shared/autocomplete/index.js';
-import BootstrapModal from "./base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import tpl_muc_invite_modal from "./templates/muc-invite.js";
 import { _converse, converse } from "@converse/headless/core";
 

src/modals/occupant.js

@@ -1,4 +1,4 @@
-import BootstrapModal from "./base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import tpl_occupant_modal from "./templates/occupant.js";
 import { _converse, api } from "@converse/headless/core";
 

src/modals/templates/add-contact.js

@@ -1,6 +1,6 @@
 import { html } from "lit";
-import { __ } from '../../i18n';
-import { modal_header_close_button } from "./buttons.js"
+import { __ } from 'i18n';
+import { modal_header_close_button } from "plugins/modal/templates/buttons.js"
 
 
 export default (o) => {

src/modals/templates/buttons.js

@@ -1,7 +0,0 @@
-import { __ } from '../../i18n';
-import { html } from "lit";
-
-
-export const modal_close_button = html`<button type="button" class="btn btn-secondary" data-dismiss="modal">${__('Close')}</button>`;
-
-export const modal_header_close_button = html`<button type="button" class="close" data-dismiss="modal" aria-label="${__('Close')}"><span aria-hidden="true">×</span></button>`;

src/modals/templates/image.js

@@ -1,6 +1,6 @@
 import { html } from "lit";
-import { __ } from '../../i18n';
-import { modal_close_button, modal_header_close_button } from "./buttons.js"
+import { __ } from 'i18n';
+import { modal_close_button, modal_header_close_button } from "plugins/modal/templates/buttons.js"
 
 
 export default (o) => {

src/modals/templates/message-versions.js

@@ -1,7 +1,7 @@
 import 'shared/components/message-versions.js';
 import { __ } from 'i18n';
 import { html } from "lit";
-import { modal_close_button, modal_header_close_button } from "./buttons.js"
+import { modal_close_button, modal_header_close_button } from "plugins/modal/templates/buttons.js"
 
 
 export default (model) => html`

src/modals/templates/muc-details.js

@@ -1,7 +1,7 @@
-import { __ } from '../../i18n';
+import { __ } from 'i18n';
 import { html } from "lit";
-import { modal_close_button, modal_header_close_button } from "./buttons.js"
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { modal_close_button, modal_header_close_button } from "plugins/modal/templates/buttons.js";
+
 
 const subject = (o) => {
     const i18n_topic = __('Topic');

src/modals/templates/muc-invite.js

@@ -1,6 +1,6 @@
 import { html } from "lit";
-import { __ } from '../../i18n';
-import { modal_header_close_button } from "./buttons.js"
+import { __ } from 'i18n';
+import { modal_header_close_button } from "plugins/modal/templates/buttons.js"
 
 
 export default (o) => {

src/modals/templates/occupant.js

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { modal_close_button, modal_header_close_button } from "./buttons.js"
+import { modal_close_button, modal_header_close_button } from "plugins/modal/templates/buttons.js"
 import { renderAvatar } from 'shared/directives/avatar';
 
 

src/modals/templates/user-details.js

@@ -1,7 +1,7 @@
 import avatar from 'shared/templates/avatar.js';
 import { __ } from 'i18n';
 import { html } from 'lit';
-import { modal_close_button, modal_header_close_button } from './buttons.js'
+import { modal_close_button, modal_header_close_button } from 'plugins/modal/templates/buttons.js'
 
 
 const device_fingerprint = (o) => {

src/modals/templates/user-settings.js

@@ -1,8 +1,8 @@
 import DOMPurify from 'dompurify';
-import { __ } from '../../i18n';
+import { __ } from 'i18n';
 import { api } from "@converse/headless/core";
 import { html } from "lit";
-import { modal_header_close_button } from "./buttons.js"
+import { modal_header_close_button } from "plugins/modal/templates/buttons.js"
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 

src/modals/user-details.js

@@ -1,7 +1,7 @@
-import BootstrapModal from "./base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import log from "@converse/headless/log";
 import tpl_user_details_modal from "./templates/user-details.js";
-import { __ } from '../i18n';
+import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 
 const u = converse.env.utils;

src/modals/user-settings.js

@@ -1,4 +1,4 @@
-import BootstrapModal from "./base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import tpl_user_settings_modal from "./templates/user-settings.js";
 
 let _converse;

src/plugins/chatview/index.js

@@ -3,7 +3,7 @@
  * @license Mozilla Public License (MPLv2)
  */
 import '../chatboxviews/index.js';
-import '../modal.js';
+import 'plugins/modal/index.js';
 import 'shared/chat/chat-content.js';
 import 'shared/chat/help-messages.js';
 import 'shared/chat/toolbar.js';

src/modals/alert.js → src/plugins/modal/alert.js

@@ -1,6 +1,6 @@
 import BootstrapModal from "./base.js";
 import tpl_alert_modal from "./templates/alert.js";
-import { __ } from '../i18n';
+import { __ } from 'i18n';
 
 
 const Alert = BootstrapModal.extend({

src/plugins/modal.js → src/plugins/modal/api.js

@@ -1,23 +1,11 @@
-/**
- * @module converse-modal
- * @copyright The Converse.js contributors
- * @license Mozilla Public License (MPLv2)
- */
-import Alert from '../modals/alert.js';
-import BootstrapModal from '../modals/base.js';
-import Confirm from '../modals/confirm.js';
+import Alert from './alert.js';
+import Confirm from './confirm.js';
 import { Model } from '@converse/skeletor/src/model.js';
-import { _converse, api, converse } from "@converse/headless/core";
-
-
-converse.env.BootstrapModal = BootstrapModal; // expose to plugins
-
 
 let modals = [];
 
 
 const modal_api = {
-
     /**
      * API namespace for methods relating to modals
      * @namespace _converse.api.modal
@@ -82,7 +70,7 @@ const modal_api = {
      * Show a confirm modal to the user.
      * @method _converse.api.confirm
      * @param { String } title - The header text for the confirmation dialog
-     * @param { (String[]|String) } messages - The text to show to the user
+     * @param { (Array<String>|String) } messages - The text to show to the user
      * @param { Array<Field> } fields - An object representing a fields presented to the user.
      * @property { String } Field.label - The form label for the input field.
      * @property { String } Field.name - The name for the input field.
@@ -113,7 +101,7 @@ const modal_api = {
      * Show a prompt modal to the user.
      * @method _converse.api.prompt
      * @param { String } title - The header text for the prompt
-     * @param { (String[]|String) } messages - The prompt text to show to the user
+     * @param { (Array<String>|String) } messages - The prompt text to show to the user
      * @param { String } placeholder - The placeholder text for the prompt input
      * @returns { Promise<String|false> } A promise which resolves with the text provided by the
      *  user or `false` if the user canceled the prompt.
@@ -148,7 +136,7 @@ const modal_api = {
      * @method _converse.api.alert
      * @param { ('info'|'warn'|'error') } type - The type of alert.
      * @param { String } title - The header text for the alert.
-     * @param { (String[]|String) } messages - The alert text to show to the user.
+     * @param { (Array<String>|String) } messages - The alert text to show to the user.
      */
     alert (type, title, messages) {
         if (typeof messages === 'string') {
@@ -169,23 +157,8 @@ const modal_api = {
             'level': level,
             'type': 'alert'
         })
-        api.modal.show(Alert, {model});
+        modal_api.modal.show(Alert, {model});
     }
 }
 
-
-converse.plugins.add('converse-modal', {
-
-    initialize () {
-        api.listen.on('disconnect', () => {
-            const container = document.querySelector("#converse-modals");
-            if (container) {
-                container.innerHTML = '';
-            }
-        });
-
-        api.listen.on('clearSession', () => api.modal.removeAll());
-
-        Object.assign(_converse.api, modal_api);
-    }
-});
+export default modal_api;

src/plugins/modal/index.js

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

src/modals/templates/alert.js → src/plugins/modal/templates/alert.js

@@ -14,5 +14,4 @@ export default (o) => html`
               ${ o.messages.map(message => html`<p>${message}</p>`) }
             </div>
         </div>
-    </div>
-`;
+    </div>`;

src/plugins/modal/templates/buttons.js

@@ -0,0 +1,9 @@
+import { __ } from 'i18n';
+import { html } from "lit";
+
+
+export const modal_close_button =
+    html`<button type="button" class="btn btn-secondary" data-dismiss="modal">${__('Close')}</button>`;
+
+export const modal_header_close_button =
+    html`<button type="button" class="close" data-dismiss="modal" aria-label="${__('Close')}"><span aria-hidden="true">×</span></button>`;

src/modals/templates/prompt.js → src/plugins/modal/templates/prompt.js

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { __ } from '../../i18n';
+import { __ } from 'i18n';
 
 
 const tpl_field = (f) => html`

src/plugins/muc-views/index.js

@@ -1,10 +1,10 @@
 /**
- * @copyright 2020, the Converse.js contributors
+ * @copyright The Converse.js developers
  * @description XEP-0045 Multi-User Chat Views
  * @license Mozilla Public License (MPLv2)
  */
 import '../chatboxviews/index.js';
-import '../modal.js';
+import 'plugins/modal/index.js';
 import './adhoc-commands.js';
 import MUCView from './muc.js';
 import { api, converse } from '@converse/headless/core';

src/plugins/muc-views/modals/add-muc.js

@@ -1,5 +1,5 @@
 import tpl_add_muc from "../templates/add-muc.js";
-import BootstrapModal from "modals/base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 

src/plugins/muc-views/modals/moderator-tools.js

@@ -1,5 +1,5 @@
 import '../modtools.js';
-import BootstrapModal from "modals/base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import tpl_moderator_tools from './templates/moderator-tools.js';
 
 const ModeratorToolsModal = BootstrapModal.extend({

src/plugins/muc-views/modals/muc-list.js

@@ -1,4 +1,4 @@
-import BootstrapModal from "modals/base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import head from "lodash-es/head";
 import log from "@converse/headless/log";
 import tpl_list_chatrooms_modal from "../templates/muc-list.js";

src/plugins/muc-views/modals/templates/moderator-tools.js

@@ -1,6 +1,6 @@
 import { __ } from 'i18n';
 import { html } from "lit";
-import { modal_header_close_button } from "modals/templates/buttons.js"
+import { modal_header_close_button } from "plugins/modal/templates/buttons.js"
 
 export default (o) => {
     const i18n_moderator_tools = __('Moderator Tools');

src/plugins/muc-views/templates/add-muc.js

@@ -1,7 +1,7 @@
 import DOMPurify from 'dompurify';
 import { __ } from 'i18n';
 import { html } from "lit";
-import { modal_header_close_button } from "modals/templates/buttons.js"
+import { modal_header_close_button } from "plugins/modal/templates/buttons.js"
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 

src/plugins/muc-views/templates/muc-list.js

@@ -1,7 +1,7 @@
 import { __ } from 'i18n';
 import { html } from "lit";
 import { repeat } from 'lit/directives/repeat.js';
-import { modal_close_button, modal_header_close_button } from "modals/templates/buttons.js"
+import { modal_close_button, modal_header_close_button } from "plugins/modal/templates/buttons.js"
 import spinner from "templates/spinner.js";
 
 

src/plugins/profile/index.js

@@ -2,12 +2,12 @@
  * @copyright The Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
-import '../modal.js';
+import '../modal/index.js';
 import './statusview.js';
 import '@converse/headless/plugins/status';
 import '@converse/headless/plugins/vcard';
-import 'modals/chat-status.js';
-import 'modals/profile.js';
+import './modals/chat-status.js';
+import './modals/profile.js';
 import { api, converse } from '@converse/headless/core';
 
 

src/modals/chat-status.js → src/plugins/profile/modals/chat-status.js

@@ -1,6 +1,6 @@
-import BootstrapModal from "./base.js";
-import tpl_chat_status_modal from "./templates/chat-status.js";
-import { __ } from '../i18n';
+import BootstrapModal from "plugins/modal/base.js";
+import tpl_chat_status_modal from "../templates/chat-status-modal.js";
+import { __ } from 'i18n';
 import { _converse, converse } from "@converse/headless/core";
 
 const u = converse.env.utils;

src/modals/profile.js → src/plugins/profile/modals/profile.js

@@ -1,9 +1,9 @@
-import BootstrapModal from "./base.js";
+import BootstrapModal from "plugins/modal/base.js";
 import bootstrap from "bootstrap.native";
 import log from "@converse/headless/log";
-import tpl_profile_modal from "./templates/profile.js";
-import { __ } from '../i18n';
-import { _converse, api } from "@converse/headless/core";
+import tpl_profile_modal from "../templates/profile_modal.js";
+import { __ } from 'i18n';
+import { _converse, api, converse } from "@converse/headless/core";
 
 const { sizzle } = converse.env;
 

src/modals/templates/chat-status.js → src/plugins/profile/templates/chat-status-modal.js

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { modal_header_close_button } from "./buttons.js"
+import { modal_header_close_button } from "plugins/modal/templates/buttons.js";
 
 
 export default (o) => html`

src/modals/templates/profile.js → src/plugins/profile/templates/profile_modal.js

@@ -3,7 +3,7 @@ import spinner from "templates/spinner.js";
 import { __ } from 'i18n';
 import { _converse, converse } from  "@converse/headless/core";
 import { html } from "lit";
-import { modal_header_close_button } from "./buttons.js";
+import { modal_header_close_button } from "plugins/modal/templates/buttons.js";
 
 const u = converse.env.utils;