2020-12-01 18:50:35 +01:00
|
|
|
import BootstrapModal from "./base.js";
|
2020-12-01 16:31:57 +01:00
|
|
|
import tpl_occupant_modal from "./templates/occupant.js";
|
2020-12-03 13:40:30 +01:00
|
|
|
import { _converse, api } from "@converse/headless/core";
|
2020-12-01 16:31:57 +01:00
|
|
|
|
|
|
|
|
|
|
|
const OccupantModal = BootstrapModal.extend({
|
|
|
|
|
|
|
|
initialize () {
|
|
|
|
BootstrapModal.prototype.initialize.apply(this, arguments);
|
|
|
|
this.listenTo(this.model, 'change', this.render);
|
|
|
|
/**
|
2020-12-01 18:50:35 +01:00
|
|
|
* Triggered once the OccupantModal has been initialized
|
|
|
|
* @event _converse#userDetailsModalInitialized
|
|
|
|
* @type { _converse.ChatBox }
|
|
|
|
* @example _converse.api.listen.on('userDetailsModalInitialized', chatbox => { ... });
|
|
|
|
*/
|
2020-12-01 16:31:57 +01:00
|
|
|
api.trigger('occupantModalInitialized', this.model);
|
|
|
|
},
|
|
|
|
|
|
|
|
toHTML () {
|
|
|
|
return tpl_occupant_modal(Object.assign(
|
|
|
|
this.model.toJSON(),
|
|
|
|
{
|
|
|
|
'avatar_data': this.getAvatarData(),
|
|
|
|
'display_name': this.model.getDisplayName()
|
|
|
|
}
|
|
|
|
));
|
|
|
|
},
|
|
|
|
|
|
|
|
getAvatarData () {
|
|
|
|
const vcard = _converse.vcards.findWhere({'jid': this.model.get('jid')});
|
|
|
|
const image_type = vcard?.get('image_type') || _converse.DEFAULT_IMAGE_TYPE;
|
|
|
|
const image_data = vcard?.get('image') || _converse.DEFAULT_IMAGE;
|
|
|
|
const image = "data:" + image_type + ";base64," + image_data;
|
|
|
|
return {
|
|
|
|
'classes': 'chat-msg__avatar',
|
|
|
|
'height': 120,
|
|
|
|
'width': 120,
|
|
|
|
image,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
_converse.OccupantModal = OccupantModal;
|
|
|
|
|
|
|
|
export default OccupantModal;
|