Add new option to jitsi-popover

This commit is contained in:
Ilya Daynatovich 2016-10-20 16:18:20 +03:00
parent 0e8297ea8d
commit 62af73ea09
2 changed files with 33 additions and 20 deletions

View File

@ -8,17 +8,14 @@ var JitsiPopover = (function () {
*/ */
function JitsiPopover(element, options) function JitsiPopover(element, options)
{ {
this.options = { let { skin, content, hasArrow } = options;
skin: "white", this.options = {};
content: "" this.options.skin = skin || 'white';
}; this.options.content = content || '';
if(options) this.options.hasArrow = true;
{
if(options.skin)
this.options.skin = options.skin;
if(options.content) if (typeof(hasArrow) !== 'undefined') {
this.options.content = options.content; this.options.hasArrow = false;
} }
this.elementIsHovered = false; this.elementIsHovered = false;
@ -27,10 +24,7 @@ var JitsiPopover = (function () {
element.data("jitsi_popover", this); element.data("jitsi_popover", this);
this.element = element; this.element = element;
this.template = ' <div class="jitsipopover ' + this.options.skin + this.template = this.getTemplate();
'"><div class="arrow"></div>' +
'<div class="jitsipopover__content"></div>' +
'<div class="jitsipopover__menu-padding"></div></div>';
var self = this; var self = this;
this.element.on("mouseenter", function () { this.element.on("mouseenter", function () {
self.elementIsHovered = true; self.elementIsHovered = true;
@ -43,6 +37,22 @@ var JitsiPopover = (function () {
}); });
} }
/**
* Returns template for popover
*/
JitsiPopover.prototype.getTemplate = function () {
let arrow = '';
if (this.options.hasArrow) {
arrow = '<div class="arrow"></div>';
}
return (
`<div class="jitsipopover ${this.options.skin}">
${arrow}
<div class="jitsipopover__content"></div>
<div class="jitsipopover__menu-padding"></div></div>`
);
};
/** /**
* Shows the popover * Shows the popover
*/ */

View File

@ -22,7 +22,7 @@ function RemoteVideo(user, VideoLayout, emitter) {
this.emitter = emitter; this.emitter = emitter;
this.videoSpanId = `participant_${this.id}`; this.videoSpanId = `participant_${this.id}`;
SmallVideo.call(this, VideoLayout); SmallVideo.call(this, VideoLayout);
this.hasRemoteVideoMenu = false; this.hasRemoteVideoMenu = true;
this.addRemoteVideoContainer(); this.addRemoteVideoContainer();
this.connectionIndicator = new ConnectionIndicator(this, this.id); this.connectionIndicator = new ConnectionIndicator(this, this.id);
this.setDisplayName(); this.setDisplayName();
@ -75,14 +75,17 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
* to display in the popup * to display in the popup
*/ */
RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) { RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) {
this.popover = new JitsiPopover( let options = {
$("#" + this.videoSpanId + " .remotevideomenu"), content: popupMenuElement.outerHTML,
{ content: popupMenuElement.outerHTML, skin: "black",
skin: "black"}); hasArrow: false
};
let element = $("#" + this.videoSpanId + " .remotevideomenu");
this.popover = new JitsiPopover(element, options);
// override popover show method to make sure we will update the content // override popover show method to make sure we will update the content
// before showing the popover // before showing the popover
var origShowFunc = this.popover.show; let origShowFunc = this.popover.show;
this.popover.show = function () { this.popover.show = function () {
// update content by forcing it, to finish even if popover // update content by forcing it, to finish even if popover
// is not visible // is not visible