diff --git a/modules/UI/util/JitsiPopover.js b/modules/UI/util/JitsiPopover.js index adaab6945..f49c4ea50 100644 --- a/modules/UI/util/JitsiPopover.js +++ b/modules/UI/util/JitsiPopover.js @@ -1,22 +1,26 @@ -/* global $, APP */ +/* global $ */ var JitsiPopover = (function () { + /** + * The default options + */ + const defaultOptions = { + skin: 'white', + content: '', + hasArrow: true, + onBeforePosition: undefined + }; + /** * Constructs new JitsiPopover and attaches it to the element * @param element jquery selector * @param options the options for the popover. + * - {Function} onBeforePosition - function executed just before + * positioning the popover. Useful for translation. * @constructor */ function JitsiPopover(element, options) { - let { skin, content, hasArrow } = 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.options = Object.assign({}, defaultOptions, options); this.elementIsHovered = false; this.popoverIsHovered = false; @@ -88,7 +92,9 @@ var JitsiPopover = (function () { $("body").append(this.template); let popoverElem = $(".jitsipopover > .jitsipopover__content"); popoverElem.html(this.options.content); - APP.translation.translateElement(popoverElem); + if(typeof this.options.onBeforePosition === "function") { + this.options.onBeforePosition($(".jitsipopover")); + } var self = this; $(".jitsipopover").on("mouseenter", function () { self.popoverIsHovered = true; @@ -138,4 +144,4 @@ var JitsiPopover = (function () { return JitsiPopover; })(); -module.exports = JitsiPopover; \ No newline at end of file +module.exports = JitsiPopover; diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js index 43850adb1..d8312cb1e 100644 --- a/modules/UI/videolayout/ConnectionIndicator.js +++ b/modules/UI/videolayout/ConnectionIndicator.js @@ -1,4 +1,4 @@ -/* global $, config */ +/* global $, APP, config */ /* jshint -W101 */ import JitsiPopover from "../util/JitsiPopover"; import VideoLayout from "./VideoLayout"; @@ -265,10 +265,12 @@ ConnectionIndicator.prototype.create = function () { this.videoContainer.container.appendChild( this.connectionIndicatorContainer); this.popover = new JitsiPopover( - $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), - {content: "
.connectionindicator"), { + content: "
", - skin: "black"}); + skin: "black", + onBeforePosition: el => APP.translation.translateElement(el) + }); // override popover show method to make sure we will update the content // before showing the popover diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index b251d0290..3a1163c68 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -78,7 +78,8 @@ RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) { let options = { content: popupMenuElement.outerHTML, skin: "black", - hasArrow: false + hasArrow: false, + onBeforePosition: el => APP.translation.translateElement(el) }; let element = $("#" + this.videoSpanId + " .remotevideomenu"); this.popover = new JitsiPopover(element, options);