Add new option to jitsi-popover
This commit is contained in:
parent
0e8297ea8d
commit
62af73ea09
|
@ -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
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue