haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(UIUtils): merges show and hide functions and cleans visibility setting

This commit is contained in:
yanas 2016-11-29 15:07:18 -06:00
parent 0238a10a4b
commit 0f2ba1cefe
10 changed files with 53 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/UI/UI.js
View File

@ -443,10 +443,10 @@ UI.start = function () {
// Display notice message at the top of the toolbar // Display notice message at the top of the toolbar
if (config.noticeMessage) { if (config.noticeMessage) {
$('#noticeText').text(config.noticeMessage); $('#noticeText').text(config.noticeMessage);
UIUtil.showElement('notice'); UIUtil.setVisible('notice', true);
} }
} else { } else {
UIUtil.hideElement('mainToolbarContainer'); UIUtil.setVisible('mainToolbarContainer', false);
FilmStrip.setupFilmStripOnly(); FilmStrip.setupFilmStripOnly();
messageHandler.enableNotifications(false); messageHandler.enableNotifications(false);
JitsiPopover.enabled = false; JitsiPopover.enabled = false;

4
modules/UI/recording/Recording.js
View File

@ -392,7 +392,7 @@ var Recording = {
let shouldShow = show && _isRecordingButtonEnabled(); let shouldShow = show && _isRecordingButtonEnabled();
let id = 'toolbar_button_record'; let id = 'toolbar_button_record';
UIUtil.showOrHideElement(id, shouldShow); UIUtil.setVisible(id, shouldShow);
}, },
/** /**
@ -476,7 +476,7 @@ var Recording = {
// Recording spinner // Recording spinner
let spinnerId = 'recordingSpinner'; let spinnerId = 'recordingSpinner';
UIUtil.showOrHideElement( UIUtil.setVisible(
spinnerId, recordingState === Status.RETRYING); spinnerId, recordingState === Status.RETRYING);
}, },
// checks whether recording is enabled and whether we have params // checks whether recording is enabled and whether we have params

6
modules/UI/side_pannels/chat/Chat.js
View File

@ -306,18 +306,14 @@ var Chat = {
* @param subject the subject * @param subject the subject
*/ */
setSubject (subject) { setSubject (subject) {
let toggleFunction;
if (subject) { if (subject) {
subject = subject.trim(); subject = subject.trim();
} }
toggleFunction = subject ? UIUtil.showElement : UIUtil.hideElement;
toggleFunction = toggleFunction.bind(UIUtil);
let subjectId = 'subject'; let subjectId = 'subject';
let html = linkify(UIUtil.escapeHtml(subject)); let html = linkify(UIUtil.escapeHtml(subject));
$(`#${subjectId}`).html(html); $(`#${subjectId}`).html(html);
toggleFunction(subjectId); UIUtil.setVisible(subjectId, subject && subject.length > 0);
}, },
/** /**

8
modules/UI/side_pannels/profile/Profile.js
View File

@ -128,7 +128,7 @@ export default {
*/ */
showAuthenticationButtons (show) { showAuthenticationButtons (show) {
let id = 'profile_auth_container'; let id = 'profile_auth_container';
UIUtil.showOrHideElement(id, show); UIUtil.setVisible(id, show);
}, },
/** /**
@ -138,7 +138,7 @@ export default {
showLoginButton (show) { showLoginButton (show) {
let id = 'profile_button_login'; let id = 'profile_button_login';
UIUtil.showOrHideElement(id, show); UIUtil.setVisible(id, show);
}, },
/** /**
@ -148,7 +148,7 @@ export default {
showLogoutButton (show) { showLogoutButton (show) {
let id = 'profile_button_logout'; let id = 'profile_button_logout';
UIUtil.showOrHideElement(id, show); UIUtil.setVisible(id, show);
}, },
/** /**
@ -158,7 +158,7 @@ export default {
setAuthenticatedIdentity (authIdentity) { setAuthenticatedIdentity (authIdentity) {
let id = 'profile_auth_identity'; let id = 'profile_auth_identity';
UIUtil.showOrHideElement(id, !!authIdentity); UIUtil.setVisible(id, !!authIdentity);
$(`#${id}`).text(authIdentity ? authIdentity : ''); $(`#${id}`).text(authIdentity ? authIdentity : '');
} }

18
modules/UI/side_pannels/settings/SettingsMenu.js
View File

@ -166,7 +166,7 @@ export default {
APP.translation.addLanguageChangedListener( APP.translation.addLanguageChangedListener(
lng => selectInput[0].dataset.i18n = `languages:${lng}`); lng => selectInput[0].dataset.i18n = `languages:${lng}`);
UIUtil.showElement(wrapperId); UIUtil.setVisible(wrapperId, true);
} }
// DEVICES LIST // DEVICES LIST
if (UIUtil.isSettingEnabled('devices')) { if (UIUtil.isSettingEnabled('devices')) {
@ -181,9 +181,9 @@ export default {
}); });
// Only show the subtitle if this isn't the only setting section. // Only show the subtitle if this isn't the only setting section.
if (interfaceConfig.SETTINGS_SECTIONS.length > 1) if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
UIUtil.showElement("deviceOptionsTitle"); UIUtil.setVisible("deviceOptionsTitle", true);
UIUtil.showElement(wrapperId); UIUtil.setVisible(wrapperId, true);
} }
// MODERATOR // MODERATOR
if (UIUtil.isSettingEnabled('moderator')) { if (UIUtil.isSettingEnabled('moderator')) {
@ -208,7 +208,7 @@ export default {
emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled); 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. // Only show the subtitle if this isn't the only setting section.
if (!$("#moderatorOptionsTitle").is(":visible") if (!$("#moderatorOptionsTitle").is(":visible")
&& interfaceConfig.SETTINGS_SECTIONS.length > 1) && interfaceConfig.SETTINGS_SECTIONS.length > 1)
UIUtil.showElement("moderatorOptionsTitle"); UIUtil.setVisible("moderatorOptionsTitle", true);
UIUtil.showElement("startMutedOptions"); UIUtil.setVisible("startMutedOptions", true);
} else { } else {
// Only show the subtitle if this isn't the only setting section. // Only show the subtitle if this isn't the only setting section.
if ($("#moderatorOptionsTitle").is(":visible")) 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 * @param {boolean} show {true} to show those options, {false} to hide them
*/ */
showFollowMeOptions (show) { showFollowMeOptions (show) {
UIUtil.showOrHideElement( UIUtil.setVisible(
"followMeOptions", "followMeOptions",
show && UIUtil.isSettingEnabled('moderator')); show && UIUtil.isSettingEnabled('moderator'));
}, },

