Turn XMPPStatusView into the converse-user-profile component

src/plugins/chatboxviews/index.js

@@ -7,7 +7,7 @@ import './view.js';
 import '@converse/headless/plugins/chatboxes';
 import 'components/converse.js';
 import ChatBoxViews from './container.js';
-import ViewWithAvatar from 'shared/avatar.js';
+import { ViewWithAvatar } from 'shared/avatar.js';
 import { _converse, api, converse } from '@converse/headless/core';
 
 

src/plugins/controlbox/templates/controlbox.js

@@ -10,6 +10,7 @@ export default (o) => html`
             ${ o.connected
                 ? html`
                     <div class="controlbox-pane">
+                        <converse-user-profile></converse-user-profile>
                         <converse-headlines-panel></converse-headlines-panel>
                         <converse-rooms-list></converse-rooms-list>
                         <converse-bookmarks></converse-bookmarks>

src/plugins/profile/index.js

@@ -22,12 +22,5 @@ converse.plugins.add('converse-profile', {
         });
 
         _converse.XMPPStatusView = XMPPStatusView;
-
-        /******************** Event Handlers ********************/
-        api.listen.on('controlBoxPaneInitialized', async view => {
-            await api.waitUntil('VCardsInitialized');
-            _converse.xmppstatusview = new _converse.XMPPStatusView({'model': _converse.xmppstatus});
-            view.el.insertAdjacentElement('afterBegin', _converse.xmppstatusview.render().el);
-        });
     }
 });

src/plugins/profile/statusview.js

@@ -1,78 +1,79 @@
+import { ElementViewWithAvatar } from 'shared/avatar.js';
 import UserSettingsModal from "modals/user-settings";
-import ViewWithAvatar from 'shared/avatar.js';
 import tpl_profile from "./templates/profile.js";
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
+import { render } from 'lit-html';
 
 
-const XMPPStatusView = ViewWithAvatar.extend({
-    tagName: "div",
-    events: {
-        "click a.show-profile": "showProfileModal",
-        "click a.change-status": "showStatusChangeModal",
-        "click .logout": "logOut"
-    },
+function getPrettyStatus (stat) {
+    if (stat === 'chat') {
+        return __('online');
+    } else if (stat === 'dnd') {
+        return __('busy');
+    } else if (stat === 'xa') {
+        return __('away for long');
+    } else if (stat === 'away') {
+        return __('away');
+    } else if (stat === 'offline') {
+        return __('offline');
+    } else {
+        return __(stat) || __('online');
+    }
+}
+
+
+class ProfileView extends ElementViewWithAvatar {
 
-    initialize () {
+    async initialize () {
+        this.model = _converse.xmppstatus;
         this.listenTo(this.model, "change", this.render);
         this.listenTo(this.model.vcard, "change", this.render);
-    },
 
-    toHTML () {
+        await api.waitUntil('VCardsInitialized');
+        this.render();
+    }
+
+    render () {
         const chat_status = this.model.get('status') || 'offline';
-        return tpl_profile(Object.assign(
+        render(tpl_profile(Object.assign(
             this.model.toJSON(),
             this.model.vcard.toJSON(), {
             chat_status,
             'fullname': this.model.vcard.get('fullname') || _converse.bare_jid,
             "showUserSettingsModal": ev => this.showUserSettingsModal(ev),
             'status_message': this.model.get('status_message') ||
-                                __("I am %1$s", this.getPrettyStatus(chat_status)),
-        }));
-    },
+                                __("I am %1$s", getPrettyStatus(chat_status)),
+            'logout': this.logout,
+            'showStatusChangeModal': () => this.showStatusChangeModal(),
+            'showProfileModal': () => this.showProfileModal()
+        })), this);
 
-    afterRender () {
         this.renderAvatar();
-    },
+    }
 
     showProfileModal (ev) {
-        ev.preventDefault();
+        ev?.preventDefault();
         api.modal.show(_converse.ProfileModal, {model: this.model}, ev);
-    },
+    }
 
     showStatusChangeModal (ev) {
-        ev.preventDefault();
+        ev?.preventDefault();
         api.modal.show(_converse.ChatStatusModal, {model: this.model}, ev);
-    },
+    }
 
     showUserSettingsModal(ev) {
-        ev.preventDefault();
+        ev?.preventDefault();
         api.modal.show(UserSettingsModal, {model: this.model, _converse}, ev);
-    },
+    }
 
