2019-07-11 10:48:52 +02:00
|
|
|
/**
|
2019-11-22 14:38:09 +01:00
|
|
|
* @module converse-headlines-view
|
2020-01-26 16:21:20 +01:00
|
|
|
* @copyright 2020, the Converse.js contributors
|
|
|
|
* @license Mozilla Public License (MPLv2)
|
2019-07-11 10:48:52 +02:00
|
|
|
*/
|
2018-10-23 03:41:38 +02:00
|
|
|
import "converse-chatview";
|
2020-01-30 17:56:07 +01:00
|
|
|
import { View } from 'skeletor.js/src/view.js';
|
|
|
|
import { __ } from '@converse/headless/i18n';
|
2018-10-23 03:41:38 +02:00
|
|
|
import converse from "@converse/headless/converse-core";
|
|
|
|
import tpl_chatbox from "templates/chatbox.html";
|
2020-01-30 17:56:07 +01:00
|
|
|
import tpl_headline_list from "templates/headline_list.html";
|
|
|
|
import tpl_headline_panel from "templates/headline_panel.html";
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
|
2019-11-01 16:04:55 +01:00
|
|
|
converse.plugins.add('converse-headlines-view', {
|
2018-10-23 03:41:38 +02:00
|
|
|
/* Plugin dependencies are other plugins which might be
|
|
|
|
* overridden or relied upon, and therefore need to be loaded before
|
|
|
|
* this plugin.
|
|
|
|
*
|
|
|
|
* If the setting "strict_plugin_dependencies" is set to true,
|
|
|
|
* an error will be raised if the plugin is not found. By default it's
|
|
|
|
* false, which means these plugins are only loaded opportunistically.
|
|
|
|
*
|
|
|
|
* NB: These plugins need to have already been loaded via require.js.
|
|
|
|
*/
|
2019-11-01 16:04:55 +01:00
|
|
|
dependencies: ["converse-headlines", "converse-chatview"],
|
2017-12-06 22:10:21 +01:00
|
|
|
|
2020-01-30 17:56:07 +01:00
|
|
|
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();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
2016-03-20 00:03:00 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
initialize () {
|
|
|
|
/* The initialize function gets called as soon as the plugin is
|
|
|
|
* loaded by converse.js's plugin machinery.
|
|
|
|
*/
|
2019-10-09 16:01:38 +02:00
|
|
|
const { _converse } = this;
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
|
2020-01-30 17:56:07 +01:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
_converse.HeadlinesBoxView = _converse.ChatBoxView.extend({
|
|
|
|
className: 'chatbox headlines',
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click .close-chatbox-button': 'close',
|
|
|
|
'click .toggle-chatbox-button': 'minimize',
|
2019-05-26 10:58:52 +02:00
|
|
|
'keypress textarea.chat-textarea': 'onKeyDown'
|
2018-10-23 03:41:38 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize () {
|
|
|
|
this.initDebounced();
|
|
|
|
|
2019-05-17 13:44:52 +02:00
|
|
|
this.model.disable_mam = true; // Don't do MAM queries for this box
|
2019-09-06 14:34:59 +02:00
|
|
|
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
|
|
|
this.listenTo(this.model, 'show', this.show);
|
|
|
|
this.listenTo(this.model, 'destroy', this.hide);
|
|
|
|
this.listenTo(this.model, 'change:minimized', this.onMinimizedChanged);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
2019-05-16 09:12:20 +02:00
|
|
|
this.render().insertHeading()
|
|
|
|
this.updateAfterMessagesFetched();
|
|
|
|
this.insertIntoDOM().hide();
|
2019-12-18 12:42:40 +01:00
|
|
|
/**
|
|
|
|
* Triggered once the {@link _converse.HeadlinesBoxView} has been initialized
|
|
|
|
* @event _converse#headlinesBoxViewInitialized
|
|
|
|
* @type { _converse.HeadlinesBoxView }
|
|
|
|
* @example _converse.api.listen.on('headlinesBoxViewInitialized', view => { ... });
|
|
|
|
*/
|
|
|
|
_converse.api.trigger('headlinesBoxViewInitialized', this);
|
2018-10-23 03:41:38 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
this.el.setAttribute('id', this.model.get('box_id'))
|
|
|
|
this.el.innerHTML = tpl_chatbox(
|
2019-04-29 09:07:15 +02:00
|
|
|
Object.assign(this.model.toJSON(), {
|
2018-10-23 03:41:38 +02:00
|
|
|
info_close: '',
|
|
|
|
label_personal_message: '',
|
|
|
|
show_send_button: false,
|
|
|
|
show_toolbar: false,
|
|
|
|
unread_msgs: ''
|
|
|
|
}
|
|
|
|
));
|
|
|
|
this.content = this.el.querySelector('.chat-content');
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
// Override to avoid the methods in converse-chatview.js
|
2019-08-05 11:14:49 +02:00
|
|
|
'renderMessageForm': function renderMessageForm () {},
|
|
|
|
'afterShown': function afterShown () {}
|
2018-10-23 03:41:38 +02:00
|
|
|
});
|
|
|
|
|
2018-08-28 14:58:33 +02:00
|
|
|
|
2020-01-30 17:56:07 +01:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2019-03-29 14:15:03 +01:00
|
|
|
_converse.api.listen.on('chatBoxViewsInitialized', () => {
|
2019-04-17 11:52:41 +02:00
|
|
|
const views = _converse.chatboxviews;
|
2018-10-23 03:41:38 +02:00
|
|
|
_converse.chatboxes.on('add', item => {
|
2019-04-17 11:52:41 +02:00
|
|
|
if (!views.get(item.get('id')) && item.get('type') === _converse.HEADLINES_TYPE) {
|
|
|
|
views.add(item.get('id'), new _converse.HeadlinesBoxView({model: item}));
|
2020-01-30 17:56:07 +01:00
|
|
|
renderHeadlineList();
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
2018-08-28 14:58:33 +02:00
|
|
|
});
|
2020-01-30 17:56:07 +01:00
|
|
|
|
|
|
|
_converse.chatboxes.on('remove', () => renderHeadlineList());
|
2018-10-23 03:41:38 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|