Render messages via a new MessageView view

updates #161

CHANGES.md

@@ -4,8 +4,8 @@
 
 ## New Features
 
-- files can now be sent via http-file-upload (XEP-0363)
-- mp4 and mp3 files will now be playable directly in chat. 
+- #161 XEP-0363: HTTP File Upload
+- mp4 and mp3 files will now be playable directly in chat
 
 ## 4.0.0 (Unreleased)
 

spec/chatbox.js

@@ -18,6 +18,7 @@
     var u = converse.env.utils;
 
     return describe("Chatboxes", function () {
+
         describe("A Chatbox", function () {
 
             it("has a /help command to show the available commands",
@@ -239,7 +240,6 @@
                 });
             }));
 
-
             it("can be saved to, and retrieved from, browserStorage",
                 mock.initConverseWithPromises(
                     null, ['rosterGroupsFetched'], {},
@@ -654,6 +654,8 @@
                                     return chatbox.get('fullname') === mock.cur_names[0];
                                 }, 100);
                             }).then(function () {
+                                var author_el = chatboxview.el.querySelector('.chat-msg-author');
+                                expect( _.includes(author_el.textContent, 'Max Frankfurter')).toBeTruthy();
                                 done();
                             });
                         }));

src/config.js

@@ -77,6 +77,7 @@ require.config({
         "converse-headline":        "src/converse-headline",
         "converse-http-file-upload":"src/converse-http-file-upload",
         "converse-mam":             "src/converse-mam",
+        "converse-message-view":    "src/converse-message-view",
         "converse-minimize":        "src/converse-minimize",
         "converse-modal":           "src/converse-modal",
         "converse-muc":             "src/converse-muc",

src/converse-chatboxes.js

-// Converse.js (A browser based XMPP chat client)
+// Converse.js
 // http://conversejs.org
 //
-// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
+// Copyright (c) 2012-2018, the Converse.js developers
 // Licensed under the Mozilla Public License (MPLv2)
-//
-/*global define */
 
 (function (root, factory) {
     define([
@@ -106,6 +104,7 @@
                     this.messages = new _converse.Messages();
                     this.messages.browserStorage = new Backbone.BrowserStorage[_converse.message_storage](
                         b64_sha1(`converse.messages${this.get('jid')}${_converse.bare_jid}`));
+                    this.messages.chatbox = this;
 
                     this.save({
                         // The chat_state will be set to ACTIVE once the chat box is opened

src/converse-core.js

-// Converse.js (A browser based XMPP chat client)
-// http://conversejs.org
+// Converse.js
+// https://conversejs.org
 //
-// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
+// Copyright (c) 2012-2018, the Converse.js developers
 // Licensed under the Mozilla Public License (MPLv2)
-//
-/*global Backbone, define, window, JSON */
+
 (function (root, factory) {
     define(["sizzle",
             "es6-promise",
@@ -80,6 +79,7 @@
         'converse-headline',
         'converse-http-file-upload',
         'converse-mam',
+        'converse-message-view',
         'converse-minimize',
         'converse-modal',
         'converse-muc',

src/converse-http-file-upload.js

@@ -34,7 +34,6 @@
                     'click .upload-file': 'toggleFileUpload',
                     'change input.fileupload': 'onFileSelection'
                 },
-                
 
                 toggleFileUpload (ev) {
                     this.el.querySelector('input.fileupload').click();

src/converse-message-view.js

@@ -90,11 +90,11 @@
                     msg_content.innerHTML = u.addEmoji(
                         _converse, emojione, u.addHyperlinks(xss.filterXSS(text, {'whiteList': {}}))
                     );
-                    
+
                     if (msg_content.textContent.endsWith('mp4')) {
                         msg_content.innerHTML = u.renderMovieURLs(msg_content);
                     } else if (msg_content.textContent.endsWith('mp3')) {
-                        msg_content.innerHTML = u.renderAudioURLs(msg_content); 
+                        msg_content.innerHTML = u.renderAudioURLs(msg_content);
                     } else {
                         u.renderImageURLs(msg_content).then(() => {
                             this.model.collection.trigger('rendered');

src/converse-modal.js

+// Converse.js
+// http://conversejs.org
+//
+// Copyright (c) 2018, the Converse.js developers
+// Licensed under the Mozilla Public License (MPLv2)
+
 (function (root, factory) {
     if (typeof define === 'function' && define.amd) {
         define([

src/converse-muc-views.js

@@ -515,6 +515,8 @@
                     this.markScrolled = _.debounce(this._markScrolled, 100);
 
                     this.model.messages.on('add', this.onMessageAdded, this);
+                    this.model.messages.on('rendered', this.scrollDown, this);
+
                     this.model.on('change:affiliation', this.renderHeading, this);
                     this.model.on('change:chat_state', this.sendChatState, this);
                     this.model.on('change:connection_status', this.afterConnected, this);
@@ -654,19 +656,6 @@
                     }
                 },
 
-                getExtraMessageClasses (attrs) {
-                    let extra_classes = _converse.ChatBoxView.prototype
-                            .getExtraMessageClasses.apply(this, arguments);
-
-                    if (this.is_chatroom && attrs.sender === 'them' &&
-                            this.model.isUserMentioned(attrs.message)) {
-                        // Add special class to mark groupchat messages
-                        // in which we are mentioned.
-                        extra_classes += ' mentioned';
-                    }
-                    return extra_classes;
-                },
-
                 getToolbarOptions () {
                     return _.extend(
                         _converse.ChatBoxView.prototype.getToolbarOptions.apply(this, arguments),

src/templates/spoiler_message.html

 <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>
+    <div class="spoiler-hint">{{{o.spoiler_hint}}}</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>