Hide DOM elements using css class

This commit is contained in:
Maxim Voloshin 2016-10-27 17:13:24 +03:00 committed by Ilya Daynatovich
parent d7fc20b607
commit 68ab87cc0d
8 changed files with 47 additions and 97 deletions

View File

@ -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;

View File

@ -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);
}
/**

View File

@ -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

View File

@ -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);
},
/**

View File

@ -417,9 +417,8 @@ Toolbar = {
* @param show <tt>true</tt> to show or <tt>false</tt> 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 <tt>true</tt> 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 <tt>true</tt> 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);
},
/**

View File

@ -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);
}
/**

View File

@ -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);
};
/**

View File

@ -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);
},
/**