diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index b7b689e9b..3f4cd3305 100644
--- a/modules/UI/UI.js
+++ b/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) {
diff --git a/modules/UI/side_pannels/SidePanels.js b/modules/UI/side_pannels/SidePanels.js
new file mode 100644
index 000000000..cb50ea376
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js
index 79ecd5a1b..60743a87d 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/modules/UI/side_pannels/chat/Chat.js
@@ -10,7 +10,34 @@ import UIEvents from '../../../../service/UI/UIEvents';
import { smileys } from './smileys';
-var unreadMessages = 0;
+let unreadMessages = 0;
+const sidePanelsContainerId = 'sideToolbarContainer';
+const htmlStr = `
+
`;
+
+function initHTML() {
+ $(`#${sidePanelsContainerId}`)
+ .append(htmlStr);
+}
/**
* The container id, which is and the element id.
@@ -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();
diff --git a/modules/UI/side_pannels/contactlist/ContactList.js b/modules/UI/side_pannels/contactlist/ContactList.js
index b737ecbbd..42e494d3a 100644
--- a/modules/UI/side_pannels/contactlist/ContactList.js
+++ b/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);
}
/**
diff --git a/modules/UI/side_pannels/contactlist/ContactListView.js b/modules/UI/side_pannels/contactlist/ContactListView.js
index 573c9e839..94a6dd2b9 100644
--- a/modules/UI/side_pannels/contactlist/ContactListView.js
+++ b/modules/UI/side_pannels/contactlist/ContactListView.js
@@ -4,6 +4,18 @@ import UIEvents from '../../../../service/UI/UIEvents';
import UIUtil from '../../util/UIUtil';
let numberOfContacts = 0;
+const sidePanelsContainerId = 'sideToolbarContainer';
+const htmlStr = `
+
`;
+
+function initHTML() {
+ $(`#${sidePanelsContainerId}`)
+ .append(htmlStr);
+}
/**
* Updates the number of participants in the contact list button and sets
@@ -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();
diff --git a/modules/UI/side_pannels/profile/Profile.js b/modules/UI/side_pannels/profile/Profile.js
index 1479e7159..0147aca52 100644
--- a/modules/UI/side_pannels/profile/Profile.js
+++ b/modules/UI/side_pannels/profile/Profile.js
@@ -3,8 +3,44 @@ import UIUtil from "../../util/UIUtil";
import UIEvents from "../../../../service/UI/UIEvents";
import Settings from '../../../settings/Settings';
+const sidePanelsContainerId = 'sideToolbarContainer';
+const htmlStr = `
+
`;
+
+function initHTML() {
+ $(`#${sidePanelsContainerId}`)
+ .append(htmlStr);
+}
+
export default {
init (emitter) {
+ initHTML();
// DISPLAY NAME
function updateDisplayName () {
emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());
diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js
index 3f8bc8451..3daded142 100644
--- a/modules/UI/side_pannels/settings/SettingsMenu.js
+++ b/modules/UI/side_pannels/settings/SettingsMenu.js
@@ -5,6 +5,63 @@ import UIEvents from "../../../../service/UI/UIEvents";
import languages from "../../../../service/translation/languages";
import Settings from '../../../settings/Settings';
+const sidePanelsContainerId = 'sideToolbarContainer';
+const htmlStr = `
+
`;
+
+function initHTML() {
+ $(`#${sidePanelsContainerId}`)
+ .append(htmlStr);
+}
+
/**
* Generate html select options for available languages.
*
@@ -79,6 +136,7 @@ function initSelect2($el, onSelectedCb) {
export default {
init (emitter) {
+ initHTML();
//LANGUAGES BOX
if (UIUtil.isSettingEnabled('language')) {
const wrapperId = 'languagesSelectWrapper';
-