haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(JitsiPopover): Add onBeforePosition option

This commit is contained in:
hristoterezov 2016-10-25 17:57:29 -05:00
parent b2a1c9881e
commit ea0f0da8a4
3 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
modules/UI/util/JitsiPopover.js
View File

@ -1,22 +1,26 @@
/* global $, APP */ /* global $ */
var JitsiPopover = (function () { var JitsiPopover = (function () {
/**
* The default options
*/
const defaultOptions = {
skin: 'white',
content: '',
hasArrow: true,
onBeforePosition: undefined
};
/** /**
* Constructs new JitsiPopover and attaches it to the element * Constructs new JitsiPopover and attaches it to the element
* @param element jquery selector * @param element jquery selector
* @param options the options for the popover. * @param options the options for the popover.
* - {Function} onBeforePosition - function executed just before
* positioning the popover. Useful for translation.
* @constructor * @constructor
*/ */
function JitsiPopover(element, options) function JitsiPopover(element, options)
{ {
let { skin, content, hasArrow } = options; this.options = Object.assign({}, defaultOptions, options);
this.options = {};
this.options.skin = skin || 'white';
this.options.content = content || '';
this.options.hasArrow = true;
if (typeof(hasArrow) !== 'undefined') {
this.options.hasArrow = false;
}
this.elementIsHovered = false; this.elementIsHovered = false;
this.popoverIsHovered = false; this.popoverIsHovered = false;
@ -88,7 +92,9 @@ var JitsiPopover = (function () {
$("body").append(this.template); $("body").append(this.template);
let popoverElem = $(".jitsipopover > .jitsipopover__content"); let popoverElem = $(".jitsipopover > .jitsipopover__content");
popoverElem.html(this.options.content); popoverElem.html(this.options.content);
APP.translation.translateElement(popoverElem); if(typeof this.options.onBeforePosition === "function") {
this.options.onBeforePosition($(".jitsipopover"));
}
var self = this; var self = this;
$(".jitsipopover").on("mouseenter", function () { $(".jitsipopover").on("mouseenter", function () {
self.popoverIsHovered = true; self.popoverIsHovered = true;
@ -138,4 +144,4 @@ var JitsiPopover = (function () {
return JitsiPopover; return JitsiPopover;
})(); })();
module.exports = JitsiPopover; module.exports = JitsiPopover;

10
modules/UI/videolayout/ConnectionIndicator.js
View File

@ -1,4 +1,4 @@
/* global $, config */ /* global $, APP, config */
/* jshint -W101 */ /* jshint -W101 */
import JitsiPopover from "../util/JitsiPopover"; import JitsiPopover from "../util/JitsiPopover";
import VideoLayout from "./VideoLayout"; import VideoLayout from "./VideoLayout";
@ -265,10 +265,12 @@ ConnectionIndicator.prototype.create = function () {
this.videoContainer.container.appendChild( this.videoContainer.container.appendChild(
this.connectionIndicatorContainer); this.connectionIndicatorContainer);
this.popover = new JitsiPopover( this.popover = new JitsiPopover(
$("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), {
{content: "<div class=\"connection-info\" " + content: "<div class=\"connection-info\" " +
"data-i18n='connectionindicator.na'></div>", "data-i18n='connectionindicator.na'></div>",
skin: "black"}); skin: "black",
onBeforePosition: el => APP.translation.translateElement(el)
});
// 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

3
modules/UI/videolayout/RemoteVideo.js
View File

@ -78,7 +78,8 @@ RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) {
let options = { let options = {
content: popupMenuElement.outerHTML, content: popupMenuElement.outerHTML,
skin: "black", skin: "black",
hasArrow: false hasArrow: false,
onBeforePosition: el => APP.translation.translateElement(el)
}; };
let element = $("#" + this.videoSpanId + " .remotevideomenu"); let element = $("#" + this.videoSpanId + " .remotevideomenu");
this.popover = new JitsiPopover(element, options); this.popover = new JitsiPopover(element, options);