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..5bb7c3d80 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/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(`
+
`);
+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();
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..e3c136aa2 100644
--- a/modules/UI/side_pannels/contactlist/ContactListView.js
+++ b/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(`
+
`);
+
+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();
diff --git a/modules/UI/side_pannels/profile/Profile.js b/modules/UI/side_pannels/profile/Profile.js
index 1479e7159..1efc63f45 100644
--- a/modules/UI/side_pannels/profile/Profile.js
+++ b/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(`
+
`);
+function initHTML() {
+ $(`#${sidePannelsContainerId}`)
+ .append(compiledTpl());
+}
+
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..6f68e810b 100644
--- a/modules/UI/side_pannels/settings/SettingsMenu.js
+++ b/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(`
+
`);
+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';
-