Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix rendering of headline messages.

Browse Source 
Also, add urijs to more intelligently handle URIs
This commit is contained in:
JC Brand 2018-04-27 13:47:44 +02:00
parent 3d42425083
commit 56e4e8b8ee
14 changed files with 79 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/converse.css
View File

@ -8345,8 +8345,7 @@ body.reset {
#conversejs .chatbox.headlines .chat-body .chat-message {
color: #D2842B; }
#conversejs .chatbox.headlines .chat-content {
height: 100%;
border-radius: 4px; }
height: 100%; }
#conversejs .message.date-separator {
height: 2em;
@ -8384,9 +8383,6 @@ body.reset {
#conversejs .message.chat-info.chat-error {
color: #D24E2B;
font-weight: bold; }
#conversejs .message.chat-info.chat-date {
display: inline-block;
margin-top: 1em; }
#conversejs .message .chat-image {
height: auto;
width: auto;
@ -8422,12 +8418,14 @@ body.reset {
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg-content {
margin-left: 0.5rem; }
margin-left: 0.5rem;
word-wrap: break-word;
width: 100%; }
#conversejs .message.chat-msg.headline .chat-msg-content {
margin-left: 0; }
#conversejs .message.chat-msg .chat-msg-text {
padding: 0;
color: #666;
max-width: 100%;
word-wrap: break-word; }
color: #666; }
#conversejs .message.chat-msg .chat-msg-text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg-heading {

16
css/inverse.css
View File

@ -8525,8 +8525,7 @@ body {
#conversejs .chatbox.headlines .chat-body .chat-message {
color: #D2842B; }
#conversejs .chatbox.headlines .chat-content {
height: 100%;
border-radius: 4px; }
height: 100%; }
#conversejs.fullscreen .chatbox.headlines .box-flyout {
background-color: #E7A151; }
@ -8572,9 +8571,6 @@ body {
#conversejs .message.chat-info.chat-error {
color: #D24E2B;
font-weight: bold; }
#conversejs .message.chat-info.chat-date {
display: inline-block;
margin-top: 1em; }
#conversejs .message .chat-image {
height: auto;
width: auto;
@ -8610,12 +8606,14 @@ body {
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg-content {
margin-left: 0.5rem; }
margin-left: 0.5rem;
word-wrap: break-word;
width: 100%; }
#conversejs .message.chat-msg.headline .chat-msg-content {
margin-left: 0; }
#conversejs .message.chat-msg .chat-msg-text {
padding: 0;
color: #666;
max-width: 100%;
word-wrap: break-word; }
color: #666; }
#conversejs .message.chat-msg .chat-msg-text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg-heading {

37
package-lock.json generated
View File

@ -907,13 +907,6 @@
"dev": true,
"optional": true
},
"bindings": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.3.0.tgz",
"integrity": "sha512-DpLh5EzMR2kzvX1KIlVC0VkC3iZtHKTgdtZ0a3pglBZdaQFjt5S9g9xd1lE+YvXyfd6mtCeRnrUfOLYiTMlNSw==",
"dev": true,
"optional": true
},
"bootstrap": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
@ -8069,10 +8062,12 @@
}
},
"otr": {
"version": "github:jcbrand/otr#b2a10117c23632714c13074d5e63aee6aedab9e3",
"version": "0.2.16",
"resolved": "https://registry.npmjs.org/otr/-/otr-0.2.16.tgz",
"integrity": "sha1-BKdTRPUi38sHeMVDjA9V5p0+i8E=",
"dev": true,
"requires": {
"webworker-threads": "0.7.13"
"webworker-threads": "0.4.13"
}
},
"output-file-sync": {
@ -9703,6 +9698,12 @@
}
}
},
"urijs": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.1.tgz",
"integrity": "sha512-xVrGVi94ueCJNrBSTjWqjvtgvl3cyOTThp2zaMaFNGp3F542TR6sM3f2o8RqZl+AwteClSVmoCyt0ka4RjQOQg==",
"dev": true
},
"url": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
@ -9757,14 +9758,22 @@
"dev": true
},
"webworker-threads": {
"version": "0.7.13",
"resolved": "https://registry.npmjs.org/webworker-threads/-/webworker-threads-0.7.13.tgz",
"integrity": "sha1-yEsYtrokElu503NC5E3rgVFi+4M=",
"version": "0.4.13",
"resolved": "https://registry.npmjs.org/webworker-threads/-/webworker-threads-0.4.13.tgz",
"integrity": "sha1-1zvf0AIb9wkxy4XCTMP0zvvrH5g=",
"dev": true,
"optional": true,
"requires": {
"bindings": "1.3.0",
"nan": "2.9.2"
"nan": "0.8.0"
},
"dependencies": {
"nan": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/nan/-/nan-0.8.0.tgz",
"integrity": "sha1-AiqPpen+hCCWSsH7PclOF/RJ9f0=",
"dev": true,
"optional": true
}
}
},
"which": {

3
package.json
View File

@ -58,7 +58,7 @@
"lodash": "4.17.4",
"lodash-template-loader": "^2.0.0",
"moment": "~> 2.19.3 ",
"otr": "jcbrand/otr",
"otr": "0.2.16",
"pluggable.js": "2.0.0",
"po2json": "^0.4.4",
"requirejs": "2.3.5",
@ -75,6 +75,7 @@
"strophejs-plugin-vcard": "0.0.1",
"text": "requirejs/text#2.0.15",
"uglify-es": "^3.0.24",
"urijs": "^1.19.1",
"wait-until-promise": "^1.0.0",
"xss": "^0.3.3"
},

1
sass/_headline.scss
View File

@ -14,7 +14,6 @@
}
.chat-content {
height: 100%;
border-radius: $chatbox-border-radius;
}
}
}

