Add a rudimentary message versions modal

css/converse.css

@@ -8871,6 +8871,8 @@ body.reset {
   #conversejs .message.chat-msg .chat-msg-content {
     margin-left: 0.5rem;
     width: 100%; }
+  #conversejs .message.chat-msg .chat-msg-edited {
+    cursor: pointer; }
   #conversejs .message.chat-msg.headline .chat-msg-content {
     margin-left: 0; }
   #conversejs .message.chat-msg .chat-msg-text {

dist/converse.js

@@ -68988,9 +68988,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             });
 
             if (replace) {
+              const older_versions = message.get('older_versions') || [];
+              older_versions.push(message.get('message'));
               message.save({
                 'message': getMessageBody(stanza),
-                'older_versions': (message.get('older_versions') || []).push(message.get('message')),
+                'older_versions': older_versions,
                 'edited': true
               });
             } else if (!message) {
@@ -74463,11 +74465,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 // Copyright (c) 2013-2018, the Converse.js developers
 // Licensed under the Mozilla Public License (MPLv2)
 (function (root, factory) {
-  !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(/*! converse-core */ "./src/converse-core.js"), __webpack_require__(/*! xss */ "./node_modules/xss/dist/xss.js"), __webpack_require__(/*! emojione */ "./node_modules/emojione/lib/js/emojione.js"), __webpack_require__(/*! filesize */ "./node_modules/filesize/lib/filesize.js"), __webpack_require__(/*! templates/action.html */ "./src/templates/action.html"), __webpack_require__(/*! templates/csn.html */ "./src/templates/csn.html"), __webpack_require__(/*! templates/file_progress.html */ "./src/templates/file_progress.html"), __webpack_require__(/*! templates/info.html */ "./src/templates/info.html"), __webpack_require__(/*! templates/message.html */ "./src/templates/message.html"), __webpack_require__(/*! templates/spoiler_message.html */ "./src/templates/spoiler_message.html")], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+  !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(/*! converse-core */ "./src/converse-core.js"), __webpack_require__(/*! xss */ "./node_modules/xss/dist/xss.js"), __webpack_require__(/*! emojione */ "./node_modules/emojione/lib/js/emojione.js"), __webpack_require__(/*! filesize */ "./node_modules/filesize/lib/filesize.js"), __webpack_require__(/*! templates/action.html */ "./src/templates/action.html"), __webpack_require__(/*! templates/csn.html */ "./src/templates/csn.html"), __webpack_require__(/*! templates/file_progress.html */ "./src/templates/file_progress.html"), __webpack_require__(/*! templates/info.html */ "./src/templates/info.html"), __webpack_require__(/*! templates/message.html */ "./src/templates/message.html"), __webpack_require__(/*! templates/message_versions_modal.html */ "./src/templates/message_versions_modal.html"), __webpack_require__(/*! templates/spoiler_message.html */ "./src/templates/spoiler_message.html")], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-})(void 0, function (converse, xss, emojione, filesize, tpl_action, tpl_csn, tpl_file_progress, tpl_info, tpl_message, tpl_spoiler_message) {
+})(void 0, function (converse, xss, emojione, filesize, tpl_action, tpl_csn, tpl_file_progress, tpl_info, tpl_message, tpl_message_versions_modal, tpl_spoiler_message) {
   "use strict";
 
   const _converse$env = converse.env,
@@ -74510,8 +74512,20 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           img.src = img_src;
         }
 
+      });
+      _converse.MessageVersionsModal = _converse.BootstrapModal.extend({
+        toHTML() {
+          return tpl_message_versions_modal(_.extend(this.model.toJSON(), {
+            '__': __
+          }));
+        }
+
       });
       _converse.MessageView = _converse.ViewWithAvatar.extend({
+        events: {
+          'click .chat-msg-edited': 'showMessageVersionsModal'
+        },
+
         initialize() {
           this.model.vcard.on('change', this.render, this);
           this.model.on('change:progress', this.renderFileUploadProgresBar, this);
@@ -74648,6 +74662,18 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           this.renderAvatar();
         },
 
+        showMessageVersionsModal(ev) {
+          ev.preventDefault();
+
+          if (_.isUndefined(this.message_versions_modal)) {
+            this.message_versions_modal = new _converse.MessageVersionsModal({
+              'model': this.model
+            });
+          }
+
+          this.message_versions_modal.show(ev);
+        },
+
         isMeCommand() {
           const text = this.model.get('message');
 
@@ -84322,7 +84348,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<!-- src/templates/chatroom_details_modal.html -->\n<div class="modal fade" id="room-details-modal" tabindex="-1" role="dialog" aria-labelledby="user-profile-modal-label" aria-hidden="true">\n    <div class="modal-dialog" role="document">\n        <div class="modal-content">\n            <div class="modal-header">\n                <h5 class="modal-title" id="user-profile-modal-label">' +
+__p += '<!-- src/templates/chatroom_details_modal.html -->\n<div class="modal fade" id="room-details-modal" tabindex="-1" role="dialog" aria-labelledby="room-details-modal-label" aria-hidden="true">\n    <div class="modal-dialog" role="document">\n        <div class="modal-content">\n            <div class="modal-header">\n                <h5 class="modal-title" id="room-details-modal-label">' +
 __e(o.display_name) +
 '</h5>\n                <button type="button" class="close" data-dismiss="modal" aria-label="' +
 __e(o.label_close) +
@@ -84460,7 +84486,9 @@ __e( o.__('Message archiving') ) +
 __e( o.__('Messages are archived on the server') ) +
 '</em></li>\n                        ';
  } ;
-__p += '\n                        </ul>\n                        </div>\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n';
+__p += '\n                        </ul>\n                        </div>\n                    </p>\n                </div>\n            </div>\n            <div class="modal-footer">\n                <button type="button" class="btn btn-secondary" data-dismiss="modal">' +
+__e(o.__('Close')) +
+'</button>\n            </div>\n        </div>\n    </div>\n</div>\n';
 return __p
 };
 
@@ -85563,7 +85591,7 @@ __e(o.pretty_time) +
  if (o.edited) { ;
 __p += ' <i title="' +
 __e(o.__('This message has been edited')) +
-'" class="fa fa-edit"></i> ';
+'" class="fa fa-edit chat-msg-edited"></i> ';
  } ;
 __p += '\n    </div>\n</div>\n';
 return __p
@@ -85571,6 +85599,37 @@ return __p
 
 /***/ }),
 
