+
@@ -169,7 +230,7 @@
-
+
HD
@@ -191,67 +252,6 @@
diff --git a/modules/UI/side_pannels/SideContainerToggler.js b/modules/UI/side_pannels/SideContainerToggler.js
index 53d5b81e0..d63e8c837 100644
--- a/modules/UI/side_pannels/SideContainerToggler.js
+++ b/modules/UI/side_pannels/SideContainerToggler.js
@@ -57,7 +57,7 @@ const SideContainerToggler = {
},
/**
- * Returns {true} if the extended toolbar panel is currently visible,
+ * Returns {true} if the side toolbar panel is currently visible,
* otherwise returns {false}.
*/
isVisible() {
@@ -65,7 +65,15 @@ const SideContainerToggler = {
},
/**
- * Hides the extended toolbar panel with a slide out animation.
+ * Returns {true} if the side toolbar panel is currently hovered and
+ * {false} otherwise.
+ */
+ isHovered() {
+ return $("#sideToolbarContainer:hover").length > 0;
+ },
+
+ /**
+ * Hides the side toolbar panel with a slide out animation.
*/
hide() {
$("#sideToolbarContainer")
@@ -73,7 +81,7 @@ const SideContainerToggler = {
},
/**
- * Shows the extended toolbar panel with a slide in animation.
+ * Shows the side toolbar panel with a slide in animation.
*/
show() {
if (!this.isVisible())
@@ -81,6 +89,12 @@ const SideContainerToggler = {
.removeClass("slideOutExt").addClass("slideInExt");
},
+ /**
+ * Hides the inner container given by the selector.
+ *
+ * @param {Object} containerSelector the jquery selector for the
+ * element to hide
+ */
hideInnerContainer(containerSelector) {
containerSelector.removeClass("show").addClass("hide");
@@ -88,6 +102,12 @@ const SideContainerToggler = {
containerSelector.attr('id'), false);
},
+ /**
+ * Shows the inner container given by the selector.
+ *
+ * @param {Object} containerSelector the jquery selector for the
+ * element to show
+ */
showInnerContainer(containerSelector) {
containerSelector.removeClass("hide").addClass("show");
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index bed11792a..a204bac97 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -298,8 +298,7 @@ const Toolbar = {
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
function(containerId, isVisible) {
- console.log("TOGGLED", containerId, isVisible);
- Toolbar.handleSideToolbarContainerToggled( containerId,
+ Toolbar._handleSideToolbarContainerToggled( containerId,
isVisible);
});
},
@@ -544,7 +543,7 @@ const Toolbar = {
return true;
if ($("#bottomToolbar:hover").length > 0
|| $("#extendedToolbar:hover").length > 0
- || SideContainerToggler.isVisible()) {
+ || SideContainerToggler.isHovered()) {
return true;
}
return false;
@@ -564,8 +563,16 @@ const Toolbar = {
*/
hide() {
this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY");
- this.extendedToolbarSelector.toggleClass("slideInX")
- .toggleClass("slideOutX");
+
+ let slideInAnimation = (SideContainerToggler.isVisible)
+ ? "slideInExtX"
+ : "slideInX";
+ let slideOutAnimation = (SideContainerToggler.isVisible)
+ ? "slideOutExtX"
+ : "slideOutX";
+
+ this.extendedToolbarSelector.toggleClass(slideInAnimation)
+ .toggleClass(slideOutAnimation);
},
/**
@@ -576,17 +583,30 @@ const Toolbar = {
if (this.toolbarSelector.hasClass("slideOutY"))
this.toolbarSelector.toggleClass("slideOutY");
- if (this.extendedToolbarSelector.hasClass("slideOutX"))
- this.extendedToolbarSelector.toggleClass("slideOutX");
+ let slideInAnimation = (SideContainerToggler.isVisible)
+ ? "slideInExtX"
+ : "slideInX";
+ let slideOutAnimation = (SideContainerToggler.isVisible)
+ ? "slideOutExtX"
+ : "slideOutX";
+
+ if (this.extendedToolbarSelector.hasClass(slideOutAnimation))
+ this.extendedToolbarSelector.toggleClass(slideOutAnimation);
this.toolbarSelector.toggleClass("slideInY");
- this.extendedToolbarSelector.toggleClass("slideInX");
+ this.extendedToolbarSelector.toggleClass(slideInAnimation);
+ },
+
+ registerClickListeners(listener) {
+ $('#mainToolbarContainer').click(listener);
+
+ $("#extendedToolbar").click(listener);
},
/**
- *
+ * Handles the side toolbar toggle.
*/
- handleSideToolbarContainerToggled(containerId, isVisible) {
+ _handleSideToolbarContainerToggled(containerId, isVisible) {
Object.keys(defaultToolbarButtons).forEach(
id => {
if (!UIUtil.isButtonEnabled(id))
diff --git a/modules/UI/toolbars/ToolbarToggler.js b/modules/UI/toolbars/ToolbarToggler.js
index b43198e75..765894b2d 100644
--- a/modules/UI/toolbars/ToolbarToggler.js
+++ b/modules/UI/toolbars/ToolbarToggler.js
@@ -2,6 +2,7 @@
import UIUtil from '../util/UIUtil';
import Toolbar from './Toolbar';
+import SideContainerToggler from "../side_pannels/SideContainerToggler";
import FilmStrip from '../videolayout/FilmStrip.js';
let toolbarTimeoutObject;
@@ -22,8 +23,11 @@ function showDesktopSharingButton() {
/**
* Hides the toolbar.
+ *
+ * @param force {true} to force the hiding of the toolbar without caring about
+ * the extended toolbar side panels.
*/
-function hideToolbar() {
+function hideToolbar(force) {
if (alwaysVisibleToolbar) {
return;
}
@@ -33,7 +37,7 @@ function hideToolbar() {
if (Toolbar.isHovered()) {
toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
- } else {
+ } else if (!SideContainerToggler.isVisible() || force) {
Toolbar.hide();
$('#subject').animate({top: "-=40"}, 300);
}
@@ -45,7 +49,26 @@ const ToolbarToggler = {
*/
init() {
alwaysVisibleToolbar = (config.alwaysVisibleToolbar === true);
+
+ this._registerWindowClickListeners();
},
+
+ /**
+ * Registers click listeners handling the show and hode of toolbars when
+ * user clicks outside of toolbar area.
+ */
+ _registerWindowClickListeners() {
+ $(window).click(function() {
+ (Toolbar.isEnabled() && Toolbar.isVisible())
+ ? hideToolbar(true)
+ : this.showToolbar();
+ }.bind(this));
+
+ Toolbar.registerClickListeners(function(event){
+ event.stopPropagation();
+ });
+ },
+
/**
* Sets the value of alwaysVisibleToolbar variable.
* @param value {boolean} the new value of alwaysVisibleToolbar variable
@@ -53,12 +76,14 @@ const ToolbarToggler = {
setAlwaysVisibleToolbar(value) {
alwaysVisibleToolbar = value;
},
+
/**
* Resets the value of alwaysVisibleToolbar variable to the default one.
*/
resetAlwaysVisibleToolbar() {
alwaysVisibleToolbar = (config.alwaysVisibleToolbar === true);
},
+
/**
* Shows the main toolbar.
*/