ref(Overlay): introduce base class
This commit is contained in:
paweldomas
parent
98de4c90b5
commit
3c0c823a37
|
|
@ -1,27 +1,41 @@
|
|||
/* global $, APP */
|
||||
/* global */
|
||||
|
||||
let $overlay;
|
||||
import Overlay from '../overlay/Overlay';
|
||||
|
||||
/**
|
||||
* Internal function that constructs overlay with guidance how to proceed with
|
||||
* gUM prompt.
|
||||
* @param {string} browser - name of browser for which to construct the
|
||||
* guidance overlay.
|
||||
* An overlay with guidance how to proceed with gUM prompt.
|
||||
*/
|
||||
function buildOverlayHtml(browser) {
|
||||
$overlay = $(`
|
||||
<div class='overlay_container'>
|
||||
<div class='overlay_content'>
|
||||
<span class="overlay_icon icon-microphone"></span>
|
||||
<span class="overlay_icon icon-camera"></span>
|
||||
<span data-i18n='[html]userMedia.${browser}GrantPermissions'
|
||||
class='overlay_text_small'></span>
|
||||
</div>
|
||||
</div>`);
|
||||
class GUMOverlayImpl extends Overlay {
|
||||
|
||||
APP.translation.translateElement($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
|
||||
*/
|
||||
constructor(browser) {
|
||||
super();
|
||||
this.browser = browser;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
_buildOverlayContent() {
|
||||
return `
|
||||
<span class="overlay_icon icon-microphone"></span>
|
||||
<span class="overlay_icon icon-camera"></span>
|
||||
<span data-i18n='[html]userMedia.${this.browser}GrantPermissions'
|
||||
class='overlay_text_small'></span>`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stores GUM overlay instance.
|
||||
* @type {GUMOverlayImpl}
|
||||
*/
|
||||
let overlay;
|
||||
|
||||
export default {
|
||||
/**
|
||||
* Checks whether the overlay is currently visible.
|
||||
|
|
@ -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);
|
||||
|
||||
!this.isVisible() && $overlay.appendTo('body');
|
||||
if (!overlay) {
|
||||
overlay = new GUMOverlayImpl(browser);
|
||||
}
|
||||
overlay.show();
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -48,6 +63,6 @@ export default {
|
|||
* gUM prompt.
|
||||
*/
|
||||
hide() {
|
||||
$overlay && $overlay.detach();
|
||||
overlay && overlay.hide();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,88 +1,100 @@
|
|||
/* global $, APP, AJS */
|
||||
|
||||
let $overlay;
|
||||
import Overlay from '../overlay/Overlay';
|
||||
|
||||
/**
|
||||
* Conference reload counter in seconds.
|
||||
* @type {number}
|
||||
* An overlay dialog which is shown before the conference is reloaded. Shows
|
||||
* a warning message and counts down towards the reload.
|
||||
*/
|
||||
let timeLeft;
|
||||
|
||||
/**
|
||||
* Conference reload timeout in seconds.
|
||||
* @type {number}
|
||||
*/
|
||||
let timeout;
|
||||
|
||||
/**
|
||||
* Internal function that constructs overlay with the warning message and count
|
||||
* down towards the conference reload.
|
||||
*/
|
||||
function buildReloadOverlayHtml() {
|
||||
$overlay = $(`
|
||||
<div class='overlay_container'>
|
||||
<div class='overlay_content'>
|
||||
<span data-i18n='dialog.serviceUnavailable'
|
||||
class='overlay_text_small'></span>
|
||||
<span data-i18n='dialog.conferenceReloadMsg'
|
||||
class='overlay_text_small'></span>
|
||||
<div>
|
||||
<div id='reloadProgressBar' class="aui-progress-indicator">
|
||||
<span class="aui-progress-indicator-value"></span>
|
||||
</div>
|
||||
<span id='reloadSecRemaining' class='overlay_text_small'>
|
||||
</span>
|
||||
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}
|
||||
*/
|
||||
this.timeLeft = timeoutSeconds;
|
||||
/**
|
||||
* Conference reload timeout in seconds.
|
||||
* @type {number}
|
||||
*/
|
||||
this.timeout = timeoutSeconds;
|
||||
}
|
||||
/**
|
||||
* Constructs overlay body with the warning message and count down towards
|
||||
* the conference reload.
|
||||
* @override
|
||||
*/
|
||||
_buildOverlayContent() {
|
||||
return `
|
||||
<span data-i18n='dialog.serviceUnavailable'
|
||||
class='overlay_text_small'></span>
|
||||
<span data-i18n='dialog.conferenceReloadMsg'
|
||||
class='overlay_text_small'></span>
|
||||
<div>
|
||||
<div id='reloadProgressBar' class="aui-progress-indicator">
|
||||
<span class="aui-progress-indicator-value"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
<span id='reloadSecRemaining' class='overlay_text_small'>
|
||||
</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
APP.translation.translateElement($overlay);
|
||||
/**
|
||||
* Updates the progress indicator position and the label with the time left.
|
||||
*/
|
||||
updateDisplay() {
|
||||
|
||||
const timeLeftTxt
|
||||
= APP.translation.translateString(
|
||||
"dialog.conferenceReloadTimeLeft",
|
||||
{ seconds: this.timeLeft });
|
||||
$("#reloadSecRemaining").text(timeLeftTxt);
|
||||
|
||||
const ratio = (this.timeout - this.timeLeft) / this.timeout;
|
||||
AJS.progressBars.update("#reloadProgressBar", ratio);
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts the reload countdown with the animation.
|
||||
* @override
|
||||
*/
|
||||
_onShow() {
|
||||
|
||||
// Initialize displays
|
||||
this.updateDisplay();
|
||||
|
||||
var intervalId = window.setInterval(function() {
|
||||
|
||||
if (this.timeLeft >= 1) {
|
||||
this.timeLeft -= 1;
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
if (this.timeLeft === 0) {
|
||||
window.clearInterval(intervalId);
|
||||
APP.ConferenceUrl.reload();
|
||||
}
|
||||
}.bind(this), 1000);
|
||||
|
||||
console.info(
|
||||
"The conference will be reloaded after "
|
||||
+ this.timeLeft + " seconds.");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the progress indicator position and the label with the time left.
|
||||
* Holds the page reload overlay instance.
|
||||
*
|
||||
* {@type PageReloadOverlayImpl}
|
||||
*/
|
||||
function updateDisplay() {
|
||||
|
||||
const timeLeftTxt
|
||||
= APP.translation.translateString(
|
||||
"dialog.conferenceReloadTimeLeft",
|
||||
{ seconds: timeLeft });
|
||||
$("#reloadSecRemaining").text(timeLeftTxt);
|
||||
|
||||
const ratio = (timeout-timeLeft)/timeout;
|
||||
AJS.progressBars.update("#reloadProgressBar", ratio);
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts the reload countdown with the animation.
|
||||
* @param {number} timeoutSeconds how many seconds before the conference
|
||||
* reload will happen.
|
||||
*/
|
||||
function start(timeoutSeconds) {
|
||||
|
||||
timeLeft = timeout = timeoutSeconds;
|
||||
|
||||
// Initialize displays
|
||||
updateDisplay();
|
||||
|
||||
var intervalId = window.setInterval(function() {
|
||||
|
||||
if (timeLeft >= 1) {
|
||||
timeLeft -= 1;
|
||||
}
|
||||
|
||||
updateDisplay();
|
||||
|
||||
if (timeLeft === 0) {
|
||||
window.clearInterval(intervalId);
|
||||
APP.ConferenceUrl.reload();
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
console.info(
|
||||
"The conference will be reloaded after " + timeLeft + " seconds.");
|
||||
}
|
||||
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 (!this.isVisible()) {
|
||||
$overlay.appendTo('body');
|
||||
start(timeoutSeconds);
|
||||
if (!overlay) {
|
||||
overlay = new PageReloadOverlayImpl(timeoutSeconds);
|
||||
}
|
||||
overlay.show();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue