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

make extended buttons dynamic

This commit is contained in:
Kostiantyn Pashura 2016-10-11 16:30:28 +03:00 committed by Konstantyn Pahsura
parent 8b2491c7a2
commit be1ba21166
4 changed files with 149 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@ -100,38 +100,12 @@
<div id="notice" class="notice" style="display: none">
<span id="noticeText" class="noticeText"></span>
</div>
<span id="mainToolbar" class="toolbar"></span>
<div id="mainToolbar" class="toolbar"></div>
</div>
<div id="subject" class="hide"></div>
<div id="extendedToolbar" class="toolbar">
<a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile">
<img id="avatar" src="images/avatar2.png"/>
</a>
<a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
<span class="badge-round">
<span id="numberOfParticipants"></span>
</span>
</a>
<!--a class="button icon-link" id="toolbar_button_link"></a-->
<a class="button icon-chat" id="toolbar_button_chat" shortcut="toggleChatPopover">
<span class="badge-round">
<span id="unreadMessages"></span>
</span>
</a>
<a class="button" id="toolbar_button_record" style="display: none"></a>
<a class="button icon-share-doc" id="toolbar_button_etherpad"></a>
<a class="button icon-shared-video" id="toolbar_button_sharedvideo" style="display: none">
<ul id="sharedVideoMutedPopup" class="loginmenu extendedToolbarPopup">
<li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
</ul>
</a>
<a class="button icon-telephone" id="toolbar_button_sip" style="display: none"></a>
<a class="button icon-dialpad" id="toolbar_button_dialpad" style="display: none"></a>
<a class="button icon-settings" id="toolbar_button_settings"></a>
<a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a>
<a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
<a class="button icon-feedback" id="feedbackButton"></a>
<div id="extendedToolbarButtons"></div>
<div id="sideToolbarContainer">
<div id="profile_container" class="sideToolbarContainer__inner">

16
interface_config.js
View File

