Use lit-html to render chat head
This commit is contained in:
JC Brand
parent
2235d4c432
commit
893ef10563
@ -45,7 +45,6 @@ converse.plugins.add('converse-bookmark-views', {
|
||||
const buttons = this.__super__.getHeadingButtons.call(this);
|
||||
if (_converse.allow_bookmarks) {
|
||||
const supported = _converse.checkBookmarksSupport();
|
||||
const info_minimize = __('Minimize this chat box');
|
||||
const info_toggle_bookmark = this.model.get('bookmarked') ? __('Unbookmark this groupchat') : __('Bookmark this groupchat');
|
||||
const bookmarked = this.model.get('bookmarked');
|
||||
const template = html`<a class="chatbox-btn toggle-bookmark fa fa-bookmark ${bookmarked ? 'button-on' : ''}" title="${info_toggle_bookmark}"></a>`;
|
||||
|
||||
@ -7,11 +7,13 @@ import "converse-chatboxviews";
|
||||
import "converse-message-view";
|
||||
import "converse-modal";
|
||||
import { debounce, get, isString } from "lodash";
|
||||
import { View } from "skeletor.js/src/view";
|
||||
import { Overview } from "skeletor.js/src/overview";
|
||||
import { html, render } from "lit-html";
|
||||
import converse from "@converse/headless/converse-core";
|
||||
import log from "@converse/headless/log";
|
||||
import tpl_chatbox from "templates/chatbox.html";
|
||||
import tpl_chatbox_head from "templates/chatbox_head.html";
|
||||
import tpl_chatbox_head from "templates/chatbox_head.js";
|
||||
import tpl_chatbox_message_form from "templates/chatbox_message_form.html";
|
||||
import tpl_error_message from "templates/error_message.html";
|
||||
import tpl_help_message from "templates/help_message.html";
|
||||
@ -71,7 +73,7 @@ converse.plugins.add('converse-chatview', {
|
||||
});
|
||||
|
||||
|
||||
_converse.ChatBoxHeading = _converse.ViewWithAvatar.extend({
|
||||
_converse.ChatBoxHeading = View.extend({
|
||||
initialize () {
|
||||
this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
|
||||
|
||||
@ -92,20 +94,34 @@ converse.plugins.add('converse-chatview', {
|
||||
render () {
|
||||
const vcard = get(this.model, 'vcard');
|
||||
const vcard_json = vcard ? vcard.toJSON() : {};
|
||||
this.el.innerHTML = tpl_chatbox_head(
|
||||
render(tpl_chatbox_head(
|
||||
Object.assign(
|
||||
vcard_json,
|
||||
this.model.toJSON(),
|
||||
{ '_converse': _converse,
|
||||
'info_close': __('Close this chat box'),
|
||||
'buttons': this.getHeadingButtons(),
|
||||
'display_name': this.model.getDisplayName()
|
||||
}
|
||||
)
|
||||
);
|
||||
this.renderAvatar();
|
||||
), this.el);
|
||||
return this;
|
||||
},
|
||||
|
||||
getHeadingButtons () {
|
||||
const buttons = [];
|
||||
if (!_converse.singleton) {
|
||||
const info_close = __('Close this chat box');
|
||||
const template = html`<a class="chatbox-btn close-chatbox-button fa fa-times" title="${info_close}"></a>`;
|
||||
template.name = 'close';
|
||||
buttons.push(template);
|
||||
}
|
||||
const info_details = __('Show more details about this groupchat');
|
||||
const template = html`<a class="chatbox-btn show-user-details-modal fa fa-id-card" title="${info_details}"></a>`;
|
||||
template.name = 'details';
|
||||
buttons.push(template);
|
||||
return buttons;
|
||||
},
|
||||
|
||||
onStatusMessageChanged (item) {
|
||||
this.debouncedRender();
|
||||
/**
|
||||
|
||||
@ -10,7 +10,6 @@ import { View } from "skeletor.js/src/view";
|
||||
import { __ } from '@converse/headless/i18n';
|
||||
import { html } from "lit-html";
|
||||
import converse from "@converse/headless/converse-core";
|
||||
import tpl_chatbox_minimize from "templates/chatbox_minimize.html";
|
||||
import tpl_chats_panel from "templates/chats_panel.html";
|
||||
import tpl_toggle_chats from "templates/toggle_chats.html";
|
||||
import tpl_trimmed_chat from "templates/trimmed_chat.html";
|
||||
@ -118,21 +117,13 @@ converse.plugins.add('converse-minimize', {
|
||||
},
|
||||
|
||||
ChatBoxHeading: {
|
||||
render () {
|
||||
const { _converse } = this.__super__;
|
||||
const { __ } = _converse;
|
||||
|
||||
this.__super__.render.apply(this, arguments);
|
||||
const new_html = tpl_chatbox_minimize({
|
||||
'info_minimize': __('Minimize this chat box')
|
||||
});
|
||||
const el = this.el.querySelector('.toggle-chatbox-button');
|
||||
if (el) {
|
||||
el.outerHTML = new_html;
|
||||
} else {
|
||||
const button = this.el.querySelector('.close-chatbox-button');
|
||||
button.insertAdjacentHTML('afterEnd', new_html);
|
||||
}
|
||||
getHeadingButtons () {
|
||||
const buttons = this.__super__.getHeadingButtons.call(this);
|
||||
const info_minimize = __('Minimize this chat box');
|
||||
const template = html`<a class="chatbox-btn toggle-chatbox-button fa fa-minus" title="${info_minimize}"></a>`;
|
||||
const names = buttons.map(t => t.name);
|
||||
const idx = names.indexOf('close');
|
||||
return idx > -1 ? [...buttons.slice(0, idx+1), template, ...buttons.slice(idx+1)] : [template, ...buttons];
|
||||
}
|
||||
},
|
||||
|
||||
@ -152,7 +143,7 @@ converse.plugins.add('converse-minimize', {
|
||||
|
||||
getHeadingButtons () {
|
||||
const buttons = this.__super__.getHeadingButtons.call(this);
|
||||
const info_minimize = __('Minimize this chat box');
|
||||
const info_minimize = __('Minimize this groupchat');
|
||||
const template = html`<a class="chatbox-btn toggle-chatbox-button fa fa-minus" title="${info_minimize}"></a>`;
|
||||
const names = buttons.map(t => t.name);
|
||||
const idx = names.indexOf('signout');
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { html } from "lit-html";
|
||||
|
||||
export default (o) => html`
|
||||
<img alt="${o.alt_text}" class="img-thumbnail avatar align-self-center ${o.extra_classes}"
|
||||
height="100px" width="100px" src="data:${o.image_type};base64,${o.image}"/>`;
|
||||
<img alt="${o.alt_text}" class="avatar align-self-center ${o.extra_classes}"
|
||||
height="${o.height}" width="${o.width}" src="data:${o.image_type};base64,${o.image}"/>`;
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<div class="chatbox-title">
|
||||
<div class="chatbox-title--row">
|
||||
{[ if (!o._converse.singleton) { ]}
|
||||
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
|
||||
{[ } ]}
|
||||
{[ if (o.type !== o._converse.HEADLINES_TYPE) { ]}
|
||||
<div> <canvas class="avatar" height="36" width="36"></canvas> </div>
|
||||
{[ } ]}
|
||||
<div class="chatbox-title__text" title="{{{o.jid}}}">
|
||||
{[ if (o.url) { ]} <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user"> {[ } ]}
|
||||
{{{ o.display_name }}}
|
||||
{[ if (o.url) { ]} </a> {[ } ]}
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatbox-title__buttons row no-gutters">
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times" title="{{{o.info_close}}}"></a>
|
||||
<a class="chatbox-btn show-user-details-modal fa fa-id-card" title="{{{o.info_details}}}"></a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="chat-head__desc">{{{ o.status }}}</p>
|
||||
</div>
|
||||
33
src/templates/chatbox_head.js
Normal file
33
src/templates/chatbox_head.js
Normal file
@ -0,0 +1,33 @@
|
||||
import { html } from "lit-html";
|
||||
import { until } from 'lit-html/directives/until.js';
|
||||
import { __ } from '@converse/headless/i18n';
|
||||
import avatar from "./avatar.js";
|
||||
import converse from "@converse/headless/converse-core";
|
||||
import xss from "xss/dist/xss";
|
||||
|
||||
const i18n_profile = __('The User\'s Profile Image');
|
||||
|
||||
const avatar_data = {
|
||||
'alt_text': i18n_profile,
|
||||
'extra_classes': '',
|
||||
'height': 40,
|
||||
'width': 40,
|
||||
}
|
||||
|
||||
export default (o) => {
|
||||
return html`
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<div class="chatbox-title">
|
||||
<div class="chatbox-title--row">
|
||||
${ (!o._converse.singleton) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
|
||||
${ (o.type !== o._converse.HEADLINES_TYPE) ? avatar(Object.assign({}, o, avatar_data)) : '' }
|
||||
<div class="chatbox-title__text" title="${o.jid}">
|
||||
${ o.url ? html`<a href="${o.url}" target="_blank" rel="noopener" class="user">${o.display_name}</a>` : o.display_name}
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatbox-title__buttons row no-gutters">${ o.buttons.map(b => until(b, '')) }</div>
|
||||
</div>
|
||||
<p class="chat-head__desc">${ o.status }</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<a class="chatbox-btn toggle-chatbox-button fa fa-minus" title="{{{o.info_minimize}}}"></a>
|
||||
@ -1,7 +1,6 @@
|
||||
import { __ } from '@converse/headless/i18n';
|
||||
import { html } from "lit-html";
|
||||
import avatar from "./avatar.js";
|
||||
import spinner from "./spinner.js";
|
||||
import { modal_close_button, modal_header_close_button } from "./buttons"
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user