Skip to content

C
converse.js
Commit 73fa24a8 authored by JC Brand's avatar JC Brand
Browse files
Options

headlines: move view code into converse-headlines-view.js

parent 17b86f04
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 109 deletions
spec/headline.js
View file @ 73fa24a8
......@@ -125,6 +125,7 @@
it("will remove headline messages from the controlbox if closed", mock.initConverse(
['rosterGroupsFetched'], {}, async function (done, _converse) {
await test_utils.openControlBox(_converse);
/* <message from='notify.example.com'
* to='romeo@im.example.com'
* type='headline'
......
src/converse-headlines-view.js
View file @ 73fa24a8
......@@ -4,8 +4,12 @@
* @license Mozilla Public License (MPLv2)
*/
import "converse-chatview";
import { View } from 'skeletor.js/src/view.js';
import { __ } from '@converse/headless/i18n';
import converse from "@converse/headless/converse-core";
import tpl_chatbox from "templates/chatbox.html";
import tpl_headline_list from "templates/headline_list.html";
import tpl_headline_panel from "templates/headline_panel.html";
converse.plugins.add('converse-headlines-view', {
......@@ -21,6 +25,23 @@ converse.plugins.add('converse-headlines-view', {
*/
dependencies: ["converse-headlines", "converse-chatview"],
overrides: {
// Overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the
// relevant objects or classes.
//
// New functions which don't exist yet can also be added.
ControlBoxView: {
renderControlBoxPane () {
this.__super__.renderControlBoxPane.apply(this, arguments);
this.renderHeadlinePanel();
},
},
},
initialize () {
/* The initialize function gets called as soon as the plugin is
......@@ -29,6 +50,63 @@ converse.plugins.add('converse-headlines-view', {
const { _converse } = this;
const viewWithHeadlinePanel = {
renderHeadlinePanel () {
if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
return this.headlinepanel;
}
this.headlinepanel = new _converse.HeadlinePanel();
this.el.querySelector('.controlbox-pane').insertAdjacentElement(
'beforeEnd', this.headlinepanel.render().el);
return this.headlinepanel;
},
getHeadlinePanel () {
if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
return this.headlinepanel;
} else {
return this.renderHeadlinePanel();
}
}
}
if (_converse.ControlBoxView) {
Object.assign(_converse.ControlBoxView.prototype, viewWithHeadlinePanel);
}
/**
* View which renders headlines section of the control box.
* @class
* @namespace _converse.HeadlinePanel
* @memberOf _converse
*/
_converse.HeadlinePanel = View.extend({
tagName: 'div',
className: 'controlbox-section',
id: 'headline',
events: {
'click .open-headline': 'openHeadline'
},
openHeadline (ev) {
ev.preventDefault();
const jid = ev.target.getAttribute('data-headline-jid');
const chat = _converse.chatboxes.get(jid);
chat.maybeShow(true);
},
render () {
this.el.innerHTML = tpl_headline_panel({
'heading_headline': __('Announcements')
});
return this;
}
});
_converse.HeadlinesBoxView = _converse.ChatBoxView.extend({
className: 'chatbox headlines',
......@@ -80,13 +158,30 @@ converse.plugins.add('converse-headlines-view', {
});
async function renderHeadlineList (removedBox=null) {
const controlboxview = _converse.chatboxviews.get('controlbox');
if (controlboxview !== undefined) {
const headlineboxes = await _converse.api.headlines.get();
const el = controlboxview.el.querySelector('.list-container--headline');
const headline_list = tpl_headline_list({
headlineboxes,
'open_title': __('Click to open this server message'),
});
el && (el.outerHTML = headline_list);
}
}
_converse.api.listen.on('chatBoxViewsInitialized', () => {
const views = _converse.chatboxviews;
_converse.chatboxes.on('add', item => {
if (!views.get(item.get('id')) && item.get('type') === _converse.HEADLINES_TYPE) {
views.add(item.get('id'), new _converse.HeadlinesBoxView({model: item}));
renderHeadlineList();
}
});
_converse.chatboxes.on('remove', () => renderHeadlineList());
});
}
});
src/headless/converse-headlines.js
View file @ 73fa24a8
......@@ -3,12 +3,8 @@
* @copyright 2020, the Converse.js contributors
* @description XEP-0045 Multi-User Chat Views
*/
import "converse-chatview";
import converse from "@converse/headless/converse-core";
import { View } from "skeletor.js/src/view";
import { isString } from "lodash";
import tpl_headline_list from "templates/headline_list.html";
import tpl_headline_panel from "templates/headline_panel.html";
const u = converse.env.utils;
......@@ -42,13 +38,7 @@ converse.plugins.add('converse-headlines', {
return this.__super__.model.apply(this, arguments);
}
},
},
ControlBoxView: {
renderControlBoxPane () {
this.__super__.renderControlBoxPane.apply(this, arguments);
this.renderHeadlinePanel();
},
},
}
},
......@@ -56,33 +46,7 @@ converse.plugins.add('converse-headlines', {
/* The initialize function gets called as soon as the plugin is
* loaded by converse.js's plugin machinery.
*/
const { _converse } = this,
{ __ } = _converse;
const viewWithHeadlinePanel = {
renderHeadlinePanel () {
if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
return this.headlinepanel;
}
this.headlinepanel = new _converse.HeadlinePanel();
this.el.querySelector('.controlbox-pane').insertAdjacentElement(
'beforeEnd', this.headlinepanel.render().el);
return this.headlinepanel;
},
getHeadlinePanel () {
if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
return this.headlinepanel;
} else {
return this.renderHeadlinePanel();
}
}
}
if (_converse.ControlBoxView) {
Object.assign(_converse.ControlBoxView.prototype, viewWithHeadlinePanel);
}
const { _converse } = this;
/**
* Shows headline messages
......@@ -115,27 +79,6 @@ converse.plugins.add('converse-headlines', {
}
});
function getAllHeadlineBoxes (removedBox = null) {
const chatboxviews = _converse.chatboxviews.getAll();
return Object.keys(chatboxviews)
.filter(
id => chatboxviews[id].el.classList.contains('headlines') &&
id !== removedBox
);
}
function renderHeadlineList (removedBox = null) {
const controlboxview = _converse.chatboxviews.get('controlbox');
if (controlboxview !== undefined) {
const el = controlboxview.el.querySelector('.list-container--headline');
const headline_list = tpl_headline_list({
'headlineboxes': getAllHeadlineBoxes(removedBox),
'open_title': __('Click to open this server message'),
});
el && (el.outerHTML = headline_list);
}
}
async function onHeadlineMessage (message) {
// Handler method for all incoming messages of type "headline".
if (u.isHeadlineMessage(_converse, message)) {
......@@ -158,45 +101,9 @@ converse.plugins.add('converse-headlines', {
const attrs = await chatbox.getMessageAttributesFromStanza(message, message);
await chatbox.messages.create(attrs);
_converse.api.trigger('message', {'chatbox': chatbox, 'stanza': message});
renderHeadlineList();
_converse.chatboxviews.get(from_jid).el
.querySelector('.close-chatbox-button')
.addEventListener("click",
() => renderHeadlineList(from_jid)
);
}
}
/**
* View which renders headlines section of the control box.
* @class
* @namespace _converse.HeadlinePanel
* @memberOf _converse
*/
_converse.HeadlinePanel = View.extend({
tagName: 'div',
className: 'controlbox-section',
id: 'headline',
events: {
'click .open-headline': 'openHeadline'
},
openHeadline (ev) {
ev.preventDefault();
const jid = ev.target.getAttribute('data-headline-jid');
const chat = _converse.chatboxes.get(jid);
chat.maybeShow(true);
},
render () {
this.el.innerHTML = tpl_headline_panel({
'heading_headline': __('Announcements')
});
return this;
}
});
/************************ BEGIN Event Handlers ************************/
function registerHeadlineHandler () {
......
src/templates/headline_list.html
View file @ 73fa24a8
......@@ -2,10 +2,10 @@
<div class="items-list rooms-list headline-list">
{[o.headlineboxes.forEach(function (headline) { ]}
<div class="list-item controlbox-padded d-flex flex-row"
data-headline-jid="{{{headline}}}">
data-headline-jid="{{{headline.get('jid')}}}">
<a class="list-item-link open-headline available-room w-100"
data-headline-jid="{{{headline}}}"
title="{{{o.open_title}}}" href="#">{{{headline}}}</a>
data-headline-jid="{{{headline.get('jid')}}}"
title="{{{o.open_title}}}" href="#">{{{headline.get('jid')}}}</a>
</div>
{[ }) ]}
</div>
......
src/templates/headline_panel.html
View file @ 73fa24a8
......@@ -2,5 +2,5 @@
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading controlbox-heading--headline">{{{o.heading_headline}}}</span>
</div>
<div class="list-container list-container--headline"></div>
<div class="list-container list-container--headline hidden"></div>
<!-- </div> -->
src/templates/room_panel.html
View file @ 73fa24a8
......@@ -4,6 +4,6 @@
<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"></div>
<div class="list-container list-container--bookmarks"></div>
<div class="list-container list-container--openrooms hidden"></div>
<div class="list-container list-container--bookmarks hidden"></div>
<!-- </div> -->
src/templates/rooms_list.js
View file @ 73fa24a8
......@@ -60,13 +60,11 @@ const room_item = (o) => html`
`;
export default (o) => html`
<div class="list-container list-container--openrooms ${ !o.rooms.length && 'hidden' || '' }">
<a class="list-toggle open-rooms-toggle controlbox-padded" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
<span class="fa ${ (o.toggle_state === o._converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"></span>${i18n_rooms}</a>
<div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
</div>
<div class="list-container list-container--openrooms ${ o.rooms.length ? '' : 'hidden' }">
<a class="list-toggle open-rooms-toggle controlbox-padded" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
<span class="fa ${ (o.toggle_state === o._converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"></span>${i18n_rooms}</a>
<div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
</div>
</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