From a1e098680d1518bdb35d7d54ed23d4896452739b Mon Sep 17 00:00:00 2001 From: Konstantyn Pahsura Date: Tue, 25 Oct 2016 16:16:15 +0300 Subject: [PATCH 1/2] make side panels init from js --- index.html | 89 +------------------ modules/UI/UI.js | 19 ++-- modules/UI/side_pannels/SidePanels.js | 19 ++++ modules/UI/side_pannels/chat/Chat.js | 34 ++++++- .../side_pannels/contactlist/ContactList.js | 3 +- .../contactlist/ContactListView.js | 27 +++++- modules/UI/side_pannels/profile/Profile.js | 37 +++++++- .../UI/side_pannels/settings/SettingsMenu.js | 59 +++++++++++- 8 files changed, 178 insertions(+), 109 deletions(-) create mode 100644 modules/UI/side_pannels/SidePanels.js diff --git a/index.html b/index.html index c56522a37..57c55e5a7 100644 --- a/index.html +++ b/index.html @@ -140,94 +140,7 @@ -
-
-
-
- - -
-
- - -
-
-

-
    -
  • -
  • - -
    • -
  • - -
    • -
-
-
-
-
- -
- -
-
- -
- - -
-
- -
-
-
-
-
-
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    -
    - - -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    +
    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'; From 9f280e320d9a27f4757ac3f473aa36048e33112d Mon Sep 17 00:00:00 2001 From: Konstantyn Pahsura Date: Wed, 2 Nov 2016 16:58:43 +0200 Subject: [PATCH 2/2] _.template removed --- modules/UI/side_pannels/chat/Chat.js | 18 +++++++++--------- .../contactlist/ContactListView.js | 14 +++++++------- modules/UI/side_pannels/profile/Profile.js | 13 +++++++------ .../UI/side_pannels/settings/SettingsMenu.js | 13 +++++++------ 4 files changed, 30 insertions(+), 28 deletions(-) diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js index 5bb7c3d80..60743a87d 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,8 +10,9 @@ import UIEvents from '../../../../service/UI/UIEvents'; import { smileys } from './smileys'; -const sidePannelsContainerId = 'sideToolbarContainer'; -const compiledTpl = _.template(` +let unreadMessages = 0; +const sidePanelsContainerId = 'sideToolbarContainer'; +const htmlStr = `
      @@ -31,13 +32,12 @@ const compiledTpl = _.template(`
      -
      `); -function initHTML() { - $(`#${sidePannelsContainerId}`) - .append(compiledTpl()); -} +
      `; -var unreadMessages = 0; +function initHTML() { + $(`#${sidePanelsContainerId}`) + .append(htmlStr); +} /** * The container id, which is and the element id. diff --git a/modules/UI/side_pannels/contactlist/ContactListView.js b/modules/UI/side_pannels/contactlist/ContactListView.js index e3c136aa2..94a6dd2b9 100644 --- a/modules/UI/side_pannels/contactlist/ContactListView.js +++ b/modules/UI/side_pannels/contactlist/ContactListView.js @@ -1,21 +1,21 @@ -/* 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(` +let numberOfContacts = 0; +const sidePanelsContainerId = 'sideToolbarContainer'; +const htmlStr = `
      -
      `); + `; function initHTML() { - $(`#${sidePannelsContainerId}`) - .append(compiledTpl()); + $(`#${sidePanelsContainerId}`) + .append(htmlStr); } -let numberOfContacts = 0; /** * Updates the number of participants in the contact list button and sets diff --git a/modules/UI/side_pannels/profile/Profile.js b/modules/UI/side_pannels/profile/Profile.js index 1efc63f45..0147aca52 100644 --- a/modules/UI/side_pannels/profile/Profile.js +++ b/modules/UI/side_pannels/profile/Profile.js @@ -1,10 +1,10 @@ -/* global $, _ */ +/* global $ */ import UIUtil from "../../util/UIUtil"; import UIEvents from "../../../../service/UI/UIEvents"; import Settings from '../../../settings/Settings'; -const sidePannelsContainerId = 'sideToolbarContainer'; -const compiledTpl = _.template(` +const sidePanelsContainerId = 'sideToolbarContainer'; +const htmlStr = `
      @@ -31,10 +31,11 @@ const compiledTpl = _.template(`
      -
      `); + `; + function initHTML() { - $(`#${sidePannelsContainerId}`) - .append(compiledTpl()); + $(`#${sidePanelsContainerId}`) + .append(htmlStr); } export default { diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js index 6f68e810b..3daded142 100644 --- a/modules/UI/side_pannels/settings/SettingsMenu.js +++ b/modules/UI/side_pannels/settings/SettingsMenu.js @@ -1,12 +1,12 @@ -/* 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(` +const sidePanelsContainerId = 'sideToolbarContainer'; +const htmlStr = `
      @@ -55,10 +55,11 @@ const compiledTpl = _.template(`
      - `); + `; + function initHTML() { - $(`#${sidePannelsContainerId}`) - .append(compiledTpl()); + $(`#${sidePanelsContainerId}`) + .append(htmlStr); } /**