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

make side panels init from js

This commit is contained in:
Konstantyn Pahsura 2016-10-25 16:16:15 +03:00
parent e86294191a
commit a1e098680d
8 changed files with 178 additions and 109 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

@ -1,4 +1,4 @@
/* global APP, $ */ /* global APP, $, _ */
import {processReplacements, linkify} from './Replacement'; import {processReplacements, linkify} from './Replacement';
import CommandsProcessor from './Commands'; import CommandsProcessor from './Commands';
@ -10,6 +10,33 @@ import UIEvents from '../../../../service/UI/UIEvents';
import { smileys } from './smileys'; 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; var unreadMessages = 0;
/** /**
@ -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);
} }
/** /**

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

@ -1,8 +1,20 @@
/* global $, APP, interfaceConfig */ /* global $, APP, interfaceConfig, _ */
import Avatar from '../../avatar/Avatar'; import Avatar from '../../avatar/Avatar';
import UIEvents from '../../../../service/UI/UIEvents'; import UIEvents from '../../../../service/UI/UIEvents';
import UIUtil from '../../util/UIUtil'; 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; let numberOfContacts = 0;
/** /**
@ -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();

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

@ -1,10 +1,45 @@
/* global $ */ /* global $, _ */
import UIUtil from "../../util/UIUtil"; 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 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 { 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());

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

@ -1,10 +1,66 @@
/* global $, APP, AJS, interfaceConfig, JitsiMeetJS */ /* global $, _, APP, AJS, interfaceConfig, JitsiMeetJS */
import UIUtil from "../../util/UIUtil"; import UIUtil from "../../util/UIUtil";
import UIEvents from "../../../../service/UI/UIEvents"; 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 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. * Generate html select options for available languages.
* *
@ -79,6 +135,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';