Move converse-chatboxviews plugin into folder

src/headless/plugins/chat/model-with-contact.js

-import {  converse } from "../../core.js";
+import { api, converse } from "../../core.js";
 import { Model } from '@converse/skeletor/src/model.js';
 
 const u = converse.env.utils;

src/plugins/chatboxviews.js → src/plugins/chatboxviews/index.js

@@ -3,22 +3,20 @@
  * @copyright 2020, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
-import '../components/converse.js';
-import "@converse/headless/plugins/chatboxes";
-import tpl_avatar from "../templates/avatar.js";
-import tpl_background_logo from "../templates/background_logo.js";
-import tpl_converse from "../templates/converse.js";
-import { Overview } from "@converse/skeletor/src/overview";
-import { View } from "@converse/skeletor/src/view";
-import { _converse, api, converse } from "@converse/headless/core";
-import { render } from "lit-html";
-import { result } from "lodash-es";
+import '../../components/converse.js';
+import '@converse/headless/plugins/chatboxes';
+import tpl_avatar from '../../templates/avatar.js';
+import tpl_background_logo from '../../templates/background_logo.js';
+import tpl_converse from '../../templates/converse.js';
+import { Overview } from '@converse/skeletor/src/overview';
+import { View } from '@converse/skeletor/src/view';
+import { _converse, api, converse } from '@converse/headless/core';
+import { render } from 'lit-html';
+import { result } from 'lodash-es';
 
 const u = converse.env.utils;
 
-
 const AvatarMixin = {
-
     renderAvatar (el) {
         el = el || this.el;
         const avatar_el = el.querySelector('canvas.avatar, svg.avatar');
@@ -32,18 +30,15 @@ const AvatarMixin = {
                 'height': avatar_el.getAttribute('height'),
                 'image_type': this.model.vcard.get('image_type'),
                 'image': this.model.vcard.get('image')
-            }
+            };
             avatar_el.outerHTML = u.getElementFromTemplateResult(tpl_avatar(data)).outerHTML;
         }
-    },
+    }
 };
 
-
 const ViewWithAvatar = View.extend(AvatarMixin);
 
-
 const ChatBoxViews = Overview.extend({
-
     _ensureElement () {
         /* Override method from backbone.js
          * If the #conversejs element doesn't exist, create it.
@@ -69,15 +64,15 @@ const ChatBoxViews = Overview.extend({
     },
 
     initialize () {
-        this.listenTo(this.model, "destroy", this.removeChat)
+        this.listenTo(this.model, 'destroy', this.removeChat);
         const bg = document.getElementById('conversejs-bg');
         if (bg && !bg.innerHTML.trim()) {
             render(tpl_background_logo(), bg);
         }
         const body = document.querySelector('body');
-        body.classList.add(`converse-${api.settings.get("view_mode")}`);
-        this.el.classList.add(`converse-${api.settings.get("view_mode")}`);
-        if (api.settings.get("singleton")) {
+        body.classList.add(`converse-${api.settings.get('view_mode')}`);
+        this.el.classList.add(`converse-${api.settings.get('view_mode')}`);
+        if (api.settings.get('singleton')) {
             this.el.classList.add(`converse-singleton`);
         }
         this.render();
@@ -89,7 +84,7 @@ const ChatBoxViews = Overview.extend({
         this.row_el = this.el.querySelector('.row');
     },
 
-    /*(
+    /**
      * Add a new DOM element (likely a chat box) into the
      * the row managed by this overview.
      * @param { HTMLElement } el
@@ -103,11 +98,10 @@ const ChatBoxViews = Overview.extend({
     },
 
     closeAllChatBoxes () {
-        return Promise.all(this.map(v => v.close({'name': 'closeAllChatBoxes'})));
+        return Promise.all(this.map(v => v.close({ 'name': 'closeAllChatBoxes' })));
     }
 });
 
-
 function onChatBoxViewsInitialized () {
     _converse.chatboxviews = new _converse.ChatBoxViews({
         'model': _converse.chatboxes
@@ -120,17 +114,13 @@ function onChatBoxViewsInitialized () {
     api.trigger('chatBoxViewsInitialized');
 }
 
-
 function calculateViewportHeightUnit () {
     const vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
 }
 
-
 converse.plugins.add('converse-chatboxviews', {
-
-    dependencies: ["converse-chatboxes", "converse-vcard"],
-
+    dependencies: ['converse-chatboxes', 'converse-vcard'],
 
     initialize () {
         /* The initialize function gets called as soon as the plugin is
@@ -154,13 +144,12 @@ converse.plugins.add('converse-chatboxviews', {
 
         /************************ BEGIN Event Handlers ************************/
         api.listen.on('chatBoxesInitialized', onChatBoxViewsInitialized);
-        api.listen.on('cleanup', () => (delete _converse.chatboxviews));
+        api.listen.on('cleanup', () => delete _converse.chatboxviews);
         api.listen.on('clearSession', () => _converse.chatboxviews.closeAllChatBoxes());
         api.listen.on('chatBoxViewsInitialized', calculateViewportHeightUnit);
         window.addEventListener('resize', calculateViewportHeightUnit);
         /************************ END Event Handlers ************************/
 
-
         Object.assign(converse, {
             /**
              * Public API method which will ensure that the #conversejs element
@@ -178,12 +167,12 @@ converse.plugins.add('converse-chatboxviews', {
                 const el = _converse.chatboxviews?.el;
                 if (el && !container.contains(el)) {
                     container.insertAdjacentElement('afterBegin', el);
-                    api.chatviews.get()
+                    api.chatviews
+                        .get()
                         .filter(v => v.model.get('id') !== 'controlbox')
                         .forEach(v => v.maintainScrollTop());
-
                 } else if (!el) {
-                    throw new Error("Cannot insert non-existing #conversejs element into the DOM");
+                    throw new Error('Cannot insert non-existing #conversejs element into the DOM');
                 }
             }
         });

src/plugins/chatview.js

@@ -6,7 +6,7 @@
 import '../components/chat_content.js';
 import '../components/help_messages.js';
 import '../components/toolbar.js';
-import './chatboxviews';
+import './chatboxviews/index.js';
 import './modal.js';
 import log from '@converse/headless/log';
 import tpl_chatbox from 'templates/chatbox.js';