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

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

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

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

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

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

@ -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 : '');
}

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

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

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

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

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

@ -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 <tt>true</tt> to show or <tt>false</tt> 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");
}
},

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

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

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

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

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

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