Skip to content

C
converse.js
Commit 5dac2d88 authored by JC Brand's avatar JC Brand
Browse files
Options

muc-views: Use lit-html instead of lodash templates

parent 889f4d4e
Show whitespace changes
Inline Side-by-side
Showing with 153 additions and 124 deletions
spec/muc.js
View file @ 5dac2d88
...@@ -4189,6 +4189,7 @@ describe("Groupchats", function () { ...@@ -4189,6 +4189,7 @@ describe("Groupchats", function () {
.toBe('Please choose your nickname'); .toBe('Please choose your nickname');
const input = sizzle('.chatroom-body form.chatroom-form input:first', view.el).pop(); const input = sizzle('.chatroom-body form.chatroom-form input:first', view.el).pop();
expect(input.value).toBe('romeo');
input.value = 'nicky'; input.value = 'nicky';
view.el.querySelector('input[type=submit]').click(); view.el.querySelector('input[type=submit]').click();
done(); done();
......
src/converse-chatboxviews.js
View file @ 5dac2d88
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
import './components/converse.js'; import './components/converse.js';
import "@converse/headless/converse-chatboxes"; import "@converse/headless/converse-chatboxes";
import tpl_avatar from "templates/avatar.svg"; import tpl_avatar from "templates/avatar.svg";
import tpl_background_logo from "templates/background_logo.html"; import tpl_background_logo from "templates/background_logo.js";
import tpl_converse from "templates/converse.js"; import tpl_converse from "templates/converse.js";
import { Overview } from "@converse/skeletor/src/overview"; import { Overview } from "@converse/skeletor/src/overview";
import { View } from "@converse/skeletor/src/view"; import { View } from "@converse/skeletor/src/view";
...@@ -73,7 +73,7 @@ const ChatBoxViews = Overview.extend({ ...@@ -73,7 +73,7 @@ const ChatBoxViews = Overview.extend({
this.listenTo(this.model, "destroy", this.removeChat) this.listenTo(this.model, "destroy", this.removeChat)
const bg = document.getElementById('conversejs-bg'); const bg = document.getElementById('conversejs-bg');
if (bg && !bg.innerHTML.trim()) { if (bg && !bg.innerHTML.trim()) {
bg.innerHTML = tpl_background_logo(); render(tpl_background_logo(), bg);
} }
const body = document.querySelector('body'); const body = document.querySelector('body');
body.classList.add(`converse-${api.settings.get("view_mode")}`); body.classList.add(`converse-${api.settings.get("view_mode")}`);
......
src/converse-muc-views.js
View file @ 5dac2d88
...@@ -13,15 +13,15 @@ import ModeratorToolsModal from "./modals/moderator-tools.js"; ...@@ -13,15 +13,15 @@ import ModeratorToolsModal from "./modals/moderator-tools.js";
import RoomDetailsModal from 'modals/muc-details.js'; import RoomDetailsModal from 'modals/muc-details.js';
import log from "@converse/headless/log"; import log from "@converse/headless/log";
import tpl_chatroom from "templates/chatroom.js"; import tpl_chatroom from "templates/chatroom.js";
import tpl_chatroom_bottom_panel from "templates/chatroom_bottom_panel.html"; import tpl_muc_bottom_panel from "templates/muc_bottom_panel.js";
import tpl_chatroom_destroyed from "templates/chatroom_destroyed.html"; import tpl_muc_destroyed from "templates/muc_destroyed.js";
import tpl_chatroom_disconnect from "templates/chatroom_disconnect.html"; import tpl_muc_disconnect from "templates/muc_disconnect.js";
import tpl_chatroom_head from "templates/chatroom_head.js"; import tpl_chatroom_head from "templates/chatroom_head.js";
import tpl_chatroom_nickname_form from "templates/chatroom_nickname_form.html"; import tpl_muc_nickname_form from "templates/muc_nickname_form.js";
import tpl_muc_config_form from "templates/muc_config_form.js"; import tpl_muc_config_form from "templates/muc_config_form.js";
import tpl_muc_password_form from "templates/muc_password_form.js"; import tpl_muc_password_form from "templates/muc_password_form.js";
import tpl_muc_sidebar from "templates/muc_sidebar.js"; import tpl_muc_sidebar from "templates/muc_sidebar.js";
import tpl_room_panel from "templates/room_panel.html"; import tpl_room_panel from "templates/room_panel.js";
import tpl_spinner from "templates/spinner.js"; import tpl_spinner from "templates/spinner.js";
import { ChatBoxView } from "./converse-chatview"; import { ChatBoxView } from "./converse-chatview";
import { Model } from '@converse/skeletor/src/model.js'; import { Model } from '@converse/skeletor/src/model.js';
...@@ -269,12 +269,11 @@ export const ChatRoomView = ChatBoxView.extend({ ...@@ -269,12 +269,11 @@ export const ChatRoomView = ChatBoxView.extend({
render(tpl, this.el.querySelector('.chat-head-chatroom')); render(tpl, this.el.querySelector('.chat-head-chatroom'));
}, },
renderBottomPanel () { renderBottomPanel () {
const container = this.el.querySelector('.bottom-panel'); const container = this.el.querySelector('.bottom-panel');
const entered = this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED; const entered = this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED;
const can_edit = entered && !(this.model.features.get('moderated') && this.model.getOwnRole() === 'visitor'); const can_edit = entered && !(this.model.features.get('moderated') && this.model.getOwnRole() === 'visitor');
container.innerHTML = tpl_chatroom_bottom_panel({__, can_edit, entered}); render(tpl_muc_bottom_panel({ can_edit, entered }), container);
if (entered && can_edit) { if (entered && can_edit) {
this.renderMessageForm(); this.renderMessageForm();
this.initMentionAutoComplete(); this.initMentionAutoComplete();
...@@ -1104,29 +1103,21 @@ export const ChatRoomView = ChatBoxView.extend({ ...@@ -1104,29 +1103,21 @@ export const ChatRoomView = ChatBoxView.extend({
* @method _converse.ChatRoomView#renderNicknameForm * @method _converse.ChatRoomView#renderNicknameForm
*/ */
renderNicknameForm () { renderNicknameForm () {
const heading = api.settings.get('muc_show_logs_before_join') ? const tmp_result = tpl_muc_nickname_form(this.model.get('nick'));
__('Choose a nickname to enter') :
__('Please choose your nickname');
const html = tpl_chatroom_nickname_form(Object.assign({
heading,
'label_nickname': __('Nickname'),
'label_join': __('Enter groupchat'),
}, this.model.toJSON()));
if (api.settings.get('muc_show_logs_before_join')) { if (api.settings.get('muc_show_logs_before_join')) {
const container = this.el.querySelector('.muc-bottom-panel'); const container = this.el.querySelector('.muc-bottom-panel');
container.innerHTML = html; render(container, tmp_result);
u.addClass('muc-bottom-panel--nickname', container); u.addClass('muc-bottom-panel--nickname', container);
} else { } else {
const form = this.el.querySelector('.muc-nickname-form'); const form = this.el.querySelector('.muc-nickname-form');
const form_el = u.getElementFromTemplateResult(tmp_result);
if (form) { if (form) {
sizzle('.spinner', this.el).forEach(u.removeElement); sizzle('.spinner', this.el).forEach(u.removeElement);
form.outerHTML = html; form.outerHTML = form_el.outerHTML;
} else { } else {
this.hideChatRoomContents(); this.hideChatRoomContents();
const container = this.el.querySelector('.chatroom-body'); const container = this.el.querySelector('.chatroom-body');
container.insertAdjacentHTML('beforeend', html); container.insertAdjacentElement('beforeend', form_el);
} }
} }
u.safeSave(this.model.session, {'connection_status': converse.ROOMSTATUS.NICKNAME_REQUIRED}); u.safeSave(this.model.session, {'connection_status': converse.ROOMSTATUS.NICKNAME_REQUIRED});
...@@ -1207,11 +1198,7 @@ export const ChatRoomView = ChatBoxView.extend({ ...@@ -1207,11 +1198,7 @@ export const ChatRoomView = ChatBoxView.extend({
'moved_jid': undefined 'moved_jid': undefined
}); });
const container = this.el.querySelector('.disconnect-container'); const container = this.el.querySelector('.disconnect-container');
container.innerHTML = tpl_chatroom_destroyed({ render(tpl_muc_destroyed(moved_jid, reason), container);
'__':__,
'jid': moved_jid,
'reason': reason ? `"${reason}"` : null
});
const switch_el = container.querySelector('a.switch-chat'); const switch_el = container.querySelector('a.switch-chat');
if (switch_el) { if (switch_el) {
switch_el.addEventListener('click', async ev => { switch_el.addEventListener('click', async ev => {
...@@ -1248,7 +1235,7 @@ export const ChatRoomView = ChatBoxView.extend({ ...@@ -1248,7 +1235,7 @@ export const ChatRoomView = ChatBoxView.extend({
'disconnection_actor': undefined 'disconnection_actor': undefined
}); });
const container = this.el.querySelector('.disconnect-container'); const container = this.el.querySelector('.disconnect-container');
container.innerHTML = tpl_chatroom_disconnect({messages}) render(tpl_muc_disconnect(messages), container);
u.showElement(container); u.showElement(container);
}, },
...@@ -1354,13 +1341,12 @@ export const RoomsPanel = View.extend({ ...@@ -1354,13 +1341,12 @@ export const RoomsPanel = View.extend({
'click a.controlbox-heading__btn.show-list-muc-modal': 'showMUCListModal' 'click a.controlbox-heading__btn.show-list-muc-modal': 'showMUCListModal'
}, },
render () { toHTML () {
this.el.innerHTML = tpl_room_panel({ return tpl_room_panel({
'heading_chatrooms': __('Groupchats'), 'heading_chatrooms': __('Groupchats'),
'title_new_room': __('Add a new groupchat'), 'title_new_room': __('Add a new groupchat'),
'title_list_rooms': __('Query for groupchats') 'title_list_rooms': __('Query for groupchats')
}); });
return this;
}, },
showAddRoomModal (ev) { showAddRoomModal (ev) {
......
src/templates/add_chatroom_modal.js
View file @ 5dac2d88
import { html } from "lit-html"; import xss from "xss/dist/xss";
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
import { __ } from '../i18n'; import { __ } from '../i18n';
import { html } from "lit-html";
import { modal_header_close_button } from "./buttons" import { modal_header_close_button } from "./buttons"
import xss from "xss/dist/xss"; import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
const nickname_input = (o) => { const nickname_input = (o) => {
......
src/templates/background_logo.html deleted 100644 → 0
View file @ 889f4d4e
<div class="inner-content converse-brand row">
<div class="converse-brand__padding"></div>
<div class="converse-brand__heading">
<svg height="200px"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 364 364"
version="1.1">
<title>Logo Converse</title>
<defs>
<linearGradient id="gradient" x1="92.14" y1="27.64" x2="267.65" y2="331.62" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff1d1"/>
<stop offset="0.05" stop-color="#fae8c1"/>
<stop offset="0.15" stop-color="#f0d5a1"/>
<stop offset="0.27" stop-color="#e7c687"/>
<stop offset="0.4" stop-color="#e1bb72"/>
<stop offset="0.54" stop-color="#dcb264"/>
<stop offset="0.71" stop-color="#daad5c"/>
<stop offset="1" stop-color="#d9ac59"/>
</linearGradient>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.3" result="blur1"/>
<feOffset in="blur1" dx="3" dy="3" result="blur2"/>
<feColorMatrix in="blur2" type="matrix" result="blur3"
values="1 0 0 0 0.1
0 1 0 0 0.1
0 0 1 0 0.1
0 0 0 1 0"/>
<feMerge>
<feMergeNode in="blur3"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g filter="url(#shadow)">
<path d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" fill="#d9ac59"/>
<path d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" fill="url(#gradient)"/>
</g>
</svg>
<span class="converse-brand__text">
<span>converse<span class="subdued">.js</span></span>
<p class="byline">messaging freedom</p>
</span>
</div>
</div>
src/templates/background_logo.js 0 → 100644
View file @ 5dac2d88
import { html } from "lit-html";
export default () => html`
<div class="inner-content converse-brand row">
<div class="converse-brand__padding"></div>
<div class="converse-brand__heading">
<svg height="200px"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 364 364"
version="1.1">
<title>Logo Converse</title>
<defs>
<linearGradient id="gradient" x1="92.14" y1="27.64" x2="267.65" y2="331.62" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff1d1"/>
<stop offset="0.05" stop-color="#fae8c1"/>
<stop offset="0.15" stop-color="#f0d5a1"/>
<stop offset="0.27" stop-color="#e7c687"/>
<stop offset="0.4" stop-color="#e1bb72"/>
<stop offset="0.54" stop-color="#dcb264"/>
<stop offset="0.71" stop-color="#daad5c"/>
<stop offset="1" stop-color="#d9ac59"/>
</linearGradient>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.3" result="blur1"/>
<feOffset in="blur1" dx="3" dy="3" result="blur2"/>
<feColorMatrix in="blur2" type="matrix" result="blur3"
values="1 0 0 0 0.1
0 1 0 0 0.1
0 0 1 0 0.1
0 0 0 1 0"/>
<feMerge>
<feMergeNode in="blur3"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g filter="url(#shadow)">
<path d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" fill="#d9ac59"/>
<path d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" fill="url(#gradient)"/>
</g>
</svg>
<span class="converse-brand__text">
<span>converse<span class="subdued">.js</span></span>
<p class="byline">messaging freedom</p>
</span>
</div>
</div>`;
src/templates/chatroom_bottom_panel.html deleted 100644 → 0
View file @ 889f4d4e
{[ if (o.entered) { ]}
{[ if (o.can_edit) { ]}
<div class="emoji-picker__container dropup"></div>
<div class="message-form-container">
{[ } else { ]}
<div class="muc-bottom-panel">{{{o.__("You're not allowed to send messages in this room")}}}</div>
{[ } ]}
{[ } else { ]}
<div class="muc-bottom-panel"></div>
{[ } ]}
src/templates/chatroom_destroyed.html deleted 100644 → 0
View file @ 889f4d4e
<div class="alert alert-danger">
<h3 class="alert-heading disconnect-msg">{{{o.__('This groupchat no longer exists')}}}</h3>
<p class="destroyed-reason">{{{o.reason}}}</p>
{[ if (o.jid) { ]}
<p class="moved-label">{{{o.__('The conversation has moved. Click below to enter.') }}}</p>
<p class="moved-link"><a class="switch-chat" href="#">{{{o.jid}}}</a></p>
{[ } ]}
</div>
src/templates/chatroom_disconnect.html deleted 100644 → 0
View file @ 889f4d4e
<div class="alert alert-danger">
<h3 class="alert-heading disconnect-msg">{{{o.messages[0]}}}</h3>
{[ o.messages.slice(1).forEach(function (msg) { ]}
<p class="disconnect-msg">{{{msg}}}</p>
{[ }); ]}
</div>
src/templates/chatroom_nickname_form.html deleted 100644 → 0
View file @ 889f4d4e
<div class="chatroom-form-container muc-nickname-form">
<form class="converse-form chatroom-form converse-centered-form">
<fieldset class="form-group">
<label>{{{o.heading}}}</label>
<input type="text" required="required" name="nick" value="{{{o.nickname}}}"
class="form-control {{o.error_class}}" placeholder="{{{o.label_nickname}}}"/>
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary" name="join" value="{{{o.label_join}}}"/>
</fieldset>
</form>
</div>
src/templates/muc_bottom_panel.js 0 → 100644
View file @ 5dac2d88
import { __ } from '../i18n';
import { html } from "lit-html";
const tpl_can_edit = () => html`
<div class="emoji-picker__container dropup"></div>
<div class="message-form-container">`;
export default (o) => {
const i18n_not_allowed = __("You're not allowed to send messages in this room");
if (o.entered) {
return (o.can_edit) ? tpl_can_edit() : html`<div class="muc-bottom-panel">${i18n_not_allowed}</div>`;
} else {
return html`<div class="muc-bottom-panel"></div>`;
}
}
src/templates/muc_destroyed.js 0 → 100644
View file @ 5dac2d88
import { __ } from '../i18n';
import { html } from "lit-html";
const tpl_moved = (jid) => {
const i18n_moved = __('The conversation has moved. Click below to enter.');
return html`
<p class="moved-label">${i18n_moved}</p>
<p class="moved-link"><a class="switch-chat" href="#">${jid}</a></p>`;
}
export default (jid, reason) => {
const i18n_non_existent = __('This groupchat no longer exists');
return html`
<div class="alert alert-danger">
<h3 class="alert-heading disconnect-msg">${i18n_non_existent}</h3>
${ reason ? html`<p class="destroyed-reason">"${reason}"</p>` : '' }
${ jid ? tpl_moved(jid) : '' }
</div>`;
}
src/templates/muc_disconnect.js 0 → 100644
View file @ 5dac2d88
import { html } from "lit-html";
export default (messages) => {
return html`
<div class="alert alert-danger">
<h3 class="alert-heading disconnect-msg">${messages[0]}</h3>
${ messages.slice(1).map(m => html`<p class="disconnect-msg">${m}</p>`) }
</div>`;
}
src/templates/muc_nickname_form.js 0 → 100644
View file @ 5dac2d88
import { __ } from '../i18n';
import { api } from "@converse/headless/converse-core";
import { html } from "lit-html";
export default (nickname) => {
const i18n_nickname = __('Nickname');
const i18n_join = __('Enter groupchat');
const i18n_heading = api.settings.get('muc_show_logs_before_join') ?
__('Choose a nickname to enter') :
__('Please choose your nickname');
return html`
<div class="chatroom-form-container muc-nickname-form">
<form class="converse-form chatroom-form converse-centered-form">
<fieldset class="form-group">
<label>${i18n_heading}</label>
<input type="text" required="required" name="nick" value="${nickname}"
class="form-control" placeholder="${i18n_nickname}"/>
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary" name="join" value="${i18n_join}"/>
</fieldset>
</form>
</div>`;
}
src/templates/room_panel.html deleted 100644 → 0
View file @ 889f4d4e
<!-- <div id="chatrooms"> -->
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading controlbox-heading--groupchats">{{{o.heading_chatrooms}}}</span>
<a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
<a class="controlbox-heading__btn show-add-muc-modal fa fa-plus" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
</div>
<div class="list-container list-container--openrooms hidden"></div>
<div class="list-container list-container--bookmarks hidden"></div>
<!-- </div> -->
src/templates/room_panel.js 0 → 100644
View file @ 5dac2d88
import { html } from "lit-html";
export default (o) => html`
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading controlbox-heading--groupchats">${o.heading_chatrooms}</span>
<a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="${o.title_list_rooms}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
<a class="controlbox-heading__btn show-add-muc-modal fa fa-plus" title="${o.title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
</div>
<div class="list-container list-container--openrooms hidden"></div>
<div class="list-container list-container--bookmarks hidden"></div>`;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7