ref(Overlay): introduce base class

modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js

@@ -1,26 +1,40 @@
-/* global $, APP */
+/* global */
 
-let $overlay;
+import Overlay from '../overlay/Overlay';
 
 /**
- * Internal function that constructs overlay with guidance how to proceed with
+ * An overlay with guidance how to proceed with gUM prompt.
- * gUM prompt.
+ */
+class GUMOverlayImpl extends Overlay {
+
+    /**
+     * Constructs overlay with guidance how to proceed with gUM prompt.
      * @param {string} browser - name of browser for which to construct the
      *     guidance overlay.
+     * @override
      */
-function buildOverlayHtml(browser) {
+    constructor(browser) {
-    $overlay = $(`
+        super();
-        <div class='overlay_container'>
+        this.browser = browser;
-            <div class='overlay_content'>
+    }
+
+    /**
+     * @inheritDoc
+     */
+    _buildOverlayContent() {
+        return `
             <span class="overlay_icon icon-microphone"></span>
             <span class="overlay_icon icon-camera"></span>
-                <span data-i18n='[html]userMedia.${browser}GrantPermissions' 
+            <span data-i18n='[html]userMedia.${this.browser}GrantPermissions' 
-                      class='overlay_text_small'></span>
+                  class='overlay_text_small'></span>`;
-            </div>
-        </div>`);
-
-    APP.translation.translateElement($overlay);
     }
+}
+
+/**
+ * Stores GUM overlay instance.
+ * @type {GUMOverlayImpl}
+ */
+let overlay;
 
 export default {
     /**
@@ -29,7 +43,7 @@ export default {
      * or <tt>false</tt> otherwise.
      */
     isVisible () {
-        return $overlay && $overlay.parents('body').length > 0;
+        return overlay && overlay.isVisible();
     },
     /**
      * Shows browser-specific overlay with guidance how to proceed with
@@ -38,9 +52,10 @@ export default {
      *      guidance overlay.
      */
     show(browser) {
-        !$overlay && buildOverlayHtml(browser);
+        if (!overlay) {
-
+            overlay = new GUMOverlayImpl(browser);
-        !this.isVisible() && $overlay.appendTo('body');
+        }
+        overlay.show();
     },
 
     /**
@@ -48,6 +63,6 @@ export default {
      * gUM prompt.
      */
     hide() {
-        $overlay && $overlay.detach();
+        overlay && overlay.hide();
     }
 };

modules/UI/overlay/Overlay.js

@@ -0,0 +1,82 @@
+/* global $, APP */
+
+/**
+ * Base class for overlay components - the components which are displayed on
+ * top of the application with semi-transparent background covering the whole
+ * screen.
+ */
+export default class Overlay{
+    /**
+     * Creates new <tt>Overlay</tt> instance.
+     */
+    constructor() {
+        /**
+         *
+         * @type {jQuery}
+         */
+        this.$overlay = null;
+    }
+    /**
+     * Template method which should be used by subclasses to provide the overlay
+     * content. The contents provided by this method are later subject to
+     * the translation using {@link APP.translation.translateElement}.
+     * @return {string} HTML representation of the overlay dialog contents.
+     * @private
+     */
+    _buildOverlayContent() {
+        return '';
+    }
+    /**
+     * Constructs the HTML body of the overlay dialog.
+     */
+    buildOverlayHtml() {
+
+        let overlayContent = this._buildOverlayContent();
+
+        this.$overlay = $(`
+            <div class='overlay_container'>
+                <div class='overlay_content'>
+                    ${overlayContent}
+                </div>
+            </div>`);
+
+        APP.translation.translateElement(this.$overlay);
+    }
+    /**
+     * Checks whether the page reload overlay has been displayed.
+     * @return {boolean} <tt>true</tt> if the page reload overlay is currently
+     * visible or <tt>false</tt> otherwise.
+     */
+    isVisible() {
+        return this.$overlay && this.$overlay.parents('body').length > 0;
+    }
+    /**
+     * Template method called just after the overlay is displayed for the first
+     * time.
+     * @private
+     */
+    _onShow() {
+        // To be overridden by subclasses.
+    }
+    /**
+     * Shows the overlay dialog adn attaches the underlying HTML representation
+     * to the DOM.
+     */
+    show() {
+
+        !this.$overlay && this.buildOverlayHtml();
+
+        if (!this.isVisible()) {
+            this.$overlay.appendTo('body');
+            this._onShow();
+        }
+    }
+
+    /**
+     * Hides the overlay dialog and detaches it's HTML representation from
+     * the DOM.
+     */
+    hide() {
+        this.$overlay && this.$overlay.detach();
+    }
+}

modules/UI/reload_overlay/PageReloadOverlay.js

@@ -1,27 +1,37 @@
 /* global $, APP, AJS */
 
-let $overlay;
+import Overlay from '../overlay/Overlay';
 
+/**
+ * An overlay dialog which is shown before the conference is reloaded. Shows
+ * a warning message and counts down towards the reload.
+ */
+class PageReloadOverlayImpl extends Overlay{
+    /**
+     * Creates new <tt>PageReloadOverlayImpl</tt>
+     * @param {number} timeoutSeconds how long the overlay dialog will be
+     * displayed, before the conference will be reloaded.
+     */
+    constructor(timeoutSeconds) {
+        super();
         /**
          * Conference reload counter in seconds.
          * @type {number}
          */
-let timeLeft;
+        this.timeLeft = timeoutSeconds;
-
         /**
          * Conference reload timeout in seconds.
          * @type {number}
          */
-let timeout;
+        this.timeout = timeoutSeconds;
-
+    }
     /**
- * Internal function that constructs overlay with the warning message and count
+     * Constructs overlay body with the warning message and count down towards
- * down towards the conference reload.
+     * the conference reload.
+     * @override
      */
-function buildReloadOverlayHtml() {
+    _buildOverlayContent() {
-    $overlay = $(`
+        return `
-        <div class='overlay_container'>
-            <div class='overlay_content'>
             <span data-i18n='dialog.serviceUnavailable' 
                   class='overlay_text_small'></span>
             <span data-i18n='dialog.conferenceReloadMsg' 
@@ -32,57 +42,59 @@ function buildReloadOverlayHtml() {
                 </div>
                 <span id='reloadSecRemaining' class='overlay_text_small'>
                 </span>
-                </div>
+            </div>`;
-            </div>
-        </div>`);
-
-    APP.translation.translateElement($overlay);
     }
 
     /**
      * Updates the progress indicator position and the label with the time left.
      */
-function updateDisplay() {
+    updateDisplay() {
 
         const timeLeftTxt
             = APP.translation.translateString(
                 "dialog.conferenceReloadTimeLeft",
-            { seconds: timeLeft });
+                { seconds: this.timeLeft });
         $("#reloadSecRemaining").text(timeLeftTxt);
 
-    const ratio = (timeout-timeLeft)/timeout;
+        const ratio = (this.timeout - this.timeLeft) / this.timeout;
         AJS.progressBars.update("#reloadProgressBar", ratio);
     }
 
     /**
      * Starts the reload countdown with the animation.
- * @param {number} timeoutSeconds how many seconds before the conference
+     * @override
- * reload will happen.
      */
-function start(timeoutSeconds) {
+    _onShow() {
-
-    timeLeft = timeout = timeoutSeconds;
 
         // Initialize displays
-    updateDisplay();
+        this.updateDisplay();
 
         var intervalId = window.setInterval(function() {
 
-        if (timeLeft >= 1) {
+            if (this.timeLeft >= 1) {
-            timeLeft -= 1;
+                this.timeLeft -= 1;
             }
 
-        updateDisplay();
+            this.updateDisplay();
 
-        if (timeLeft === 0) {
+            if (this.timeLeft === 0) {
                 window.clearInterval(intervalId);
                 APP.ConferenceUrl.reload();
             }
-    }, 1000);
+        }.bind(this), 1000);
 
         console.info(
-        "The conference will be reloaded after " + timeLeft + " seconds.");
+            "The conference will be reloaded after "
+                + this.timeLeft + " seconds.");
     }
+}
+
+/**
+ * Holds the page reload overlay instance.
+ *
+ * {@type PageReloadOverlayImpl}
+ */
+let overlay;
 
 export default {
     /**
@@ -91,7 +103,7 @@ export default {
      * visible or <tt>false</tt> otherwise.
      */
     isVisible() {
-        return $overlay && $overlay.parents('body').length > 0;
+        return overlay && overlay.isVisible();
     },
     /**
      * Shows the page reload overlay which will do the conference reload after
@@ -102,11 +114,9 @@ export default {
      */
     show(timeoutSeconds) {
 
-        !$overlay && buildReloadOverlayHtml();
+        if (!overlay) {
-
+            overlay = new PageReloadOverlayImpl(timeoutSeconds);
-        if (!this.isVisible()) {
-            $overlay.appendTo('body');
-            start(timeoutSeconds);
         }
+        overlay.show();
     }
 };