Merge pull request #1111 from BeatC/FIX-clean-js-from-styles-1

Fix clean js from styles 1

css/_base.scss

@@ -153,6 +153,10 @@ form {
     display: inline-block !important;
 }
 
+.show-list-item {
+    display: list-item !important;
+}
+
 /**
  * Shows a flex element.
  */

modules/UI/UI.js

@@ -31,7 +31,7 @@ var EventEmitter = require("events");
 UI.messageHandler = require("./util/MessageHandler");
 var messageHandler = UI.messageHandler;
 var JitsiPopover = require("./util/JitsiPopover");
-var Feedback = require("./feedback/Feedback");
+import Feedback from "./feedback/Feedback";
 import FollowMe from "../FollowMe";
 
 var eventEmitter = new EventEmitter();
@@ -444,10 +444,10 @@ UI.start = function () {
         // Display notice message at the top of the toolbar
         if (config.noticeMessage) {
             $('#noticeText').text(config.noticeMessage);
-            $('#notice').css({display: 'block'});
+            UIUtil.showElement('notice');
         }
     } else {
-        $("#mainToolbarContainer").css("display", "none");
+        UIUtil.hideElement('mainToolbarContainer');
         FilmStrip.setupFilmStripOnly();
         messageHandler.enableNotifications(false);
         JitsiPopover.enabled = false;

modules/UI/feedback/Feedback.js

@@ -1,36 +1,12 @@
 /* global $, APP, JitsiMeetJS */
-import UIEvents from "../../../service/UI/UIEvents";
 import FeedbackWindow from "./FeedbackWindow";
 
-/**
- * Shows / hides the feedback button.
- * @private
- */
-function _toggleFeedbackIcon() {
-    $('#feedbackButtonDiv').toggleClass("hidden");
-}
-
-/**
- * Shows / hides the feedback button.
- * @param {show} set to {true} to show the feedback button or to  {false}
- * to hide it
- * @private
- */
-function _showFeedbackButton (show) {
-    var feedbackButton = $("#feedbackButtonDiv");
-
-    if (show)
-        feedbackButton.css("display", "block");
-    else
-        feedbackButton.css("display", "none");
-}
-
 /**
  * Defines all methods in connection to the Feedback window.
  *
  * @type {{openFeedbackWindow: Function}}
  */
-var Feedback = {
+const Feedback = {
 
     /**
      * Initialise the Feedback functionality.
@@ -47,24 +23,15 @@ var Feedback = {
         if (typeof this.enabled == "undefined")
             this.enabled = true;
 
-        _showFeedbackButton(this.enabled);
-
         this.window = new FeedbackWindow();
+        this.emitter = emitter;
 
         $("#feedbackButton").click(Feedback.openFeedbackWindow);
-
-        // Show / hide the feedback button whenever the film strip is
-        // shown / hidden.
-        emitter.addListener(UIEvents.TOGGLE_FILM_STRIP, function () {
-            _toggleFeedbackIcon();
-        });
     },
     /**
      * Enables/ disabled the feedback feature.
      */
     enableFeedback: function (enable) {
-        if (this.enabled !== enable)
-            _showFeedbackButton(enable);
         this.enabled = enable;
     },
 
@@ -125,4 +92,4 @@ var Feedback = {
     }
 };
 
-module.exports = Feedback;
+export default Feedback;

modules/UI/recording/Recording.js

@@ -387,10 +387,15 @@ 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"});
+        let isVisible = show && _isRecordingButtonEnabled();
+        let id = 'toolbar_button_record';
+
+        console.log('recording is visible', isVisible);
+
+        if (isVisible) {
+            UIUtil.showElement(id);
         } else {
-            $('#toolbar_button_record').css({display: "none"});
+            UIUtil.hideElement(id);
         }
     },
 
@@ -474,10 +479,15 @@ var Recording = {
             labelSelector.css({display: "inline-block"});
 
         // Recording spinner
-        if (recordingState === Status.RETRYING)
-            $("#recordingSpinner").show();
-        else
-            $("#recordingSpinner").hide();
+        let spinnerId = 'recordingSpinner';
+        if(recordingState === Status.RETRYING) {
+            UIUtil.showElement(spinnerId);
+        } else {
+            UIUtil.hideElement(spinnerId);
+        }
+
+        document.querySelector('#recordingSpinner').classList
+                .toggle('show-inline', recordingState === Status.RETRYING);
     },
     // checks whether recording is enabled and whether we have params
     // to start automatically recording

modules/UI/side_pannels/chat/Chat.js

@@ -293,15 +293,18 @@ var Chat = {
      * @param subject the subject
      */
     setSubject (subject) {
+        let toggleFunction;
         if (subject) {
             subject = subject.trim();
-        }
-        $('#subject').html(linkify(UIUtil.escapeHtml(subject)));
-        if (subject) {
-            $("#subject").css({display: "block"});
+            toggleFunction = UIUtil.showElement.bind(UIUtil);
         } else {
-            $("#subject").css({display: "none"});
+            toggleFunction = UIUtil.hideElement.bind(UIUtil);
         }
+
+        let subjectId = 'subject';
+        let html = linkify(UIUtil.escapeHtml(subject));
+        $(`#${subjectId}`).html(html);
+        toggleFunction(subjectId);
     },
 
     /**

modules/UI/toolbars/Toolbar.js

@@ -401,9 +401,12 @@ Toolbar = {
      * @param show <tt>true</tt> to show or <tt>false</tt> to hide
      */
     showAuthenticateButton (show) {
-        let display = show ? 'block' : 'none';
-
-        $('#authenticationContainer').css({display});
+        let id = 'authenticationContainer';
+        if (show) {
+            UIUtil.showElement(id);
+        } else {
+            UIUtil.hideElement(id);
+        }
     },
 
     showEtherpadButton () {
@@ -414,13 +417,16 @@ 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');
+        let id = 'toolbar_button_sharedvideo';
+        let shouldShow = UIUtil.isButtonEnabled('sharedvideo')
+                && !config.disableThirdPartyRequests;
+
+        if (shouldShow) {
+            let el = document.getElementById(id);
+            UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
+            UIUtil.showElement(id);
         } else {
-            $('#toolbar_button_sharedvideo').css({display: "none"});
+            UIUtil.hideElement(id);
         }
     },
 
@@ -435,20 +441,25 @@ Toolbar = {
 
     // Shows or hides SIP calls button
     showSipCallButton (show) {
-        if (APP.conference.sipGatewayEnabled()
-            && UIUtil.isButtonEnabled('sip') && show) {
-            $('#toolbar_button_sip').css({display: "inline-block"});
+        let shouldShow = APP.conference.sipGatewayEnabled()
+            && UIUtil.isButtonEnabled('sip') && show;
+        let id = 'toolbar_button_sip';
+
+        if (shouldShow) {
+            UIUtil.showElement(id);
         } else {
-            $('#toolbar_button_sip').css({display: "none"});
+            UIUtil.hideElement(id);
         }
     },
 
     // Shows or hides the dialpad button
     showDialPadButton (show) {
-        if (UIUtil.isButtonEnabled('dialpad') && show) {
-            $('#toolbar_button_dialpad').css({display: "inline-block"});
+        let shouldShow = UIUtil.isButtonEnabled('dialpad') && show;
+        let id = 'toolbar_button_dialpad';
+        if (shouldShow) {
+            UIUtil.showElement(id);
         } else {
-            $('#toolbar_button_dialpad').css({display: "none"});
+            UIUtil.hideElement(id);
         }
     },
 
@@ -457,14 +468,13 @@ Toolbar = {
      * @param authIdentity identity name to be displayed.
      */
     setAuthenticatedIdentity (authIdentity) {
-        let selector = $('#toolbar_auth_identity');
-
-        if (authIdentity) {
-            selector.css({display: "list-item"});
-            selector.text(authIdentity);
+        let id = 'toolbar_auth_identity';
+        if(authIdentity) {
+            UIUtil.showElement(id);
+            $(`#${id}`).text(authIdentity);
         } else {
-            selector.css({display: "none"});
-            selector.text('');
+            UIUtil.hideElement(id);
+            $(`#${id}`).text('');
         }
     },
 
@@ -473,10 +483,11 @@ Toolbar = {
      * @param show <tt>true</tt> to show
      */
     showLoginButton (show) {
+        let id = 'toolbar_button_login';
         if (show) {
-            $('#toolbar_button_login').css({display: "list-item"});
+            UIUtil.showElement(id);
         } else {
-            $('#toolbar_button_login').css({display: "none"});
+            UIUtil.hideElement(id);
         }
     },
 
@@ -485,10 +496,11 @@ Toolbar = {
      * @param show <tt>true</tt> to show
      */
     showLogoutButton (show) {
+        let id = 'toolbar_button_logout';
         if (show) {
-            $('#toolbar_button_logout').css({display: "list-item"});
+            UIUtil.showElement(id);
         } else {
-            $('#toolbar_button_logout').css({display: "none"});
+            UIUtil.hideElement(id);
         }
     },
 

modules/UI/util/UIUtil.js

@@ -18,6 +18,15 @@ const TOOLTIP_POSITIONS = {
     'top-right': 'sw'
 };
 
+/**
+ * Associates the default display type with corresponding CSS class
+ */
+const SHOW_CLASSES = {
+    'block': 'show',
+    'inline': 'show-inline',
+    'list-item': 'show-list-item'
+};
+
 /**
  * Created by hristo on 12/22/14.
  */
@@ -217,10 +226,24 @@ const TOOLTIP_POSITIONS = {
      * @param {String} the identifier of the element to show
      */
     showElement(id) {
-        if ($("#"+id).hasClass("hide"))
-            $("#"+id).removeClass("hide");
+        let element;
+        if (id instanceof HTMLElement) {
+            element = id;
+        } else {
+            element = document.getElementById(id);
+        }
 
-        $("#"+id).addClass("show");
+        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);
     },
 
     /**
@@ -229,10 +252,40 @@ const TOOLTIP_POSITIONS = {
      * @param {String} the identifier of the element to hide
      */
     hideElement(id) {
-        if ($("#"+id).hasClass("show"))
-            $("#"+id).removeClass("show");
+        let element;
+        if (id instanceof HTMLElement) {
+            element = id;
+        } else {
+            element = document.getElementById(id);
+        }
+
+        if (!element) {
+            return;
+        }
+
+        let type = this.getElementDefaultDisplay(element.tagName);
+        let className = SHOW_CLASSES[type];
+
+        if(element.classList.contains(className)) {
+            element.classList.remove(className);
+        }
+
+        element.classList.add('hide');
+    },
+
+    /**
+     * Returns default display style for the tag
+     * @param tag
+     * @returns {*}
+     */
+    getElementDefaultDisplay(tag) {
+        let tempElement = document.createElement(tag);
+
+        document.body.appendChild(tempElement);
+        let style = window.getComputedStyle(tempElement).display;
+        document.body.removeChild(tempElement);
 
-        $("#"+id).addClass("hide");
+        return style;
     },
 
     /**

modules/UI/videolayout/LargeVideoManager.js

@@ -332,13 +332,14 @@ export default class LargeVideoManager {
             show = APP.conference.isConnectionInterrupted();
         }
 
+        let id = 'localConnectionMessage';
         if (show) {
-            $('#localConnectionMessage').css({display: "block"});
+            UIUtil.showElement(id);
             // Avatar message conflicts with 'videoConnectionMessage',
             // so it must be hidden
             this.showRemoteConnectionMessage(false);
         } else {
-            $('#localConnectionMessage').css({display: "none"});
+            UIUtil.hideElement(id);
         }
     }
 

modules/UI/videolayout/SmallVideo.js

@@ -216,15 +216,13 @@ SmallVideo.prototype.hideIndicator = function () {
  * or hidden
  */
 SmallVideo.prototype.showAudioIndicator = function(isMuted) {
-
-    var audioMutedIndicator = this.getAudioMutedIndicator();
-
-    if (!isMuted) {
-        audioMutedIndicator.hide();
-    }
-    else {
-        audioMutedIndicator.show();
+    let mutedIndicator = this.getAudioMutedIndicator();
+    if (isMuted) {
+        UIUtil.showElement(mutedIndicator);
+    } else {
+        UIUtil.hideElement(mutedIndicator);
     }
+
     this.isAudioMuted = isMuted;
 };
 
@@ -232,12 +230,13 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) {
  * Returns the audio muted indicator jquery object. If it doesn't exists -
  * creates it.
  *
- * @returns {jQuery|HTMLElement} the audio muted indicator
+ * @returns {HTMLElement} the audio muted indicator
  */
 SmallVideo.prototype.getAudioMutedIndicator = function () {
-    var audioMutedSpan = $('#' + this.videoSpanId + ' .audioMuted');
+    let selector = '#' + this.videoSpanId + ' .audioMuted';
+    let audioMutedSpan = document.querySelector(selector);
 
-    if (audioMutedSpan.length) {
+    if (audioMutedSpan) {
         return audioMutedSpan;
     }
 
@@ -248,16 +247,15 @@ SmallVideo.prototype.getAudioMutedIndicator = function () {
         "videothumbnail.mute",
         "top");
 
+    let mutedIndicator = document.createElement('i');
+    mutedIndicator.className = 'icon-mic-disabled';
+    audioMutedSpan.appendChild(mutedIndicator);
+
     this.container
         .querySelector('.videocontainer__toolbar')
         .appendChild(audioMutedSpan);
 
-
-    var mutedIndicator = document.createElement('i');
-    mutedIndicator.className = 'icon-mic-disabled';
-    audioMutedSpan.appendChild(mutedIndicator);
-
-    return $('#' + this.videoSpanId + ' .audioMuted');
+    return audioMutedSpan;
 };
 
 /**
@@ -271,9 +269,12 @@ SmallVideo.prototype.setVideoMutedView = function(isMuted) {
     this.isVideoMuted = isMuted;
     this.updateView();
 
-    var videoMutedSpan = this.getVideoMutedIndicator();
-
-    videoMutedSpan[isMuted ? 'show' : 'hide']();
+    let element = this.getVideoMutedIndicator();
+    if (isMuted) {
+        UIUtil.showElement(element);
+    } else {
+        UIUtil.hideElement(element);
+    }
 };
 
 /**
@@ -283,9 +284,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 +307,7 @@ SmallVideo.prototype.getVideoMutedIndicator = function () {
 
     videoMutedSpan.appendChild(mutedIndicator);
 
-    return $('#' + this.videoSpanId + ' .videoMuted');
+    return videoMutedSpan;
 };
 
 /**
@@ -575,9 +577,9 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
     });
 
     if (show) {
-        indicatorSpan.classList.add('show');
+        UIUtil.showElement(indicatorSpan);
     } else {
-        indicatorSpan.classList.remove('show');
+        UIUtil.hideElement(indicatorSpan);
     }
 };
 
@@ -603,9 +605,9 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
     });
 
     if (show) {
-        indicatorSpan.classList.add('show');
+        UIUtil.showElement(indicatorSpan);
     } else {
-        indicatorSpan.classList.remove('show');
+        UIUtil.hideElement(indicatorSpan);
     }
 };
 

modules/UI/videolayout/VideoLayout.js

@@ -1136,12 +1136,13 @@ var VideoLayout = {
      * video stream is currently HD.
      */
     updateResolutionLabel(isResolutionHD) {
-        let videoResolutionLabel = $("#videoResolutionLabel");
+        let id = 'videoResolutionLabel';
 
-        if (isResolutionHD && !videoResolutionLabel.is(":visible"))
-            videoResolutionLabel.css({display: "block"});
-        else if (!isResolutionHD && videoResolutionLabel.is(":visible"))
-            videoResolutionLabel.css({display: "none"});
+        if (isResolutionHD) {
+            UIUtil.showElement(id);
+        } else {
+            UIUtil.hideElement(id);
+        }
     },
 
     /**