6
modules/UI/toolbars/Toolbar.js
View File

@ -398,7 +398,7 @@ Toolbar = {
let el = document.getElementById(id); let el = document.getElementById(id);
UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right'); UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
} }
UIUtil.showOrHideElement(id, shouldShow); UIUtil.setVisible(id, shouldShow);
}, },
// checks whether desktop sharing is enabled and whether // checks whether desktop sharing is enabled and whether
@ -416,7 +416,7 @@ Toolbar = {
&& UIUtil.isButtonEnabled('sip') && show; && UIUtil.isButtonEnabled('sip') && show;
let id = 'toolbar_button_sip'; let id = 'toolbar_button_sip';
UIUtil.showOrHideElement(id, shouldShow); UIUtil.setVisible(id, shouldShow);
}, },
// Shows or hides the dialpad button // Shows or hides the dialpad button
@ -424,7 +424,7 @@ Toolbar = {
let shouldShow = UIUtil.isButtonEnabled('dialpad') && show; let shouldShow = UIUtil.isButtonEnabled('dialpad') && show;
let id = 'toolbar_button_dialpad'; let id = 'toolbar_button_dialpad';
UIUtil.showOrHideElement(id, shouldShow); UIUtil.setVisible(id, shouldShow);
}, },
/** /**

66
modules/UI/util/UIUtil.js
View File

@ -240,52 +240,13 @@ const IndicatorFontSizes = {
}, },
/** /**
* Shows the element given by id. * Shows / hides 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).
* *
* @param {string|HTMLElement} idOrElement the identifier or the element * @param {string|HTMLElement} idOrElement the identifier or the element
* to show/hide * to show/hide
* @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
*/ */
showOrHideElement(idOrElement, show) { setVisible(id, visible) {
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) {
let element; let element;
if (id instanceof HTMLElement) { if (id instanceof HTMLElement) {
element = id; element = id;
@ -297,14 +258,20 @@ const IndicatorFontSizes = {
return; return;
} }
if (!visible)
element.classList.add('hide');
else if (element.classList.contains('hide')) {
element.classList.remove('hide');
}
let type = this._getElementDefaultDisplay(element.tagName); let type = this._getElementDefaultDisplay(element.tagName);
let className = SHOW_CLASSES[type]; let className = SHOW_CLASSES[type];
if(element.classList.contains(className)) { if (visible) {
element.classList.remove(className); element.classList.add(className);
} }
else if (element.classList.contains(className))
element.classList.add('hide'); element.classList.remove(className);
}, },
/** /**
@ -326,12 +293,13 @@ const IndicatorFontSizes = {
/** /**
* Shows / hides the element with the given jQuery selector. * 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 * @param {boolean} isVisible
*/ */
setVisibility(selector, isVisible) { setVisibleBySelector(jquerySelector, isVisible) {
if (selector && selector.length > 0) { if (jquerySelector && jquerySelector.length > 0) {
selector.css("visibility", isVisible ? "visible" : "hidden"); jquerySelector.css("visibility", isVisible ? "visible" : "hidden");
} }
}, },

2
modules/UI/videolayout/LargeVideoManager.js
View File

@ -334,7 +334,7 @@ export default class LargeVideoManager {
let id = 'localConnectionMessage'; let id = 'localConnectionMessage';
UIUtil.showOrHideElement(id, show); UIUtil.setVisible(id, show);
if (show) { if (show) {
// Avatar message conflicts with 'videoConnectionMessage', // Avatar message conflicts with 'videoConnectionMessage',

16
modules/UI/videolayout/SmallVideo.js
View File

@ -218,7 +218,7 @@ SmallVideo.prototype.hideIndicator = function () {
SmallVideo.prototype.showAudioIndicator = function (isMuted) { SmallVideo.prototype.showAudioIndicator = function (isMuted) {
let mutedIndicator = this.getAudioMutedIndicator(); let mutedIndicator = this.getAudioMutedIndicator();
UIUtil.showOrHideElement(mutedIndicator, isMuted); UIUtil.setVisible(mutedIndicator, isMuted);
this.isAudioMuted = isMuted; this.isAudioMuted = isMuted;
}; };
@ -268,7 +268,7 @@ SmallVideo.prototype.setVideoMutedView = function(isMuted) {
let element = this.getVideoMutedIndicator(); let element = this.getVideoMutedIndicator();
UIUtil.showOrHideElement(element, isMuted); UIUtil.setVisible(element, isMuted);
}; };
/** /**
@ -505,22 +505,22 @@ SmallVideo.prototype.updateView = function () {
// Determine whether video, avatar or blackness should be displayed // Determine whether video, avatar or blackness should be displayed
let displayMode = this.selectDisplayMode(); let displayMode = this.selectDisplayMode();
// Show/hide video. // Show/hide video.
UIUtil.setVisibility( this.selectVideoElement(), UIUtil.setVisibleBySelector(this.selectVideoElement(),
(displayMode === DISPLAY_VIDEO (displayMode === DISPLAY_VIDEO
|| displayMode === DISPLAY_VIDEO_WITH_NAME)); || displayMode === DISPLAY_VIDEO_WITH_NAME));
// Show/hide the avatar. // Show/hide the avatar.
UIUtil.setVisibility( this.$avatar(), UIUtil.setVisibleBySelector(this.$avatar(),
(displayMode === DISPLAY_AVATAR (displayMode === DISPLAY_AVATAR
|| displayMode === DISPLAY_AVATAR_WITH_NAME)); || displayMode === DISPLAY_AVATAR_WITH_NAME));
// Show/hide the display name. // Show/hide the display name.
UIUtil.setVisibility( this.$displayName(), UIUtil.setVisibleBySelector(this.$displayName(),
!this.hideDisplayName !this.hideDisplayName
&& (displayMode === DISPLAY_BLACKNESS_WITH_NAME && (displayMode === DISPLAY_BLACKNESS_WITH_NAME
|| displayMode === DISPLAY_VIDEO_WITH_NAME || displayMode === DISPLAY_VIDEO_WITH_NAME
|| displayMode === DISPLAY_AVATAR_WITH_NAME)); || displayMode === DISPLAY_AVATAR_WITH_NAME));
// show hide overlay when there is a video or avatar under // show hide overlay when there is a video or avatar under
// the display name // the display name
UIUtil.setVisibility( $('#' + this.videoSpanId UIUtil.setVisibleBySelector($('#' + this.videoSpanId
+ ' .videocontainer__hoverOverlay'), + ' .videocontainer__hoverOverlay'),
(displayMode === DISPLAY_AVATAR_WITH_NAME (displayMode === DISPLAY_AVATAR_WITH_NAME
|| displayMode === DISPLAY_VIDEO_WITH_NAME)); || displayMode === DISPLAY_VIDEO_WITH_NAME));
@ -570,7 +570,7 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
tooltip: 'speaker' tooltip: 'speaker'
}); });
UIUtil.showOrHideElement(indicatorSpan, show); UIUtil.setVisible(indicatorSpan, show);
}; };
/** /**
@ -594,7 +594,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
tooltip: 'raisedHand' tooltip: 'raisedHand'
}); });
UIUtil.showOrHideElement(indicatorSpan, show); UIUtil.setVisible(indicatorSpan, show);
}; };
/** /**

2
modules/UI/videolayout/VideoLayout.js
View File

@ -1144,7 +1144,7 @@ var VideoLayout = {
updateResolutionLabel(isResolutionHD) { updateResolutionLabel(isResolutionHD) {
let id = 'videoResolutionLabel'; let id = 'videoResolutionLabel';
UIUtil.showOrHideElement(id, isResolutionHD); UIUtil.setVisible(id, isResolutionHD);
}, },
/** /**