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

modules/UI/UI.js

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

modules/UI/recording/Recording.js

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

modules/UI/side_pannels/chat/Chat.js

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

modules/UI/side_pannels/profile/Profile.js

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

modules/UI/side_pannels/settings/SettingsMenu.js

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

modules/UI/toolbars/Toolbar.js

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

modules/UI/util/UIUtil.js

@@ -240,11 +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
+     * @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
      */
-    showElement(id) {
+    setVisible(id, visible) {
         let element;
         if (id instanceof HTMLElement) {
             element = id;
@@ -256,55 +258,20 @@ const IndicatorFontSizes = {
             return;
         }
 
-        if(element.classList.contains('hide')) {
+        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];
-        element.classList.add(className);
-    },
-
-    /**
-     * Shows or hides the element given (optionally 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) {
-        let element;
-        if (id instanceof HTMLElement) {
-            element = id;
-        } else {
-            element = document.getElementById(id);
-        }
 
-        if (!element) {
-            return;
+        if (visible) {
+            element.classList.add(className);
         }
-
-        let type = this._getElementDefaultDisplay(element.tagName);
-        let className = SHOW_CLASSES[type];
-
-        if(element.classList.contains(className)) {
+        else if (element.classList.contains(className))
             element.classList.remove(className);
-        }
-
-        element.classList.add('hide');
     },
 
     /**
@@ -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");
         }
     },
 

modules/UI/videolayout/LargeVideoManager.js

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

modules/UI/videolayout/SmallVideo.js

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

modules/UI/videolayout/VideoLayout.js

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