make side panels init from js

index.html

@@ -140,94 +140,7 @@
 
             <a class="button icon-feedback" id="feedbackButton"></a>
 
-            <div id="sideToolbarContainer">
-                <div id="profile_container" class="sideToolbarContainer__inner">
-                    <div class="title" data-i18n="profile.title"></div>
-                    <div class="sideToolbarBlock first">
-                        <label class="first" data-i18n="profile.setDisplayNameLabel"></label>
-                        <input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name">
-                    </div>
-                    <div class="sideToolbarBlock">
-                        <label data-i18n="profile.setEmailLabel"></label>
-                        <input data-i18n="[placeholder]profile.setEmailInput" type="text" id="setEmail">
-                    </div>
-                    <div class="sideToolbarBlock auth_container" id="authenticationContainer">
-                        <p data-i18n="toolbar.authenticate"></p>
-                        <ul>
-                            <li id="toolbar_auth_identity"></li>
-                            <li id="toolbar_button_login">
-                                <a class="authButton" data-i18n="toolbar.login"></a>
-                            </li>
-                            <li id="toolbar_button_logout">
-                                <a class="authButton" data-i18n="toolbar.logout"></a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div id="chat_container" class="sideToolbarContainer__inner">
-                    <div id="nickname">
-                        <span data-i18n="chat.nickname.title"></span>
-                        <form>
-                            <input type='text' id="nickinput" data-i18n="[placeholder]chat.nickname.popover" autofocus>
-                        </form>
-                    </div>
-
-                    <div id="chatconversation"></div>
-                    <audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
-                    <textarea id="usermsg" data-i18n="[placeholder]chat.messagebox" autofocus></textarea>
-                    <div id="smileysarea">
-                        <div id="smileys" id="toggle_smileys">
-                            <img src="images/smile.svg"/>
-                        </div>
-                    </div>
-                </div>
-                <div id="contacts_container" class="sideToolbarContainer__inner">
-                    <div class="title" data-i18n="contactlist" data-i18n-options='{"pcount":"1"}'></div>
-                    <ul id="contacts"></ul>
-                </div>
-                <div id="settings_container" class="sideToolbarContainer__inner">
-                    <div class="title" data-i18n="settings.title"></div>
-                    <form class="aui">
-                        <div id="languagesSelectWrapper" class="sideToolbarBlock first hide">
-                            <select id="languagesSelect"></select>
-                        </div>
-                        <div id="deviceOptionsWrapper" class="hide">
-                            <div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
-                            <div class="sideToolbarBlock first">
-                                <label class="first" data-i18n="settings.selectCamera"></label>
-                                <select id="selectCamera"></select>
-                            </div>
-                            <div class="sideToolbarBlock">
-                                <label data-i18n="settings.selectMic"></label>
-                                <select id="selectMic"></select>
-                            </div>
-                            <div class="sideToolbarBlock">
-                                <label data-i18n="settings.selectAudioOutput"></label>
-                                <select id="selectAudioOutput"></select>
-                            </div>
-                        </div>
-                        <div id="moderatorOptionsWrapper" class="hide">
-                            <div id="moderatorOptionsTitle" class="subTitle hide" data-i18n="settings.moderator"></div>
-                            <div id="startMutedOptions" class="hide">
-                                <div class="sideToolbarBlock first">
-                                    <input type="checkbox" id="startAudioMuted">
-                                    <label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label>
-                                </div>
-                                <div class="sideToolbarBlock">
-                                    <input type="checkbox" id="startVideoMuted">
-                                    <label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
-                                </div>
-                            </div>
-                            <div id="followMeOptions" class="hide">
-                                <div class="sideToolbarBlock">
-                                    <input type="checkbox" id="followMeCheckBox">
-                                    <label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
+            <div id="sideToolbarContainer"></div>
         </div>
         <div id="videospace">
             <div id="largeVideoContainer" class="videocontainer">

modules/UI/UI.js

@@ -2,6 +2,7 @@
 var UI = {};
 
 import Chat from "./side_pannels/chat/Chat";
+import SidePanels from "./side_pannels/SidePanels";
 import Toolbar from "./toolbars/Toolbar";
 import ToolbarToggler from "./toolbars/ToolbarToggler";
 import Avatar from "./avatar/Avatar";
