Merge pull request #1054 from kkrisstoff/task/make-extended-toolbar-dynamically-created-buttons

make extended buttons dynamic

css/_toolbars.scss

@@ -42,22 +42,7 @@
     margin-right: auto;
     width: auto;
     border-radius: 3px;
-
-    /**
-     * First button in the toolbar.
-     */
-    .first {
-        border-bottom-left-radius: 3px;
-        border-top-left-radius: 3px;
-    }
-
-    /**
-     * Last button in the toolbar.
-     */
-    .last {
-        border-bottom-right-radius: 3px;
-        border-top-right-radius: 3px;
-    }
+    overflow: hidden;
 
     /**
      * Splitter button in the toolbar.
@@ -75,8 +60,8 @@
     display: flex;
     width: $defaultToolbarSize;
     height: 100%;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
     padding-top: 10px;
     box-sizing: border-box;
     flex-direction: column;

index.html

@@ -131,37 +131,13 @@
                 <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>
+            <div id="extendedToolbarButtons"></div>
+
             <a class="button icon-feedback" id="feedbackButton"></a>
 
             <div id="sideToolbarContainer">

interface_config.js

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

modules/UI/UI.js

@@ -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);
 };
 
 /**

modules/UI/toolbars/Toolbar.js

@@ -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,31 @@ 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',
-        sideContainerId: 'contacts_container'
+        className: 'button icon-contactList',
+        sideContainerId: 'contacts_container',
+        html: `<span class="badge-round">
+                   <span id="numberOfParticipants"></span>
+               </span>`
     },
     '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 +253,7 @@ const defaultToolbarButtons = {
     'settings': {
         id: 'toolbar_button_settings',
         tooltipKey: 'toolbar.Settings',
+        className: 'button icon-settings',
         sideContainerId: "settings_container"
     },
     'hangup': {
@@ -246,6 +266,7 @@ const defaultToolbarButtons = {
     'filmstrip': {
         id: 'toolbar_film_strip',
         tooltipKey: 'toolbar.filmstrip',
+        className: "button icon-toggle-filmstrip",
         shortcut: "F",
         shortcutAttr: "filmstripPopover",
         shortcutFunc: function() {
@@ -267,6 +288,34 @@ 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',
+        html: `<ul id="sharedVideoMutedPopup" 
+                   class="loginmenu extendedToolbarPopup">
+                   <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
+               </ul>
+`
+    },
+    '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 +330,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 +345,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 +366,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();
-
-        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
-                        );
-                }
-            }
-        );
+        this._setShortcutsAndTooltips();
 
-        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 +733,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 +752,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 +762,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": "");
+                + ((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 +795,7 @@ Toolbar = {
         buttonElement.setAttribute("data-placement", "bottom");
         this._addPopups(buttonElement, button.popups);
 
-        document.getElementById("mainToolbar")
+        document.getElementById(id)
             .appendChild(buttonElement);
     },
 
@@ -779,6 +820,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);
+            })
+        );
     }
 };