Hide DOM elements using css class
This commit is contained in:
parent
d7fc20b607
commit
68ab87cc0d
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue