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

Add a rudimentary message versions modal

Browse Source
This commit is contained in:
JC Brand 2018-07-06 01:35:58 +02:00
parent 19b9aeadfd
commit 9e965fa20e
8 changed files with 125 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/converse.css
View File

@ -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 {

71
dist/converse.js vendored
View File

@ -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 ***!

3
sass/_messages.scss
View File

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

4
src/converse-chatboxes.js
View File

@ -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) {

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

@ -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) {

7
src/templates/chatroom_details_modal.html
View File

@ -1,8 +1,8 @@
<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>

2
src/templates/message.html
View File

@ -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>

20
src/templates/message_versions_modal.html Normal file
View File

@ -0,0 +1,20 @@
<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>