Skip to content

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

Use template to render the spoiler message.

parent 3b850c77
Show whitespace changes
Inline Side-by-side
Showing with 78 additions and 141 deletions
css/converse.css
View file @ f6db2a91
...@@ -1617,6 +1617,8 @@ ...@@ -1617,6 +1617,8 @@
margin-top: 1em; } margin-top: 1em; }
#converse-embedded-chat .chatbox .chat-body .chat-image, #converse-embedded-chat .chatbox .chat-body .chat-image,
#conversejs .chatbox .chat-body .chat-image { #conversejs .chatbox .chat-body .chat-image {
height: auto;
width: auto;
max-height: 24em; max-height: 24em;
max-width: 100%; } max-width: 100%; }
#converse-embedded-chat .chatbox .chat-body .chat-action, #converse-embedded-chat .chatbox .chat-body .chat-action,
...@@ -1679,6 +1681,9 @@ ...@@ -1679,6 +1681,9 @@
line-height: 1.3em; line-height: 1.3em;
height: 206px; height: 206px;
height: calc(100% - 96px); } height: calc(100% - 96px); }
#converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
#conversejs .chatbox .chat-content .toggle-spoiler:before {
padding-right: 0.25em; }
#converse-embedded-chat .chatbox .chat-content-sendbutton, #converse-embedded-chat .chatbox .chat-content-sendbutton,
#conversejs .chatbox .chat-content-sendbutton { #conversejs .chatbox .chat-content-sendbutton {
height: calc(100% - 128px); } height: calc(100% - 128px); }
......
css/inverse.css
View file @ f6db2a91
...@@ -1682,6 +1682,8 @@ body { ...@@ -1682,6 +1682,8 @@ body {
margin-top: 1em; } margin-top: 1em; }
#converse-embedded-chat .chatbox .chat-body .chat-image, #converse-embedded-chat .chatbox .chat-body .chat-image,
#conversejs .chatbox .chat-body .chat-image { #conversejs .chatbox .chat-body .chat-image {
height: auto;
width: auto;
max-height: 24em; max-height: 24em;
max-width: 100%; } max-width: 100%; }
#converse-embedded-chat .chatbox .chat-body .chat-action, #converse-embedded-chat .chatbox .chat-body .chat-action,
...@@ -1744,6 +1746,9 @@ body { ...@@ -1744,6 +1746,9 @@ body {
line-height: 1.3em; line-height: 1.3em;
height: 206px; height: 206px;
height: calc(100% - 100px); } height: calc(100% - 100px); }
#converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
#conversejs .chatbox .chat-content .toggle-spoiler:before {
padding-right: 0.25em; }
#converse-embedded-chat .chatbox .chat-content-sendbutton, #converse-embedded-chat .chatbox .chat-content-sendbutton,
#conversejs .chatbox .chat-content-sendbutton { #conversejs .chatbox .chat-content-sendbutton {
height: calc(100% - 132px); } height: calc(100% - 132px); }
......
sass/_chatbox.scss
View file @ f6db2a91
...@@ -217,6 +217,11 @@ ...@@ -217,6 +217,11 @@
line-height: 1.3em; line-height: 1.3em;
height: 206px; height: 206px;
height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px}); height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
.toggle-spoiler:before {
padding-right: 0.25em;
whitespace: nowrap;
}
} }
.chat-content-sendbutton { .chat-content-sendbutton {
height: calc(100% - #{$toolbar-height + $chat-textarea-height + $send-button-height + 2*$send-button-margin}); height: calc(100% - #{$toolbar-height + $chat-textarea-height + $send-button-height + 2*$send-button-margin});
......
src/config.js
View file @ f6db2a91
...@@ -85,7 +85,6 @@ require.config({ ...@@ -85,7 +85,6 @@ require.config({
"converse-rosterview": "src/converse-rosterview", "converse-rosterview": "src/converse-rosterview",
"converse-singleton": "src/converse-singleton", "converse-singleton": "src/converse-singleton",
"converse-vcard": "src/converse-vcard", "converse-vcard": "src/converse-vcard",
"converse-spoilers": "src/converse-spoilers",
// Off-the-record-encryption // Off-the-record-encryption
// "bigint": "node_modules/otr/build/dep/bigint", // "bigint": "node_modules/otr/build/dep/bigint",
......
src/converse-chatview.js
View file @ f6db2a91
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"tpl!new_day", "tpl!new_day",
"tpl!spinner", "tpl!spinner",
"tpl!spoiler_button", "tpl!spoiler_button",
"tpl!spoiler_message",
"tpl!toolbar" "tpl!toolbar"
], factory); ], factory);
}(this, function ( }(this, function (
...@@ -41,6 +42,7 @@ ...@@ -41,6 +42,7 @@
tpl_new_day, tpl_new_day,
tpl_spinner, tpl_spinner,
tpl_spoiler_button, tpl_spoiler_button,
tpl_spoiler_message,
tpl_toolbar tpl_toolbar
) { ) {
"use strict"; "use strict";
...@@ -361,7 +363,7 @@ ...@@ -361,7 +363,7 @@
'click .toggle-clear': 'clearMessages', 'click .toggle-clear': 'clearMessages',
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji', 'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
'click .toggle-smiley': 'toggleEmojiMenu', 'click .toggle-smiley': 'toggleEmojiMenu',
'click .toggle-spoiler-display': 'toggleSpoilerMessage', 'click .toggle-spoiler': 'toggleSpoilerMessage',
'keypress .chat-textarea': 'keyPressed' 'keypress .chat-textarea': 'keyPressed'
}, },
...@@ -610,14 +612,18 @@ ...@@ -610,14 +612,18 @@
} }
}, },
getExtraMessageTemplateAttributes () { getExtraMessageTemplateAttributes (attrs) {
/* Provides a hook for sending more attributes to the /* Provides a hook for sending more attributes to the
* message template. * message template.
* *
* Parameters: * Parameters:
* (Object) attrs: An object containing message attributes. * (Object) attrs: An object containing message attributes.
*/ */
return {}; if (attrs.is_spoiler) {
return {'label_show': __('Show spoiler')};
} else {
return {}
}
}, },
getExtraMessageClasses (attrs) { getExtraMessageClasses (attrs) {
...@@ -632,46 +638,11 @@ ...@@ -632,46 +638,11 @@
/* Render a "spoiler" message, as defined in XEP-0382 /* Render a "spoiler" message, as defined in XEP-0382
* *
* Parameters: * Parameters:
* (HTMLElement) msg: The chat message DOM element
* (Object) attrs: An object containing the message attributes. * (Object) attrs: An object containing the message attributes.
*/ */
console.log('Spoiler in attrs \n'); const hint = msg.querySelector('.spoiler-hint');
const button = document.createElement("button"); hint.appendChild(document.createTextNode(attrs.spoiler_hint || ''));
const container = document.createElement("div");
const content = document.createElement( "div" );
const hint = document.createElement("div");
const contentHidden = document.createElement("div");
const messageContent = msg.querySelector(".chat-msg-content");
hint.appendChild(document.createTextNode(attrs.spoiler_hint));
for (var i = 0; i < messageContent.childNodes.length; i++){
contentHidden.append(messageContent.childNodes[i]);
}
contentHidden.classList.add("hidden");
// contentHidden.addHyperlinks();
// contentHidden.addEmoticons(_converse.visible_toolbar_buttons.emoticons);
container.style.backgroundColor = "Lavender";
container.style.textAlign = "center";
//Spoiler's content
content.classList.add("spoiler-content");
content.appendChild(hint);
content.appendChild(contentHidden);
//Spoiler's button
button.classList.add("toggle-spoiler-display");
button.classList.add("icon-eye");
button.setAttribute("type", "button");
button.appendChild(document.createTextNode(__('Show ')));
button.style.width = "100%";
button.setAttribute("closed", "true");
container.appendChild(button);
container.appendChild(content);
messageContent.textContent = "";
messageContent.append(document.createElement("br"));
messageContent.append(container);
}, },
renderMessage (attrs) { renderMessage (attrs) {
...@@ -697,6 +668,8 @@ ...@@ -697,6 +668,8 @@
} else { } else {
username = attrs.fullname; username = attrs.fullname;
} }
} else if (attrs.is_spoiler) {
template = tpl_spoiler_message;
} else { } else {
template = tpl_message; template = tpl_message;
username = attrs.sender === 'me' && __('me') || fullname; username = attrs.sender === 'me' && __('me') || fullname;
...@@ -714,13 +687,13 @@ ...@@ -714,13 +687,13 @@
}) })
)); ));
if (_converse.show_message_load_animation) { if (_converse.show_message_load_animation) {
window.setTimeout(_.partial(u.removeClass, 'onload', msg), 2000); window.setTimeout(
_.partial(u.removeClass, 'onload', msg), 2000);
} }
const msg_content = msg.querySelector('.chat-msg-content'); const msg_content = msg.querySelector('.chat-msg-content');
msg_content.innerHTML = u.addEmoji( msg_content.innerHTML = u.addEmoji(
_converse, emojione, u.addHyperlinks(xss.filterXSS(text, {'whiteList': {}})) _converse, emojione, u.addHyperlinks(xss.filterXSS(text, {'whiteList': {}}))
); );
if (attrs.is_spoiler) { if (attrs.is_spoiler) {
this.renderSpoilerMessage(msg, attrs) this.renderSpoilerMessage(msg, attrs)
} }
...@@ -846,11 +819,9 @@ ...@@ -846,11 +819,9 @@
}).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.message_form_view.model.get('sending_spoiler')) { if (message.get('is_spoiler')) {
const has_hint = this.el.querySelector('.spoiler-hint').value.length > 0; if (message.get('spoiler_hint')) {
if (has_hint) { stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }, message.get('spoiler_hint'));
const hint = document.querySelector('.spoiler-hint').value;
stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }, hint);
} else { } else {
stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }); stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER });
} }
...@@ -882,12 +853,14 @@ ...@@ -882,12 +853,14 @@
} }
}, },
onMessageSubmitted (text) { onMessageSubmitted (text, spoiler_hint) {
/* This method gets called once the user has typed a message /* This method gets called once the user has typed a message
* and then pressed enter in a chat box. * and then pressed enter in a chat box.
* *
* Parameters: * Parameters:
* (string) text - The chat message text. * (String) text - The chat message text.
* (String) spoiler_hint - A hint in case the message
* text is a spoiler message. See XEP-0382
*/ */
if (!_converse.connection.authenticated) { if (!_converse.connection.authenticated) {
return this.showHelpMessages( return this.showHelpMessages(
...@@ -911,12 +884,12 @@ ...@@ -911,12 +884,12 @@
return; return;
} }
} }
const attrs = this.getOutgoingMessageAttributes(text) const attrs = this.getOutgoingMessageAttributes(text, spoiler_hint)
const message = this.model.messages.create(attrs); const message = this.model.messages.create(attrs);
this.sendMessage(message); this.sendMessage(message);
}, },
getOutgoingMessageAttributes (text) { getOutgoingMessageAttributes (text, spoiler_hint) {
/* 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.
*/ */
...@@ -930,8 +903,7 @@ ...@@ -930,8 +903,7 @@
'is_spoiler': is_spoiler 'is_spoiler': is_spoiler
}; };
if (is_spoiler) { if (is_spoiler) {
const spoiler = this.el.querySelector('.spoiler-hint') attrs.spoiler_hint = spoiler_hint;
attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
} }
return attrs; return attrs;
}, },
...@@ -988,10 +960,17 @@ ...@@ -988,10 +960,17 @@
ev.preventDefault(); ev.preventDefault();
const textarea = this.el.querySelector('.chat-textarea'), const textarea = this.el.querySelector('.chat-textarea'),
message = textarea.value; message = textarea.value;
let spoiler_hint;
if (this.model.get('sending_spoiler')) {
const hint_el = this.el.querySelector('form.sendXMPPMessage input.spoiler-hint');
spoiler_hint = hint_el.value;
hint_el.value = '';
}
textarea.value = ''; textarea.value = '';
textarea.focus(); textarea.focus();
if (message !== '') { if (message !== '') {
this.onMessageSubmitted(message); this.onMessageSubmitted(message, spoiler_hint);
_converse.emit('messageSend', message); _converse.emit('messageSend', message);
} }
this.setChatState(_converse.ACTIVE); this.setChatState(_converse.ACTIVE);
...@@ -1036,6 +1015,7 @@ ...@@ -1036,6 +1015,7 @@
this.insertIntoTextArea(target.getAttribute('data-emoji')); this.insertIntoTextArea(target.getAttribute('data-emoji'));
}, },
toggleEmojiMenu (ev) { toggleEmojiMenu (ev) {
if (u.hasClass('insert-emoji', ev.target)) { if (u.hasClass('insert-emoji', ev.target)) {
return; return;
...@@ -1067,6 +1047,27 @@ ...@@ -1067,6 +1047,27 @@
}); });
}, },
toggleSpoilerMessage (ev) {
if (ev && ev.preventDefault) {
ev.preventDefault();
}
const toggle_el = ev.target;
u.slideToggleElement(
toggle_el.parentElement.querySelector('.spoiler')
);
if (toggle_el.getAttribute("data-toggle-state") == "closed") {
toggle_el.textContent = __('Hide spoiler');
toggle_el.classList.remove("icon-eye");
toggle_el.classList.add("icon-eye-blocked");
toggle_el.setAttribute("data-toggle-state", "open");
} else {
toggle_el.textContent = __('Show spoiler');
toggle_el.classList.remove("icon-eye-blocked");
toggle_el.classList.add("icon-eye");
toggle_el.setAttribute("data-toggle-state", "closed");
}
},
onChatStatusChanged (item) { onChatStatusChanged (item) {
const chat_status = item.get('chat_status'); const chat_status = item.get('chat_status');
let fullname = item.get('fullname'); let fullname = item.get('fullname');
......
src/converse-spoilers.js deleted 100644 → 0
View file @ 3b850c77
(function (root, factory) {
define([
"converse-core",
"converse-chatview"
], factory);
}(this, function (converse) {
// The following line registers your plugin.
converse.plugins.add("converse-spoilers", {
/* Optional dependencies are other plugins which might be
* overridden or relied upon, and therefore need to be loaded before
* this plugin. They are called "optional" because they might not be
* available, in which case any overrides applicable to them will be
* ignored.
*
* It's possible however to make optional dependencies non-optional.
* If the setting "strict_plugin_dependencies" is set to true,
* an error will be raised if the plugin is not found.
*
* NB: These plugins need to have already been loaded via require.js.
*/
dependencies: ["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.
'ChatBoxView': {
toggleSpoilerMessage (event) {
const { _converse } = this.__super__,
{ __ } = _converse;
const button = event.target;
const textarea = button.nextElementSibling;
const hint = textarea.children[0];
const contentHidden = textarea.children[1];
const container = button.parentElement;
if (button.getAttribute("closed") == "true") {
//Show spoiler's content
button.classList.remove("icon-eye");
button.classList.add("toggle-spoiler-display");
button.classList.add("icon-eye-blocked");
button.setAttribute("closed", "false");
button.textContent = __('Hide ');
container.style.backgroundColor="#D5FFD2";
hint.classList.add("hidden");
contentHidden.classList.remove("hidden");
} else { //Hide spoiler's content
button.classList.remove("icon-eye-blocked");
button.classList.add("icon-eye");
button.setAttribute("closed", "true");
button.textContent = __('Show ');
container.style.backgroundColor="Lavender";
hint.classList.remove("hidden");
contentHidden.classList.add("hidden");
}
},
'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.
*/
const { _converse } = this.__super__,
{ __ } = _converse,
msg = this.__super__.renderMessage.apply(this, arguments);
return msg;
}
}
}
});
}));
src/converse.js
View file @ f6db2a91
...@@ -21,8 +21,7 @@ if (typeof define !== 'undefined') { ...@@ -21,8 +21,7 @@ if (typeof define !== 'undefined') {
"converse-minimize", // Allows chat boxes to be minimized "converse-minimize", // Allows chat boxes to be minimized
"converse-dragresize", // Allows chat boxes to be resized by dragging them "converse-dragresize", // Allows chat boxes to be resized by dragging them
"converse-headline", // Support for headline messages "converse-headline", // Support for headline messages
"converse-fullscreen", "converse-fullscreen"
"converse-spoilers"
/* END: Removable components */ /* END: Removable components */
], function (converse) { ], function (converse) {
return converse; return converse;
......
src/templates/spoiler_message.html 0 → 100644
View file @ f6db2a91
<div class="message chat-message {{{o.extra_classes}}}" data-isodate="{{{o.isodate}}}" data-msgid="{{{o.msgid}}}">
<span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.time}}} {{{o.username}}}:&nbsp;</span>
<div class="spoiler-hint"><!-- message gets added here via renderMessage --></div>
<a class="icon-eye toggle-spoiler" data-toggle-state="closed" href="#">{{{o.label_show}}}</a>
<div class="chat-msg-content spoiler collapsed"><!-- message gets added here via renderMessage --></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