Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Turn XMPPStatusView into the converse-user-profile component

Browse Source
This commit is contained in:
JC Brand 2021-01-22 16:07:52 +01:00
parent 6ca2183e24
commit a59920e6e5
7 changed files with 64 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/plugins/chatboxviews/index.js
View File

@ -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';

1
src/plugins/controlbox/templates/controlbox.js
View File

@ -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>

7
src/plugins/profile/index.js
View File

@ -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);
});
}
});

87
src/plugins/profile/statusview.js
View File

@ -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');
}
}
initialize () {
class ProfileView extends ElementViewWithAvatar {
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);

6
src/plugins/profile/templates/profile.js
View File

@ -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'}

2
src/plugins/rosterview/contactview.js
View File

@ -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";

17
src/shared/avatar.js
View File

@ -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 default ViewWithAvatar;
export const ViewWithAvatar = View.extend(AvatarMixin);
export class ElementViewWithAvatar extends ElementView {
renderAvatar (el) {
AvatarMixin.renderAvatar.call(this, el);
}
}