-    logOut (ev) {
-        ev.preventDefault();
+    logout (ev) { // eslint-disable-line class-methods-use-this
+        ev?.preventDefault();
         const result = confirm(__("Are you sure you want to log out?"));
         if (result === true) {
             api.user.logout();
         }
-    },
-
-    getPrettyStatus (stat) {
-        if (stat === 'chat') {
-            return __('online');
-        } else if (stat === 'dnd') {
-            return __('busy');
-        } else if (stat === 'xa') {
-            return __('away for long');
-        } else if (stat === 'away') {
-            return __('away');
-        } else if (stat === 'offline') {
-            return __('offline');
-        } else {
-            return __(stat) || __('online');
-        }
     }
-});
+}
 
-export default XMPPStatusView;
+api.elements.define('converse-user-profile', ProfileView);

src/plugins/profile/templates/profile.js

@@ -11,15 +11,15 @@ export default (o) => {
     return html`
     <div class="userinfo controlbox-padded">
         <div class="controlbox-section profile d-flex">
-            <a class="show-profile" href="#">
+            <a class="show-profile" href="#" @click=${o.showProfileModal}>
                 <canvas class="avatar align-self-center" height="40" width="40"></canvas>
             </a>
             <span class="username w-100 align-self-center">${o.fullname}</span>
             ${show_settings_button  ? html`<a class="controlbox-heading__btn show-client-info fa fa-cog align-self-center" title="${i18n_details}" @click=${o.showUserSettingsModal}></a>` : ''}
-            ${api.settings.get('allow_logout') ? html`<a class="controlbox-heading__btn logout fa fa-sign-out-alt align-self-center" title="${i18n_logout}"></a>` : ''}
+            ${api.settings.get('allow_logout') ? html`<a class="controlbox-heading__btn logout fa fa-sign-out-alt align-self-center" title="${i18n_logout}" @click=${o.logout}></a>` : ''}
         </div>
         <div class="d-flex xmpp-status">
-            <a class="change-status" title="${i18n_change_status}" data-toggle="modal" data-target="#changeStatusModal">
+            <a class="change-status" title="${i18n_change_status}" data-toggle="modal" data-target="#changeStatusModal" @click=${o.showStatusChangeModal}>
                 <span class="${o.chat_status} w-100 align-self-center" data-value="${o.chat_status}">
                     <span class="
                         ${o.chat_status === 'online' && 'fa fa-circle chat-status chat-status--online'}

src/plugins/rosterview/contactview.js

@@ -1,8 +1,8 @@
-import ViewWithAvatar from 'shared/avatar.js';
 import log from "@converse/headless/log";
 import tpl_pending_contact from "./templates/pending_contact.js";
 import tpl_requesting_contact from "./templates/requesting_contact.js";
 import tpl_roster_item from "./templates/roster_item.js";
+import { ViewWithAvatar } from 'shared/avatar.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 import { debounce, without } from "lodash-es";

src/shared/avatar.js

@@ -1,10 +1,12 @@
+import { ElementView } from "@converse/skeletor/src/element";
 import tpl_avatar from 'templates/avatar.js';
 import { View } from '@converse/skeletor/src/view';
 import { converse } from '@converse/headless/core';
 
 const u = converse.env.utils;
 
-const ViewWithAvatar = View.extend({
+const AvatarMixin = {
+
     renderAvatar (el) {
         el = el || this.el;
         const avatar_el = el.querySelector('canvas.avatar, svg.avatar');
@@ -22,6 +24,15 @@ const ViewWithAvatar = View.extend({
             avatar_el.outerHTML = u.getElementFromTemplateResult(tpl_avatar(data)).outerHTML;
         }
     }
-});
+}
+
+
+export const ViewWithAvatar = View.extend(AvatarMixin);
+
 
-export default ViewWithAvatar;
+export class ElementViewWithAvatar extends ElementView {
+
+    renderAvatar (el) {
+        AvatarMixin.renderAvatar.call(this, el);
+    }
+}