@@ -125,20 +126,13 @@ function promptDisplayName() {
 }
 
 /**
- * Initialize chat.
- */
-function setupChat() {
-    Chat.init(eventEmitter);
-    $("#toggle_smileys").click(function() {
-        Chat.toggleSmileys();
-    });
-}
-
-/**
- * Initialize toolbars.
+ * Initialize toolbars with side panels.
  */
 function setupToolbars() {
+    // Initialize toolbar buttons
     Toolbar.init(eventEmitter);
+    // Initialize side panels
+    SidePanels.init(eventEmitter);
 }
 
 /**
@@ -439,7 +433,6 @@ UI.start = function () {
         }, 100, { leading: true, trailing: false });
         $("#videoconference_page").mousemove(debouncedShowToolbar);
         setupToolbars();
-        setupChat();
 
         // Initialise the recording module.
         if (config.enableRecording)
@@ -482,8 +475,6 @@ UI.start = function () {
             "newestOnTop": false
         };
 
-        SettingsMenu.init(eventEmitter);
-        Profile.init(eventEmitter);
     }
 
     if(APP.tokenData.callee) {

modules/UI/side_pannels/SidePanels.js

@@ -0,0 +1,19 @@
+import Chat from './chat/Chat';
+import SettingsMenu from './settings/SettingsMenu';
+import Profile from './profile/Profile';
+import ContactListView from './contactlist/ContactListView';
+
+const SidePanels = {
+    init (eventEmitter) {
+        //Initialize chat
+        Chat.init(eventEmitter);
+        //Initialize settings
+        SettingsMenu.init(eventEmitter);
+        //Initialize profile
+        Profile.init(eventEmitter);
+        //Initialize contact list view
+        ContactListView.init();
+    }
+};
+
+export default SidePanels;

modules/UI/side_pannels/chat/Chat.js

@@ -1,4 +1,4 @@
-/* global APP, $ */
+/* global APP, $, _ */
 
 import {processReplacements, linkify} from './Replacement';
 import CommandsProcessor from './Commands';
@@ -10,6 +10,33 @@ import UIEvents from '../../../../service/UI/UIEvents';
 
 import { smileys } from './smileys';
 
