751 lines
25 KiB
JavaScript
751 lines
25 KiB
JavaScript
/* global APP, $, config, interfaceConfig, JitsiMeetJS */
|
|
/* jshint -W101 */
|
|
import UIUtil from '../util/UIUtil';
|
|
import UIEvents from '../../../service/UI/UIEvents';
|
|
import SideContainerToggler from "../side_pannels/SideContainerToggler";
|
|
|
|
let roomUrl = null;
|
|
let emitter = null;
|
|
|
|
|
|
/**
|
|
* Opens the invite link dialog.
|
|
*/
|
|
function openLinkDialog () {
|
|
let inviteAttributes;
|
|
|
|
if (roomUrl === null) {
|
|
inviteAttributes = 'data-i18n="[value]roomUrlDefaultMsg" value="' +
|
|
APP.translation.translateString("roomUrlDefaultMsg") + '"';
|
|
} else {
|
|
inviteAttributes = "value=\"" + encodeURI(roomUrl) + "\"";
|
|
}
|
|
|
|
let title = APP.translation.generateTranslationHTML("dialog.shareLink");
|
|
APP.UI.messageHandler.openTwoButtonDialog(
|
|
null, null, null,
|
|
'<h2>' + title + '</h2>'
|
|
+ '<input id="inviteLinkRef" type="text" '
|
|
+ inviteAttributes + ' onclick="this.select();" readonly>',
|
|
false, "dialog.Invite",
|
|
function (e, v) {
|
|
if (v && roomUrl) {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.invite.button');
|
|
emitter.emit(UIEvents.USER_INVITED, roomUrl);
|
|
}
|
|
else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.invite.cancel');
|
|
}
|
|
},
|
|
function (event) {
|
|
if (roomUrl) {
|
|
document.getElementById('inviteLinkRef').select();
|
|
} else {
|
|
if (event && event.target) {
|
|
$(event.target).find('button[value=true]')
|
|
.prop('disabled', true);
|
|
}
|
|
}
|
|
},
|
|
function (e, v, m, f) {
|
|
if(!v && !m && !f)
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.invite.close');
|
|
}
|
|
);
|
|
}
|
|
|
|
const buttonHandlers = {
|
|
"toolbar_button_profile": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');
|
|
emitter.emit(UIEvents.TOGGLE_PROFILE);
|
|
},
|
|
"toolbar_button_mute": function () {
|
|
let sharedVideoManager = APP.UI.getSharedVideoManager();
|
|
|
|
if (APP.conference.audioMuted) {
|
|
// If there's a shared video with the volume "on" and we aren't
|
|
// the video owner, we warn the user
|
|
// that currently it's not possible to unmute.
|
|
if (sharedVideoManager
|
|
&& sharedVideoManager.isSharedVideoVolumeOn()
|
|
&& !sharedVideoManager.isSharedVideoOwner()) {
|
|
UIUtil.animateShowElement(
|
|
$("#unableToUnmutePopup"), true, 5000);
|
|
}
|
|
else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.audio.unmuted');
|
|
emitter.emit(UIEvents.AUDIO_MUTED, false, true);
|
|
}
|
|
} else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.audio.muted');
|
|
emitter.emit(UIEvents.AUDIO_MUTED, true, true);
|
|
}
|
|
},
|
|
"toolbar_button_camera": function () {
|
|
if (APP.conference.videoMuted) {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.video.enabled');
|
|
emitter.emit(UIEvents.VIDEO_MUTED, false);
|
|
} else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.video.disabled');
|
|
emitter.emit(UIEvents.VIDEO_MUTED, true);
|
|
}
|
|
},
|
|
"toolbar_button_security": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.lock.clicked');
|
|
emitter.emit(UIEvents.ROOM_LOCK_CLICKED);
|
|
},
|
|
"toolbar_button_link": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.invite.clicked');
|
|
openLinkDialog();
|
|
},
|
|
"toolbar_button_chat": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.chat.toggled');
|
|
emitter.emit(UIEvents.TOGGLE_CHAT);
|
|
},
|
|
"toolbar_contact_list": function () {
|
|
JitsiMeetJS.analytics.sendEvent(
|
|
'toolbar.contacts.toggled');
|
|
emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
|
|
},
|
|
"toolbar_button_etherpad": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.etherpad.clicked');
|
|
emitter.emit(UIEvents.ETHERPAD_CLICKED);
|
|
},
|
|
"toolbar_button_sharedvideo": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.sharedvideo.clicked');
|
|
emitter.emit(UIEvents.SHARED_VIDEO_CLICKED);
|
|
},
|
|
"toolbar_button_desktopsharing": function () {
|
|
if (APP.conference.isSharingScreen) {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.screen.disabled');
|
|
} else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.screen.enabled');
|
|
}
|
|
emitter.emit(UIEvents.TOGGLE_SCREENSHARING);
|
|
},
|
|
"toolbar_button_fullScreen": function() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.fullscreen.enabled');
|
|
UIUtil.buttonClick("toolbar_button_fullScreen",
|
|
"icon-full-screen icon-exit-full-screen");
|
|
emitter.emit(UIEvents.FULLSCREEN_TOGGLE);
|
|
},
|
|
"toolbar_button_sip": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.sip.clicked');
|
|
showSipNumberInput();
|
|
},
|
|
"toolbar_button_dialpad": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.sip.dialpad.clicked');
|
|
dialpadButtonClicked();
|
|
},
|
|
"toolbar_button_settings": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.settings.toggled');
|
|
emitter.emit(UIEvents.TOGGLE_SETTINGS);
|
|
},
|
|
"toolbar_button_hangup": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.hangup');
|
|
emitter.emit(UIEvents.HANGUP);
|
|
},
|
|
"toolbar_button_login": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.authenticate.login.clicked');
|
|
emitter.emit(UIEvents.AUTH_CLICKED);
|
|
},
|
|
"toolbar_button_logout": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.authenticate.logout.clicked');
|
|
// Ask for confirmation
|
|
APP.UI.messageHandler.openTwoButtonDialog(
|
|
"dialog.logoutTitle",
|
|
null,
|
|
"dialog.logoutQuestion",
|
|
null,
|
|
false,
|
|
"dialog.Yes",
|
|
function (evt, yes) {
|
|
if (yes) {
|
|
emitter.emit(UIEvents.LOGOUT);
|
|
}
|
|
}
|
|
);
|
|
},
|
|
"toolbar_film_strip": function () {
|
|
JitsiMeetJS.analytics.sendEvent(
|
|
'bottomtoolbar.filmstrip.toggled');
|
|
emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
|
|
}
|
|
};
|
|
|
|
const defaultToolbarButtons = {
|
|
'microphone': {
|
|
id: 'toolbar_button_mute',
|
|
className: "button icon-microphone",
|
|
shortcut: 'M',
|
|
shortcutAttr: 'mutePopover',
|
|
shortcutFunc: function() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.audiomute.toggled');
|
|
APP.conference.toggleAudioMuted();
|
|
},
|
|
shortcutDescription: "keyboardShortcuts.mute",
|
|
popups: [
|
|
{
|
|
id: "micMutedPopup",
|
|
className: "loginmenu",
|
|
dataAttr: "[html]toolbar.micMutedPopup"
|
|
},
|
|
{
|
|
id: "unableToUnmutePopup",
|
|
className: "loginmenu",
|
|
dataAttr: "[html]toolbar.unableToUnmutePopup"
|
|
}
|
|
],
|
|
content: "Mute / Unmute",
|
|
i18n: "[content]toolbar.mute"
|
|
},
|
|
'camera': {
|
|
id: 'toolbar_button_camera',
|
|
className: "button icon-camera",
|
|
shortcut: 'V',
|
|
shortcutAttr: 'toggleVideoPopover',
|
|
shortcutFunc: function() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.videomute.toggled');
|
|
APP.conference.toggleVideoMuted();
|
|
},
|
|
shortcutDescription: "keyboardShortcuts.videoMute",
|
|
content: "Start / stop camera",
|
|
i18n: "[content]toolbar.videomute"
|
|
},
|
|
'desktop': {
|
|
id: 'toolbar_button_desktopsharing',
|
|
className: 'button icon-share-desktop',
|
|
shortcut: 'D',
|
|
shortcutAttr: 'toggleDesktopSharingPopover',
|
|
shortcutFunc: function() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.screen.toggled');
|
|
APP.conference.toggleScreenSharing();
|
|
},
|
|
shortcutDescription: 'keyboardShortcuts.toggleScreensharing',
|
|
content: 'Share screen',
|
|
i18n: '[content]toolbar.sharescreen'
|
|
},
|
|
'security': {
|
|
id: 'toolbar_button_security'
|
|
},
|
|
'invite': {
|
|
id: 'toolbar_button_link',
|
|
className: 'button icon-link',
|
|
content: 'Invite others',
|
|
i18n: '[content]toolbar.invite'
|
|
},
|
|
'chat': {
|
|
id: 'toolbar_button_chat',
|
|
shortcut: 'C',
|
|
shortcutAttr: 'toggleChatPopover',
|
|
shortcutFunc: function() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled');
|
|
APP.UI.toggleChat();
|
|
},
|
|
shortcutDescription: 'keyboardShortcuts.toggleChat',
|
|
sideContainerId: 'chat_container'
|
|
},
|
|
'contacts': {
|
|
id: 'toolbar_contact_list',
|
|
sideContainerId: 'contacts_container'
|
|
},
|
|
'profile': {
|
|
id: 'toolbar_button_profile',
|
|
sideContainerId: 'profile_container'
|
|
},
|
|
'etherpad': {
|
|
id: 'toolbar_button_etherpad'
|
|
},
|
|
'fullscreen': {
|
|
id: 'toolbar_button_fullScreen',
|
|
className: "button icon-full-screen",
|
|
shortcut: 'F',
|
|
shortcutAttr: 'toggleFullscreenPopover',
|
|
shortcutFunc: function() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.fullscreen.toggled');
|
|
APP.UI.toggleFullScreen();
|
|
},
|
|
shortcutDescription: "keyboardShortcuts.toggleChat",
|
|
content: "Enter / Exit Full Screen",
|
|
i18n: "[content]toolbar.fullscreen"
|
|
},
|
|
'settings': {
|
|
id: 'toolbar_button_settings',
|
|
sideContainerId: "settings_container"
|
|
},
|
|
'hangup': {
|
|
id: 'toolbar_button_hangup',
|
|
className: "button icon-hangup",
|
|
content: "Hang Up",
|
|
i18n: "[content]toolbar.hangup"
|
|
},
|
|
'filmstrip': {
|
|
id: 'toolbar_film_strip',
|
|
shortcut: "F",
|
|
shortcutAttr: "filmstripPopover",
|
|
shortcutFunc: function() {
|
|
JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
|
|
APP.UI.toggleFilmStrip();
|
|
},
|
|
shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
|
|
}
|
|
};
|
|
|
|
function dialpadButtonClicked() {
|
|
//TODO show the dialpad box
|
|
}
|
|
|
|
function showSipNumberInput () {
|
|
let defaultNumber = config.defaultSipNumber
|
|
? config.defaultSipNumber
|
|
: '';
|
|
|
|
let sipMsg = APP.translation.generateTranslationHTML("dialog.sipMsg");
|
|
APP.UI.messageHandler.openTwoButtonDialog(
|
|
null, null, null,
|
|
`<h2>${sipMsg}</h2>
|
|
<input name="sipNumber" type="text" value="${defaultNumber}" autofocus>`,
|
|
false, "dialog.Dial",
|
|
function (e, v, m, f) {
|
|
if (v && f.sipNumber) {
|
|
emitter.emit(UIEvents.SIP_DIAL, f.sipNumber);
|
|
}
|
|
},
|
|
null, null, ':input:first'
|
|
);
|
|
}
|
|
|
|
const Toolbar = {
|
|
init (eventEmitter) {
|
|
emitter = eventEmitter;
|
|
// The toolbar is enabled by default.
|
|
this.enabled = true;
|
|
this.toolbarSelector = $("#mainToolbarContainer");
|
|
this.extendedToolbarSelector = $("#extendedToolbar");
|
|
|
|
this._initMainToolbarButtons();
|
|
|
|
UIUtil.hideDisabledButtons(defaultToolbarButtons);
|
|
|
|
Object.keys(defaultToolbarButtons).forEach(
|
|
id => {
|
|
if (UIUtil.isButtonEnabled(id)) {
|
|
var button = defaultToolbarButtons[id];
|
|
|
|
if (button.shortcut)
|
|
APP.keyboardshortcut.registerShortcut(
|
|
button.shortcut,
|
|
button.shortcutAttr,
|
|
button.shortcutFunc,
|
|
button.shortcutDescription
|
|
);
|
|
}
|
|
}
|
|
);
|
|
|
|
Object.keys(buttonHandlers).forEach(
|
|
buttonId => $(`#${buttonId}`).click(function(event) {
|
|
!$(this).prop('disabled') && buttonHandlers[buttonId](event);
|
|
})
|
|
);
|
|
|
|
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
|
function(containerId, isVisible) {
|
|
Toolbar._handleSideToolbarContainerToggled( containerId,
|
|
isVisible);
|
|
});
|
|
},
|
|
/**
|
|
* Enables / disables the toolbar.
|
|
* @param {e} set to {true} to enable the 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;
|
|
},
|
|
/**
|
|
* Updates the room invite url.
|
|
*/
|
|
updateRoomUrl (newRoomUrl) {
|
|
roomUrl = newRoomUrl;
|
|
|
|
// If the invite dialog has been already opened we update the
|
|
// information.
|
|
let inviteLink = document.getElementById('inviteLinkRef');
|
|
if (inviteLink) {
|
|
inviteLink.value = roomUrl;
|
|
inviteLink.select();
|
|
$('#inviteLinkRef').parent()
|
|
.find('button[value=true]').prop('disabled', false);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Unlocks the lock button state.
|
|
*/
|
|
unlockLockButton () {
|
|
if ($("#toolbar_button_security").hasClass("icon-security-locked"))
|
|
UIUtil.buttonClick("toolbar_button_security",
|
|
"icon-security icon-security-locked");
|
|
},
|
|
|
|
/**
|
|
* Updates the lock button state to locked.
|
|
*/
|
|
lockLockButton () {
|
|
if ($("#toolbar_button_security").hasClass("icon-security"))
|
|
UIUtil.buttonClick("toolbar_button_security",
|
|
"icon-security icon-security-locked");
|
|
},
|
|
|
|
/**
|
|
* Shows or hides authentication button
|
|
* @param show <tt>true</tt> to show or <tt>false</tt> to hide
|
|
*/
|
|
showAuthenticateButton (show) {
|
|
if (UIUtil.isButtonEnabled('authentication') && show) {
|
|
$('#authentication').css({display: "inline"});
|
|
} else {
|
|
$('#authentication').css({display: "none"});
|
|
}
|
|
},
|
|
|
|
showEtherpadButton () {
|
|
if (!$('#toolbar_button_etherpad').is(":visible")) {
|
|
$('#toolbar_button_etherpad').css({display: 'inline-block'});
|
|
}
|
|
},
|
|
|
|
// Shows or hides the 'shared video' button.
|
|
showSharedVideoButton () {
|
|
if (UIUtil.isButtonEnabled('sharedvideo')
|
|
&& config.disableThirdPartyRequests !== true) {
|
|
$('#toolbar_button_sharedvideo').css({display: "inline-block"});
|
|
} else {
|
|
$('#toolbar_button_sharedvideo').css({display: "none"});
|
|
}
|
|
},
|
|
|
|
// checks whether desktop sharing is enabled and whether
|
|
// we have params to start automatically sharing
|
|
checkAutoEnableDesktopSharing () {
|
|
if (UIUtil.isButtonEnabled('desktop')
|
|
&& config.autoEnableDesktopSharing) {
|
|
emitter.emit(UIEvents.TOGGLE_SCREENSHARING);
|
|
}
|
|
},
|
|
|
|
// Shows or hides SIP calls button
|
|
showSipCallButton (show) {
|
|
if (APP.conference.sipGatewayEnabled()
|
|
&& UIUtil.isButtonEnabled('sip') && show) {
|
|
$('#toolbar_button_sip').css({display: "inline-block"});
|
|
} else {
|
|
$('#toolbar_button_sip').css({display: "none"});
|
|
}
|
|
},
|
|
|
|
// Shows or hides the dialpad button
|
|
showDialPadButton (show) {
|
|
if (UIUtil.isButtonEnabled('dialpad') && show) {
|
|
$('#toolbar_button_dialpad').css({display: "inline-block"});
|
|
} else {
|
|
$('#toolbar_button_dialpad').css({display: "none"});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Displays user authenticated identity name(login).
|
|
* @param authIdentity identity name to be displayed.
|
|
*/
|
|
setAuthenticatedIdentity (authIdentity) {
|
|
if (authIdentity) {
|
|
let selector = $('#toolbar_auth_identity');
|
|
selector.css({display: "list-item"});
|
|
selector.text(authIdentity);
|
|
} else {
|
|
$('#toolbar_auth_identity').css({display: "none"});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shows/hides login button.
|
|
* @param show <tt>true</tt> to show
|
|
*/
|
|
showLoginButton (show) {
|
|
if (UIUtil.isButtonEnabled('authentication') && show) {
|
|
$('#toolbar_button_login').css({display: "list-item"});
|
|
} else {
|
|
$('#toolbar_button_login').css({display: "none"});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shows/hides logout button.
|
|
* @param show <tt>true</tt> to show
|
|
*/
|
|
showLogoutButton (show) {
|
|
if (UIUtil.isButtonEnabled('authentication') && show) {
|
|
$('#toolbar_button_logout').css({display: "list-item"});
|
|
} else {
|
|
$('#toolbar_button_logout').css({display: "none"});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Update the state of the button. The button has blue glow if desktop
|
|
* streaming is active.
|
|
*/
|
|
updateDesktopSharingButtonState () {
|
|
let button = $("#toolbar_button_desktopsharing");
|
|
if (APP.conference.isSharingScreen) {
|
|
button.addClass("glow");
|
|
} else {
|
|
button.removeClass("glow");
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Marks video icon as muted or not.
|
|
* @param {boolean} muted if icon should look like muted or not
|
|
*/
|
|
markVideoIconAsMuted (muted) {
|
|
$('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted);
|
|
},
|
|
|
|
/**
|
|
* Marks video icon as disabled or not.
|
|
* @param {boolean} disabled if icon should look like disabled or not
|
|
*/
|
|
markVideoIconAsDisabled (disabled) {
|
|
var $btn = $('#toolbar_button_camera');
|
|
|
|
$btn
|
|
.prop("disabled", disabled)
|
|
.attr("data-i18n", disabled
|
|
? "[content]toolbar.cameraDisabled"
|
|
: "[content]toolbar.videomute")
|
|
.attr("shortcut", disabled ? "" : "toggleVideoPopover");
|
|
|
|
disabled
|
|
? $btn.attr("disabled", "disabled")
|
|
: $btn.removeAttr("disabled");
|
|
|
|
APP.translation.translateElement($btn);
|
|
|
|
disabled && this.markVideoIconAsMuted(disabled);
|
|
},
|
|
|
|
/**
|
|
* Marks audio icon as muted or not.
|
|
* @param {boolean} muted if icon should look like muted or not
|
|
*/
|
|
markAudioIconAsMuted (muted) {
|
|
$('#toolbar_button_mute').toggleClass("icon-microphone",
|
|
!muted).toggleClass("icon-mic-disabled", muted);
|
|
},
|
|
|
|
/**
|
|
* Marks audio icon as disabled or not.
|
|
* @param {boolean} disabled if icon should look like disabled or not
|
|
*/
|
|
markAudioIconAsDisabled (disabled) {
|
|
var $btn = $('#toolbar_button_mute');
|
|
|
|
$btn
|
|
.prop("disabled", disabled)
|
|
.attr("data-i18n", disabled
|
|
? "[content]toolbar.micDisabled"
|
|
: "[content]toolbar.mute")
|
|
.attr("shortcut", disabled ? "" : "mutePopover");
|
|
|
|
disabled
|
|
? $btn.attr("disabled", "disabled")
|
|
: $btn.removeAttr("disabled");
|
|
|
|
APP.translation.translateElement($btn);
|
|
|
|
disabled && this.markAudioIconAsMuted(disabled);
|
|
},
|
|
|
|
/**
|
|
* Indicates if the toolbar is currently hovered.
|
|
* @return {boolean} true if the toolbar is currently hovered,
|
|
* false otherwise
|
|
*/
|
|
isHovered() {
|
|
var hovered = false;
|
|
this.toolbarSelector.find('*').each(function () {
|
|
let id = $(this).attr('id');
|
|
if ($(`#${id}:hover`).length > 0) {
|
|
hovered = true;
|
|
// break each
|
|
return false;
|
|
}
|
|
});
|
|
if (hovered)
|
|
return true;
|
|
if ($("#bottomToolbar:hover").length > 0
|
|
|| $("#extendedToolbar:hover").length > 0
|
|
|| SideContainerToggler.isHovered()) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* 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.toolbarSelector.hasClass("slideInY");
|
|
},
|
|
|
|
/**
|
|
* Hides the toolbar with animation or not depending on the animate
|
|
* parameter.
|
|
*/
|
|
hide() {
|
|
this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY");
|
|
|
|
let slideInAnimation = (SideContainerToggler.isVisible)
|
|
? "slideInExtX"
|
|
: "slideInX";
|
|
let slideOutAnimation = (SideContainerToggler.isVisible)
|
|
? "slideOutExtX"
|
|
: "slideOutX";
|
|
|
|
this.extendedToolbarSelector.toggleClass(slideInAnimation)
|
|
.toggleClass(slideOutAnimation);
|
|
},
|
|
|
|
/**
|
|
* Shows the toolbar with animation or not depending on the animate
|
|
* parameter.
|
|
*/
|
|
show() {
|
|
if (this.toolbarSelector.hasClass("slideOutY"))
|
|
this.toolbarSelector.toggleClass("slideOutY");
|
|
|
|
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(slideInAnimation);
|
|
},
|
|
|
|
registerClickListeners(listener) {
|
|
$('#mainToolbarContainer').click(listener);
|
|
|
|
$("#extendedToolbar").click(listener);
|
|
},
|
|
|
|
/**
|
|
* Handles the side toolbar toggle.
|
|
*/
|
|
_handleSideToolbarContainerToggled(containerId, isVisible) {
|
|
Object.keys(defaultToolbarButtons).forEach(
|
|
id => {
|
|
if (!UIUtil.isButtonEnabled(id))
|
|
return;
|
|
|
|
var button = defaultToolbarButtons[id];
|
|
|
|
if (button.sideContainerId
|
|
&& button.sideContainerId === containerId) {
|
|
UIUtil.buttonClick(button.id, "selected");
|
|
return;
|
|
}
|
|
}
|
|
);
|
|
},
|
|
/**
|
|
* TODO: Fix mic popups
|
|
* <a class="button icon-microphone" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute">
|
|
* <ul id="micMutedPopup" class="loginmenu">
|
|
* <li data-i18n="[html]toolbar.micMutedPopup"></li>
|
|
* </ul>
|
|
* <ul id="unableToUnmutePopup" class="loginmenu">
|
|
* <li data-i18n="[html]toolbar.unableToUnmutePopup"></li>
|
|
* </ul>
|
|
* </a>
|
|
*/
|
|
_initMainToolbarButtons() {
|
|
interfaceConfig.MAIN_TOOLBAR_BUTTONS.forEach((value, index) => {
|
|
if (value && value in defaultToolbarButtons) {
|
|
let button = defaultToolbarButtons[value];
|
|
this._addMainToolbarButton(
|
|
button,
|
|
(index === 0),
|
|
(index === interfaceConfig.MAIN_TOOLBAR_BUTTONS.length -1));
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Adds the given button to the main (top) toolbar.
|
|
*
|
|
* @param {Object} the button to add.
|
|
* @param {boolean} isFirst indicates if this is the first button in the
|
|
* toolbar
|
|
* @param {boolean} isLast indicates if this is the last button in the
|
|
* toolbar
|
|
*/
|
|
_addMainToolbarButton(button, isFirst, isLast) {
|
|
let buttonElement = document.createElement("a");
|
|
if (button.className)
|
|
buttonElement.className = button.className
|
|
+ ((isFirst) ? " first" : "")
|
|
+ ((isLast) ? " last" : "");
|
|
|
|
buttonElement.id = button.id;
|
|
|
|
if (button.shortcutAttr)
|
|
buttonElement.setAttribute("shortcut", button.shortcutAttr);
|
|
|
|
if (button.content)
|
|
buttonElement.setAttribute("content", button.content);
|
|
|
|
if (button.i18n)
|
|
buttonElement.setAttribute("data-i18n", button.i18n);
|
|
|
|
buttonElement.setAttribute("data-container", "body");
|
|
buttonElement.setAttribute("data-toggle", "popover");
|
|
buttonElement.setAttribute("data-placement", "bottom");
|
|
this._addPopups(buttonElement, button.popups);
|
|
|
|
document.getElementById("mainToolbar")
|
|
.appendChild(buttonElement);
|
|
},
|
|
|
|
_addPopups(buttonElement, popups = []) {
|
|
popups.forEach((popup) => {
|
|
let popupElement = document.createElement("ul");
|
|
popupElement.id = popup.id;
|
|
popupElement.className = popup.className;
|
|
let liElement = document.createElement("li");
|
|
liElement.setAttribute("data-i18n", popup.dataAttr);
|
|
popupElement.appendChild(liElement);
|
|
buttonElement.appendChild(popupElement);
|
|
});
|
|
}
|
|
};
|
|
|
|
export default Toolbar;
|