+/***/ "./src/templates/message_versions_modal.html":
+/*!***************************************************!*\
+  !*** ./src/templates/message_versions_modal.html ***!
+  \***************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
+module.exports = function(o) {
+var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<!-- src/templates/message_versions_modal.html -->\n<div class="modal fade" id="message-versions-modal" tabindex="-1" role="dialog" aria-labelledby="message-versions-modal-label" aria-hidden="true">\n    <div class="modal-dialog" role="document">\n        <div class="modal-content">\n            <div class="modal-header">\n                <h4 class="modal-title" id="message-versions-modal-label">' +
+__e(o.__('Message versions')) +
+'</h4>\n                <button type="button" class="close" data-dismiss="modal" aria-label="' +
+__e(o.label_close) +
+'"><span aria-hidden="true">&times;</span></button>\n            </div>\n            <div class="modal-body">\n                <h4>Older versions</h4>\n                ';
+o.older_versions.forEach(function (text) { ;
+__p += ' <p>' +
+__e(text) +
+'</p> ';
+ }); ;
+__p += '\n                <hr>\n                <h4>Current version</h4>\n                <p>' +
+__e(o.message) +
+'</p>\n            </div>\n            <div class="modal-footer">\n                <button type="button" class="btn btn-secondary" data-dismiss="modal">' +
+__e(o.__('Close')) +
+'</button>\n            </div>\n        </div>\n    </div>\n</div>\n';
+return __p
+};
+
+/***/ }),
+
 /***/ "./src/templates/new_day.html":
 /*!************************************!*\
   !*** ./src/templates/new_day.html ***!

sass/_messages.scss

@@ -95,6 +95,9 @@
                 margin-left: 0.5rem;
                 width: 100%;
             }
+            .chat-msg-edited {
+                cursor: pointer;
+            }
             &.headline {
                 .chat-msg-content {
                     margin-left: 0;

src/converse-chatboxes.js

@@ -662,9 +662,11 @@
                               message = msgid && chatbox.messages.findWhere({msgid});
 
                         if (replace) {
+                            const older_versions = message.get('older_versions') || [];
+                            older_versions.push(message.get('message'));
                             message.save({
                                 'message': getMessageBody(stanza),
-                                'older_versions': (message.get('older_versions') || []).push(message.get('message')),
+                                'older_versions': older_versions,
                                 'edited': true
                             });
                         } else if (!message) {

src/converse-message-view.js

@@ -15,6 +15,7 @@
         "templates/file_progress.html",
         "templates/info.html",
         "templates/message.html",
+        "templates/message_versions_modal.html",
         "templates/spoiler_message.html"
     ], factory);
 }(this, function (
@@ -27,6 +28,7 @@
         tpl_file_progress,
         tpl_info,
         tpl_message,
+        tpl_message_versions_modal,
         tpl_spoiler_message
     ) {
     "use strict";
@@ -69,8 +71,24 @@
                 },
             });
 
+
+            _converse.MessageVersionsModal = _converse.BootstrapModal.extend({
+
+                toHTML () {
+                    return tpl_message_versions_modal(_.extend(
+                        this.model.toJSON(), {
+                        '__': __
+                    }));
+                }
+            });
+
+
             _converse.MessageView = _converse.ViewWithAvatar.extend({
 
+                events: {
+                    'click .chat-msg-edited': 'showMessageVersionsModal'
+                },
+
                 initialize () {
                     this.model.vcard.on('change', this.render, this);
                     this.model.on('change:progress', this.renderFileUploadProgresBar, this);
@@ -212,6 +230,14 @@
                     this.renderAvatar();
                 },
 
+                showMessageVersionsModal (ev) {
+                    ev.preventDefault();
+                    if (_.isUndefined(this.message_versions_modal)) {
+                        this.message_versions_modal = new _converse.MessageVersionsModal({'model': this.model});
+                    }
+                    this.message_versions_modal.show(ev);
+                },
+
                 isMeCommand () {
                     const text = this.model.get('message');
                     if (!text) {

src/templates/chatroom_details_modal.html

-<div class="modal fade" id="room-details-modal" tabindex="-1" role="dialog" aria-labelledby="user-profile-modal-label" aria-hidden="true">
+<div class="modal fade" id="room-details-modal" tabindex="-1" role="dialog" aria-labelledby="room-details-modal-label" aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="user-profile-modal-label">{{{o.display_name}}}</h5>
+                <h5 class="modal-title" id="room-details-modal-label">{{{o.display_name}}}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">&times;</span></button>
             </div>
             <div class="modal-body">
@@ -62,6 +62,9 @@
                     </p>
                 </div>
             </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.__('Close')}}}</button>
+            </div>
         </div>
     </div>
 </div>

src/templates/message.html

@@ -11,6 +11,6 @@
         </span>
         <span class="chat-msg-text"></span>
         <div class="chat-msg-media"></div>
-        {[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit"></i> {[ } ]}
+        {[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit chat-msg-edited"></i> {[ } ]}
     </div>
 </div>

src/templates/message_versions_modal.html

+<div class="modal fade" id="message-versions-modal" tabindex="-1" role="dialog" aria-labelledby="message-versions-modal-label" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="message-versions-modal-label">{{{o.__('Message versions')}}}</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">&times;</span></button>
+            </div>
+            <div class="modal-body">
+                <h4>Older versions</h4>
+                {[o.older_versions.forEach(function (text) { ]} <p>{{{text}}}</p> {[ }); ]}
+                <hr>
+                <h4>Current version</h4>
+                <p>{{{o.message}}}</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.__('Close')}}}</button>
+            </div>
+        </div>
+    </div>
+</div>