Remove last backbone-like declarative event handler from the MUC view

spec/bookmarks.js

@@ -235,7 +235,6 @@ describe("A chat room", function () {
 
             spyOn(view, 'toggleBookmark').and.callThrough();
             spyOn(_converse.bookmarks, 'sendBookmarkStanza').and.callThrough();
-            view.delegateEvents();
 
             _converse.bookmarks.create({
                 'jid': view.model.get('jid'),

spec/chatbox.js

@@ -207,8 +207,6 @@ describe("Chatboxes", function () {
             const chatview = _converse.chatboxviews.get(contact_jid);
             spyOn(chatview, 'close').and.callThrough();
             spyOn(_converse.api, "trigger").and.callThrough();
-            // We need to rebind all events otherwise our spy won't be called
-            chatview.delegateEvents();
             chatview.querySelector('.close-chatbox-button').click();
             expect(chatview.close).toHaveBeenCalled();
             await new Promise(resolve => _converse.api.listen.once('chatBoxClosed', resolve));

spec/controlbox.js

@@ -29,9 +29,6 @@ describe("The Controlbox", function () {
         spyOn(view, 'close').and.callThrough();
         spyOn(_converse.api, "trigger").and.callThrough();
 
-        // We need to rebind all events otherwise our spy won't be called
-        view.delegateEvents();
-
         view.querySelector('.close-chatbox-button').click();
         expect(view.close).toHaveBeenCalled();
         expect(_converse.api.trigger).toHaveBeenCalledWith('controlBoxClosed', jasmine.any(Object));

spec/minchats.js

@@ -78,7 +78,6 @@ describe("A Groupchat", function () {
         await mock.openChatRoom(_converse, 'lounge', 'montague.lit', 'romeo');
         const view = _converse.chatboxviews.get('lounge@montague.lit');
         spyOn(_converse.api, "trigger").and.callThrough();
-        view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
         const button = await u.waitUntil(() => view.querySelector('.toggle-chatbox-button'));
         button.click();
 
@@ -109,8 +108,6 @@ describe("A Chatbox", function () {
         await mock.openChatBoxFor(_converse, contact_jid);
         const chatview = _converse.chatboxviews.get(contact_jid);
         spyOn(_converse.api, "trigger").and.callThrough();
-        // We need to rebind all events otherwise our spy won't be called
-        chatview.delegateEvents();
         chatview.querySelector('.toggle-chatbox-button').click();
 
         expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMinimized', jasmine.any(Object));

spec/muc.js

@@ -2608,7 +2608,6 @@ describe("Groupchats", function () {
             spyOn(view, 'close').and.callThrough();
             spyOn(_converse.api, "trigger").and.callThrough();
             spyOn(view.model, 'leave');
-            view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
             spyOn(_converse.api, 'confirm').and.callFake(() => Promise.resolve(true));
             const button = await u.waitUntil(() => view.querySelector('.close-chatbox-button'));
             button.click();

spec/omemo.js

@@ -1222,7 +1222,6 @@ describe("The OMEMO module", function() {
         expect(toggle === null).toBe(false);
         expect(u.hasClass('fa-unlock', toggle.querySelector('converse-icon'))).toBe(true);
         expect(u.hasClass('fa-lock', toggle.querySelector('.converse-icon'))).toBe(false);
-        view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
         toolbar.querySelector('.toggle-omemo').click();
         expect(view.model.get('omemo_active')).toBe(true);
 

src/plugins/headlines-view/view.js

@@ -5,11 +5,6 @@ import { render } from 'lit-html';
 
 
 class HeadlinesView extends BaseChatView {
-    events = {
-        'click .close-chatbox-button': 'close',
-        'click .toggle-chatbox-button': 'minimize',
-        'keypress textarea.chat-textarea': 'onKeyDown'
-    }
 
     async initialize () {
         const jid = this.getAttribute('jid');

src/plugins/muc-views/muc.js

@@ -19,12 +19,6 @@ import { html, render } from "lit-html";
 export default class MUCView extends BaseChatView {
     length = 300
     is_chatroom = true
-    events = {
-        // Arrow functions don't work here because you can't bind a different `this` param to them.
-        'click .occupant-nick': function (ev) {
-            this.insertIntoTextArea(ev.target.textContent);
-        }
-    }
 
     async initialize () {
         const jid = this.getAttribute('jid');

src/plugins/muc-views/sidebar.js

@@ -27,6 +27,7 @@ export default class MUCSidebar extends CustomElement {
             this.model.toJSON(), {
                 'occupants': [...this.model.occupants.models],
                 'closeSidebar': ev => this.closeSidebar(ev),
+                'onOccupantClicked': ev => this.onOccupantClicked(ev),
             }
         ));
         return tpl;
@@ -40,6 +41,11 @@ export default class MUCSidebar extends CustomElement {
         _converse.chatboxviews.get(this.jid)?.scrollDown();
     }
 
+    onOccupantClicked (ev) {
+        ev?.preventDefault?.();
+        const chatview = _converse.chatboxviews.get(this.getAttribute('jid'));
+        chatview?.getBottomPanel().insertIntoTextArea(`@${ev.target.textContent}`);
+    }
 }
 
 api.elements.define('converse-muc-sidebar', MUCSidebar);

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

@@ -21,7 +21,8 @@ export default (o) => {
         return tpl_occupant(Object.assign({
             'jid': '',
             'hint_show': PRETTY_CHAT_STATUS[occupant.get('show')],
-            'hint_occupant': i18n_occupant_hint(occupant)
+            'hint_occupant': i18n_occupant_hint(occupant),
+            'onOccupantClicked': o.onOccupantClicked
         }, occupant.toJSON()));
     });
 

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

@@ -32,7 +32,7 @@ export default (o) => {
                     <div class="occupant-status occupant-${o.show} circle" title="${o.hint_show}"></div>
                 </div>
                 <div class="col occupant-nick-badge">
-                    <span class="occupant-nick">${o.nick || o.jid}</span>
+                    <span class="occupant-nick" @click=${o.onOccupantClicked}>${o.nick || o.jid}</span>
                     <span class="occupant-badges">
                         ${ (o.affiliation === "owner") ? html`<span class="badge badge-groupchat">${i18n_owner}</span>` : '' }
                         ${ (o.affiliation === "admin") ? html`<span class="badge badge-info">${i18n_admin}</span>` : '' }