+const sidePannelsContainerId = 'sideToolbarContainer';
+const compiledTpl = _.template(`
+    <div id="chat_container" class="sideToolbarContainer__inner">
+        <div id="nickname">
+            <span data-i18n="chat.nickname.title"></span>
+            <form>
+                <input type='text' id="nickinput" autofocus 
+                    data-i18n="[placeholder]chat.nickname.popover">
+            </form>
+        </div>
+
+        <div id="chatconversation"></div>
+        <audio id="chatNotification" src="sounds/incomingMessage.wav" 
+            preload="auto"></audio>
+        <textarea id="usermsg" autofocus 
+            data-i18n="[placeholder]chat.messagebox"></textarea>
+        <div id="smileysarea">
+            <div id="smileys" id="toggle_smileys">
+                <img src="images/smile.svg"/>
+            </div>
+        </div>
+    </div>`);
+function initHTML() {
+    $(`#${sidePannelsContainerId}`)
+        .append(compiledTpl());
+}
+
 var unreadMessages = 0;
 
 /**
@@ -137,10 +164,15 @@ var Chat = {
      * Initializes chat related interface.
      */
     init (eventEmitter) {
+        initHTML();
         if (APP.settings.getDisplayName()) {
             Chat.setChatConversationMode(true);
         }
 
+        $("#toggle_smileys").click(function() {
+            Chat.toggleSmileys();
+        });
+
         $('#nickinput').keydown(function (event) {
             if (event.keyCode === 13) {
                 event.preventDefault();

modules/UI/side_pannels/contactlist/ContactList.js

@@ -14,7 +14,8 @@ class ContactList {
         this.conference = conference;
         this.contacts = [];
         this.roomLocked = false;
-        ContactListView.init(this);
+        //setup ContactList Model into ContactList View
+        ContactListView.setup(this);
     }
 
     /**

modules/UI/side_pannels/contactlist/ContactListView.js

@@ -1,8 +1,20 @@
-/* global $, APP, interfaceConfig */
+/* global $, APP, interfaceConfig, _ */
 import Avatar from '../../avatar/Avatar';
 import UIEvents from '../../../../service/UI/UIEvents';
 import UIUtil from '../../util/UIUtil';
 
+const sidePannelsContainerId = 'sideToolbarContainer';
+const compiledTpl = _.template(`
+    <div id="contacts_container" class="sideToolbarContainer__inner">
+        <div class="title" data-i18n="contactlist"
+            data-i18n-options='{"pcount":"1"}'></div>
+        <ul id="contacts"></ul>
+    </div>`);
+
+function initHTML() {
+    $(`#${sidePannelsContainerId}`)
+        .append(compiledTpl());
+}
 let numberOfContacts = 0;
 
 /**
@@ -67,10 +79,19 @@ function getContactEl (id) {
  * Contact list.
  */
 var ContactListView = {
-    init (model) {
-        this.model = model;
+    init () {
+        initHTML();
         this.lockKey = 'roomLocked';
         this.unlockKey = 'roomUnlocked';
+    },
+
+    /**
+     * setup ContactList Model into ContactList View
+     *
+     * @param model
+     */
+    setup (model) {
+        this.model = model;
         this.addInviteButton();
         this.registerListeners();
         this.toggleLock();

modules/UI/side_pannels/profile/Profile.js

@@ -1,10 +1,45 @@
-/* global $ */
+/* global $, _ */
 import UIUtil from "../../util/UIUtil";
 import UIEvents from "../../../../service/UI/UIEvents";
 import Settings from '../../../settings/Settings';
 
+const sidePannelsContainerId = 'sideToolbarContainer';
+const compiledTpl = _.template(`
+    <div id="profile_container" class="sideToolbarContainer__inner">
+        <div class="title" data-i18n="profile.title"></div>
+        <div class="sideToolbarBlock first">
+            <label class="first" data-i18n="profile.setDisplayNameLabel">
+            </label>
+            <input type="text" id="setDisplayName"
+                data-i18n="[placeholder]settings.name">
+        </div>
+        <div class="sideToolbarBlock">
+            <label data-i18n="profile.setEmailLabel"></label>
+            <input id="setEmail" type="text" 
+                data-i18n="[placeholder]profile.setEmailInput">
+        </div>
+        <div id="authenticationContainer" 
+             class="sideToolbarBlock auth_container">
+            <p data-i18n="toolbar.authenticate"></p>
+            <ul>
+                <li id="toolbar_auth_identity"></li>
+                <li id="toolbar_button_login">
+                    <a class="authButton" data-i18n="toolbar.login"></a>
+                </li>
+                <li id="toolbar_button_logout">
+                    <a class="authButton" data-i18n="toolbar.logout"></a>
+                </li>
+            </ul>
+        </div>
+    </div>`);
+function initHTML() {
+    $(`#${sidePannelsContainerId}`)
+        .append(compiledTpl());
+}
+
 export default {
     init (emitter) {
+        initHTML();
         // DISPLAY NAME
         function updateDisplayName () {
             emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -1,10 +1,66 @@
-/* global $, APP, AJS, interfaceConfig, JitsiMeetJS */
+/* global $, _, APP, AJS, interfaceConfig, JitsiMeetJS */
 
 import UIUtil from "../../util/UIUtil";
 import UIEvents from "../../../../service/UI/UIEvents";
 import languages from "../../../../service/translation/languages";
 import Settings from '../../../settings/Settings';
 
+const sidePannelsContainerId = 'sideToolbarContainer';
+const compiledTpl = _.template(`
+    <div id="settings_container" class="sideToolbarContainer__inner">
+        <div class="title" data-i18n="settings.title"></div>
+        <form class="aui">
+            <div id="languagesSelectWrapper" 
+                class="sideToolbarBlock first hide">
+                <select id="languagesSelect"></select>
+            </div>
+            <div id="deviceOptionsWrapper" class="hide">
+                <div id="deviceOptionsTitle" class="subTitle hide" 
+                    data-i18n="settings.audioVideo"></div>
+                <div class="sideToolbarBlock first">
+                    <label class="first" data-i18n="settings.selectCamera">
+                    </label>
+                    <select id="selectCamera"></select>
+                </div>
+                <div class="sideToolbarBlock">
+                    <label data-i18n="settings.selectMic"></label>
+                    <select id="selectMic"></select>
+                </div>
+                <div class="sideToolbarBlock">
+                    <label data-i18n="settings.selectAudioOutput"></label>
+                    <select id="selectAudioOutput"></select>
+                </div>
+            </div>
+            <div id="moderatorOptionsWrapper" class="hide">
+                <div id="moderatorOptionsTitle" class="subTitle hide" 
+                    data-i18n="settings.moderator"></div>
+                <div id="startMutedOptions" class="hide">
+                    <div class="sideToolbarBlock first">
+                        <input type="checkbox" id="startAudioMuted">
+                        <label class="startMutedLabel" for="startAudioMuted" 
+                            data-i18n="settings.startAudioMuted"></label>
+                    </div>
+                    <div class="sideToolbarBlock">
+                        <input type="checkbox" id="startVideoMuted">
+                        <label class="startMutedLabel" for="startVideoMuted" 
+                            data-i18n="settings.startVideoMuted"></label>
+                    </div>
+                </div>
+                <div id="followMeOptions" class="hide">
+                    <div class="sideToolbarBlock">
+                        <input type="checkbox" id="followMeCheckBox">
+                        <label class="followMeLabel" for="followMeCheckBox" 
+                            data-i18n="settings.followMe"></label>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>`);
+function initHTML() {
+    $(`#${sidePannelsContainerId}`)
+        .append(compiledTpl());
+}
+
 /**
  * Generate html select options for available languages.
  *
@@ -79,6 +135,7 @@ function initSelect2($el, onSelectedCb) {
 
 export default {
     init (emitter) {
+        initHTML();
         //LANGUAGES BOX
         if (UIUtil.isSettingEnabled('language')) {
             const wrapperId = 'languagesSelectWrapper';