Start message rendering
This commit is contained in:
Seve
JC Brand
parent
4451a7c813
commit
226df674ae
@ -1,6 +1,6 @@
|
|||||||
(function (root, factory) {
|
(function (root, factory) {
|
||||||
define(["converse-core", "strophe.vcard", "converse-chatview"], factory);
|
define(["converse-core", "strophe.vcard", "converse-chatview"], factory);
|
||||||
}(this, function (converse) {
|
}(this, function (converse, tpl_message) {
|
||||||
|
|
||||||
// Commonly used utilities and variables can be found under the "env"
|
// Commonly used utilities and variables can be found under the "env"
|
||||||
// namespace of the "converse" global.
|
// namespace of the "converse" global.
|
||||||
@ -25,6 +25,52 @@
|
|||||||
return document.querySelector('.chat-textarea-hint').value;
|
return document.querySelector('.chat-textarea-hint').value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleEditSpoilerMessage() {
|
||||||
|
let form = document.querySelector('.sendXMPPMessage');
|
||||||
|
let textArea = document.querySelector('.chat-textarea');
|
||||||
|
let hintTextArea = null;
|
||||||
|
let spoiler_button = document.querySelector('.toggle-spoiler-edit');
|
||||||
|
|
||||||
|
if (!isEditSpoilerMessage()) {
|
||||||
|
textArea.style['background-color'] = '#D5FFD2';
|
||||||
|
textArea.setAttribute('placeholder', _('Write your spoiler\'s content here'));
|
||||||
|
spoiler_button.setAttribute("active", "true");
|
||||||
|
spoiler_button.innerHTML = '<a class="icon-eye-blocked" title="' + _('Cancel writing spoiler message') + '"></a>'; // better get the element <a></a> and change the class?
|
||||||
|
hintTextArea = createHintTextArea();
|
||||||
|
form.insertBefore(hintTextArea, textArea);
|
||||||
|
// <textarea type="text" class="chat-textarea-hint " placeholder="Hint (optional)" style="background-color: rgb(188, 203, 209); height:30px;"></textarea>
|
||||||
|
|
||||||
|
} else {
|
||||||
|
textArea.style['background-color'] = '';
|
||||||
|
textArea.setAttribute('placeholder', _('Personal message'));
|
||||||
|
spoiler_button.setAttribute("active", "false");
|
||||||
|
spoiler_button.innerHTML = '<a class="icon-eye" title="' + _('Click here to write a message as a spoiler') + '"></a>'; // better get the element <a></a> and change the class?
|
||||||
|
hintTextArea = document.querySelector('.chat-textarea-hint');
|
||||||
|
if ( hintTextArea ) {
|
||||||
|
hintTextArea.remove();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const initSpoilers = function () {
|
||||||
|
var spoiler_button = document.createElement('li');
|
||||||
|
spoiler_button.classList.add("toggle-spoiler-edit");
|
||||||
|
spoiler_button.setAttribute("active", "false");
|
||||||
|
spoiler_button.innerHTML = '<a class="icon-eye" title="' + _('Click here to write a message as a spoiler') + '"></a>';
|
||||||
|
document.querySelector('.chat-toolbar').appendChild(spoiler_button);
|
||||||
|
};
|
||||||
|
|
||||||
|
function createHintTextArea(){
|
||||||
|
let hintTextArea = document.createElement('input');
|
||||||
|
hintTextArea.setAttribute('type', 'text');
|
||||||
|
hintTextArea.setAttribute('placeholder', _('Hint (optional)'));
|
||||||
|
hintTextArea.classList.add('chat-textarea-hint');
|
||||||
|
hintTextArea.style['height'] = '30px';
|
||||||
|
return hintTextArea;
|
||||||
|
}
|
||||||
|
|
||||||
// The following line registers your plugin.
|
// The following line registers your plugin.
|
||||||
converse.plugins.add("converse-spoilers", {
|
converse.plugins.add("converse-spoilers", {
|
||||||
|
|
||||||
@ -100,51 +146,7 @@
|
|||||||
*
|
*
|
||||||
* _converse.api.waitUntil('operationCompleted', function { ... });
|
* _converse.api.waitUntil('operationCompleted', function { ... });
|
||||||
*/
|
*/
|
||||||
const initSpoilers = function () {
|
|
||||||
var spoiler_button = document.createElement('li');
|
|
||||||
spoiler_button.classList.add("toggle-spoiler-edit");
|
|
||||||
spoiler_button.setAttribute("active", "false");
|
|
||||||
spoiler_button.innerHTML = '<a class="icon-eye" title="' + _('Click here to write a message as a spoiler') + '"></a>';
|
|
||||||
document.querySelector('.chat-toolbar').appendChild(spoiler_button);
|
|
||||||
};
|
|
||||||
|
|
||||||
function toggleEditSpoilerMessage() {
|
|
||||||
let form = document.querySelector('.sendXMPPMessage');
|
|
||||||
let textArea = document.querySelector('.chat-textarea');
|
|
||||||
let hintTextArea = null;
|
|
||||||
let spoiler_button = document.querySelector('.toggle-spoiler-edit');
|
|
||||||
|
|
||||||
if (!isEditSpoilerMessage()) {
|
|
||||||
textArea.style['background-color'] = '#D5FFD2';
|
|
||||||
textArea.setAttribute('placeholder', _('Write your spoiler\'s content here'));
|
|
||||||
spoiler_button.setAttribute("active", "true");
|
|
||||||
spoiler_button.innerHTML = '<a class="icon-eye-blocked" title="' + _('Cancel writing spoiler message') + '"></a>'; // better get the element <a></a> and change the class?
|
|
||||||
hintTextArea = createHintTextArea();
|
|
||||||
form.insertBefore(hintTextArea, textArea);
|
|
||||||
// <textarea type="text" class="chat-textarea-hint " placeholder="Hint (optional)" style="background-color: rgb(188, 203, 209); height:30px;"></textarea>
|
|
||||||
|
|
||||||
} else {
|
|
||||||
textArea.style['background-color'] = '';
|
|
||||||
textArea.setAttribute('placeholder', _('Personal message'));
|
|
||||||
spoiler_button.setAttribute("active", "false");
|
|
||||||
spoiler_button.innerHTML = '<a class="icon-eye" title="' + _('Click here to write a message as a spoiler') + '"></a>'; // better get the element <a></a> and change the class?
|
|
||||||
hintTextArea = document.querySelector('.chat-textarea-hint');
|
|
||||||
if ( hintTextArea ) {
|
|
||||||
hintTextArea.remove();
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function createHintTextArea(){
|
|
||||||
let hintTextArea = document.createElement('input');
|
|
||||||
hintTextArea.setAttribute('type', 'text');
|
|
||||||
hintTextArea.setAttribute('placeholder', _('Hint (optional)'));
|
|
||||||
hintTextArea.classList.add('chat-textarea-hint');
|
|
||||||
hintTextArea.style['height'] = '30px';
|
|
||||||
return hintTextArea;
|
|
||||||
}
|
|
||||||
_converse.on('chatBoxFocused', function (chatbox) { initSpoilers(); });
|
_converse.on('chatBoxFocused', function (chatbox) { initSpoilers(); });
|
||||||
|
|
||||||
},
|
},
|
||||||
@ -158,7 +160,7 @@
|
|||||||
'events': {
|
'events': {
|
||||||
'click .toggle-spoiler-edit': toggleEditSpoilerMessage
|
'click .toggle-spoiler-edit': toggleEditSpoilerMessage
|
||||||
},
|
},
|
||||||
|
|
||||||
'createMessageStanza': function () {
|
'createMessageStanza': function () {
|
||||||
let messageStanza = this.__super__.createMessageStanza.apply(this, arguments);
|
let messageStanza = this.__super__.createMessageStanza.apply(this, arguments);
|
||||||
if (isEditSpoilerMessage()) {
|
if (isEditSpoilerMessage()) {
|
||||||
@ -169,6 +171,125 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
return messageStanza;
|
return messageStanza;
|
||||||
|
},
|
||||||
|
|
||||||
|
'renderMessage': function (attrs) {
|
||||||
|
/* Renders a chat message based on the passed in attributes.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* (Object) attrs: An object containing the message attributes.
|
||||||
|
*
|
||||||
|
* Returns:
|
||||||
|
* The DOM element representing the message.
|
||||||
|
*/
|
||||||
|
console.log(attrs);
|
||||||
|
let text = attrs.message,
|
||||||
|
fullname = this.model.get('fullname') || attrs.fullname,
|
||||||
|
template, username;
|
||||||
|
|
||||||
|
const match = text.match(/^\/(.*?)(?: (.*))?$/);
|
||||||
|
if ((match) && (match[1] === 'me')) {
|
||||||
|
text = text.replace(/^\/me/, '');
|
||||||
|
template = tpl_action;
|
||||||
|
if (attrs.sender === 'me') {
|
||||||
|
fullname = _converse.xmppstatus.get('fullname') || attrs.fullname;
|
||||||
|
username = _.isNil(fullname)? _converse.bare_jid: fullname;
|
||||||
|
} else {
|
||||||
|
username = attrs.fullname;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
template = tpl_message;
|
||||||
|
username = attrs.sender === 'me' && _('me') || fullname;
|
||||||
|
}
|
||||||
|
this.$content.find('div.chat-event').remove();
|
||||||
|
|
||||||
|
if (text.length > 8000) {
|
||||||
|
text = text.substring(0, 10) + '...';
|
||||||
|
this.showStatusNotification(
|
||||||
|
_("A very large message has been received. "+
|
||||||
|
"This might be due to an attack meant to degrade the chat performance. "+
|
||||||
|
"Output has been shortened."),
|
||||||
|
true, true);
|
||||||
|
}
|
||||||
|
const msg_time = moment(attrs.time) || moment;
|
||||||
|
const $msg = $(template(
|
||||||
|
_.extend(this.getExtraMessageTemplateAttributes(attrs), {
|
||||||
|
'msgid': attrs.msgid,
|
||||||
|
'sender': attrs.sender,
|
||||||
|
'time': msg_time.format(_converse.time_format),
|
||||||
|
'isodate': msg_time.format(),
|
||||||
|
'username': username,
|
||||||
|
'extra_classes': this.getExtraMessageClasses(attrs)
|
||||||
|
})
|
||||||
|
));
|
||||||
|
const msg_content = $msg[0].querySelector('.chat-msg-content');
|
||||||
|
|
||||||
|
//Spoiler logic
|
||||||
|
if ('spoiler' in attrs) {
|
||||||
|
let button = document.createElement("<button>"),
|
||||||
|
container = document.createElement("<div>"),
|
||||||
|
content = document.createElement( "<div>" ),
|
||||||
|
hint = document.createElement("<div>"),
|
||||||
|
contentHidden = document.createElement("<div>");
|
||||||
|
|
||||||
|
attrs.spoiler = attrs.spoiler == true ? _('Spoiler') : attrs.spoiler;
|
||||||
|
hint.text(attrs.spoiler);
|
||||||
|
|
||||||
|
contentHidden.text(text);
|
||||||
|
contentHidden.addClass("hidden");
|
||||||
|
contentHidden.addHyperlinks();
|
||||||
|
contentHidden.addEmoticons(_converse.visible_toolbar_buttons.emoticons);
|
||||||
|
|
||||||
|
|
||||||
|
container.css("background-color", "Lavender");
|
||||||
|
container.css("text-align", "center");
|
||||||
|
|
||||||
|
|
||||||
|
//Spoiler's content
|
||||||
|
content.addClass("spoiler-content");
|
||||||
|
content.append(hint);
|
||||||
|
content.append(contentHidden);
|
||||||
|
|
||||||
|
//Spoiler's button
|
||||||
|
button.addClass("spoiler-button icon-eye");
|
||||||
|
button.attr("type", "button");
|
||||||
|
button.text(_('Show '));
|
||||||
|
button.css("width", "100%");
|
||||||
|
button.attr("closed", "true");
|
||||||
|
|
||||||
|
container.append(button);
|
||||||
|
container.append(content);
|
||||||
|
|
||||||
|
|
||||||
|
msg_content.append(container);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
return this.__super__.renderMessage.apply(this, arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $msg;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'ChatBox': {
|
||||||
|
'getMessageAttributes': function () {
|
||||||
|
let messageAttributes = this.__super__.getMessageAttributes.apply(this, arguments);
|
||||||
|
console.log(arguments);
|
||||||
|
//Check if message is spoiler
|
||||||
|
let spoiler = null, i = 0, found = false;
|
||||||
|
|
||||||
|
while (i < message.childNodes.length && !found) {
|
||||||
|
if (message.childNodes[i].nodeName == "spoiler") {
|
||||||
|
spoiler = message.childNodes[i];
|
||||||
|
found = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
if (spoiler) {
|
||||||
|
messageAttributes['spoiler'] = spoiler.textContent.length > 0 ? spoiler.textContent : _('Spoiler');
|
||||||
|
}
|
||||||
|
|
||||||
|
return messageAttributes;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user