refactor ToolbarToggler

This commit is contained in:
isymchych 2015-12-10 19:04:39 +02:00
parent e23dd62d86
commit 437a8a6ef0
3 changed files with 41 additions and 39 deletions

View File

@ -539,7 +539,7 @@ UI.showToolbar = function () {
//Used by torture //Used by torture
UI.dockToolbar = function (isDock) { UI.dockToolbar = function (isDock) {
return ToolbarToggler.dockToolbar(isDock); ToolbarToggler.dockToolbar(isDock);
}; };
UI.setUserAvatar = function (id, email) { UI.setUserAvatar = function (id, email) {

View File

@ -1,4 +1,3 @@
var ToolbarToggler = require("../toolbars/ToolbarToggler");
var UIUtil = require("../util/UIUtil"); var UIUtil = require("../util/UIUtil");
var VideoLayout = require("../videolayout/VideoLayout"); var VideoLayout = require("../videolayout/VideoLayout");
var messageHandler = require("../util/MessageHandler"); var messageHandler = require("../util/MessageHandler");

View File

@ -1,8 +1,9 @@
/* global APP, config, $, interfaceConfig */ /* global APP, config, $, interfaceConfig */
var toolbarTimeoutObject, import UIUtil from '../util/UIUtil';
toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT,
UIUtil = require("../util/UIUtil"); let toolbarTimeoutObject;
let toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
function showDesktopSharingButton() { function showDesktopSharingButton() {
if (APP.desktopsharing.isDesktopSharingEnabled() && if (APP.desktopsharing.isDesktopSharingEnabled() &&
@ -13,19 +14,24 @@ function showDesktopSharingButton() {
} }
} }
function isToolbarVisible () {
return $('#header').is(':visible');
}
/** /**
* Hides the toolbar. * Hides the toolbar.
*/ */
function hideToolbar() { function hideToolbar() {
if(config.alwaysVisibleToolbar) if (config.alwaysVisibleToolbar) {
return; return;
}
var header = $("#header"), let header = $("#header");
bottomToolbar = $("#bottomToolbar"); let bottomToolbar = $("#bottomToolbar");
var isToolbarHover = false; let isToolbarHover = false;
header.find('*').each(function () { header.find('*').each(function () {
var id = $(this).attr('id'); let id = $(this).attr('id');
if ($("#" + id + ":hover").length > 0) { if ($(`#${id}:hover`).length > 0) {
isToolbarHover = true; isToolbarHover = true;
} }
}); });
@ -36,34 +42,36 @@ function hideToolbar() {
clearTimeout(toolbarTimeoutObject); clearTimeout(toolbarTimeoutObject);
toolbarTimeoutObject = null; toolbarTimeoutObject = null;
if (!isToolbarHover) { if (isToolbarHover) {
toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
} else {
header.hide("slide", { direction: "up", duration: 300}); header.hide("slide", { direction: "up", duration: 300});
$('#subject').animate({top: "-=40"}, 300); $('#subject').animate({top: "-=40"}, 300);
if ($("#remoteVideos").hasClass("hidden")) { if ($("#remoteVideos").hasClass("hidden")) {
bottomToolbar.hide( bottomToolbar.hide(
"slide", {direction: "right", duration: 300}); "slide", {direction: "right", duration: 300}
);
} }
} }
else {
toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
}
} }
var ToolbarToggler = { const ToolbarToggler = {
/** /**
* Shows the main toolbar. * Shows the main toolbar.
*/ */
showToolbar: function () { showToolbar () {
if (interfaceConfig.filmStripOnly) if (interfaceConfig.filmStripOnly) {
return; return;
var header = $("#header"), }
bottomToolbar = $("#bottomToolbar"); let header = $("#header");
let bottomToolbar = $("#bottomToolbar");
if (!header.is(':visible') || !bottomToolbar.is(":visible")) { if (!header.is(':visible') || !bottomToolbar.is(":visible")) {
header.show("slide", { direction: "up", duration: 300}); header.show("slide", { direction: "up", duration: 300});
$('#subject').animate({top: "+=40"}, 300); $('#subject').animate({top: "+=40"}, 300);
if (!bottomToolbar.is(":visible")) { if (!bottomToolbar.is(":visible")) {
bottomToolbar.show( bottomToolbar.show(
"slide", {direction: "right", duration: 300}); "slide", {direction: "right", duration: 300}
);
} }
if (toolbarTimeoutObject) { if (toolbarTimeoutObject) {
@ -83,33 +91,28 @@ var ToolbarToggler = {
* *
* @param isDock indicates what operation to perform * @param isDock indicates what operation to perform
*/ */
dockToolbar: function (isDock) { dockToolbar (isDock) {
if (interfaceConfig.filmStripOnly) if (interfaceConfig.filmStripOnly) {
return; return;
}
if (isDock) { if (isDock) {
// First make sure the toolbar is shown. // First make sure the toolbar is shown.
if (!$('#header').is(':visible')) { if (!isToolbarVisible()) {
this.showToolbar(); this.showToolbar();
} }
// Then clear the time out, to dock the toolbar. // Then clear the time out, to dock the toolbar.
if (toolbarTimeoutObject) {
clearTimeout(toolbarTimeoutObject); clearTimeout(toolbarTimeoutObject);
toolbarTimeoutObject = null; toolbarTimeoutObject = null;
} } else {
} if (isToolbarVisible()) {
else { toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
if (!$('#header').is(':visible')) { } else {
this.showToolbar(); this.showToolbar();
} }
else {
toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
} }
} }
},
showDesktopSharingButton: showDesktopSharingButton
}; };
module.exports = ToolbarToggler; module.exports = ToolbarToggler;