14
sass/_messages.scss
View File

@ -48,10 +48,6 @@
color: $warning-color;
font-weight: bold;
}
&.chat-date {
display: inline-block;
margin-top: 1em;
}
}
.chat-image {
@ -104,14 +100,18 @@
.chat-msg-content {
margin-left: 0.5rem;
word-wrap: break-word;
width: 100%;
}
&.headline {
.chat-msg-content {
margin-left: 0;
}
}
.chat-msg-text {
padding: 0;
color: #666;
max-width: 100%;
word-wrap: break-word;
.emojione {
margin-bottom: -6px;
}

2
spec/chatroom.js
View File

@ -2021,7 +2021,7 @@
});
expect(view.onMessageSubmitted).toHaveBeenCalled();
const info_messages = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info:not(.chat-date)'), 0);
const info_messages = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
expect(info_messages.length).toBe(17);
expect(info_messages.pop().textContent).toBe('/voice: Allow muted user to post messages');
expect(info_messages.pop().textContent).toBe('/topic: Set room subject (alias for /subject)');

1
spec/headline.js
View File

@ -67,6 +67,7 @@
.c('body').t('<juliet@example.com> You got mail.').up()
.c('x', {'xmlns': 'jabber:x:oob'})
.c('url').t('imap://romeo@example.com/INBOX;UIDVALIDITY=385759043/;UID=18');
_converse.connection._dataRecv(test_utils.createRequest(stanza));
expect(
_.includes(

4
src/config.js
View File

@ -15,6 +15,8 @@ if (typeof(require) === 'undefined') {
require.config({
baseUrl: '.',
paths: {
"IPv6": "node_modules/urijs/src/IPv6",
"SecondLevelDomains": "node_modules/urijs/src/SecondLevelDomains",
"almond": "node_modules/almond/almond",
"awesomplete": "node_modules/awesomplete-avoid-xss/awesomplete",
"babel": "node_modules/requirejs-babel/babel-5.8.34.min",
@ -42,6 +44,7 @@ require.config({
"muc-utils": "src/utils/muc",
"pluggable": "node_modules/pluggable.js/dist/pluggable",
"polyfill": "src/polyfill",
"punycode": "node_modules/urijs/src/punycode",
"sizzle": "node_modules/sizzle/dist/sizzle",
"snabbdom": "node_modules/snabbdom/dist/snabbdom",
"snabbdom-attributes": "node_modules/snabbdom/dist/snabbdom-attributes",
@ -59,6 +62,7 @@ require.config({
"tovnode": "node_modules/snabbdom/dist/tovnode",
"tpl": "node_modules/lodash-template-loader/loader",
"underscore": "src/underscore-shim",
"uri": "node_modules/urijs/src/URI",
"utils": "src/utils/core",
"vdom-parser": "node_modules/vdom-parser/dist",
"xss": "node_modules/xss/dist/xss",

2
src/converse-headline.js
View File

@ -135,8 +135,8 @@
const chatbox = _converse.chatboxes.create({
'id': from_jid,
'jid': from_jid,
'fullname': from_jid,
'type': 'headline',
'from': from_jid
});
chatbox.createMessage(message, undefined, message);
_converse.emit('message', {'chatbox': chatbox, 'stanza': message});

2
src/converse-message-view.js
View File

@ -74,6 +74,7 @@
username = this.model.get('fullname') || this.model.get('from');
template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message;
if (this.model.get('type') !== 'headline') {
if (this.model.get('sender') === 'me') {
image_type = _converse.xmppstatus.get('image_type');
image = _converse.xmppstatus.get('image');
@ -82,6 +83,7 @@
image = this.chatbox.get('image');
}
}
}
const moment_time = moment(this.model.get('time'));
const msg = u.stringToElement(template(
_.extend(this.model.toJSON(), {

4
src/templates/message.html
View File

@ -1,5 +1,7 @@
<div class="message chat-msg {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
<div class="message chat-msg {{{o.type}}} {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
{[ if (o.type !== 'headline') { ]}
<img alt="User Avatar" class="avatar" height="36px" width="36px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
{[ } ]}
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">{{{o.username}}}</span>

5
src/templates/new_day.html
View File

@ -1 +1,4 @@
<time class="message chat-info chat-date badge badge-info" data-isodate="{{{o.isodate}}}">{{{o.datestring}}}</time>
<div class="message date-separator">
<hr class="separator">
<time class="separator-text" datetime="{{{o.isodate}}}"><span>{{{o.datestring}}}</span></time>
</div>

18
src/utils/core.js
View File

@ -14,6 +14,7 @@
"es6-promise",
"lodash.noconflict",
"strophe",
"uri",
"tpl!audio",
"tpl!file",
"tpl!image",
@ -46,6 +47,7 @@
Promise,
_,
Strophe,
URI,
tpl_audio,
tpl_file,
tpl_image,
@ -247,19 +249,19 @@
};
u.renderFileURL = function (_converse, url) {
if (url.endsWith('mp3') || url.endsWith('mp4') ||
url.endsWith('jpg') || url.endsWith('jpeg') ||
url.endsWith('png') || url.endsWith('gif') ||
url.endsWith('svg')) {
const uri = new URI(url), { __ } = _converse,
filename = uri.filename();
if (!_.includes(["https", "http"], uri.protocol()) ||
filename.endsWith('mp3') || filename.endsWith('mp4') ||
filename.endsWith('jpg') || filename.endsWith('jpeg') ||
filename.endsWith('png') || filename.endsWith('gif') ||
filename.endsWith('svg')) {
return url;
}
const name = url.split('/').pop(),
{ __ } = _converse;
return tpl_file({
'url': url,
'label_download': __('Download file: "%1$s', name)
'label_download': __('Download: "%1$s', filename)
})
};