Remove overrides from the dragresize plugin

src/headless/plugins/chat/model.js

@@ -47,23 +47,10 @@ class ChatBox extends ModelWithMessages(ModelWithContact(ColorAwareModel(ChatBox
         this.initialized = getOpenPromise();
 
         const jid = this.get('jid');
-        if (!jid) {
-            // XXX: The `validate` method will prevent this model
-            // from being persisted if there's no jid, but that gets
-            // called after model instantiation, so we have to deal
-            // with invalid models here also.
-            // This happens when the controlbox is in browser storage,
-            // but we're in embedded mode.
-            return;
-        }
-        this.set({'box_id': `box-${jid}`});
-
-        if (this.get('type') === PRIVATE_CHAT_TYPE) {
-            const { presences } = _converse.state;
-            this.presence = presences.get(jid) || presences.create({ jid });
-            await this.setModelContact(jid);
-            this.presence.on('change:show', (item) => this.onPresenceChanged(item));
-        }
+        const { presences } = _converse.state;
+        this.presence = presences.get(jid) || presences.create({ jid });
+        await this.setModelContact(jid);
+        this.presence.on('change:show', (item) => this.onPresenceChanged(item));
 
         this.on('change:chat_state', () => sendChatState(this.get('jid'), this.get('chat_state')));
         this.on('change:hidden', () => (this.get('hidden') && this.setChatState(INACTIVE)));

src/headless/plugins/headlines/feed.js

@@ -26,7 +26,6 @@ export default class HeadlinesFeed extends ChatBoxBase {
 
     async initialize() {
         await super.initialize();
-        this.set({ 'box_id': `box-${this.get('jid')}` });
         await this.fetchMessages();
         /**
          * Triggered once a { @link _converse.HeadlinesFeed } has been created and initialized.

src/headless/plugins/muc/muc.js

@@ -93,7 +93,6 @@ class MUC extends ModelWithMessages(ColorAwareModel(ChatBoxBase)) {
         this.initialized = getOpenPromise();
 
         this.debouncedRejoin = debounce(this.rejoin, 250);
-        this.set('box_id', `box-${this.get('jid')}`);
 
         this.initOccupants();
         this.initDiscoModels(); // sendChatState depends on this.features

src/headless/shared/chatbox.js

@@ -12,6 +12,21 @@ const { u } = converse.env;
  * Base class for all chat boxes. Provides common methods.
  */
 export default class ChatBoxBase extends ModelWithMessages(Model) {
+    async initialize() {
+        await super.initialize();
+        const jid = this.get('jid');
+        if (!jid) {
+            // XXX: The `validate` method will prevent this model
+            // from being persisted if there's no jid, but that gets
+            // called after model instantiation, so we have to deal
+            // with invalid models here also.
+            // This happens when the controlbox is in browser storage,
+            // but we're in embedded mode.
+            return;
+        }
+        this.set({'box_id': `box-${jid}`});
+    }
+
     validate(attrs) {
         if (!attrs.jid) {
             return 'Ignored ChatBox without JID';

src/headless/types/plugins/headlines/feed.d.ts

@@ -12,7 +12,6 @@ export default class HeadlinesFeed extends ChatBoxBase {
         time_sent: any;
         type: string;
     };
-    initialize(): Promise<void>;
 }
 import ChatBoxBase from '../../shared/chatbox.js';
 //# sourceMappingURL=feed.d.ts.map

src/headless/types/shared/chatbox.d.ts

@@ -130,6 +130,7 @@ declare const ChatBoxBase_base: {
  * Base class for all chat boxes. Provides common methods.
  */
 export default class ChatBoxBase extends ChatBoxBase_base {
+    initialize(): Promise<void>;
     validate(attrs: any): string;
     /**
      * @param {boolean} force

src/plugins/dragresize/index.js

@@ -1,10 +1,10 @@
-/**
- * @module converse-dragresize
- * @copyright 2022, the Converse.js contributors
- * @license Mozilla Public License (MPLv2)
- */
 import './components/dragresize.js';
-import { applyDragResistance, onMouseUp, onMouseMove } from './utils.js';
+import {
+    initializeDragResize,
+    dragresizeOverIframeHandler,
+    registerGlobalEventHandlers,
+    unregisterGlobalEventHandlers,
+} from './utils.js';
 import DragResizableMixin from './mixin.js';
 import { _converse, api, converse } from '@converse/headless';
 
@@ -12,86 +12,35 @@ converse.plugins.add('converse-dragresize', {
     /* Plugin dependencies are other plugins which might be
      * overridden or relied upon, and therefore need to be loaded before
      * this plugin.
-     *
-     * If the setting "strict_plugin_dependencies" is set to true,
-     * an error will be raised if the plugin is not found. By default it's
-     * false, which means these plugins are only loaded opportunistically.
      */
     dependencies: ['converse-chatview', 'converse-headlines-view', 'converse-muc-views'],
 
-    enabled () {
+    enabled() {
         return api.settings.get('view_mode') == 'overlayed';
     },
 
-    // Overrides mentioned here will be picked up by converse.js's
-    // plugin architecture they will replace existing methods on the
-    // relevant objects or classes.
-    overrides: {
-        ChatBox: {
-            initialize () {
-                const result = this.__super__.initialize.apply(this, arguments);
-                const height = this.get('height');
-                const width = this.get('width');
-                const save = this.get('id') === 'controlbox' ? a => this.set(a) : a => this.save(a);
-                save({
-                    'height': applyDragResistance(height, this.get('default_height')),
-                    'width': applyDragResistance(width, this.get('default_width'))
-                });
-                return result;
-            }
-        }
-    },
-
-    initialize () {
+    initialize() {
         /* The initialize function gets called as soon as the plugin is
          * loaded by converse.js's plugin machinery.
          */
         api.settings.extend({
-            'allow_dragresize': true
+            'allow_dragresize': true,
         });
 
-        Object.assign(_converse.exports.ChatView.prototype, DragResizableMixin);
-        Object.assign(_converse.exports.MUCView.prototype, DragResizableMixin);
-        if (_converse.exports.ControlBoxView) {
-            Object.assign(_converse.exports.ControlBoxView.prototype, DragResizableMixin);
-        }
+        Object.assign(_converse.exports.ChatView?.prototype ?? {}, DragResizableMixin);
+        Object.assign(_converse.exports.MUCView?.prototype ?? {}, DragResizableMixin);
+        Object.assign(_converse.exports.HeadlinesFeedView?.prototype ?? {}, DragResizableMixin);
+        Object.assign(_converse.exports.ControlBoxView?.prototype ?? {}, DragResizableMixin);
 
-        /************************ BEGIN Event Handlers ************************/
-        function registerGlobalEventHandlers () {
-            document.addEventListener('mousemove', onMouseMove);
-            document.addEventListener('mouseup', onMouseUp);
-        }
-
-        function unregisterGlobalEventHandlers () {
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
-        }
-
-        /**
-         * This function registers mousedown and mouseup events hadlers to
-         * all iframes in the DOM when converse UI resizing events are called
-         * to prevent mouse drag stutter effect which is bad user experience.
-         * @function dragresizeOverIframeHandler
-         * @param {Object} e - dragging node element.
-         */
-        function dragresizeOverIframeHandler (e) {
-          const iframes = Array.from(document.getElementsByTagName('iframe'));
-          for (const iframe of iframes) {
-            e.addEventListener('mousedown', () => {
-                iframe.style.pointerEvents  = 'none';
-            }, { once: true });
-
-            e.addEventListener('mouseup', () => {
-                iframe.style.pointerEvents  = 'initial';
-            }, { once: true });
-          }
-        }
+        api.listen.on('headlinesFeedInitialized', initializeDragResize);
+        api.listen.on('chatBoxInitialized', initializeDragResize);
+        api.listen.on('chatRoomInitialized', initializeDragResize);
 
         api.listen.on('registeredGlobalEventHandlers', registerGlobalEventHandlers);
         api.listen.on('unregisteredGlobalEventHandlers', unregisterGlobalEventHandlers);
-        api.listen.on('beforeShowingChatView', view => view.initDragResize().setDimensions());
+        api.listen.on('beforeShowingChatView', (view) => view.initDragResize().setDimensions());
         api.listen.on('startDiagonalResize', dragresizeOverIframeHandler);
         api.listen.on('startHorizontalResize', dragresizeOverIframeHandler);
         api.listen.on('startVerticalResize', dragresizeOverIframeHandler);
-    }
+    },
 });

src/plugins/dragresize/utils.js

@@ -2,6 +2,55 @@ import { api, converse } from '@converse/headless';
 
 const { u } = converse.env;
 
+export function registerGlobalEventHandlers() {
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+}
+
+export function unregisterGlobalEventHandlers() {
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+}
+
+/**
+ * This function registers mousedown and mouseup events hadlers to
+ * all iframes in the DOM when converse UI resizing events are called
+ * to prevent mouse drag stutter effect which is bad user experience.
+ * @param {Element} e - dragging node element.
+ */
+export function dragresizeOverIframeHandler(e) {
+    const iframes = Array.from(document.getElementsByTagName('iframe'));
+    for (const iframe of iframes) {
+        e.addEventListener(
+            'mousedown',
+            () => {
+                iframe.style.pointerEvents = 'none';
+            },
+            { once: true }
+        );
+
+        e.addEventListener(
+            'mouseup',
+            () => {
+                iframe.style.pointerEvents = 'initial';
+            },
+            { once: true }
+        );
+    }
+}
+
+/**
+ * @param {import('@converse/headless/types/shared/chatbox').default} model
+ */
+export function initializeDragResize(model) {
+    const height = model.get('height');
+    const width = model.get('width');
+    u.safeSave(model, {
+        'height': applyDragResistance(height, model.get('default_height')),
+        'width': applyDragResistance(width, model.get('default_width')),
+    });
+}
+
 /**
  * @typedef {Object} ResizingData
  * @property {HTMLElement} chatbox
@@ -12,11 +61,11 @@ const resizing = {};
 /**
  * @returns {string}
  */
-export function getResizingDirection () {
+export function getResizingDirection() {
     return resizing.direction;
 }
 
-export function onStartVerticalResize (ev, trigger = true) {
+export function onStartVerticalResize(ev, trigger = true) {
     if (!api.settings.get('allow_dragresize')) {
         return true;
     }
@@ -39,7 +88,7 @@ export function onStartVerticalResize (ev, trigger = true) {
     }
 }
 
-export function onStartHorizontalResize (ev, trigger = true) {
+export function onStartHorizontalResize(ev, trigger = true) {
     if (!api.settings.get('allow_dragresize')) {
         return true;
     }
@@ -61,7 +110,7 @@ export function onStartHorizontalResize (ev, trigger = true) {
     }
 }
 
-export function onStartDiagonalResize (ev) {
+export function onStartDiagonalResize(ev) {
     onStartHorizontalResize(ev, false);
     onStartVerticalResize(ev, false);
     resizing.direction = 'topleft';
@@ -81,7 +130,7 @@ export function onStartDiagonalResize (ev) {
  * @param { number } default_value
  * @returns { number }
  */
-export function applyDragResistance (value, default_value) {
+export function applyDragResistance(value, default_value) {
     if (value === undefined) {
         return undefined;
     } else if (default_value === undefined) {
@@ -94,7 +143,7 @@ export function applyDragResistance (value, default_value) {
     return value;
 }
 
-export function onMouseMove (ev) {
+export function onMouseMove(ev) {
     if (!resizing.chatbox || !api.settings.get('allow_dragresize')) {
         return true;
     }
@@ -102,19 +151,13 @@ export function onMouseMove (ev) {
     resizing.chatbox.resizeChatBox(ev);
 }
 
-export function onMouseUp (ev) {
+export function onMouseUp(ev) {
     if (!resizing.chatbox || !api.settings.get('allow_dragresize')) {
         return true;
     }
     ev.preventDefault();
-    const height = applyDragResistance(
-        resizing.chatbox.height,
-        resizing.chatbox.model.get('default_height')
-    );
-    const width = applyDragResistance(
-        resizing.chatbox.width,
-        resizing.chatbox.model.get('default_width')
-    );
+    const height = applyDragResistance(resizing.chatbox.height, resizing.chatbox.model.get('default_height'));
+    const width = applyDragResistance(resizing.chatbox.width, resizing.chatbox.model.get('default_width'));
     if (api.connection.connected()) {
         resizing.chatbox.model.save({ 'height': height });
         resizing.chatbox.model.save({ 'width': width });

src/plugins/headlines-view/index.js

@@ -4,7 +4,7 @@
  * @license Mozilla Public License (MPLv2)
  */
 import '../chatview/index.js';
-import './view.js';
+import HeadlinesFeedView from './view.js';
 import { HeadlinesFeedsList } from './feed-list.js';
 import { _converse, converse } from '@converse/headless';
 
@@ -27,7 +27,8 @@ converse.plugins.add('converse-headlines-view', {
 
     initialize () {
         const exports =  {
-            HeadlinesFeedsList: HeadlinesFeedsList,
+            HeadlinesFeedView,
+            HeadlinesFeedsList,
             HeadlinesPanel: HeadlinesFeedsList, // DEPRECATED
         }
         Object.assign(_converse, exports); // DEPRECATED

src/plugins/headlines-view/templates/chat-head.js

@@ -5,7 +5,6 @@ import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
 
 
 export default (o) => {
-    debugger;
     return html`
         <div class="chatbox-title ${ o.status ? '' :  "chatbox-title--no-desc"}">
             <div class="chatbox-title--row">

src/types/plugins/dragresize/utils.d.ts

@@ -1,3 +1,16 @@
+export function registerGlobalEventHandlers(): void;
+export function unregisterGlobalEventHandlers(): void;
+/**
+ * This function registers mousedown and mouseup events hadlers to
+ * all iframes in the DOM when converse UI resizing events are called
+ * to prevent mouse drag stutter effect which is bad user experience.
+ * @param {Element} e - dragging node element.
+ */
+export function dragresizeOverIframeHandler(e: Element): void;
+/**
+ * @param {import('@converse/headless/types/shared/chatbox').default} model
+ */
+export function initializeDragResize(model: import("@converse/headless/types/shared/chatbox").default): void;
 /**
  * @returns {string}
  */