Skip to content

C
converse.js
Commit 4e077aac authored by JC Brand's avatar JC Brand
Browse files
Options

Start moving code from the plugin to converse-chatview

parent 400bdf77
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 119 deletions
src/converse-chatboxes.js
View file @ 4e077aac
...@@ -128,6 +128,9 @@ ...@@ -128,6 +128,9 @@
* that contains the message stanza, if it was * that contains the message stanza, if it was
* contained, otherwise it's the message stanza itself. * contained, otherwise it's the message stanza itself.
*/ */
const { _converse } = this.__super__,
{ __ } = _converse;
delay = delay || message.querySelector('delay'); delay = delay || message.querySelector('delay');
const type = message.getAttribute('type'), const type = message.getAttribute('type'),
body = this.getMessageBody(message); body = this.getMessageBody(message);
...@@ -155,7 +158,8 @@ ...@@ -155,7 +158,8 @@
sender = 'them'; sender = 'them';
fullname = this.get('fullname') || from; fullname = this.get('fullname') || from;
} }
return { const spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`);
const attrs = {
'type': type, 'type': type,
'chat_state': chat_state, 'chat_state': chat_state,
'delayed': delayed, 'delayed': delayed,
...@@ -163,8 +167,13 @@ ...@@ -163,8 +167,13 @@
'message': body || undefined, 'message': body || undefined,
'msgid': message.getAttribute('id'), 'msgid': message.getAttribute('id'),
'sender': sender, 'sender': sender,
'time': time 'time': time,
'is_spoiler': !_.isNull(spoiler)
}; };
if (spoiler) {
attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
}
return attrs;
}, },
createMessage (message, delay, original_stanza) { createMessage (message, delay, original_stanza) {
......
src/converse-chatview.js
View file @ 4e077aac
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"tpl!message", "tpl!message",
"tpl!new_day", "tpl!new_day",
"tpl!spinner", "tpl!spinner",
"tpl!spoiler_button",
"tpl!toolbar" "tpl!toolbar"
], factory); ], factory);
}(this, function ( }(this, function (
...@@ -39,6 +40,7 @@ ...@@ -39,6 +40,7 @@
tpl_message, tpl_message,
tpl_new_day, tpl_new_day,
tpl_spinner, tpl_spinner,
tpl_spoiler_button,
tpl_toolbar tpl_toolbar
) { ) {
"use strict"; "use strict";
...@@ -268,13 +270,15 @@ ...@@ -268,13 +270,15 @@
events: { events: {
'click .close-chatbox-button': 'close', 'click .close-chatbox-button': 'close',
'keypress .chat-textarea': 'keyPressed', 'click .new-msgs-indicator': 'viewUnreadMessages',
'click .send-button': 'onFormSubmitted', 'click .send-button': 'onFormSubmitted',
'click .toggle-smiley': 'toggleEmojiMenu',
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
'click .toggle-clear': 'clearMessages',
'click .toggle-call': 'toggleCall', 'click .toggle-call': 'toggleCall',
'click .new-msgs-indicator': 'viewUnreadMessages' 'click .toggle-clear': 'clearMessages',
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
'click .toggle-smiley': 'toggleEmojiMenu',
'click .toggle-spoiler-display': 'toggleSpoilerMessage',
'click .toggle-spoiler-edit': 'toggleEditSpoilerMessage',
'keypress .chat-textarea': 'keyPressed'
}, },
initialize () { initialize () {
...@@ -709,13 +713,24 @@ ...@@ -709,13 +713,24 @@
}, },
createMessageStanza (message) { createMessageStanza (message) {
return $msg({ const stanza = $msg({
from: _converse.connection.jid, 'from': _converse.connection.jid,
to: this.model.get('jid'), 'to': this.model.get('jid'),
type: 'chat', 'type': 'chat',
id: message.get('msgid') 'id': message.get('msgid')
}).c('body').t(message.get('message')).up() }).c('body').t(message.get('message')).up()
.c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up(); .c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up();
if (this.model.get('sending_spoiler')) {
const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
if (has_hint) {
const hint = document.querySelector('.chat-textarea-hint').value;
stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }, hint);
} else {
stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER });
}
}
return stanza;
}, },
sendMessage (message) { sendMessage (message) {
...@@ -780,13 +795,20 @@ ...@@ -780,13 +795,20 @@
/* Overridable method which returns the attributes to be /* Overridable method which returns the attributes to be
* passed to Backbone.Message's constructor. * passed to Backbone.Message's constructor.
*/ */
const fullname = _converse.xmppstatus.get('fullname'); const fullname = _converse.xmppstatus.get('fullname'),
return { is_spoiler = this.model.get('sending_spoiler'),
'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname, attrs = {
'sender': 'me', 'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
'time': moment().format(), 'sender': 'me',
'message': emojione.shortnameToUnicode(text) 'time': moment().format(),
'message': emojione.shortnameToUnicode(text),
'is_spoiler': is_spoiler
};
if (is_spoiler) {
const spoiler = this.el.querySelector('.chat-textarea-hint')
attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
} }
return attrs;
}, },
sendChatState () { sendChatState () {
...@@ -960,6 +982,7 @@ ...@@ -960,6 +982,7 @@
getToolbarOptions (options) { getToolbarOptions (options) {
return _.extend(options || {}, { return _.extend(options || {}, {
'allow_spoiler_messages': _converse.allow_spoiler_messages,
'label_clear': __('Clear all messages'), 'label_clear': __('Clear all messages'),
'label_insert_smiley': __('Insert a smiley'), 'label_insert_smiley': __('Insert a smiley'),
'label_start_call': __('Start a call'), 'label_start_call': __('Start a call'),
...@@ -979,7 +1002,6 @@ ...@@ -979,7 +1002,6 @@
this.getToolbarOptions(options || {}) this.getToolbarOptions(options || {})
); );
this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options); this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
return this; return this;
}, },
...@@ -991,6 +1013,26 @@ ...@@ -991,6 +1013,26 @@
} }
}, },
toggleEditSpoilerMessage () {
const { _converse } = this.__super__,
{ __ } = _converse,
text_area = this.el.querySelector('.chat-textarea'),
spoiler_button = this.el.querySelector('.toggle-spoiler-edit');
let spoiler_title;
if (this.model.get('sending_spoiler')) {
this.model.set('sending_spoiler', false);
spoiler_title = __('Click to write your message as a spoiler');
} else {
this.model.set('sending_spoiler', true);
spoiler_title = __('Click to write as a normal (non-spoiler) message');
}
spoiler_button.outerHTML = tpl_spoiler_button(_.extend(
this.model.toJSON(), {'title': spoiler_title})
)
this.renderMessageForm();
},
focus () { focus () {
const textarea_el = this.el.querySelector('.chat-textarea'); const textarea_el = this.el.querySelector('.chat-textarea');
if (!_.isNull(textarea_el)) { if (!_.isNull(textarea_el)) {
......
src/converse-spoilers.js
View file @ 4e077aac
(function (root, factory) { (function (root, factory) {
define([ define([
"converse-core", "converse-core",
"tpl!spoiler_button",
"converse-chatview" "converse-chatview"
], factory); ], factory);
}(this, function (converse, tpl_spoiler_button) { }(this, function (converse) {
const { _, Strophe } = converse.env; const { _, Strophe } = converse.env;
const u = converse.env.utils; const u = converse.env.utils;
...@@ -38,42 +37,6 @@ ...@@ -38,42 +37,6 @@
'ChatBoxView': { 'ChatBoxView': {
'events': {
'click .toggle-spoiler-edit': 'toggleEditSpoilerMessage',
'click .toggle-spoiler-display': 'toggleSpoilerMessage'
},
addSpoilerToolbarButton () {
const toolbar_el = this.el.querySelector('.chat-toolbar');
if (!_.isNull(toolbar_el)) {
toolbar_el.insertAdjacentHTML(
'beforeend',
tpl_spoiler_button(_.extend(
this.model.toJSON(), {
'title': this.__super__._converse.__('Click here to write a message as a spoiler')
}))
);
}
},
renderToolbar (toolbar, options) {
const result = this.__super__.renderToolbar.apply(this, arguments);
this.addSpoilerToolbarButton();
return result;
},
getOutgoingMessageAttributes (text) {
const { __ } = this.__super__._converse,
attrs = this.__super__.getOutgoingMessageAttributes.apply(this, arguments);
if (this.model.get('sending_spoiler')) {
const spoiler = this.el.querySelector('.chat-textarea-hint')
attrs.is_spoiler = true;
attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
}
return attrs;
},
toggleSpoilerMessage (event) { toggleSpoilerMessage (event) {
const { _converse } = this.__super__, const { _converse } = this.__super__,
{ __ } = _converse; { __ } = _converse;
...@@ -106,44 +69,6 @@ ...@@ -106,44 +69,6 @@
} }
}, },
toggleEditSpoilerMessage () {
const { _converse } = this.__super__,
{ __ } = _converse,
text_area = this.el.querySelector('.chat-textarea'),
spoiler_button = this.el.querySelector('.toggle-spoiler-edit');
let spoiler_title;
if (this.model.get('sending_spoiler')) {
this.model.set('sending_spoiler', false);
spoiler_title = __('Click to write your message as a spoiler');
} else {
this.model.set('sending_spoiler', true);
spoiler_title = __('Click to write as a normal (non-spoiler) message');
}
spoiler_button.outerHTML = tpl_spoiler_button(_.extend(
this.model.toJSON(), {'title': spoiler_title})
)
this.renderMessageForm();
},
addSpoilerElement (stanza) {
if (this.model.get('sending_spoiler')) {
const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
if (has_hint) {
const hint = document.querySelector('.chat-textarea-hint').value;
stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }, hint);
} else {
stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER });
}
}
},
createMessageStanza () {
const stanza = this.__super__.createMessageStanza.apply(this, arguments);
this.addSpoilerElement(stanza);
return stanza;
},
'renderMessage': function (attrs) { 'renderMessage': function (attrs) {
/* Renders a chat message based on the passed in attributes. /* Renders a chat message based on the passed in attributes.
* *
...@@ -154,12 +79,8 @@ ...@@ -154,12 +79,8 @@
* The DOM element representing the message. * The DOM element representing the message.
*/ */
const { _converse } = this.__super__, const { _converse } = this.__super__,
{ __ } = _converse; { __ } = _converse,
msg = this.__super__.renderMessage.apply(this, arguments);
console.log('These are the attrs and the msg object\n');
console.log(attrs);
const msg = this.__super__.renderMessage.apply(this, arguments);
console.log(msg);
// Spoiler logic // Spoiler logic
// The value of the "spoiler" attribute, corresponds to the spoiler's hint. // The value of the "spoiler" attribute, corresponds to the spoiler's hint.
...@@ -208,20 +129,6 @@ ...@@ -208,20 +129,6 @@
} }
return msg; return msg;
} }
},
'ChatBox': {
getMessageAttributes (message, delay, original_stanza) {
const attrs = this.__super__.getMessageAttributes.apply(this, arguments);
const spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`)
if (spoiler) {
const { __ } = this.__super__._converse;
attrs.is_spoiler = true;
attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
}
return attrs;
}
} }
} }
}); });
......
src/templates/toolbar.html
View file @ 4e077aac
{[ if (o.use_emoji) { ]} {[ if (o.use_emoji) { ]}
<li class="toggle-toolbar-menu toggle-smiley icon-happy" title="{{{o.label_insert_smiley}}}"> <li class="toggle-toolbar-menu toggle-smiley icon-happy" title="{{{o.label_insert_smiley}}}">
<ul class="emoji-picker"></ul> <ul class="emoji-picker"></ul>
</li> </li>
{[ } ]}
{[ if (o.allow_spoiler_messages) { ]}
<li class="toggle-spoiler-edit">
<a class="
{[ if (o.sending_spoiler) { ]} icon-eye-blocked {[ } ]}
{[ if (!o.sending_spoiler) { ]} icon-eye {[ } ]}"
title="{{ o.title }}"></a>
</li>
{[ } ]} {[ } ]}
{[ if (o.show_call_button) { ]} {[ if (o.show_call_button) { ]}
<li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li> <li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>
......
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