|
|
|
|
@ -1,102 +1,101 @@ |
|
|
|
|
/* global require, $ */ |
|
|
|
|
var Chat = require("./chat/Chat"); |
|
|
|
|
var ContactList = require("./contactlist/ContactList"); |
|
|
|
|
var Settings = require("./../../settings/Settings"); |
|
|
|
|
var SettingsMenu = require("./settings/SettingsMenu"); |
|
|
|
|
var VideoLayout = require("../videolayout/VideoLayout"); |
|
|
|
|
var ToolbarToggler = require("../toolbars/ToolbarToggler"); |
|
|
|
|
var UIUtil = require("../util/UIUtil"); |
|
|
|
|
var LargeVideo = require("../videolayout/LargeVideo"); |
|
|
|
|
import Chat from "./chat/Chat"; |
|
|
|
|
import ContactList from "./contactlist/ContactList"; |
|
|
|
|
import Settings from "./../../settings/Settings"; |
|
|
|
|
import SettingsMenu from "./settings/SettingsMenu"; |
|
|
|
|
import VideoLayout from "../videolayout/VideoLayout"; |
|
|
|
|
import ToolbarToggler from "../toolbars/ToolbarToggler"; |
|
|
|
|
import UIUtil from "../util/UIUtil"; |
|
|
|
|
import LargeVideo from "../videolayout/LargeVideo"; |
|
|
|
|
|
|
|
|
|
const buttons = { |
|
|
|
|
'#chatspace': '#chatBottomButton', |
|
|
|
|
'#contactlist': '#contactListButton', |
|
|
|
|
'#settingsmenu': '#toolbar_button_settings' |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
var currentlyOpen = null; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Toggler for the chat, contact list, settings menu, etc.. |
|
|
|
|
* Toggles the windows in the side panel |
|
|
|
|
* @param object the window that should be shown |
|
|
|
|
* @param selector the selector for the element containing the panel |
|
|
|
|
* @param onOpenComplete function to be called when the panel is opened |
|
|
|
|
* @param onOpen function to be called if the window is going to be opened |
|
|
|
|
* @param onClose function to be called if the window is going to be closed |
|
|
|
|
*/ |
|
|
|
|
var PanelToggler = (function(my) { |
|
|
|
|
function toggle (object, selector, onOpenComplete, onOpen, onClose) { |
|
|
|
|
UIUtil.buttonClick(buttons[selector], "active"); |
|
|
|
|
|
|
|
|
|
if (object.isVisible()) { |
|
|
|
|
$("#toast-container").animate({ |
|
|
|
|
right: 5 |
|
|
|
|
}, { |
|
|
|
|
queue: false, |
|
|
|
|
duration: 500 |
|
|
|
|
}); |
|
|
|
|
$(selector).hide("slide", { |
|
|
|
|
direction: "right", |
|
|
|
|
queue: false, |
|
|
|
|
duration: 500 |
|
|
|
|
}); |
|
|
|
|
if(typeof onClose === "function") { |
|
|
|
|
onClose(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var currentlyOpen = null; |
|
|
|
|
var buttons = { |
|
|
|
|
'#chatspace': '#chatBottomButton', |
|
|
|
|
'#contactlist': '#contactListButton', |
|
|
|
|
'#settingsmenu': '#toolbar_button_settings' |
|
|
|
|
}; |
|
|
|
|
currentlyOpen = null; |
|
|
|
|
} else { |
|
|
|
|
// Undock the toolbar when the chat is shown and if we're in a
|
|
|
|
|
// video mode.
|
|
|
|
|
if (LargeVideo.isLargeVideoVisible()) { |
|
|
|
|
ToolbarToggler.dockToolbar(false); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Toggles the windows in the side panel |
|
|
|
|
* @param object the window that should be shown |
|
|
|
|
* @param selector the selector for the element containing the panel |
|
|
|
|
* @param onOpenComplete function to be called when the panel is opened |
|
|
|
|
* @param onOpen function to be called if the window is going to be opened |
|
|
|
|
* @param onClose function to be called if the window is going to be closed |
|
|
|
|
*/ |
|
|
|
|
var toggle = function(object, selector, onOpenComplete, onOpen, onClose) { |
|
|
|
|
UIUtil.buttonClick(buttons[selector], "active"); |
|
|
|
|
|
|
|
|
|
if (object.isVisible()) { |
|
|
|
|
$("#toast-container").animate({ |
|
|
|
|
right: '5px' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
queue: false, |
|
|
|
|
duration: 500 |
|
|
|
|
}); |
|
|
|
|
$(selector).hide("slide", { |
|
|
|
|
direction: "right", |
|
|
|
|
queue: false, |
|
|
|
|
duration: 500 |
|
|
|
|
}); |
|
|
|
|
if(typeof onClose === "function") { |
|
|
|
|
onClose(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
currentlyOpen = null; |
|
|
|
|
if (currentlyOpen) { |
|
|
|
|
var current = $(currentlyOpen); |
|
|
|
|
UIUtil.buttonClick(buttons[currentlyOpen], "active"); |
|
|
|
|
current.css('z-index', 4); |
|
|
|
|
setTimeout(function () { |
|
|
|
|
current.css('display', 'none'); |
|
|
|
|
current.css('z-index', 5); |
|
|
|
|
}, 500); |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
// Undock the toolbar when the chat is shown and if we're in a
|
|
|
|
|
// video mode.
|
|
|
|
|
if (LargeVideo.isLargeVideoVisible()) { |
|
|
|
|
ToolbarToggler.dockToolbar(false); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(currentlyOpen) { |
|
|
|
|
var current = $(currentlyOpen); |
|
|
|
|
UIUtil.buttonClick(buttons[currentlyOpen], "active"); |
|
|
|
|
current.css('z-index', 4); |
|
|
|
|
setTimeout(function () { |
|
|
|
|
current.css('display', 'none'); |
|
|
|
|
current.css('z-index', 5); |
|
|
|
|
}, 500); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$("#toast-container").animate({ |
|
|
|
|
right: (PanelToggler.getPanelSize()[0] + 5) + 'px' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
queue: false, |
|
|
|
|
duration: 500 |
|
|
|
|
}); |
|
|
|
|
$(selector).show("slide", { |
|
|
|
|
direction: "right", |
|
|
|
|
queue: false, |
|
|
|
|
duration: 500, |
|
|
|
|
complete: onOpenComplete |
|
|
|
|
}); |
|
|
|
|
if(typeof onOpen === "function") { |
|
|
|
|
onOpen(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
currentlyOpen = selector; |
|
|
|
|
|
|
|
|
|
$("#toast-container").animate({ |
|
|
|
|
right: (PanelToggler.getPanelSize()[0] + 5) |
|
|
|
|
}, { |
|
|
|
|
queue: false, |
|
|
|
|
duration: 500 |
|
|
|
|
}); |
|
|
|
|
$(selector).show("slide", { |
|
|
|
|
direction: "right", |
|
|
|
|
queue: false, |
|
|
|
|
duration: 500, |
|
|
|
|
complete: onOpenComplete |
|
|
|
|
}); |
|
|
|
|
if(typeof onOpen === "function") { |
|
|
|
|
onOpen(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
currentlyOpen = selector; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Toggler for the chat, contact list, settings menu, etc.. |
|
|
|
|
*/ |
|
|
|
|
var PanelToggler = { |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Opens / closes the chat area. |
|
|
|
|
*/ |
|
|
|
|
my.toggleChat = function() { |
|
|
|
|
var chatCompleteFunction = Chat.isVisible() ? |
|
|
|
|
function() {} : function () { |
|
|
|
|
Chat.scrollChatToBottom(); |
|
|
|
|
$('#chatspace').trigger('shown'); |
|
|
|
|
}; |
|
|
|
|
toggleChat () { |
|
|
|
|
var chatCompleteFunction = Chat.isVisible() |
|
|
|
|
? function () {} |
|
|
|
|
: function () { |
|
|
|
|
Chat.scrollChatToBottom(); |
|
|
|
|
$('#chatspace').trigger('shown'); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
VideoLayout.resizeVideoArea(!Chat.isVisible(), chatCompleteFunction); |
|
|
|
|
|
|
|
|
|
@ -112,16 +111,24 @@ var PanelToggler = (function(my) { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
null, |
|
|
|
|
Chat.resizeChat, |
|
|
|
|
() => this.resizeChat(), |
|
|
|
|
null); |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
resizeChat () { |
|
|
|
|
let [width, height] = this.getPanelSize(); |
|
|
|
|
Chat.resizeChat(width, height); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Opens / closes the contact list area. |
|
|
|
|
*/ |
|
|
|
|
my.toggleContactList = function () { |
|
|
|
|
var completeFunction = ContactList.isVisible() ? |
|
|
|
|
function() {} : function () { $('#contactlist').trigger('shown');}; |
|
|
|
|
toggleContactList () { |
|
|
|
|
var completeFunction = ContactList.isVisible() |
|
|
|
|
? function () {} |
|
|
|
|
: function () { |
|
|
|
|
$('#contactlist').trigger('shown'); |
|
|
|
|
}; |
|
|
|
|
VideoLayout.resizeVideoArea(!ContactList.isVisible(), completeFunction); |
|
|
|
|
|
|
|
|
|
toggle(ContactList, |
|
|
|
|
@ -131,12 +138,12 @@ var PanelToggler = (function(my) { |
|
|
|
|
ContactList.setVisualNotification(false); |
|
|
|
|
}, |
|
|
|
|
null); |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Opens / closes the settings menu |
|
|
|
|
*/ |
|
|
|
|
my.toggleSettingsMenu = function() { |
|
|
|
|
toggleSettingsMenu () { |
|
|
|
|
VideoLayout.resizeVideoArea(!SettingsMenu.isVisible(), function (){}); |
|
|
|
|
toggle(SettingsMenu, |
|
|
|
|
'#settingsmenu', |
|
|
|
|
@ -147,12 +154,12 @@ var PanelToggler = (function(my) { |
|
|
|
|
$('#setEmail').get(0).value = settings.email; |
|
|
|
|
}, |
|
|
|
|
null); |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Returns the size of the side panel. |
|
|
|
|
*/ |
|
|
|
|
my.getPanelSize = function () { |
|
|
|
|
getPanelSize () { |
|
|
|
|
var availableHeight = window.innerHeight; |
|
|
|
|
var availableWidth = window.innerWidth; |
|
|
|
|
|
|
|
|
|
@ -162,16 +169,13 @@ var PanelToggler = (function(my) { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return [panelWidth, availableHeight]; |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
my.isVisible = function() { |
|
|
|
|
isVisible () { |
|
|
|
|
return (Chat.isVisible() || |
|
|
|
|
ContactList.isVisible() || |
|
|
|
|
SettingsMenu.isVisible()); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return my; |
|
|
|
|
|
|
|
|
|
}(PanelToggler || {})); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
module.exports = PanelToggler; |
|
|
|
|
export default PanelToggler; |
|
|
|
|
|
isymchych
10 years ago