-
-
-
-
+
+
+
+
+
+
-
-
+
+
-
-
-
- 
+
-
+
+
+
+
+
-
-
-
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 113d6f042..17cc317ae 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -7,7 +7,7 @@ import Toolbar from "./toolbars/Toolbar";
import ToolbarToggler from "./toolbars/ToolbarToggler";
import ContactList from "./side_pannels/contactlist/ContactList";
import Avatar from "./avatar/Avatar";
-import ExtendedToolbarToggler from "./side_pannels/ExtendedToolbarToggler";
+import SideContainerToggler from "./side_pannels/SideContainerToggler";
import UIUtil from "./util/UIUtil";
import UIEvents from "../../service/UI/UIEvents";
import CQEvents from '../../service/connectionquality/CQEvents';
@@ -360,7 +360,7 @@ function registerListeners() {
UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
- ExtendedToolbarToggler.toggle("settingsmenu");
+ SideContainerToggler.toggle("settings_container");
});
UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
@@ -378,7 +378,7 @@ function registerListeners() {
*/
function bindEvents() {
function onResize() {
- ExtendedToolbarToggler.resize();
+ SideContainerToggler.resize();
}
// Resize and reposition videos in full screen mode.
@@ -427,7 +427,7 @@ UI.start = function () {
registerListeners();
ToolbarToggler.init();
- ExtendedToolbarToggler.init();
+ SideContainerToggler.init(eventEmitter);
FilmStrip.init(eventEmitter);
VideoLayout.init(eventEmitter);
@@ -716,14 +716,14 @@ UI.isFilmStripVisible = function () {
* Toggles chat panel.
*/
UI.toggleChat = function () {
- ExtendedToolbarToggler.toggle("chatspace");
+ SideContainerToggler.toggle("chat_container");
};
/**
* Toggles contact list panel.
*/
UI.toggleContactList = function () {
- ExtendedToolbarToggler.toggle("contactlist");
+ SideContainerToggler.toggle("contacts_container");
};
/**
diff --git a/modules/UI/side_pannels/ExtendedToolbarToggler.js b/modules/UI/side_pannels/ExtendedToolbarToggler.js
deleted file mode 100644
index e12ee9210..000000000
--- a/modules/UI/side_pannels/ExtendedToolbarToggler.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/* 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 true if currently visible, false - 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;
\ No newline at end of file
diff --git a/modules/UI/side_pannels/SideContainerToggler.js b/modules/UI/side_pannels/SideContainerToggler.js
new file mode 100644
index 000000000..53d5b81e0
--- /dev/null
+++ b/modules/UI/side_pannels/SideContainerToggler.js
@@ -0,0 +1,107 @@
+/* global $ */
+import UIEvents from "../../../service/UI/UIEvents";
+
+/**
+ * Handles open and close of the extended toolbar side panel
+ * (chat, settings, etc.).
+ *
+ * @type {{init, toggle, isVisible, hide, show, resize}}
+ */
+const SideContainerToggler = {
+ /**
+ * Initialises this toggler by registering the listeners.
+ *
+ * @param eventEmitter
+ */
+ init(eventEmitter) {
+ this.eventEmitter = eventEmitter;
+
+ // Adds a listener for the animation end event that would take care
+ // of hiding all internal containers when the extendedToolbarPanel is
+ // closed.
+ document.getElementById("sideToolbarContainer")
+ .addEventListener("animationend", function(e) {
+ if(e.animationName === "slideOutExt")
+ $("#sideToolbarContainer").children().each(function() {
+ if ($(this).hasClass("show"))
+ SideContainerToggler.hideInnerContainer($(this));
+ });
+ }, false);
+ },
+
+ /**
+ * Toggles the container with the given element id.
+ *
+ * @param {String} elementId the identifier of the container element to
+ * toggle
+ */
+ toggle(elementId) {
+ let elementSelector = $(`#${elementId}`);
+ let isSelectorVisible = elementSelector.hasClass("show");
+
+ if (isSelectorVisible) {
+ this.hide();
+ }
+ else {
+ if (this.isVisible())
+ $("#sideToolbarContainer").children().each(function() {
+ if ($(this).id !== elementId && $(this).hasClass("show"))
+ SideContainerToggler.hideInnerContainer($(this));
+ });
+
+ if (!this.isVisible())
+ this.show();
+
+ this.showInnerContainer(elementSelector);
+ }
+ },
+
+ /**
+ * Returns {true} if the extended toolbar panel is currently visible,
+ * otherwise returns {false}.
+ */
+ isVisible() {
+ return $("#sideToolbarContainer").hasClass("slideInExt");
+ },
+
+ /**
+ * Hides the extended toolbar panel with a slide out animation.
+ */
+ hide() {
+ $("#sideToolbarContainer")
+ .removeClass("slideInExt").addClass("slideOutExt");
+ },
+
+ /**
+ * Shows the extended toolbar panel with a slide in animation.
+ */
+ show() {
+ if (!this.isVisible())
+ $("#sideToolbarContainer")
+ .removeClass("slideOutExt").addClass("slideInExt");
+ },
+
+ hideInnerContainer(containerSelector) {
+ containerSelector.removeClass("show").addClass("hide");
+
+ this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+ containerSelector.attr('id'), false);
+ },
+
+ showInnerContainer(containerSelector) {
+ containerSelector.removeClass("hide").addClass("show");
+
+ this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+ containerSelector.attr('id'), true);
+ },
+
+ /**
+ * TO FIX: do we need to resize the chat?
+ */
+ resize () {
+ //let [width, height] = UIUtil.getSidePanelSize();
+ //Chat.resizeChat(width, height);
+ }
+};
+
+export default SideContainerToggler;
\ No newline at end of file
diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js
index 058343104..713cc1f88 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/modules/UI/side_pannels/chat/Chat.js
@@ -123,7 +123,7 @@ function addSmileys() {
smileysContainer.appendChild(smileyContainer);
}
- $("#chatspace").append(smileysContainer);
+ $("#chat_container").append(smileysContainer);
}
/**
@@ -131,7 +131,7 @@ function addSmileys() {
*/
function resizeChatConversation() {
var msgareaHeight = $('#usermsg').outerHeight();
- var chatspace = $('#chatspace');
+ var chatspace = $('#chat_container');
var width = chatspace.width();
var chat = $('#chatconversation');
var smileys = $('#smileysarea');
@@ -187,7 +187,7 @@ var Chat = {
};
usermsg.autosize({callback: onTextAreaResize});
- $("#chatspace").bind("shown",
+ $("#chat_container").bind("shown",
function () {
unreadMessages = 0;
setVisualNotification(false);
@@ -275,7 +275,8 @@ var Chat = {
* conversation mode or not.
*/
setChatConversationMode (isConversationMode) {
- $('#chatspace').toggleClass('is-conversation-mode', isConversationMode);
+ $('#chat_container')
+ .toggleClass('is-conversation-mode', isConversationMode);
if (isConversationMode) {
$('#usermsg').focus();
}
@@ -285,7 +286,7 @@ var Chat = {
* Resizes the chat area.
*/
resizeChat (width, height) {
- $('#chatspace').width(width).height(height);
+ $('#chat_container').width(width).height(height);
resizeChatConversation();
},
@@ -294,7 +295,8 @@ var Chat = {
* Indicates if the chat is currently visible.
*/
isVisible () {
- return UIUtil.isVisible(document.getElementById("chatspace"));
+ return UIUtil.isVisible(
+ document.getElementById("chat_container"));
},
/**
* Shows and hides the window with the smileys
diff --git a/modules/UI/side_pannels/contactlist/ContactList.js b/modules/UI/side_pannels/contactlist/ContactList.js
index f2e260852..a1f5298fc 100644
--- a/modules/UI/side_pannels/contactlist/ContactList.js
+++ b/modules/UI/side_pannels/contactlist/ContactList.js
@@ -23,11 +23,7 @@ function updateNumberOfParticipants(delta) {
let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts;
$("#numberOfParticipants").text(buttonIndicatorText);
- let showVisualNotification
- = (numberOfContacts === 1) ? false : !ContactList.isVisible();
- ContactList.setVisualNotification(showVisualNotification);
-
- $("#contactlist>div.title").text(
+ $("#contacts_container>div.title").text(
APP.translation.translateString(
"contactlist", {participants: numberOfContacts}
));
@@ -138,23 +134,6 @@ var ContactList = {
}
},
- setVisualNotification (show, stopGlowingIn) {
- let glower = $('#contactListButton');
-
- if (show && !notificationInterval) {
- notificationInterval = window.setInterval(function () {
- glower.toggleClass('active glowing');
- }, 800);
- } else if (!show && notificationInterval) {
- stopGlowing(glower);
- }
- if (stopGlowingIn) {
- setTimeout(function () {
- stopGlowing(glower);
- }, stopGlowingIn);
- }
- },
-
setClickable (id, isClickable) {
getContactEl(id).toggleClass('clickable', isClickable);
},
diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js
index 35b5ae1a0..a28351b51 100644
--- a/modules/UI/side_pannels/settings/SettingsMenu.js
+++ b/modules/UI/side_pannels/settings/SettingsMenu.js
@@ -191,7 +191,7 @@ export default {
* @returns {boolean}
*/
isVisible () {
- return UIUtil.isVisible(document.getElementById("settingsmenu"));
+ return UIUtil.isVisible(document.getElementById("settings_container"));
},
/**
@@ -290,6 +290,6 @@ export default {
$('#devicesOptions').show();
- APP.translation.translateElement($('#settingsmenu option'));
+ APP.translation.translateElement($('#settings_container option'));
}
};
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index e6d691717..bed11792a 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -2,7 +2,7 @@
/* jshint -W101 */
import UIUtil from '../util/UIUtil';
import UIEvents from '../../../service/UI/UIEvents';
-import ExtendedToolbarToggler from "../side_pannels/ExtendedToolbarToggler.js";
+import SideContainerToggler from "../side_pannels/SideContainerToggler";
let roomUrl = null;
let emitter = null;
@@ -208,10 +208,12 @@ const defaultToolbarButtons = {
JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled');
APP.UI.toggleChat();
},
- shortcutDescription: "keyboardShortcuts.toggleChat"
+ shortcutDescription: "keyboardShortcuts.toggleChat",
+ sideContainerId: "chat_container"
},
'contacts': {
- id: '#toolbar_contact_list'
+ id: '#toolbar_contact_list',
+ sideContainerId: "contacts_container"
},
'etherpad': {
id: '#toolbar_button_etherpad'
@@ -220,7 +222,8 @@ const defaultToolbarButtons = {
id: '#toolbar_button_fullScreen'
},
'settings': {
- id: '#toolbar_button_settings'
+ id: '#toolbar_button_settings',
+ sideContainerId: "settings_container"
},
'hangup': {
id: '#toolbar_button_hangup'
@@ -292,6 +295,13 @@ const Toolbar = {
!$(this).prop('disabled') && buttonHandlers[buttonId](event);
})
);
+
+ APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+ function(containerId, isVisible) {
+ console.log("TOGGLED", containerId, isVisible);
+ Toolbar.handleSideToolbarContainerToggled( containerId,
+ isVisible);
+ });
},
/**
* Enables / disables the toolbar.
@@ -534,7 +544,7 @@ const Toolbar = {
return true;
if ($("#bottomToolbar:hover").length > 0
|| $("#extendedToolbar:hover").length > 0
- || ExtendedToolbarToggler.isVisible()) {
+ || SideContainerToggler.isVisible()) {
return true;
}
return false;
@@ -571,6 +581,25 @@ const Toolbar = {
this.toolbarSelector.toggleClass("slideInY");
this.extendedToolbarSelector.toggleClass("slideInX");
+ },
+
+ /**
+ *
+ */
+ 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");
+ }
+ }
+ );
}
};
diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js
index e0fe92a1a..cee869501 100644
--- a/service/UI/UIEvents.js
+++ b/service/UI/UIEvents.js
@@ -68,26 +68,38 @@ export default {
VIDEO_DEVICE_CHANGED: "UI.video_device_changed",
AUDIO_DEVICE_CHANGED: "UI.audio_device_changed",
AUDIO_OUTPUT_DEVICE_CHANGED: "UI.audio_output_device_changed",
+
/**
* Notifies interested listeners that the follow-me feature is enabled or
* disabled.
*/
FOLLOW_ME_ENABLED: "UI.follow_me_enabled",
+
/**
* Notifies that flipX property of the local video is changed.
*/
LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed",
+
// An event which indicates that the resolution of a remote video has
// changed.
RESOLUTION_CHANGED: "UI.resolution_changed",
+
/**
* Notifies that the button "Go to webstore" is pressed on the dialog for
* external extension installation.
*/
OPEN_EXTENSION_STORE: "UI.open_extension_store",
+
/**
* Notifies that the button "Cancel" is pressed on the dialog for
* external extension installation.
*/
- EXTERNAL_INSTALLATION_CANCELED: "UI.external_installation_canceled"
+ EXTERNAL_INSTALLATION_CANCELED: "UI.external_installation_canceled",
+
+ /**
+ * Notifies that the side toolbar container has been toggled. The actual
+ * event must contain the identifier of the container that has been toggled
+ * and information about toggle on or off.
+ */
+ SIDE_TOOLBAR_CONTAINER_TOGGLED: "UI.side_container_toggled"
};