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

Add a way to show a user's vcard

Browse Source
This commit is contained in:
JC Brand 2018-05-10 13:43:03 +02:00
parent 270c9b7c0e
commit 65ac389625
4 changed files with 73 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/converse-chatboxes.js
View File

@ -261,6 +261,10 @@
});
},
getDisplayName () {
return this.vcard.get('fullname') || this.get('jid');
},
createMessageStanza (message) {
/* Given a _converse.Message Backbone.Model, return the XML
* stanza that represents it.

34
src/converse-chatview.js
View File

@ -19,11 +19,13 @@
"tpl!help_message",
"tpl!info",
"tpl!new_day",
"tpl!user_details_modal",
"tpl!toolbar_fileupload",
"tpl!spinner",
"tpl!spoiler_button",
"tpl!status_message",
"tpl!toolbar",
"converse-modal",
"converse-chatboxes",
"converse-message-view"
], factory);
@ -41,6 +43,7 @@
tpl_help_message,
tpl_info,
tpl_new_day,
tpl_user_details_modal,
tpl_toolbar_fileupload,
tpl_spinner,
tpl_spoiler_button,
@ -66,7 +69,7 @@
*
* NB: These plugins need to have already been loaded via require.js.
*/
dependencies: ["converse-chatboxes", "converse-disco", "converse-message-view"],
dependencies: ["converse-chatboxes", "converse-disco", "converse-message-view", "converse-modal"],
overrides: {
// Overrides mentioned here will be picked up by converse.js's
@ -200,8 +203,8 @@
}
});
_converse.ChatBoxHeading = _converse.ViewWithAvatar.extend({
_converse.ChatBoxHeading = _converse.ViewWithAvatar.extend({
initialize () {
this.model.on('change:status', this.onStatusMessageChanged, this);
this.model.vcard.on('change', this.render, this);
@ -231,6 +234,25 @@
});
_converse.UserDetailsModal = _converse.BootstrapModal.extend({
toHTML () {
return tpl_user_details_modal(_.extend(
this.model.toJSON(),
this.model.vcard.toJSON(), {
'alt_profile_image': __("The User's Profile Image"),
'display_name': this.model.getDisplayName(),
'label_close': __('Close'),
'label_email': __('Email'),
'label_fullname': __('Full Name'),
'label_nickname': __('Nickname'),
'label_role': __('Role'),
'label_save': __('Save'),
'label_url': __('URL'),
}));
}
});
_converse.ChatBoxView = Backbone.NativeView.extend({
length: 200,
className: 'chatbox hidden',
@ -239,6 +261,7 @@
events: {
'change input.fileupload': 'onFileSelection',
'click .close-chatbox-button': 'close',
'click .show-user-details-modal': 'showUserDetailsModal',
'click .new-msgs-indicator': 'viewUnreadMessages',
'click .send-button': 'onFormSubmitted',
'click .toggle-call': 'toggleCall',
@ -328,6 +351,13 @@
this.renderToolbar();
},
showUserDetailsModal (ev) {
if (_.isUndefined(this.user_details_modal)) {
this.user_details_modal = new _converse.UserDetailsModal({model: this.model});
}
this.user_details_modal.show(ev);
},
toggleFileUpload (ev) {
this.el.querySelector('input.fileupload').click();
},

2
src/templates/chatbox_head.html
View File

@ -16,6 +16,6 @@
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-close" title={{{o.info_close}}}></a>
<!-- <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a> -->
<a class="chatbox-btn show-user-details-modal fa fa-vcard" title="{{{o.info_details}}}"></a>
</div>
</div>

36
src/templates/user_details_modal.html Normal file
View File

@ -0,0 +1,36 @@
<div class="modal fade" id="user-profile-modal" tabindex="-1" role="dialog" aria-labelledby="user-profile-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>
<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">
{[ if (o.image) { ]}
<img alt="{{{o.alt_profile_image}}}"
class="img-thumbnail avatar align-self-center"
height="100" width="100" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
{[ } ]}
{[ if (o.fullname) { ]}
<p><label>{{{o.label_fullname}}}:</label>&nbsp;{{{o.fullname}}}</p>
{[ } ]}
{[ if (o.nickname) { ]}
<p><label>{{{o.label_nickname}}}:</label>&nbsp;{{{o.nickname}}}</p>
{[ } ]}
{[ if (o.url) { ]}
<p><label>{{{o.label_url}}}:</label>&nbsp;<a target="_blank" rel="noopener" href="{{{o.url}}}">{{{o.url}}}</a></p>
{[ } ]}
{[ if (o.email) { ]}
<p><label>{{{o.label_email}}}:</label>&nbsp;<a href="mailto:{{{o.email}}}">{{{o.email}}}</a></p>
{[ } ]}
{[ if (o.role) { ]}
<p><label>{{{o.label_role}}}:</label>&nbsp;{{{o.role}}}</p>
{[ } ]}
</div>
<div class="modal-footer">
<button type="submit" class="save-form btn btn-primary">{{{o.label_save}}}</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.label_close}}}</button>
</div>
</div>
</div>
</div>