xmpp.chapril.org-conversejs/src/plugins/headlines-view/panel.js

77 lines
2.4 KiB
JavaScript

import tpl_headline_panel from 'templates/headline_panel.js';
import { View } from '@converse/skeletor/src/view.js';
import { __ } from 'i18n';
import { _converse, api, converse } from '@converse/headless/core';
const u = converse.env.utils;
/**
* View which renders headlines section of the control box.
* @class
* @namespace _converse.HeadlinesPanel
* @memberOf _converse
*/
export const HeadlinesPanelView = View.extend({
tagName: 'div',
className: 'controlbox-section',
id: 'headline',
events: {
'click .open-headline': 'openHeadline'
},
initialize () {
this.listenTo(this.model, 'add', this.renderIfHeadline);
this.listenTo(this.model, 'remove', this.renderIfHeadline);
this.listenTo(this.model, 'destroy', this.renderIfHeadline);
this.render();
this.insertIntoDOM();
},
toHTML () {
return tpl_headline_panel({
'heading_headline': __('Announcements'),
'headlineboxes': this.model.filter(m => m.get('type') === _converse.HEADLINES_TYPE),
'open_title': __('Click to open this server message')
});
},
renderIfHeadline (model) {
return model && model.get('type') === _converse.HEADLINES_TYPE && this.render();
},
openHeadline (ev) {
ev.preventDefault();
const jid = ev.target.getAttribute('data-headline-jid');
const chat = _converse.chatboxes.get(jid);
chat.maybeShow(true);
},
insertIntoDOM () {
const view = _converse.chatboxviews.get('controlbox');
view && view.el.querySelector('.controlbox-pane').insertAdjacentElement('beforeEnd', this.el);
}
});
/**
* Mixin for the {@link _converse.ControlBoxView } which add support for
* rendering a list of headline chats.
* @mixin
*/
export const HeadlinesPanelMixin = {
renderHeadlinesPanel () {
if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
return this.headlinepanel;
}
this.headlinepanel = new _converse.HeadlinesPanel({ 'model': _converse.chatboxes });
/**
* Triggered once the section of the { @link _converse.ControlBoxView }
* which shows announcements has been rendered.
* @event _converse#headlinesPanelRendered
* @example _converse.api.listen.on('headlinesPanelRendered', () => { ... });
*/
api.trigger('headlinesPanelRendered');
return this.headlinepanel;
}
};