mirror of https://github.com/jitsi/jitsi-meet
yanas
8 years ago
parent
ed29db290e
commit
8562d3d55d
@ -0,0 +1,70 @@ |
||||
/* global $ */ |
||||
|
||||
const ExtendedToolbarToggler = { |
||||
init() { |
||||
document.getElementById("extendedToolbarPanel") |
||||
.addEventListener("animationend", function(e) { |
||||
console.log("ANIM NAME", e.animationName); |
||||
if(e.animationName === "slideOutExt") |
||||
$("#extendedToolbarPanel").children().each(function() { |
||||
if ($(this).hasClass("show")) |
||||
$(this).removeClass("show").addClass("hide"); |
||||
}); |
||||
}, false); |
||||
}, |
||||
|
||||
toggle(elementId) { |
||||
let elementSelector = $(`#${elementId}`); |
||||
let isSelectorVisible = elementSelector.hasClass("show"); |
||||
|
||||
if (isSelectorVisible) { |
||||
this.hide(); |
||||
} |
||||
else { |
||||
if (this.isVisible()) |
||||
$("#extendedToolbarPanel").children().each(function() { |
||||
if ($(this).id !== elementId && $(this).hasClass("show")) |
||||
$(this).removeClass("show").addClass("hide"); |
||||
}); |
||||
|
||||
if (!this.isVisible()) |
||||
this.show(); |
||||
|
||||
elementSelector.removeClass("hide").addClass("show"); |
||||
} |
||||
}, |
||||
|
||||
/** |
||||
* Returns true if this toolbar is currently visible, or false otherwise. |
||||
* @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise |
||||
*/ |
||||
isVisible() { |
||||
return $("#extendedToolbarPanel").hasClass("slideInExt"); |
||||
}, |
||||
|
||||
/** |
||||
* Hides the toolbar with animation or not depending on the animate |
||||
* parameter. |
||||
*/ |
||||
hide(elementId) { |
||||
$("#extendedToolbarPanel") |
||||
.removeClass("slideInExt").addClass("slideOutExt"); |
||||
}, |
||||
|
||||
/** |
||||
* Shows the toolbar with animation or not depending on the animate |
||||
* parameter. |
||||
*/ |
||||
show(elementId) { |
||||
if (!this.isVisible()) |
||||
$("#extendedToolbarPanel") |
||||
.removeClass("slideOutExt").addClass("slideInExt"); |
||||
}, |
||||
|
||||
resize () { |
||||
//let [width, height] = UIUtil.getSidePanelSize();
|
||||
//Chat.resizeChat(width, height);
|
||||
} |
||||
}; |
||||
|
||||
export default ExtendedToolbarToggler; |
||||
@ -1,186 +0,0 @@ |
||||
/* global require, $ */ |
||||
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"; |
||||
|
||||
const buttons = { |
||||
'#chatspace': '#chatBottomButton', |
||||
'#contactlist': '#contactListButton', |
||||
'#settingsmenu': '#toolbar_button_settings' |
||||
}; |
||||
|
||||
var currentlyOpen = null; |
||||
|
||||
/** |
||||
* 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 |
||||
* @param onVideoResizeComplete function to be called after the video area |
||||
* is resized |
||||
*/ |
||||
function toggle (object, selector, onOpenComplete, |
||||
onOpen, onClose, onVideoResizeComplete) { |
||||
let isSideBarVisible = object.isVisible(); |
||||
|
||||
UIUtil.buttonClick(buttons[selector], "active"); |
||||
|
||||
if (isSideBarVisible) { |
||||
$("#toast-container").animate({ |
||||
right: 5 |
||||
}, { |
||||
queue: false, |
||||
duration: 500 |
||||
}); |
||||
|
||||
$(selector).hide("slide", { |
||||
direction: "right", |
||||
queue: false, |
||||
duration: 500, |
||||
// Set the size to 0 at the end of the animation to ensure that
|
||||
// the is(":visible") function on this selector will return {false}
|
||||
// when the element is hidden.
|
||||
complete: function() {$(selector).css("width", "0");} |
||||
}); |
||||
|
||||
resizeVideoArea(false, onVideoResizeComplete); |
||||
|
||||
if(typeof onClose === "function") { |
||||
onClose(); |
||||
} |
||||
|
||||
currentlyOpen = null; |
||||
} else { |
||||
resizeVideoArea(true, onVideoResizeComplete); |
||||
|
||||
// Undock the toolbar when the chat is shown and if we're in a
|
||||
// video mode.
|
||||
if (VideoLayout.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: (UIUtil.getSidePanelSize()[0] + 5) |
||||
}, { |
||||
queue: false, |
||||
duration: 500 |
||||
}); |
||||
// Set the size dynamically (not in the css), so that we're sure that
|
||||
// when is(":visible") is called on this selector the result is {false}
|
||||
// before it's actually visible.
|
||||
// (Chrome seems to return {true} for an element which is in the DOM and
|
||||
// has non-null size set).
|
||||
$(selector).css("width", "20%"); |
||||
$(selector).show("slide", { |
||||
direction: "right", |
||||
queue: false, |
||||
duration: 500, |
||||
complete: onOpenComplete |
||||
}); |
||||
if(typeof onOpen === "function") { |
||||
onOpen(); |
||||
} |
||||
|
||||
currentlyOpen = selector; |
||||
} |
||||
} |
||||
|
||||
function resizeVideoArea(isSidePanelVisible, completeFunction) { |
||||
VideoLayout.resizeVideoArea(isSidePanelVisible, |
||||
false,//don't force thumbnail count update
|
||||
true, //animate
|
||||
completeFunction); |
||||
} |
||||
|
||||
/** |
||||
* Toggler for the chat, contact list, settings menu, etc.. |
||||
*/ |
||||
var PanelToggler = { |
||||
|
||||
/** |
||||
* Opens / closes the chat area. |
||||
*/ |
||||
toggleChat () { |
||||
var chatCompleteFunction = Chat.isVisible() |
||||
? function () {} |
||||
: function () { |
||||
Chat.scrollChatToBottom(); |
||||
$('#chatspace').trigger('shown'); |
||||
}; |
||||
|
||||
toggle(Chat, //Object
|
||||
'#chatspace', // Selector
|
||||
function () { //onOpenComplete
|
||||
// Request the focus in the nickname field or the chat input
|
||||
// field.
|
||||
if ($('#nickname').css('visibility') === 'visible') { |
||||
$('#nickinput').focus(); |
||||
} else { |
||||
$('#usermsg').focus(); |
||||
} |
||||
}, |
||||
() => this.resizeChat(), //OnOpen
|
||||
null, |
||||
chatCompleteFunction); //OnClose
|
||||
}, |
||||
|
||||
resizeChat () { |
||||
let [width, height] = UIUtil.getSidePanelSize(); |
||||
Chat.resizeChat(width, height); |
||||
}, |
||||
|
||||
/** |
||||
* Opens / closes the contact list area. |
||||
*/ |
||||
toggleContactList () { |
||||
var completeFunction = ContactList.isVisible() |
||||
? function () {} |
||||
: function () { |
||||
$('#contactlist').trigger('shown'); |
||||
}; |
||||
|
||||
toggle(ContactList, |
||||
'#contactlist', |
||||
null, |
||||
function() { |
||||
ContactList.setVisualNotification(false); |
||||
}, |
||||
null, |
||||
completeFunction); |
||||
}, |
||||
|
||||
/** |
||||
* Opens / closes the settings menu |
||||
*/ |
||||
toggleSettingsMenu () { |
||||
toggle(SettingsMenu, |
||||
'#settingsmenu', |
||||
null, |
||||
function() {}, |
||||
null); |
||||
}, |
||||
|
||||
isVisible () { |
||||
return (Chat.isVisible() || |
||||
ContactList.isVisible() || |
||||
SettingsMenu.isVisible()); |
||||
} |
||||
}; |
||||
|
||||
export default PanelToggler; |
||||
@ -1,130 +0,0 @@ |
||||
/* global $, APP, interfaceConfig, JitsiMeetJS */ |
||||
import UIUtil from '../util/UIUtil'; |
||||
import UIEvents from '../../../service/UI/UIEvents'; |
||||
|
||||
const defaultBottomToolbarButtons = { |
||||
'chat': { |
||||
id: '#bottom_toolbar_chat' |
||||
}, |
||||
'contacts': { |
||||
id: '#bottom_toolbar_contact_list' |
||||
}, |
||||
'filmstrip': { |
||||
id: '#bottom_toolbar_film_strip', |
||||
shortcut: "F", |
||||
shortcutAttr: "filmstripPopover", |
||||
shortcutFunc: function() { |
||||
JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled"); |
||||
APP.UI.handleToggleFilmStrip(); |
||||
}, |
||||
shortcutDescription: "keyboardShortcuts.toggleFilmstrip" |
||||
} |
||||
}; |
||||
|
||||
const BottomToolbar = { |
||||
init () { |
||||
this.toolbar = $('#bottomToolbar'); |
||||
|
||||
// The bottom toolbar is enabled by default.
|
||||
this.enabled = true; |
||||
}, |
||||
/** |
||||
* Enables / disables the bottom toolbar. |
||||
* @param {e} set to {true} to enable the bottom toolbar or {false} |
||||
* to disable it |
||||
*/ |
||||
enable (e) { |
||||
this.enabled = e; |
||||
if (!e && this.isVisible()) |
||||
this.hide(false); |
||||
}, |
||||
/** |
||||
* Indicates if the bottom toolbar is currently enabled. |
||||
* @return {this.enabled} |
||||
*/ |
||||
isEnabled() { |
||||
return this.enabled; |
||||
}, |
||||
|
||||
setupListeners (emitter) { |
||||
UIUtil.hideDisabledButtons(defaultBottomToolbarButtons); |
||||
|
||||
const buttonHandlers = { |
||||
"bottom_toolbar_contact_list": function () { |
||||
JitsiMeetJS.analytics.sendEvent( |
||||
'bottomtoolbar.contacts.toggled'); |
||||
emitter.emit(UIEvents.TOGGLE_CONTACT_LIST); |
||||
}, |
||||
"bottom_toolbar_film_strip": function () { |
||||
JitsiMeetJS.analytics.sendEvent( |
||||
'bottomtoolbar.filmstrip.toggled'); |
||||
emitter.emit(UIEvents.TOGGLE_FILM_STRIP); |
||||
}, |
||||
"bottom_toolbar_chat": function () { |
||||
JitsiMeetJS.analytics.sendEvent('bottomtoolbar.chat.toggled'); |
||||
emitter.emit(UIEvents.TOGGLE_CHAT); |
||||
} |
||||
}; |
||||
|
||||
Object.keys(defaultBottomToolbarButtons).forEach( |
||||
id => { |
||||
if (UIUtil.isButtonEnabled(id)) { |
||||
var button = defaultBottomToolbarButtons[id]; |
||||
|
||||
if (button.shortcut) |
||||
APP.keyboardshortcut.registerShortcut( |
||||
button.shortcut, |
||||
button.shortcutAttr, |
||||
button.shortcutFunc, |
||||
button.shortcutDescription |
||||
); |
||||
} |
||||
} |
||||
); |
||||
|
||||
Object.keys(buttonHandlers).forEach( |
||||
buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId]) |
||||
); |
||||
}, |
||||
|
||||
resizeToolbar (thumbWidth, thumbHeight) { |
||||
let bottom = (thumbHeight - this.toolbar.outerHeight())/2 + 18; |
||||
this.toolbar.css({bottom}); |
||||
}, |
||||
|
||||
/** |
||||
* Returns true if this toolbar is currently visible, or false otherwise. |
||||
* @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise |
||||
*/ |
||||
isVisible() { |
||||
return this.toolbar.is(":visible"); |
||||
}, |
||||
|
||||
/** |
||||
* Hides the bottom toolbar with animation or not depending on the animate |
||||
* parameter. |
||||
* @param animate <tt>true</tt> to hide the bottom toolbar with animation, |
||||
* <tt>false</tt> or nothing to hide it without animation. |
||||
*/ |
||||
hide(animate) { |
||||
if (animate) |
||||
this.toolbar.hide("slide", {direction: "right", duration: 300}); |
||||
else |
||||
this.toolbar.css("display", "none"); |
||||
}, |
||||
|
||||
/** |
||||
* Shows the bottom toolbar with animation or not depending on the animate |
||||
* parameter. |
||||
* @param animate <tt>true</tt> to show the bottom toolbar with animation, |
||||
* <tt>false</tt> or nothing to show it without animation. |
||||
*/ |
||||
show(animate) { |
||||
if (animate) |
||||
this.toolbar.show("slide", {direction: "right", duration: 300}); |
||||
else |
||||
this.toolbar.css("display", "block"); |
||||
} |
||||
}; |
||||
|
||||
export default BottomToolbar; |
||||
Loading…
Reference in new issue