From 68ab87cc0df7e35d5085b9eefa3cc510df3ce67e Mon Sep 17 00:00:00 2001 From: Maxim Voloshin Date: Thu, 27 Oct 2016 17:13:24 +0300 Subject: [PATCH] Hide DOM elements using css class --- modules/UI/UI.js | 2 +- modules/UI/feedback/Feedback.js | 9 +--- modules/UI/recording/Recording.js | 14 ++--- modules/UI/side_pannels/chat/Chat.js | 6 +-- modules/UI/toolbars/Toolbar.js | 58 ++++++++------------- modules/UI/videolayout/LargeVideoManager.js | 6 +-- modules/UI/videolayout/SmallVideo.js | 41 +++++---------- modules/UI/videolayout/VideoLayout.js | 8 +-- 8 files changed, 47 insertions(+), 97 deletions(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 925be0de5..383b537ba 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -446,7 +446,7 @@ UI.start = function () { $('#notice').css({display: 'block'}); } } else { - $("#mainToolbarContainer").css("display", "none"); + document.querySelector('#mainToolbarContainer').classList.add('hide'); FilmStrip.setupFilmStripOnly(); messageHandler.enableNotifications(false); JitsiPopover.enabled = false; diff --git a/modules/UI/feedback/Feedback.js b/modules/UI/feedback/Feedback.js index d9ce96ed4..37c36c796 100644 --- a/modules/UI/feedback/Feedback.js +++ b/modules/UI/feedback/Feedback.js @@ -7,7 +7,7 @@ import FeedbackWindow from "./FeedbackWindow"; * @private */ function _toggleFeedbackIcon() { - $('#feedbackButtonDiv').toggleClass("hidden"); + document.querySelector('#feedbackButton').classList.toggle('hidden'); } /** @@ -17,12 +17,7 @@ function _toggleFeedbackIcon() { * @private */ function _showFeedbackButton (show) { - var feedbackButton = $("#feedbackButtonDiv"); - - if (show) - feedbackButton.css("display", "block"); - else - feedbackButton.css("display", "none"); + document.querySelector('#feedbackButton').classList.toggle('hide', !show); } /** diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index af44698c8..c31ad939f 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -387,11 +387,9 @@ var Recording = { * @param show {true} to show the recording button, {false} to hide it */ showRecordingButton (show) { - if (_isRecordingButtonEnabled() && show) { - $('#toolbar_button_record').css({display: "inline-block"}); - } else { - $('#toolbar_button_record').css({display: "none"}); - } + var visibility = show && _isRecordingButtonEnabled(); + document.querySelector('#toolbar_button_record') + .classList.toggle('hide', !visibility); }, /** @@ -474,10 +472,8 @@ var Recording = { labelSelector.css({display: "inline-block"}); // Recording spinner - if (recordingState === Status.RETRYING) - $("#recordingSpinner").show(); - else - $("#recordingSpinner").hide(); + document.querySelector('#recordingSpinner').classList + .toggle('show-inline', recordingState === Status.RETRYING); }, // checks whether recording is enabled and whether we have params // to start automatically recording diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js index 60743a87d..7ddbec2b3 100644 --- a/modules/UI/side_pannels/chat/Chat.js +++ b/modules/UI/side_pannels/chat/Chat.js @@ -297,11 +297,7 @@ var Chat = { subject = subject.trim(); } $('#subject').html(linkify(UIUtil.escapeHtml(subject))); - if (subject) { - $("#subject").css({display: "block"}); - } else { - $("#subject").css({display: "none"}); - } + document.querySelector('#subject').classList.toggle('hide', !subject); }, /** diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index f7d4c4c5f..97a92d545 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -417,9 +417,8 @@ Toolbar = { * @param show true to show or false to hide */ showAuthenticateButton (show) { - let display = show ? 'block' : 'none'; - - $('#authenticationContainer').css({display}); + document.querySelector('#authenticationContainer') + .classList.toggle('hide', !show); }, showEtherpadButton () { @@ -430,14 +429,12 @@ Toolbar = { // Shows or hides the 'shared video' button. showSharedVideoButton () { - let $element = $('#toolbar_button_sharedvideo'); - if (UIUtil.isButtonEnabled('sharedvideo') - && config.disableThirdPartyRequests !== true) { - $element.css({display: "inline-block"}); - UIUtil.setTooltip($element.get(0), 'toolbar.sharedvideo', 'right'); - } else { - $('#toolbar_button_sharedvideo').css({display: "none"}); + if (!UIUtil.isButtonEnabled('sharedvideo')) { + return; } + var el = document.querySelector('#toolbar_button_sharedvideo'); + UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right'); + el.classList.toggle('hide', config.disableThirdPartyRequests === true); }, // checks whether desktop sharing is enabled and whether @@ -451,21 +448,20 @@ Toolbar = { // 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"}); + if (!UIUtil.isButtonEnabled('sip')) { + return; } + document.querySelector('#toolbar_button_sip').classList + .toggle('hide', !(show && APP.conference.sipGatewayEnabled())); }, // 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"}); + if (!UIUtil.isButtonEnabled('dialpad')) { + return; } + document.querySelector('#toolbar_button_dialpad') + .classList.toggle('hide', !show); }, /** @@ -474,14 +470,8 @@ Toolbar = { */ setAuthenticatedIdentity (authIdentity) { let selector = $('#toolbar_auth_identity'); - - if (authIdentity) { - selector.css({display: "list-item"}); - selector.text(authIdentity); - } else { - selector.css({display: "none"}); - selector.text(''); - } + selector.text(authIdentity ? authIdentity : ''); + selector.get(0).classList.toggle('hide', !authIdentity); }, /** @@ -489,11 +479,8 @@ Toolbar = { * @param show true to show */ showLoginButton (show) { - if (show) { - $('#toolbar_button_login').css({display: "list-item"}); - } else { - $('#toolbar_button_login').css({display: "none"}); - } + document.querySelector('#toolbar_button_login') + .classList.toggle('hide', !show); }, /** @@ -501,11 +488,8 @@ Toolbar = { * @param show true to show */ showLogoutButton (show) { - if (show) { - $('#toolbar_button_logout').css({display: "list-item"}); - } else { - $('#toolbar_button_logout').css({display: "none"}); - } + document.querySelector('#toolbar_button_logout') + .classList.toggle('hide', !show); }, /** diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index e41d87b40..e8e934a4f 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/modules/UI/videolayout/LargeVideoManager.js @@ -333,13 +333,13 @@ export default class LargeVideoManager { } if (show) { - $('#localConnectionMessage').css({display: "block"}); // Avatar message conflicts with 'videoConnectionMessage', // so it must be hidden this.showRemoteConnectionMessage(false); - } else { - $('#localConnectionMessage').css({display: "none"}); } + + document.querySelector('#localConnectionMessage') + .classList.toggle('hide', !show); } /** diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index c58f83f25..a9764c467 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -216,15 +216,7 @@ SmallVideo.prototype.hideIndicator = function () { * or hidden */ SmallVideo.prototype.showAudioIndicator = function(isMuted) { - - var audioMutedIndicator = this.getAudioMutedIndicator(); - - if (!isMuted) { - audioMutedIndicator.hide(); - } - else { - audioMutedIndicator.show(); - } + this.getAudioMutedIndicator().classList.toggle('hide', !isMuted); this.isAudioMuted = isMuted; }; @@ -235,9 +227,10 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) { * @returns {jQuery|HTMLElement} the audio muted indicator */ SmallVideo.prototype.getAudioMutedIndicator = function () { - var audioMutedSpan = $('#' + this.videoSpanId + ' .audioMuted'); + var selector = '#' + this.videoSpanId + ' .audioMuted'; + var audioMutedSpan = document.querySelector(selector); - if (audioMutedSpan.length) { + if (audioMutedSpan) { return audioMutedSpan; } @@ -257,7 +250,7 @@ SmallVideo.prototype.getAudioMutedIndicator = function () { mutedIndicator.className = 'icon-mic-disabled'; audioMutedSpan.appendChild(mutedIndicator); - return $('#' + this.videoSpanId + ' .audioMuted'); + return audioMutedSpan; }; /** @@ -270,10 +263,7 @@ SmallVideo.prototype.getAudioMutedIndicator = function () { SmallVideo.prototype.setVideoMutedView = function(isMuted) { this.isVideoMuted = isMuted; this.updateView(); - - var videoMutedSpan = this.getVideoMutedIndicator(); - - videoMutedSpan[isMuted ? 'show' : 'hide'](); + this.getVideoMutedIndicator().classList.toggle('hide', !isMuted); }; /** @@ -283,9 +273,10 @@ SmallVideo.prototype.setVideoMutedView = function(isMuted) { * @returns {jQuery|HTMLElement} the video muted indicator */ SmallVideo.prototype.getVideoMutedIndicator = function () { - var videoMutedSpan = $('#' + this.videoSpanId + ' .videoMuted'); + var selector = '#' + this.videoSpanId + ' .videoMuted'; + var videoMutedSpan = document.querySelector(selector); - if (videoMutedSpan.length) { + if (videoMutedSpan) { return videoMutedSpan; } @@ -305,7 +296,7 @@ SmallVideo.prototype.getVideoMutedIndicator = function () { videoMutedSpan.appendChild(mutedIndicator); - return $('#' + this.videoSpanId + ' .videoMuted'); + return videoMutedSpan; }; /** @@ -574,11 +565,7 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) { tooltip: 'speaker' }); - if (show) { - indicatorSpan.classList.add('show'); - } else { - indicatorSpan.classList.remove('show'); - } + indicatorSpan.classList.toggle('show', show); }; /** @@ -602,11 +589,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) { tooltip: 'raisedHand' }); - if (show) { - indicatorSpan.classList.add('show'); - } else { - indicatorSpan.classList.remove('show'); - } + indicatorSpan.classList.toggle('show', show); }; /** diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 289277051..5e3abb19b 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -1136,12 +1136,8 @@ var VideoLayout = { * video stream is currently HD. */ updateResolutionLabel(isResolutionHD) { - let videoResolutionLabel = $("#videoResolutionLabel"); - - if (isResolutionHD && !videoResolutionLabel.is(":visible")) - videoResolutionLabel.css({display: "block"}); - else if (!isResolutionHD && videoResolutionLabel.is(":visible")) - videoResolutionLabel.css({display: "none"}); + document.querySelector('#videoResolutionLabel') + .classList.toggle('show', isResolutionHD); }, /**