890 lines
29 KiB
JavaScript
890 lines
29 KiB
JavaScript
/* global AJS, APP, $, config, interfaceConfig, JitsiMeetJS */
|
|
import UIUtil from '../util/UIUtil';
|
|
import UIEvents from '../../../service/UI/UIEvents';
|
|
import SideContainerToggler from "../side_pannels/SideContainerToggler";
|
|
|
|
let emitter = null;
|
|
let Toolbar;
|
|
|
|
/**
|
|
* Handlers for toolbar buttons.
|
|
*
|
|
* buttonId {string}: handler {function}
|
|
*/
|
|
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()) {
|
|
APP.UI.showCustomToolbarPopup(
|
|
'#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_link": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.invite.clicked');
|
|
emitter.emit(UIEvents.INVITE_CLICKED);
|
|
},
|
|
"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');
|
|
|
|
emitter.emit(UIEvents.TOGGLE_FULLSCREEN);
|
|
},
|
|
"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_raisehand": function () {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.raiseHand.clicked');
|
|
APP.conference.maybeToggleRaisedHand();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* All toolbars buttons description
|
|
*/
|
|
const defaultToolbarButtons = {
|
|
'microphone': {
|
|
id: 'toolbar_button_mute',
|
|
tooltipKey: 'toolbar.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: '[title]toolbar.micMutedPopup'
|
|
},
|
|
{
|
|
id: 'unableToUnmutePopup',
|
|
className: 'loginmenu',
|
|
dataAttr: '[title]toolbar.unableToUnmutePopup'
|
|
},
|
|
{
|
|
id: 'talkWhileMutedPopup',
|
|
className: 'loginmenu',
|
|
dataAttr: '[title]toolbar.talkWhileMutedPopup'
|
|
}
|
|
],
|
|
content: "Mute / Unmute",
|
|
i18n: "[content]toolbar.mute"
|
|
},
|
|
'camera': {
|
|
id: 'toolbar_button_camera',
|
|
tooltipKey: 'toolbar.videomute',
|
|
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',
|
|
tooltipKey: 'toolbar.sharescreen',
|
|
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'
|
|
},
|
|
'invite': {
|
|
id: 'toolbar_button_link',
|
|
tooltipKey: 'toolbar.invite',
|
|
className: 'button icon-link',
|
|
content: 'Invite others',
|
|
i18n: '[content]toolbar.invite'
|
|
},
|
|
'chat': {
|
|
id: 'toolbar_button_chat',
|
|
tooltipKey: 'toolbar.chat',
|
|
className: 'button icon-chat',
|
|
shortcut: 'C',
|
|
shortcutAttr: 'toggleChatPopover',
|
|
shortcutFunc: function() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled');
|
|
APP.UI.toggleChat();
|
|
},
|
|
shortcutDescription: 'keyboardShortcuts.toggleChat',
|
|
sideContainerId: 'chat_container',
|
|
html: `<span class="badge-round">
|
|
<span id="unreadMessages"></span>
|
|
</span>`
|
|
},
|
|
'contacts': {
|
|
id: 'toolbar_contact_list',
|
|
tooltipKey: 'bottomtoolbar.contactlist',
|
|
className: 'button icon-contactList',
|
|
sideContainerId: 'contacts_container',
|
|
html: `<span class="badge-round">
|
|
<span id="numberOfParticipants"></span>
|
|
</span>`
|
|
},
|
|
'profile': {
|
|
id: 'toolbar_button_profile',
|
|
tooltipKey: 'profile.setDisplayNameLabel',
|
|
className: 'button',
|
|
sideContainerId: 'profile_container',
|
|
html: `<img id="avatar" src="images/avatar2.png"/>`
|
|
},
|
|
'etherpad': {
|
|
id: 'toolbar_button_etherpad',
|
|
tooltipKey: 'toolbar.etherpad',
|
|
className: 'button icon-share-doc'
|
|
},
|
|
'fullscreen': {
|
|
id: 'toolbar_button_fullScreen',
|
|
tooltipKey: 'toolbar.fullscreen',
|
|
className: "button icon-full-screen",
|
|
shortcut: 'S',
|
|
shortcutAttr: 'toggleFullscreenPopover',
|
|
shortcutFunc: function() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.fullscreen.toggled');
|
|
APP.UI.toggleFullScreen();
|
|
},
|
|
shortcutDescription: "keyboardShortcuts.fullScreen",
|
|
content: "Enter / Exit Full Screen",
|
|
i18n: "[content]toolbar.fullscreen"
|
|
},
|
|
'settings': {
|
|
id: 'toolbar_button_settings',
|
|
tooltipKey: 'toolbar.Settings',
|
|
className: 'button icon-settings',
|
|
sideContainerId: "settings_container"
|
|
},
|
|
'hangup': {
|
|
id: 'toolbar_button_hangup',
|
|
tooltipKey: 'toolbar.hangup',
|
|
className: "button icon-hangup",
|
|
content: "Hang Up",
|
|
i18n: "[content]toolbar.hangup"
|
|
},
|
|
'raisehand': {
|
|
id: "toolbar_button_raisehand",
|
|
tooltipKey: 'toolbar.raiseHand',
|
|
className: "button icon-raised-hand",
|
|
shortcut: "R",
|
|
shortcutAttr: "raiseHandPopover",
|
|
shortcutFunc: function() {
|
|
JitsiMeetJS.analytics.sendEvent("shortcut.raisehand.clicked");
|
|
APP.conference.maybeToggleRaisedHand();
|
|
},
|
|
shortcutDescription: "keyboardShortcuts.raiseHand",
|
|
content: "Raise Hand",
|
|
i18n: "[content]toolbar.raiseHand"
|
|
},
|
|
//init and btn handler: Recording.initRecordingButton (Recording.js)
|
|
'recording': {
|
|
id: 'toolbar_button_record',
|
|
tooltipKey: 'liveStreaming.buttonTooltip',
|
|
className: 'button',
|
|
hidden: true // will be displayed once
|
|
// the recording functionality is detected
|
|
},
|
|
'sharedvideo': {
|
|
id: 'toolbar_button_sharedvideo',
|
|
tooltipKey: 'toolbar.sharedvideo',
|
|
className: 'button icon-shared-video',
|
|
popups: [
|
|
{
|
|
id: 'sharedVideoMutedPopup',
|
|
className: 'loginmenu extendedToolbarPopup',
|
|
dataAttr: '[title]toolbar.sharedVideoMutedPopup',
|
|
dataAttrPosition: 'w'
|
|
}
|
|
]
|
|
},
|
|
'sip': {
|
|
id: 'toolbar_button_sip',
|
|
tooltipKey: 'toolbar.sip',
|
|
className: 'button icon-telephone',
|
|
hidden: true // will be displayed once
|
|
// the SIP calls functionality is detected
|
|
},
|
|
'dialpad': {
|
|
id: 'toolbar_button_dialpad',
|
|
tooltipKey: 'toolbar.dialpad',
|
|
className: 'button icon-dialpad',
|
|
//TODO: remove it after UI.updateDTMFSupport fix
|
|
hidden: true
|
|
}
|
|
};
|
|
|
|
function dialpadButtonClicked() {
|
|
//TODO show the dialpad box
|
|
}
|
|
|
|
function showSipNumberInput () {
|
|
let defaultNumber = config.defaultSipNumber
|
|
? config.defaultSipNumber
|
|
: '';
|
|
let titleKey = "dialog.sipMsg";
|
|
let msgString = (`
|
|
<input class="input-control"
|
|
name="sipNumber" type="text"
|
|
value="${defaultNumber}" autofocus>`);
|
|
|
|
APP.UI.messageHandler.openTwoButtonDialog({
|
|
titleKey,
|
|
msgString,
|
|
leftButtonKey: "dialog.Dial",
|
|
submitFunction: function (e, v, m, f) {
|
|
if (v && f.sipNumber) {
|
|
emitter.emit(UIEvents.SIP_DIAL, f.sipNumber);
|
|
}
|
|
},
|
|
focus: ':input:first'
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Get place for toolbar button.
|
|
* Now it can be in main toolbar or in extended (left) toolbar
|
|
*
|
|
* @param btn {string}
|
|
* @returns {string}
|
|
*/
|
|
function getToolbarButtonPlace (btn) {
|
|
return interfaceConfig.MAIN_TOOLBAR_BUTTONS.includes(btn) ?
|
|
'main' :
|
|
'extended';
|
|
}
|
|
|
|
/**
|
|
* Event handler for side toolbar container toggled event.
|
|
*
|
|
* @param {string} containerId - ID of the container.
|
|
* @param {boolean} isVisible - Flag showing whether container
|
|
* is visible.
|
|
* @returns {void}
|
|
*/
|
|
function onSideToolbarContainerToggled(containerId, isVisible) {
|
|
Toolbar._handleSideToolbarContainerToggled(containerId, isVisible);
|
|
}
|
|
|
|
/**
|
|
* Event handler for local raise hand changed event.
|
|
*
|
|
* @param {boolean} isRaisedHand - Flag showing whether hand is raised.
|
|
* @returns {void}
|
|
*/
|
|
function onLocalRaiseHandChanged(isRaisedHand) {
|
|
Toolbar._setToggledState("toolbar_button_raisehand", isRaisedHand);
|
|
}
|
|
|
|
/**
|
|
* Event handler for full screen toggled event.
|
|
*
|
|
* @param {boolean} isFullScreen - Flag showing whether app in full
|
|
* screen mode.
|
|
* @returns {void}
|
|
*/
|
|
function onFullScreenToggled(isFullScreen) {
|
|
Toolbar._handleFullScreenToggled(isFullScreen);
|
|
}
|
|
|
|
Toolbar = {
|
|
init (eventEmitter) {
|
|
emitter = eventEmitter;
|
|
// The toolbar is enabled by default.
|
|
this.enabled = true;
|
|
this.toolbarSelector = $("#mainToolbarContainer");
|
|
this.extendedToolbarSelector = $("#extendedToolbar");
|
|
|
|
// Unregister listeners in case of reinitialization.
|
|
this.unregisterListeners();
|
|
|
|
// Initialise the toolbar buttons.
|
|
// The main toolbar will only take into account
|
|
// it's own configuration from interface_config.
|
|
this._initToolbarButtons();
|
|
|
|
this._setShortcutsAndTooltips();
|
|
|
|
this._setButtonHandlers();
|
|
|
|
this.registerListeners();
|
|
|
|
APP.UI.addListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
|
|
(popupID, show, timeout) => {
|
|
Toolbar._showCustomToolbarPopup(popupID, show, timeout);
|
|
});
|
|
|
|
if(!APP.tokenData.isGuest) {
|
|
$("#toolbar_button_profile").addClass("unclickable");
|
|
UIUtil.removeTooltip(
|
|
document.getElementById('toolbar_button_profile'));
|
|
}
|
|
},
|
|
/**
|
|
* Register listeners for UI events of toolbar component.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
registerListeners() {
|
|
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
|
onSideToolbarContainerToggled);
|
|
|
|
APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
|
|
onLocalRaiseHandChanged);
|
|
|
|
APP.UI.addListener(UIEvents.FULLSCREEN_TOGGLED, onFullScreenToggled);
|
|
},
|
|
/**
|
|
* Unregisters handlers for UI events of Toolbar component.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
unregisterListeners() {
|
|
APP.UI.removeListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
|
onSideToolbarContainerToggled);
|
|
|
|
APP.UI.removeListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
|
|
onLocalRaiseHandChanged);
|
|
|
|
APP.UI.removeListener(UIEvents.FULLSCREEN_TOGGLED,
|
|
onFullScreenToggled);
|
|
},
|
|
/**
|
|
* 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;
|
|
},
|
|
|
|
showEtherpadButton () {
|
|
if (!$('#toolbar_button_etherpad').is(":visible")) {
|
|
$('#toolbar_button_etherpad').css({display: 'inline-block'});
|
|
}
|
|
},
|
|
|
|
// Shows or hides the 'shared video' button.
|
|
showSharedVideoButton () {
|
|
let id = 'toolbar_button_sharedvideo';
|
|
let shouldShow = UIUtil.isButtonEnabled('sharedvideo')
|
|
&& !config.disableThirdPartyRequests;
|
|
|
|
if (shouldShow) {
|
|
let el = document.getElementById(id);
|
|
UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
|
|
}
|
|
UIUtil.setVisible(id, shouldShow);
|
|
},
|
|
|
|
// 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) {
|
|
let shouldShow = APP.conference.sipGatewayEnabled()
|
|
&& UIUtil.isButtonEnabled('sip') && show;
|
|
let id = 'toolbar_button_sip';
|
|
|
|
UIUtil.setVisible(id, shouldShow);
|
|
},
|
|
|
|
// Shows or hides the dialpad button
|
|
showDialPadButton (show) {
|
|
let shouldShow = UIUtil.isButtonEnabled('dialpad') && show;
|
|
let id = 'toolbar_button_dialpad';
|
|
|
|
UIUtil.setVisible(id, shouldShow);
|
|
},
|
|
|
|
/**
|
|
* Update the state of the button. The button has blue glow if desktop
|
|
* streaming is active.
|
|
*/
|
|
updateDesktopSharingButtonState () {
|
|
this._setToggledState( "toolbar_button_desktopsharing",
|
|
APP.conference.isSharingScreen);
|
|
},
|
|
|
|
/**
|
|
* Marks video icon as muted or not.
|
|
*
|
|
* @param {boolean} muted if icon should look like muted or not
|
|
*/
|
|
toggleVideoIcon (muted) {
|
|
$('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted);
|
|
|
|
this._setToggledState("toolbar_button_camera", muted);
|
|
},
|
|
|
|
/**
|
|
* Enables / disables audio toolbar button.
|
|
*
|
|
* @param {boolean} enabled indicates if the button should be enabled
|
|
* or disabled
|
|
*/
|
|
setVideoIconEnabled (enabled) {
|
|
this._setMediaIconEnabled(
|
|
'#toolbar_button_camera',
|
|
enabled,
|
|
/* data-i18n attribute value */
|
|
`[content]toolbar.${enabled ? 'videomute' : 'cameraDisabled'}`,
|
|
/* shortcut attribute value */
|
|
'toggleVideoPopover');
|
|
|
|
enabled || this.toggleVideoIcon(!enabled);
|
|
},
|
|
|
|
/**
|
|
* Enables/disables the toolbar button associated with a specific media such
|
|
* as audio or video.
|
|
*
|
|
* @param {string} btn - The jQuery selector <tt>string</tt> which
|
|
* identifies the toolbar button to be enabled/disabled.
|
|
* @param {boolean} enabled - <tt>true</tt> to enable the specified
|
|
* <tt>btn</tt> or <tt>false</tt> to disable it.
|
|
* @param {string} dataI18n - The value to assign to the <tt>data-i18n</tt>
|
|
* attribute of the specified <tt>btn</tt>.
|
|
* @param {string} shortcut - The value, if any, to assign to the
|
|
* <tt>shortcut</tt> attribute of the specified <tt>btn</tt> if the toolbar
|
|
* button is enabled.
|
|
*/
|
|
_setMediaIconEnabled(btn, enabled, dataI18n, shortcut) {
|
|
const $btn = $(btn);
|
|
|
|
$btn
|
|
.prop('disabled', !enabled)
|
|
.attr('data-i18n', dataI18n)
|
|
.attr('shortcut', enabled && shortcut ? shortcut : '');
|
|
|
|
enabled
|
|
? $btn.removeAttr('disabled')
|
|
: $btn.attr('disabled', 'disabled');
|
|
|
|
APP.translation.translateElement($btn);
|
|
},
|
|
|
|
/**
|
|
* Marks audio icon as muted or not.
|
|
*
|
|
* @param {boolean} muted if icon should look like muted or not
|
|
*/
|
|
toggleAudioIcon(muted) {
|
|
$('#toolbar_button_mute')
|
|
.toggleClass("icon-microphone", !muted)
|
|
.toggleClass("icon-mic-disabled", muted);
|
|
|
|
this._setToggledState("toolbar_button_mute", muted);
|
|
},
|
|
|
|
/**
|
|
* Enables / disables audio toolbar button.
|
|
*
|
|
* @param {boolean} enabled indicates if the button should be enabled
|
|
* or disabled
|
|
*/
|
|
setAudioIconEnabled (enabled) {
|
|
this._setMediaIconEnabled(
|
|
'#toolbar_button_mute',
|
|
enabled,
|
|
/* data-i18n attribute value */
|
|
`[content]toolbar.${enabled ? 'mute' : 'micDisabled'}`,
|
|
/* shortcut attribute value */
|
|
'mutePopover');
|
|
|
|
enabled || this.toggleAudioIcon(!enabled);
|
|
},
|
|
|
|
/**
|
|
* 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("fadeIn");
|
|
},
|
|
|
|
/**
|
|
* Hides the toolbar with animation or not depending on the animate
|
|
* parameter.
|
|
*/
|
|
hide() {
|
|
this.toolbarSelector
|
|
.removeClass("fadeIn")
|
|
.addClass("fadeOut");
|
|
|
|
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("fadeOut")) {
|
|
this.toolbarSelector.removeClass("fadeOut");
|
|
}
|
|
|
|
let slideInAnimation = (SideContainerToggler.isVisible)
|
|
? "slideInExtX"
|
|
: "slideInX";
|
|
let slideOutAnimation = (SideContainerToggler.isVisible)
|
|
? "slideOutExtX"
|
|
: "slideOutX";
|
|
|
|
if (this.extendedToolbarSelector.hasClass(slideOutAnimation)) {
|
|
this.extendedToolbarSelector.toggleClass(slideOutAnimation);
|
|
}
|
|
|
|
this.toolbarSelector.addClass("fadeIn");
|
|
this.extendedToolbarSelector.toggleClass(slideInAnimation);
|
|
},
|
|
|
|
registerClickListeners(listener) {
|
|
$('#mainToolbarContainer').click(listener);
|
|
|
|
$("#extendedToolbar").click(listener);
|
|
},
|
|
|
|
/**
|
|
* Handles the side toolbar toggle.
|
|
*
|
|
* @param {string} containerId the identifier of the container element
|
|
*/
|
|
_handleSideToolbarContainerToggled(containerId) {
|
|
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;
|
|
}
|
|
}
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Handles full screen toggled.
|
|
*
|
|
* @param {boolean} isFullScreen indicates if we're currently in full
|
|
* screen mode
|
|
*/
|
|
_handleFullScreenToggled(isFullScreen) {
|
|
let element
|
|
= document.getElementById("toolbar_button_fullScreen");
|
|
|
|
element.className = isFullScreen
|
|
? element.className
|
|
.replace("icon-full-screen", "icon-exit-full-screen")
|
|
: element.className
|
|
.replace("icon-exit-full-screen", "icon-full-screen");
|
|
|
|
Toolbar._setToggledState("toolbar_button_fullScreen", isFullScreen);
|
|
},
|
|
|
|
/**
|
|
* Initialise toolbar buttons.
|
|
*/
|
|
_initToolbarButtons() {
|
|
interfaceConfig.TOOLBAR_BUTTONS.forEach((value, index) => {
|
|
let place = getToolbarButtonPlace(value);
|
|
|
|
if (value && value in defaultToolbarButtons) {
|
|
let button = defaultToolbarButtons[value];
|
|
this._addToolbarButton(
|
|
button,
|
|
place,
|
|
(interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX !== undefined
|
|
&& index
|
|
=== interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX));
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Adds the given button to the main (top) or extended (left) 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
|
|
* @param {boolean} isSplitter if this button is a splitter button for
|
|
* the dialog, which means that a special splitter style will be applied
|
|
*/
|
|
_addToolbarButton(button, place, isSplitter) {
|
|
const places = {
|
|
main: 'mainToolbar',
|
|
extended: 'extendedToolbarButtons'
|
|
};
|
|
let id = places[place];
|
|
let buttonElement = document.createElement("a");
|
|
if (button.className) {
|
|
buttonElement.className = button.className;
|
|
}
|
|
|
|
if (isSplitter) {
|
|
let splitter = document.createElement('span');
|
|
splitter.className = 'toolbar__splitter';
|
|
document.getElementById(id).appendChild(splitter);
|
|
}
|
|
|
|
buttonElement.id = button.id;
|
|
|
|
if (button.html)
|
|
buttonElement.innerHTML = button.html;
|
|
|
|
//TODO: remove it after UI.updateDTMFSupport fix
|
|
if (button.hidden)
|
|
buttonElement.style.display = 'none';
|
|
|
|
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-placement", "bottom");
|
|
this._addPopups(buttonElement, button.popups);
|
|
|
|
document.getElementById(id)
|
|
.appendChild(buttonElement);
|
|
},
|
|
|
|
_addPopups(buttonElement, popups = []) {
|
|
popups.forEach((popup) => {
|
|
const popupElement = document.createElement('div');
|
|
popupElement.id = popup.id;
|
|
popupElement.className = popup.className;
|
|
popupElement.setAttribute('data-i18n', popup.dataAttr);
|
|
|
|
let gravity = 'n';
|
|
if (popup.dataAttrPosition)
|
|
gravity = popup.dataAttrPosition;
|
|
// use custom attribute to save gravity option
|
|
// we use 'data-tooltip' in UIUtil to activate all tooltips
|
|
// but we want these to be manually triggered
|
|
popupElement.setAttribute('tooltip-gravity', gravity);
|
|
|
|
APP.translation.translateElement($(popupElement));
|
|
|
|
buttonElement.appendChild(popupElement);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Show custom popup/tooltip for a specified button.
|
|
* @param popupSelectorID the selector id of the popup to show
|
|
* @param show true or false/show or hide the popup
|
|
* @param timeout the time to show the popup
|
|
*/
|
|
_showCustomToolbarPopup(popupSelectorID, show, timeout) {
|
|
|
|
const gravity = $(popupSelectorID).attr('tooltip-gravity');
|
|
AJS.$(popupSelectorID)
|
|
.tooltip({
|
|
trigger: 'manual',
|
|
html: true,
|
|
gravity: gravity,
|
|
title: 'title'});
|
|
if (show) {
|
|
AJS.$(popupSelectorID).tooltip('show');
|
|
setTimeout(function () {
|
|
// hide the tooltip
|
|
AJS.$(popupSelectorID).tooltip('hide');
|
|
}, timeout);
|
|
} else {
|
|
AJS.$(popupSelectorID).tooltip('hide');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the toggled state of the given element depending on the isToggled
|
|
* parameter.
|
|
*
|
|
* @param elementId the element identifier
|
|
* @param isToggled indicates if the element should be toggled or untoggled
|
|
*/
|
|
_setToggledState(elementId, isToggled) {
|
|
$("#" + elementId).toggleClass("toggled", isToggled);
|
|
},
|
|
|
|
/**
|
|
* Sets Shortcuts and Tooltips for all toolbar buttons
|
|
*
|
|
* @private
|
|
*/
|
|
_setShortcutsAndTooltips() {
|
|
Object.keys(defaultToolbarButtons).forEach(
|
|
id => {
|
|
if (UIUtil.isButtonEnabled(id)) {
|
|
let button = defaultToolbarButtons[id];
|
|
let buttonElement = document.getElementById(button.id);
|
|
if (!buttonElement) return false;
|
|
let tooltipPosition
|
|
= (interfaceConfig.MAIN_TOOLBAR_BUTTONS
|
|
.indexOf(id) > -1)
|
|
? "bottom" : "right";
|
|
|
|
UIUtil.setTooltip( buttonElement,
|
|
button.tooltipKey,
|
|
tooltipPosition);
|
|
|
|
if (button.shortcut)
|
|
APP.keyboardshortcut.registerShortcut(
|
|
button.shortcut,
|
|
button.shortcutAttr,
|
|
button.shortcutFunc,
|
|
button.shortcutDescription
|
|
);
|
|
}
|
|
}
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Sets Handlers for all toolbar buttons
|
|
*
|
|
* @private
|
|
*/
|
|
_setButtonHandlers() {
|
|
Object.keys(buttonHandlers).forEach(
|
|
buttonId => $(`#${buttonId}`).click(function(event) {
|
|
!$(this).prop('disabled') && buttonHandlers[buttonId](event);
|
|
})
|
|
);
|
|
}
|
|
};
|
|
|
|
export default Toolbar;
|