feat(JitsiPopover): Add onBeforePosition option

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;
+module.exports = JitsiPopover;

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: "<div class=\"connection-info\" " +
+        $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), {
+            content: "<div class=\"connection-info\" " +
                         "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
     // before showing the popover

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);