haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1060 from kkrisstoff/task/toolbar-side-panel 

make side panels init from js
This commit is contained in:
hristoterezov 2016-11-02 13:22:55 -05:00 committed by GitHub
parent a9c984e7db 9f280e320d
commit 10f04575ed
8 changed files with 177 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
index.html
View File

@ -140,94 +140,7 @@
<a class="button icon-feedback" id="feedbackButton"></a> <a class="button icon-feedback" id="feedbackButton"></a>
<div id="sideToolbarContainer"> <div id="sideToolbarContainer"></div>
<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> </div>
<div id="videospace"> <div id="videospace">
<div id="largeVideoContainer" class="videocontainer"> <div id="largeVideoContainer" class="videocontainer">

19
modules/UI/UI.js
View File

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

19
modules/UI/side_pannels/SidePanels.js Normal file
View File

@ -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;

34
modules/UI/side_pannels/chat/Chat.js
View File

@ -10,7 +10,34 @@ import UIEvents from '../../../../service/UI/UIEvents';
import { smileys } from './smileys'; 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. * The container id, which is and the element id.
@ -137,10 +164,15 @@ var Chat = {
* Initializes chat related interface. * Initializes chat related interface.
*/ */
init (eventEmitter) { init (eventEmitter) {
initHTML();
if (APP.settings.getDisplayName()) { if (APP.settings.getDisplayName()) {
Chat.setChatConversationMode(true); Chat.setChatConversationMode(true);
} }
$("#toggle_smileys").click(function() {
Chat.toggleSmileys();
});
$('#nickinput').keydown(function (event) { $('#nickinput').keydown(function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
event.preventDefault(); event.preventDefault();

3
modules/UI/side_pannels/contactlist/ContactList.js
View File

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

25
modules/UI/side_pannels/contactlist/ContactListView.js
View File

@ -4,6 +4,18 @@ import UIEvents from '../../../../service/UI/UIEvents';
import UIUtil from '../../util/UIUtil'; import UIUtil from '../../util/UIUtil';
let numberOfContacts = 0; 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 * Updates the number of participants in the contact list button and sets
@ -67,10 +79,19 @@ function getContactEl (id) {
* Contact list. * Contact list.
*/ */
var ContactListView = { var ContactListView = {
init (model) { init () {
this.model = model; initHTML();
this.lockKey = 'roomLocked'; this.lockKey = 'roomLocked';
this.unlockKey = 'roomUnlocked'; this.unlockKey = 'roomUnlocked';
},
/**
* setup ContactList Model into ContactList View
*
* @param model
*/
setup (model) {
this.model = model;
this.addInviteButton(); this.addInviteButton();
this.registerListeners(); this.registerListeners();
this.toggleLock(); this.toggleLock();

36
modules/UI/side_pannels/profile/Profile.js
View File

@ -3,8 +3,44 @@ import UIUtil from "../../util/UIUtil";
import UIEvents from "../../../../service/UI/UIEvents"; import UIEvents from "../../../../service/UI/UIEvents";
import Settings from '../../../settings/Settings'; 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 { export default {
init (emitter) { init (emitter) {
initHTML();
// DISPLAY NAME // DISPLAY NAME
function updateDisplayName () { function updateDisplayName () {
emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val()); emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());

58
modules/UI/side_pannels/settings/SettingsMenu.js
View File

@ -5,6 +5,63 @@ import UIEvents from "../../../../service/UI/UIEvents";
import languages from "../../../../service/translation/languages"; import languages from "../../../../service/translation/languages";
import Settings from '../../../settings/Settings'; 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. * Generate html select options for available languages.
* *
@ -79,6 +136,7 @@ function initSelect2($el, onSelectedCb) {
export default { export default {
init (emitter) { init (emitter) {
initHTML();
//LANGUAGES BOX //LANGUAGES BOX
if (UIUtil.isSettingEnabled('language')) { if (UIUtil.isSettingEnabled('language')) {
const wrapperId = 'languagesSelectWrapper'; const wrapperId = 'languagesSelectWrapper';