@ -24,14 +24,26 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
AUTHENTICATION_ENABLE: true,
// the toolbar buttons line is intentionally left in one line, to be able
// to easily override values or remove them using regex
MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line
/**
* The index of the splitter button in the main toolbar. The splitter
* button is a button in the toolbar that will be applied a special styling
* visually dividing the toolbar buttons.
*/
//MAIN_TOOLBAR_SPLITTER_INDEX: -1,
TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'raisehand', 'chat', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
/**
* the toolbar buttons line is intentionally left in one line, to be able
* to easily override values or remove them using regex
*/
TOOLBAR_BUTTONS: [
//main toolbar
'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup',
//extended toolbar
'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
/**
* Main Toolbar Buttons
* All of them should be in TOOLBAR_BUTTONS
*/
MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line
SETTINGS_SECTIONS: ['language', 'devices', 'moderator'],
// Determines how the video would fit the screen. 'both' would fit the whole
// screen, 'height' would fit the original video height to the height of the

2
modules/UI/UI.js
View File

@ -1021,7 +1021,7 @@ UI.addMessage = function (from, displayName, message, stamp) {
// eslint-disable-next-line no-unused-vars
UI.updateDTMFSupport = function (isDTMFSupported) {
//TODO: enable when the UI is ready
//Toolbar.showDialPadButton(dtmfSupport);
//Toolbar.showDialPadButton(isDTMFSupported);
};
/**

183
modules/UI/toolbars/Toolbar.js
View File

@ -6,6 +6,11 @@ import SideContainerToggler from "../side_pannels/SideContainerToggler";
let emitter = null;
let Toolbar;
/**
* Handlers for toolbar buttons.
*
* buttonId {string}: handler {function}
*/
const buttonHandlers = {
"toolbar_button_profile": function () {
JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');
@ -124,6 +129,9 @@ const buttonHandlers = {
}
};
/**
* All toolbars buttons description
*/
const defaultToolbarButtons = {
'microphone': {
id: 'toolbar_button_mute',
@ -194,6 +202,7 @@ const defaultToolbarButtons = {
'chat': {
id: 'toolbar_button_chat',
tooltipKey: 'toolbar.chat',
className: 'button icon-chat',
shortcut: 'C',
shortcutAttr: 'toggleChatPopover',
shortcutFunc: function() {
@ -201,21 +210,28 @@ const defaultToolbarButtons = {
APP.UI.toggleChat();
},
shortcutDescription: 'keyboardShortcuts.toggleChat',
sideContainerId: 'chat_container'
sideContainerId: 'chat_container',
html: `<span class="badge-round">
<span id="unreadMessages"></span>
</span>`
},
'contacts': {
id: 'toolbar_contact_list',
tooltipKey: 'bottomtoolbar.contactlist',
className: 'button icon-contactList',
sideContainerId: 'contacts_container'
},
'profile': {
id: 'toolbar_button_profile',
tooltipKey: 'profile.setDisplayNameLabel',
sideContainerId: 'profile_container'
className: 'button',
sideContainerId: 'profile_container',
html: `<img id="avatar" src="images/avatar2.png"/>`
},
'etherpad': {
id: 'toolbar_button_etherpad',
tooltipKey: 'toolbar.etherpad',
className: 'button icon-share-doc'
},
'fullscreen': {
id: 'toolbar_button_fullScreen',
@ -234,6 +250,7 @@ const defaultToolbarButtons = {
'settings': {
id: 'toolbar_button_settings',
tooltipKey: 'toolbar.Settings',
className: 'button icon-settings',
sideContainerId: "settings_container"
},
'hangup': {
@ -246,6 +263,7 @@ const defaultToolbarButtons = {
'filmstrip': {
id: 'toolbar_film_strip',
tooltipKey: 'toolbar.filmstrip',
className: "button icon-toggle-filmstrip",
shortcut: "F",
shortcutAttr: "filmstripPopover",
shortcutFunc: function() {
@ -267,6 +285,29 @@ const defaultToolbarButtons = {
shortcutDescription: "keyboardShortcuts.raiseHand",
content: "Raise Hand",
i18n: "[content]toolbar.raiseHand"
},
//init and btn handler: Recording.initRecordingButton (Recording.js)
'recording': {
id: 'toolbar_button_record',
tooltipKey: 'liveStreaming.buttonTooltip',
className: 'button'
},
'sharedvideo': {
id: 'toolbar_button_sharedvideo',
tooltipKey: 'toolbar.sharedvideo',
className: 'button icon-shared-video'
},
'sip': {
id: 'toolbar_button_sip',
tooltipKey: 'toolbar.sip',
className: 'button icon-telephone'
},
'dialpad': {
id: 'toolbar_button_dialpad',
tooltipKey: 'toolbar.dialpad',
className: 'button icon-dialpad',
//TODO: remove it after UI.updateDTMFSupport fix
hidden: true
}
};
@ -281,8 +322,7 @@ function showSipNumberInput () {
let titleKey = "dialog.sipMsg";
let msgString = (`
<input name="sipNumber" type="text"
value="${defaultNumber}" autofocus>
`);
value="${defaultNumber}" autofocus>`);
APP.UI.messageHandler.openTwoButtonDialog({
titleKey,
@ -297,6 +337,19 @@ function showSipNumberInput () {
});
}
/**
* Get place for toolbar button.
* Now it can be in main toolbar or in extended (left) toolbar
*
* @param btn {string}
* @returns {string}
*/
function getToolbarButtonPlace (btn) {
return interfaceConfig.MAIN_TOOLBAR_BUTTONS.includes(btn) ?
'main' :
'extended';
}
Toolbar = {
init (eventEmitter) {
emitter = eventEmitter;
@ -305,45 +358,14 @@ Toolbar = {
this.toolbarSelector = $("#mainToolbarContainer");
this.extendedToolbarSelector = $("#extendedToolbar");
// First hide all disabled buttons in the extended toolbar.
// TODO: Make the extended toolbar dynamically created.
UIUtil.hideDisabledButtons(defaultToolbarButtons);
// Initialise the toolbar buttons.
// The main toolbar will only take into account
// it's own configuration from interface_config.
this._initToolbarButtons();
// Initialise the main toolbar. The main toolbar will only take into
// account it's own configuration from interface_config.
this._initMainToolbarButtons();
this._setShortcutsAndTooltips();
Object.keys(defaultToolbarButtons).forEach(
id => {
if (UIUtil.isButtonEnabled(id)) {
let button = defaultToolbarButtons[id];
let buttonElement = document.getElementById(button.id);
let tooltipPosition
= (interfaceConfig.MAIN_TOOLBAR_BUTTONS
.indexOf(id) > -1)
? "bottom" : "right";
UIUtil.setTooltip( buttonElement,
button.tooltipKey,
tooltipPosition);
if (button.shortcut)
APP.keyboardshortcut.registerShortcut(
button.shortcut,
button.shortcutAttr,
button.shortcutFunc,
button.shortcutDescription
);
}
}
);
Object.keys(buttonHandlers).forEach(
buttonId => $(`#${buttonId}`).click(function(event) {
!$(this).prop('disabled') && buttonHandlers[buttonId](event);
})
);
this._setButtonHandlers();
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
(containerId, isVisible) => {
@ -703,16 +725,17 @@ Toolbar = {
},
/**
* Initialise main toolbar buttons.
* Initialise toolbar buttons.
*/
_initMainToolbarButtons() {
interfaceConfig.MAIN_TOOLBAR_BUTTONS.forEach((value, index) => {
_initToolbarButtons() {
interfaceConfig.TOOLBAR_BUTTONS.forEach((value, index) => {
let place = getToolbarButtonPlace(value);
if (value && value in defaultToolbarButtons) {
let button = defaultToolbarButtons[value];
this._addMainToolbarButton(
this._addToolbarButton(
button,
(index === 0),
(index === interfaceConfig.MAIN_TOOLBAR_BUTTONS.length -1),
place,
(interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX !== undefined
&& index
=== interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX));
@ -721,7 +744,7 @@ Toolbar = {
},
/**
* Adds the given button to the main (top) toolbar.
* Adds the given button to the main (top) or extended (left) toolbar.
*
* @param {Object} the button to add.
* @param {boolean} isFirst indicates if this is the first button in the
@ -731,16 +754,26 @@ Toolbar = {
* @param {boolean} isSplitter if this button is a splitter button for
* the dialog, which means that a special splitter style will be applied
*/
_addMainToolbarButton(button, isFirst, isLast, isSplitter) {
_addToolbarButton(button, place, isSplitter) {
const places = {
main: 'mainToolbar',
extended: 'extendedToolbarButtons'
};
let id = places[place];
let buttonElement = document.createElement("a");
if (button.className)
buttonElement.className = button.className
+ ((isFirst) ? " first" : "")
+ ((isLast) ? " last" : "")
+ ((isSplitter) ? " splitter": "");
buttonElement.id = button.id;
if (button.html)
buttonElement.innerHTML = button.html;
//TODO: remove it after UI.updateDTMFSupport fix
if (button.hidden)
buttonElement.style.display = 'none';
if (button.shortcutAttr)
buttonElement.setAttribute("shortcut", button.shortcutAttr);
@ -754,7 +787,7 @@ Toolbar = {
buttonElement.setAttribute("data-placement", "bottom");
this._addPopups(buttonElement, button.popups);
document.getElementById("mainToolbar")
document.getElementById(id)
.appendChild(buttonElement);
},
@ -779,6 +812,52 @@ Toolbar = {
*/
_setToggledState(elementId, isToggled) {
$("#" + elementId).toggleClass("toggled", isToggled);
},
/**
* Sets Shortcuts and Tooltips for all toolbar buttons
*
* @private
*/
_setShortcutsAndTooltips() {
Object.keys(defaultToolbarButtons).forEach(
id => {
if (UIUtil.isButtonEnabled(id)) {
let button = defaultToolbarButtons[id];
let buttonElement = document.getElementById(button.id);
if (!buttonElement) return false;
let tooltipPosition
= (interfaceConfig.MAIN_TOOLBAR_BUTTONS
.indexOf(id) > -1)
? "bottom" : "right";
UIUtil.setTooltip( buttonElement,
button.tooltipKey,
tooltipPosition);
if (button.shortcut)
APP.keyboardshortcut.registerShortcut(
button.shortcut,
button.shortcutAttr,
button.shortcutFunc,
button.shortcutDescription
);
}
}
);
},
/**
* Sets Handlers for all toolbar buttons
*
* @private
*/
_setButtonHandlers() {
Object.keys(buttonHandlers).forEach(
buttonId => $(`#${buttonId}`).click(function(event) {
!$(this).prop('disabled') && buttonHandlers[buttonId](event);
})
);
}
};