Merge pull request #1060 from kkrisstoff/task/toolbar-side-panel
make side panels init from js
This commit is contained in:
commit
10f04575ed
89
index.html
89
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">
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
|
@ -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 = `
|
||||
<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() {
|
||||
$(`#${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();
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -4,6 +4,18 @@ import UIEvents from '../../../../service/UI/UIEvents';
|
|||
import UIUtil from '../../util/UIUtil';
|
||||
|
||||
let numberOfContacts = 0;
|
||||
const sidePanelsContainerId = 'sideToolbarContainer';
|
||||
const htmlStr = `
|
||||
<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() {
|
||||
$(`#${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();
|
||||
|
|
|
@ -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 = `
|
||||
<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() {
|
||||
$(`#${sidePanelsContainerId}`)
|
||||
.append(htmlStr);
|
||||
}
|
||||
|
||||
export default {
|
||||
init (emitter) {
|
||||
initHTML();
|
||||
// DISPLAY NAME
|
||||
function updateDisplayName () {
|
||||
emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());
|
||||
|
|
|
@ -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 = `
|
||||
<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() {
|
||||
$(`#${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';
|
||||
|
|
Loading…
Reference in New Issue