diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 1e1b9581f..9b4b20121 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -443,10 +443,10 @@ UI.start = function () { // Display notice message at the top of the toolbar if (config.noticeMessage) { $('#noticeText').text(config.noticeMessage); - UIUtil.showElement('notice'); + UIUtil.setVisible('notice', true); } } else { - UIUtil.hideElement('mainToolbarContainer'); + UIUtil.setVisible('mainToolbarContainer', false); FilmStrip.setupFilmStripOnly(); messageHandler.enableNotifications(false); JitsiPopover.enabled = false; diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index c9e17b037..77b86f7ce 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -392,7 +392,7 @@ var Recording = { let shouldShow = show && _isRecordingButtonEnabled(); let id = 'toolbar_button_record'; - UIUtil.showOrHideElement(id, shouldShow); + UIUtil.setVisible(id, shouldShow); }, /** @@ -476,7 +476,7 @@ var Recording = { // Recording spinner let spinnerId = 'recordingSpinner'; - UIUtil.showOrHideElement( + UIUtil.setVisible( spinnerId, recordingState === Status.RETRYING); }, // checks whether recording is enabled and whether we have params diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js index f83aa5b7a..5c1f0746f 100644 --- a/modules/UI/side_pannels/chat/Chat.js +++ b/modules/UI/side_pannels/chat/Chat.js @@ -306,18 +306,14 @@ var Chat = { * @param subject the subject */ setSubject (subject) { - let toggleFunction; if (subject) { subject = subject.trim(); } - toggleFunction = subject ? UIUtil.showElement : UIUtil.hideElement; - toggleFunction = toggleFunction.bind(UIUtil); - let subjectId = 'subject'; let html = linkify(UIUtil.escapeHtml(subject)); $(`#${subjectId}`).html(html); - toggleFunction(subjectId); + UIUtil.setVisible(subjectId, subject && subject.length > 0); }, /** diff --git a/modules/UI/side_pannels/profile/Profile.js b/modules/UI/side_pannels/profile/Profile.js index 67a7f4df9..45c1a8caa 100644 --- a/modules/UI/side_pannels/profile/Profile.js +++ b/modules/UI/side_pannels/profile/Profile.js @@ -128,7 +128,7 @@ export default { */ showAuthenticationButtons (show) { let id = 'profile_auth_container'; - UIUtil.showOrHideElement(id, show); + UIUtil.setVisible(id, show); }, /** @@ -138,7 +138,7 @@ export default { showLoginButton (show) { let id = 'profile_button_login'; - UIUtil.showOrHideElement(id, show); + UIUtil.setVisible(id, show); }, /** @@ -148,7 +148,7 @@ export default { showLogoutButton (show) { let id = 'profile_button_logout'; - UIUtil.showOrHideElement(id, show); + UIUtil.setVisible(id, show); }, /** @@ -158,7 +158,7 @@ export default { setAuthenticatedIdentity (authIdentity) { let id = 'profile_auth_identity'; - UIUtil.showOrHideElement(id, !!authIdentity); + UIUtil.setVisible(id, !!authIdentity); $(`#${id}`).text(authIdentity ? authIdentity : ''); } diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js index a523b8f62..d5176661e 100644 --- a/modules/UI/side_pannels/settings/SettingsMenu.js +++ b/modules/UI/side_pannels/settings/SettingsMenu.js @@ -166,7 +166,7 @@ export default { APP.translation.addLanguageChangedListener( lng => selectInput[0].dataset.i18n = `languages:${lng}`); - UIUtil.showElement(wrapperId); + UIUtil.setVisible(wrapperId, true); } // DEVICES LIST if (UIUtil.isSettingEnabled('devices')) { @@ -181,9 +181,9 @@ export default { }); // Only show the subtitle if this isn't the only setting section. if (interfaceConfig.SETTINGS_SECTIONS.length > 1) - UIUtil.showElement("deviceOptionsTitle"); + UIUtil.setVisible("deviceOptionsTitle", true); - UIUtil.showElement(wrapperId); + UIUtil.setVisible(wrapperId, true); } // MODERATOR if (UIUtil.isSettingEnabled('moderator')) { @@ -208,7 +208,7 @@ export default { emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled); }); - UIUtil.showElement(wrapperId); + UIUtil.setVisible(wrapperId, true); } }, @@ -245,15 +245,15 @@ export default { // Only show the subtitle if this isn't the only setting section. if (!$("#moderatorOptionsTitle").is(":visible") && interfaceConfig.SETTINGS_SECTIONS.length > 1) - UIUtil.showElement("moderatorOptionsTitle"); + UIUtil.setVisible("moderatorOptionsTitle", true); - UIUtil.showElement("startMutedOptions"); + UIUtil.setVisible("startMutedOptions", true); } else { // Only show the subtitle if this isn't the only setting section. if ($("#moderatorOptionsTitle").is(":visible")) - UIUtil.hideElement("moderatorOptionsTitle"); + UIUtil.setVisible("moderatorOptionsTitle", false); - UIUtil.hideElement("startMutedOptions"); + UIUtil.setVisible("startMutedOptions", false); } }, @@ -268,7 +268,7 @@ export default { * @param {boolean} show {true} to show those options, {false} to hide them */ showFollowMeOptions (show) { - UIUtil.showOrHideElement( + UIUtil.setVisible( "followMeOptions", show && UIUtil.isSettingEnabled('moderator')); }, diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 0b5e37d5c..778c7ebcb 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -398,7 +398,7 @@ Toolbar = { let el = document.getElementById(id); UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right'); } - UIUtil.showOrHideElement(id, shouldShow); + UIUtil.setVisible(id, shouldShow); }, // checks whether desktop sharing is enabled and whether @@ -416,7 +416,7 @@ Toolbar = { && UIUtil.isButtonEnabled('sip') && show; let id = 'toolbar_button_sip'; - UIUtil.showOrHideElement(id, shouldShow); + UIUtil.setVisible(id, shouldShow); }, // Shows or hides the dialpad button @@ -424,7 +424,7 @@ Toolbar = { let shouldShow = UIUtil.isButtonEnabled('dialpad') && show; let id = 'toolbar_button_dialpad'; - UIUtil.showOrHideElement(id, shouldShow); + UIUtil.setVisible(id, shouldShow); }, /** diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index ce3617764..e5af37423 100644 --- a/modules/UI/util/UIUtil.js +++ b/modules/UI/util/UIUtil.js @@ -240,52 +240,13 @@ const IndicatorFontSizes = { }, /** - * Shows the element given by id. - * - * @param {String} the identifier of the element to show - */ - showElement(id) { - let element; - if (id instanceof HTMLElement) { - element = id; - } else { - element = document.getElementById(id); - } - - if (!element) { - return; - } - - if(element.classList.contains('hide')) { - element.classList.remove('hide'); - } - - let type = this._getElementDefaultDisplay(element.tagName); - let className = SHOW_CLASSES[type]; - element.classList.add(className); - }, - - /** - * Shows or hides the element given (optionally by id). + * Shows / hides the element given by id. * * @param {string|HTMLElement} idOrElement the identifier or the element * to show/hide * @param {boolean} show true to show or false to hide */ - showOrHideElement(idOrElement, show) { - if (show) { - this.showElement(idOrElement); - } else { - this.hideElement(idOrElement); - } - }, - - /** - * Hides the element given by id. - * - * @param {String} the identifier of the element to hide - */ - hideElement(id) { + setVisible(id, visible) { let element; if (id instanceof HTMLElement) { element = id; @@ -297,14 +258,20 @@ const IndicatorFontSizes = { return; } + if (!visible) + element.classList.add('hide'); + else if (element.classList.contains('hide')) { + element.classList.remove('hide'); + } + let type = this._getElementDefaultDisplay(element.tagName); let className = SHOW_CLASSES[type]; - if(element.classList.contains(className)) { - element.classList.remove(className); + if (visible) { + element.classList.add(className); } - - element.classList.add('hide'); + else if (element.classList.contains(className)) + element.classList.remove(className); }, /** @@ -326,12 +293,13 @@ const IndicatorFontSizes = { /** * Shows / hides the element with the given jQuery selector. * - * @param {jQuery} selector the jQuery selector of the element to show/hide + * @param {jQuery} jquerySelector the jQuery selector of the element to + * show / shide * @param {boolean} isVisible */ - setVisibility(selector, isVisible) { - if (selector && selector.length > 0) { - selector.css("visibility", isVisible ? "visible" : "hidden"); + setVisibleBySelector(jquerySelector, isVisible) { + if (jquerySelector && jquerySelector.length > 0) { + jquerySelector.css("visibility", isVisible ? "visible" : "hidden"); } }, diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index 9e9f09bc3..50035dc4d 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/modules/UI/videolayout/LargeVideoManager.js @@ -334,7 +334,7 @@ export default class LargeVideoManager { let id = 'localConnectionMessage'; - UIUtil.showOrHideElement(id, show); + UIUtil.setVisible(id, show); if (show) { // Avatar message conflicts with 'videoConnectionMessage', diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 3a816f890..4e38f8a39 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -218,7 +218,7 @@ SmallVideo.prototype.hideIndicator = function () { SmallVideo.prototype.showAudioIndicator = function (isMuted) { let mutedIndicator = this.getAudioMutedIndicator(); - UIUtil.showOrHideElement(mutedIndicator, isMuted); + UIUtil.setVisible(mutedIndicator, isMuted); this.isAudioMuted = isMuted; }; @@ -268,7 +268,7 @@ SmallVideo.prototype.setVideoMutedView = function(isMuted) { let element = this.getVideoMutedIndicator(); - UIUtil.showOrHideElement(element, isMuted); + UIUtil.setVisible(element, isMuted); }; /** @@ -505,24 +505,24 @@ SmallVideo.prototype.updateView = function () { // Determine whether video, avatar or blackness should be displayed let displayMode = this.selectDisplayMode(); // Show/hide video. - UIUtil.setVisibility( this.selectVideoElement(), - (displayMode === DISPLAY_VIDEO + UIUtil.setVisibleBySelector(this.selectVideoElement(), + (displayMode === DISPLAY_VIDEO || displayMode === DISPLAY_VIDEO_WITH_NAME)); // Show/hide the avatar. - UIUtil.setVisibility( this.$avatar(), - (displayMode === DISPLAY_AVATAR + UIUtil.setVisibleBySelector(this.$avatar(), + (displayMode === DISPLAY_AVATAR || displayMode === DISPLAY_AVATAR_WITH_NAME)); // Show/hide the display name. - UIUtil.setVisibility( this.$displayName(), - !this.hideDisplayName - && (displayMode === DISPLAY_BLACKNESS_WITH_NAME + UIUtil.setVisibleBySelector(this.$displayName(), + !this.hideDisplayName + && (displayMode === DISPLAY_BLACKNESS_WITH_NAME || displayMode === DISPLAY_VIDEO_WITH_NAME || displayMode === DISPLAY_AVATAR_WITH_NAME)); // show hide overlay when there is a video or avatar under // the display name - UIUtil.setVisibility( $('#' + this.videoSpanId + UIUtil.setVisibleBySelector($('#' + this.videoSpanId + ' .videocontainer__hoverOverlay'), - (displayMode === DISPLAY_AVATAR_WITH_NAME + (displayMode === DISPLAY_AVATAR_WITH_NAME || displayMode === DISPLAY_VIDEO_WITH_NAME)); }; @@ -570,7 +570,7 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) { tooltip: 'speaker' }); - UIUtil.showOrHideElement(indicatorSpan, show); + UIUtil.setVisible(indicatorSpan, show); }; /** @@ -594,7 +594,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) { tooltip: 'raisedHand' }); - UIUtil.showOrHideElement(indicatorSpan, show); + UIUtil.setVisible(indicatorSpan, show); }; /** diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 67c5faa00..eb4f8ff83 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -1144,7 +1144,7 @@ var VideoLayout = { updateResolutionLabel(isResolutionHD) { let id = 'videoResolutionLabel'; - UIUtil.showOrHideElement(id, isResolutionHD); + UIUtil.setVisible(id, isResolutionHD); }, /**