From e23dd62d86f78e2392a63fb13610c5d552b23ee8 Mon Sep 17 00:00:00 2001 From: isymchych Date: Thu, 10 Dec 2015 18:36:03 +0200 Subject: [PATCH] refactor BottomToolbar --- modules/UI/UI.js | 13 ++-- modules/UI/toolbars/BottomToolbar.js | 92 +++++++++++---------------- modules/UI/toolbars/Toolbar.js | 52 +++++++-------- modules/UI/videolayout/VideoLayout.js | 7 +- service/UI/UIEvents.js | 9 +-- 5 files changed, 76 insertions(+), 97 deletions(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 08d6b05db..33fe01259 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -188,10 +188,6 @@ function registerListeners() { AudioLevels.init(); }); - UI.addListener(UIEvents.FILM_STRIP_TOGGLED, function (isToggled) { - VideoLayout.onFilmStripToggled(isToggled); - }); - UI.addListener(UIEvents.EMAIL_CHANGED, function (email) { UI.setUserAvatar(APP.conference.localId, email); }); @@ -215,6 +211,10 @@ function registerListeners() { UI.addListener(UIEvents.TOGGLE_SETTINGS, function () { PanelToggler.toggleSettingsMenu(); }); + + UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList); + + UI.addListener(UIEvents.TOGGLE_FILM_STRIP, UI.toggleFilmStrip); } function bindEvents() { @@ -446,14 +446,15 @@ UI.getSettings = function () { UI.toggleFilmStrip = function () { BottomToolbar.toggleFilmStrip(); + VideoLayout.updateLargeVideoSize(); }; UI.toggleChat = function () { - BottomToolbar.toggleChat(); + PanelToggler.toggleChat(); }; UI.toggleContactList = function () { - BottomToolbar.toggleContactList(); + PanelToggler.toggleContactList(); }; UI.inputDisplayNameHandler = function (value) { diff --git a/modules/UI/toolbars/BottomToolbar.js b/modules/UI/toolbars/BottomToolbar.js index 747688f83..a937c3fbf 100644 --- a/modules/UI/toolbars/BottomToolbar.js +++ b/modules/UI/toolbars/BottomToolbar.js @@ -1,66 +1,48 @@ /* global $ */ -var PanelToggler = require("../side_pannels/SidePanelToggler"); -var UIUtil = require("../util/UIUtil"); -var AnalyticsAdapter = require("../../statistics/AnalyticsAdapter"); -var UIEvents = require("../../../service/UI/UIEvents"); +import UIUtil from '../util/UIUtil'; +import UIEvents from '../../../service/UI/UIEvents'; +import AnalyticsAdapter from '../../statistics/AnalyticsAdapter'; -var eventEmitter = null; - -var buttonHandlers = { - "bottom_toolbar_contact_list": function () { - AnalyticsAdapter.sendEvent('bottomtoolbar.contacts.toggled'); - BottomToolbar.toggleContactList(); - }, - "bottom_toolbar_film_strip": function () { - AnalyticsAdapter.sendEvent('bottomtoolbar.filmstrip.toggled'); - BottomToolbar.toggleFilmStrip(); - }, - "bottom_toolbar_chat": function () { - AnalyticsAdapter.sendEvent('bottomtoolbar.chat.toggled'); - BottomToolbar.toggleChat(); - } -}; - - -var defaultBottomToolbarButtons = { - 'chat': '#bottom_toolbar_chat', - 'contacts': '#bottom_toolbar_contact_list', +const defaultBottomToolbarButtons = { + 'chat': '#bottom_toolbar_chat', + 'contacts': '#bottom_toolbar_contact_list', 'filmstrip': '#bottom_toolbar_film_strip' }; +$(document).bind("remotevideo.resized", function (event, width, height) { + let toolbar = $('#bottomToolbar'); + let bottom = (height - toolbar.outerHeight())/2 + 18; -var BottomToolbar = (function (my) { - my.init = function (emitter) { - eventEmitter = emitter; + toolbar.css({bottom}); +}); + +const BottomToolbar = { + init (emitter) { UIUtil.hideDisabledButtons(defaultBottomToolbarButtons); - for(var k in buttonHandlers) - $("#" + k).click(buttonHandlers[k]); - }; + const buttonHandlers = { + "bottom_toolbar_contact_list": function () { + AnalyticsAdapter.sendEvent('bottomtoolbar.contacts.toggled'); + emitter.emit(UIEvents.TOGGLE_CONTACT_LIST); + }, + "bottom_toolbar_film_strip": function () { + AnalyticsAdapter.sendEvent('bottomtoolbar.filmstrip.toggled'); + emitter.emit(UIEvents.TOGGLE_FILM_STRIP); + }, + "bottom_toolbar_chat": function () { + AnalyticsAdapter.sendEvent('bottomtoolbar.chat.toggled'); + emitter.emit(UIEvents.TOGGLE_CHAT); + } + }; - my.toggleChat = function() { - PanelToggler.toggleChat(); - }; + Object.keys(buttonHandlers).forEach( + buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId]) + ); + }, - my.toggleContactList = function() { - PanelToggler.toggleContactList(); - }; + toggleFilmStrip () { + $("#remoteVideos").toggleClass("hidden"); + } +}; - my.toggleFilmStrip = function() { - var filmstrip = $("#remoteVideos"); - filmstrip.toggleClass("hidden"); - - eventEmitter.emit( UIEvents.FILM_STRIP_TOGGLED, - filmstrip.hasClass("hidden")); - }; - - $(document).bind("remotevideo.resized", function (event, width, height) { - var bottom = (height - $('#bottomToolbar').outerHeight())/2 + 18; - - $('#bottomToolbar').css({bottom: bottom + 'px'}); - }); - - return my; -}(BottomToolbar || {})); - -module.exports = BottomToolbar; +export default BottomToolbar; diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 021911d6c..6ab4d85da 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -1,20 +1,20 @@ /* global APP, $, config, interfaceConfig */ /* jshint -W101 */ -var messageHandler = require("../util/MessageHandler"); -var UIUtil = require("../util/UIUtil"); -var AnalyticsAdapter = require("../../statistics/AnalyticsAdapter"); -var UIEvents = require("../../../service/UI/UIEvents"); +import messageHandler from '../util/MessageHandler'; +import UIUtil from '../util/UIUtil'; +import AnalyticsAdapter from '../../statistics/AnalyticsAdapter'; +import UIEvents from '../../../service/UI/UIEvents'; -var roomUrl = null; -var recordingToaster = null; -var emitter = null; +let roomUrl = null; +let recordingToaster = null; +let emitter = null; /** * Opens the invite link dialog. */ function openLinkDialog () { - var inviteAttributes; + let inviteAttributes; if (roomUrl === null) { inviteAttributes = 'data-i18n="[value]roomUrlDefaultMsg" value="' + @@ -181,18 +181,18 @@ const buttonHandlers = { ); } }; -var defaultToolbarButtons = { - 'microphone': '#toolbar_button_mute', - 'camera': '#toolbar_button_camera', - 'desktop': '#toolbar_button_desktopsharing', - 'security': '#toolbar_button_security', - 'invite': '#toolbar_button_link', - 'chat': '#toolbar_button_chat', - 'prezi': '#toolbar_button_prezi', - 'etherpad': '#toolbar_button_etherpad', - 'fullscreen': '#toolbar_button_fullScreen', - 'settings': '#toolbar_button_settings', - 'hangup': '#toolbar_button_hangup' +const defaultToolbarButtons = { + 'microphone': '#toolbar_button_mute', + 'camera': '#toolbar_button_camera', + 'desktop': '#toolbar_button_desktopsharing', + 'security': '#toolbar_button_security', + 'invite': '#toolbar_button_link', + 'chat': '#toolbar_button_chat', + 'prezi': '#toolbar_button_prezi', + 'etherpad': '#toolbar_button_etherpad', + 'fullscreen': '#toolbar_button_fullScreen', + 'settings': '#toolbar_button_settings', + 'hangup': '#toolbar_button_hangup' }; function dialpadButtonClicked() { @@ -222,10 +222,12 @@ function showSipNumberInput () { const Toolbar = { init (eventEmitter) { emitter = eventEmitter; + UIUtil.hideDisabledButtons(defaultToolbarButtons); - for(var k in buttonHandlers) - $("#" + k).click(buttonHandlers[k]); + Object.keys(buttonHandlers).forEach( + buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId]) + ); }, /** @@ -235,7 +237,7 @@ const Toolbar = { roomUrl = newRoomUrl; // If the invite dialog has been already opened we update the information. - var inviteLink = document.getElementById('inviteLinkRef'); + let inviteLink = document.getElementById('inviteLinkRef'); if (inviteLink) { inviteLink.value = roomUrl; inviteLink.select(); @@ -333,7 +335,7 @@ const Toolbar = { */ setAuthenticatedIdentity (authIdentity) { if (authIdentity) { - var selector = $('#toolbar_auth_identity'); + let selector = $('#toolbar_auth_identity'); selector.css({display: "list-item"}); selector.text(authIdentity); } else { @@ -371,7 +373,7 @@ const Toolbar = { * @param active the state of the desktop streaming. */ changeDesktopSharingButtonState (active) { - var button = $("#toolbar_button_desktopsharing"); + let button = $("#toolbar_button_desktopsharing"); if (active) { button.addClass("glow"); } else { diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 3233a757e..d989c8450 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -900,12 +900,9 @@ var VideoLayout = (function (my) { }; /** - * Updates the video size and position when the film strip is toggled. - * - * @param isToggled indicates if the film strip is toggled or not. True - * would mean that the film strip is hidden, false would mean it's shown + * Updates the video size and position. */ - my.onFilmStripToggled = function(isToggled) { + my.updateLargeVideoSize = function () { LargeVideo.updateVideoSizeAndPosition(); LargeVideo.position(null, null, null, null, true); }; diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index 00ac945d0..aa30d6181 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -29,12 +29,9 @@ export default { AUTH_CLICKED: "UI.auth_clicked", TOGGLE_CHAT: "UI.toggle_chat", TOGGLE_SETTINGS: "UI.toggle_settings", + TOGGLE_CONTACT_LIST: "UI.toggle_contact_list", + TOGGLE_FILM_STRIP: "UI.toggle_film_strip", HANGUP: "UI.hangup", LOGOUT: "UI.logout", - RECORDING_TOGGLE: "UI.recording_toggle", - /** - * Notifies interested parties when the film strip (remote video's panel) - * is hidden (toggled) or shown (un-toggled). - */ - FILM_STRIP_TOGGLED: "UI.filmstrip_toggled" + RECORDING_TOGGLE: "UI.recording_toggle" };