浏览代码

make extended buttons dynamic

master
Kostiantyn Pashura 9 年前
父节点
当前提交
be1ba21166
共有 4 个文件被更改,包括 149 次插入84 次删除
  1. 2
    28
      index.html
  2. 14
    2
      interface_config.js
  3. 1
    1
      modules/UI/UI.js
  4. 132
    53
      modules/UI/toolbars/Toolbar.js

+ 2
- 28
index.html 查看文件

100
                 <div id="notice" class="notice" style="display: none">
100
                 <div id="notice" class="notice" style="display: none">
101
                     <span id="noticeText" class="noticeText"></span>
101
                     <span id="noticeText" class="noticeText"></span>
102
                 </div>
102
                 </div>
103
-                <span id="mainToolbar" class="toolbar"></span>
103
+                <div id="mainToolbar" class="toolbar"></div>
104
         </div>
104
         </div>
105
         <div id="subject" class="hide"></div>
105
         <div id="subject" class="hide"></div>
106
 
106
 
107
         <div id="extendedToolbar" class="toolbar">
107
         <div id="extendedToolbar" class="toolbar">
108
-            <a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile">
109
-                <img id="avatar" src="images/avatar2.png"/>
110
-            </a>
111
-            <a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
112
-                <span class="badge-round">
113
-                    <span id="numberOfParticipants"></span>
114
-                </span>
115
-            </a>
116
-            <!--a class="button icon-link" id="toolbar_button_link"></a-->
117
-            <a class="button icon-chat" id="toolbar_button_chat" shortcut="toggleChatPopover">
118
-                <span class="badge-round">
119
-                    <span id="unreadMessages"></span>
120
-                </span>
121
-            </a>
122
-            <a class="button" id="toolbar_button_record" style="display: none"></a>
123
-            <a class="button icon-share-doc" id="toolbar_button_etherpad"></a>
124
-            <a class="button icon-shared-video" id="toolbar_button_sharedvideo" style="display: none">
125
-                <ul id="sharedVideoMutedPopup" class="loginmenu extendedToolbarPopup">
126
-                    <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
127
-                </ul>
128
-            </a>
129
-            <a class="button icon-telephone" id="toolbar_button_sip" style="display: none"></a>
130
-            <a class="button icon-dialpad" id="toolbar_button_dialpad" style="display: none"></a>
131
-            <a class="button icon-settings" id="toolbar_button_settings"></a>
132
-            <a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a>
133
-            <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
134
-            <a class="button icon-feedback" id="feedbackButton"></a>
108
+            <div id="extendedToolbarButtons"></div>
135
 
109
 
136
             <div id="sideToolbarContainer">
110
             <div id="sideToolbarContainer">
137
                 <div id="profile_container" class="sideToolbarContainer__inner">
111
                 <div id="profile_container" class="sideToolbarContainer__inner">

+ 14
- 2
interface_config.js 查看文件

24
     AUTHENTICATION_ENABLE: true,
24
     AUTHENTICATION_ENABLE: true,
25
     // the toolbar buttons line is intentionally left in one line, to be able
25
     // the toolbar buttons line is intentionally left in one line, to be able
26
     // to easily override values or remove them using regex
26
     // to easily override values or remove them using regex
27
-    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line
28
     /**
27
     /**
29
      * The index of the splitter button in the main toolbar. The splitter
28
      * The index of the splitter button in the main toolbar. The splitter
30
      * button is a button in the toolbar that will be applied a special styling
29
      * button is a button in the toolbar that will be applied a special styling
31
      * visually dividing the toolbar buttons.
30
      * visually dividing the toolbar buttons.
32
      */
31
      */
33
     //MAIN_TOOLBAR_SPLITTER_INDEX: -1,
32
     //MAIN_TOOLBAR_SPLITTER_INDEX: -1,
34
-    TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'raisehand', 'chat', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
33
+    /**
34
+     * the toolbar buttons line is intentionally left in one line, to be able
35
+     * to easily override values or remove them using regex
36
+     */
37
+    TOOLBAR_BUTTONS: [
38
+        //main toolbar
39
+        'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup',
40
+        //extended toolbar
41
+        'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
42
+    /**
43
+     * Main Toolbar Buttons
44
+     * All of them should be in TOOLBAR_BUTTONS
45
+     */
46
+    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line
35
     SETTINGS_SECTIONS: ['language', 'devices', 'moderator'],
47
     SETTINGS_SECTIONS: ['language', 'devices', 'moderator'],
36
     // Determines how the video would fit the screen. 'both' would fit the whole
48
     // Determines how the video would fit the screen. 'both' would fit the whole
37
     // screen, 'height' would fit the original video height to the height of the
49
     // screen, 'height' would fit the original video height to the height of the

+ 1
- 1
modules/UI/UI.js 查看文件

1021
 // eslint-disable-next-line no-unused-vars
1021
 // eslint-disable-next-line no-unused-vars
1022
 UI.updateDTMFSupport = function (isDTMFSupported) {
1022
 UI.updateDTMFSupport = function (isDTMFSupported) {
1023
     //TODO: enable when the UI is ready
1023
     //TODO: enable when the UI is ready
1024
-    //Toolbar.showDialPadButton(dtmfSupport);
1024
+    //Toolbar.showDialPadButton(isDTMFSupported);
1025
 };
1025
 };
1026
 
1026
 
1027
 /**
1027
 /**

+ 132
- 53
modules/UI/toolbars/Toolbar.js 查看文件

6
 let emitter = null;
6
 let emitter = null;
7
 let Toolbar;
7
 let Toolbar;
8
 
8
 
9
+/**
10
+ * Handlers for toolbar buttons.
11
+ *
12
+ * buttonId {string}: handler {function}
13
+ */
9
 const buttonHandlers = {
14
 const buttonHandlers = {
10
     "toolbar_button_profile": function () {
15
     "toolbar_button_profile": function () {
11
         JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');
16
         JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');
124
     }
129
     }
125
 };
130
 };
126
 
131
 
132
+/**
133
+ * All toolbars buttons description
134
+ */
127
 const defaultToolbarButtons = {
135
 const defaultToolbarButtons = {
128
     'microphone': {
136
     'microphone': {
129
         id: 'toolbar_button_mute',
137
         id: 'toolbar_button_mute',
194
     'chat': {
202
     'chat': {
195
         id: 'toolbar_button_chat',
203
         id: 'toolbar_button_chat',
196
         tooltipKey: 'toolbar.chat',
204
         tooltipKey: 'toolbar.chat',
205
+        className: 'button icon-chat',
197
         shortcut: 'C',
206
         shortcut: 'C',
198
         shortcutAttr: 'toggleChatPopover',
207
         shortcutAttr: 'toggleChatPopover',
199
         shortcutFunc: function() {
208
         shortcutFunc: function() {
201
             APP.UI.toggleChat();
210
             APP.UI.toggleChat();
202
         },
211
         },
203
         shortcutDescription: 'keyboardShortcuts.toggleChat',
212
         shortcutDescription: 'keyboardShortcuts.toggleChat',
204
-        sideContainerId: 'chat_container'
213
+        sideContainerId: 'chat_container',
214
+        html: `<span class="badge-round">
215
+                   <span id="unreadMessages"></span>
216
+               </span>`
205
     },
217
     },
206
     'contacts': {
218
     'contacts': {
207
         id: 'toolbar_contact_list',
219
         id: 'toolbar_contact_list',
208
         tooltipKey: 'bottomtoolbar.contactlist',
220
         tooltipKey: 'bottomtoolbar.contactlist',
221
+        className: 'button icon-contactList',
209
         sideContainerId: 'contacts_container'
222
         sideContainerId: 'contacts_container'
210
     },
223
     },
211
     'profile': {
224
     'profile': {
212
         id: 'toolbar_button_profile',
225
         id: 'toolbar_button_profile',
213
         tooltipKey: 'profile.setDisplayNameLabel',
226
         tooltipKey: 'profile.setDisplayNameLabel',
214
-        sideContainerId: 'profile_container'
227
+        className: 'button',
228
+        sideContainerId: 'profile_container',
229
+        html: `<img id="avatar" src="images/avatar2.png"/>`
215
     },
230
     },
216
     'etherpad': {
231
     'etherpad': {
217
         id: 'toolbar_button_etherpad',
232
         id: 'toolbar_button_etherpad',
218
         tooltipKey: 'toolbar.etherpad',
233
         tooltipKey: 'toolbar.etherpad',
234
+        className: 'button icon-share-doc'
219
     },
235
     },
220
     'fullscreen': {
236
     'fullscreen': {
221
         id: 'toolbar_button_fullScreen',
237
         id: 'toolbar_button_fullScreen',
234
     'settings': {
250
     'settings': {
235
         id: 'toolbar_button_settings',
251
         id: 'toolbar_button_settings',
236
         tooltipKey: 'toolbar.Settings',
252
         tooltipKey: 'toolbar.Settings',
253
+        className: 'button icon-settings',
237
         sideContainerId: "settings_container"
254
         sideContainerId: "settings_container"
238
     },
255
     },
239
     'hangup': {
256
     'hangup': {
246
     'filmstrip': {
263
     'filmstrip': {
247
         id: 'toolbar_film_strip',
264
         id: 'toolbar_film_strip',
248
         tooltipKey: 'toolbar.filmstrip',
265
         tooltipKey: 'toolbar.filmstrip',
266
+        className: "button icon-toggle-filmstrip",
249
         shortcut: "F",
267
         shortcut: "F",
250
         shortcutAttr: "filmstripPopover",
268
         shortcutAttr: "filmstripPopover",
251
         shortcutFunc: function() {
269
         shortcutFunc: function() {
267
         shortcutDescription: "keyboardShortcuts.raiseHand",
285
         shortcutDescription: "keyboardShortcuts.raiseHand",
268
         content: "Raise Hand",
286
         content: "Raise Hand",
269
         i18n: "[content]toolbar.raiseHand"
287
         i18n: "[content]toolbar.raiseHand"
288
+    },
289
+    //init and btn handler: Recording.initRecordingButton (Recording.js)
290
+    'recording': {
291
+        id: 'toolbar_button_record',
292
+        tooltipKey: 'liveStreaming.buttonTooltip',
293
+        className: 'button'
294
+    },
295
+    'sharedvideo': {
296
+        id: 'toolbar_button_sharedvideo',
297
+        tooltipKey: 'toolbar.sharedvideo',
298
+        className: 'button icon-shared-video'
299
+    },
300
+    'sip': {
301
+        id: 'toolbar_button_sip',
302
+        tooltipKey: 'toolbar.sip',
303
+        className: 'button icon-telephone'
304
+    },
305
+    'dialpad': {
306
+        id: 'toolbar_button_dialpad',
307
+        tooltipKey: 'toolbar.dialpad',
308
+        className: 'button icon-dialpad',
309
+        //TODO: remove it after UI.updateDTMFSupport fix
310
+        hidden: true
270
     }
311
     }
271
 };
312
 };
272
 
313
 
281
     let titleKey = "dialog.sipMsg";
322
     let titleKey = "dialog.sipMsg";
282
     let msgString = (`
323
     let msgString = (`
283
             <input name="sipNumber" type="text"
324
             <input name="sipNumber" type="text"
284
-                   value="${defaultNumber}" autofocus>
285
-    `);
325
+                   value="${defaultNumber}" autofocus>`);
286
 
326
 
287
     APP.UI.messageHandler.openTwoButtonDialog({
327
     APP.UI.messageHandler.openTwoButtonDialog({
288
         titleKey,
328
         titleKey,
297
     });
337
     });
298
 }
338
 }
299
 
339
 
340
+/**
341
+ * Get place for toolbar button.
342
+ * Now it can be in main toolbar or in extended (left) toolbar
343
+ *
344
+ * @param btn {string}
345
+ * @returns {string}
346
+ */
347
+function getToolbarButtonPlace (btn) {
348
+    return interfaceConfig.MAIN_TOOLBAR_BUTTONS.includes(btn) ?
349
+        'main' :
350
+        'extended';
351
+}
352
+
300
 Toolbar = {
353
 Toolbar = {
301
     init (eventEmitter) {
354
     init (eventEmitter) {
302
         emitter = eventEmitter;
355
         emitter = eventEmitter;
305
         this.toolbarSelector = $("#mainToolbarContainer");
358
         this.toolbarSelector = $("#mainToolbarContainer");
306
         this.extendedToolbarSelector = $("#extendedToolbar");
359
         this.extendedToolbarSelector = $("#extendedToolbar");
307
 
360
 
308
-        // First hide all disabled buttons in the extended toolbar.
309
-        // TODO: Make the extended toolbar dynamically created.
310
-        UIUtil.hideDisabledButtons(defaultToolbarButtons);
361
+        // Initialise the toolbar buttons.
362
+        // The main toolbar will only take into account
363
+        // it's own configuration from interface_config.
364
+        this._initToolbarButtons();
311
 
365
 
312
-        // Initialise the main toolbar. The main toolbar will only take into
313
-        // account it's own configuration from interface_config.
314
-        this._initMainToolbarButtons();
315
-
316
-        Object.keys(defaultToolbarButtons).forEach(
317
-            id => {
318
-                if (UIUtil.isButtonEnabled(id)) {
319
-                    let button = defaultToolbarButtons[id];
320
-                    let buttonElement = document.getElementById(button.id);
321
-
322
-                    let tooltipPosition
323
-                        = (interfaceConfig.MAIN_TOOLBAR_BUTTONS
324
-                                .indexOf(id) > -1)
325
-                            ? "bottom" : "right";
326
-
327
-                    UIUtil.setTooltip(  buttonElement,
328
-                                        button.tooltipKey,
329
-                                        tooltipPosition);
330
-
331
-                    if (button.shortcut)
332
-                        APP.keyboardshortcut.registerShortcut(
333
-                            button.shortcut,
334
-                            button.shortcutAttr,
335
-                            button.shortcutFunc,
336
-                            button.shortcutDescription
337
-                        );
338
-                }
339
-            }
340
-        );
366
+        this._setShortcutsAndTooltips();
341
 
367
 
342
-        Object.keys(buttonHandlers).forEach(
343
-            buttonId => $(`#${buttonId}`).click(function(event) {
344
-                !$(this).prop('disabled') && buttonHandlers[buttonId](event);
345
-            })
346
-        );
368
+        this._setButtonHandlers();
347
 
369
 
348
         APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
370
         APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
349
             (containerId, isVisible) => {
371
             (containerId, isVisible) => {
703
     },
725
     },
704
 
726
 
705
     /**
727
     /**
706
-     * Initialise main toolbar buttons.
728
+     * Initialise toolbar buttons.
707
      */
729
      */
708
-    _initMainToolbarButtons() {
709
-        interfaceConfig.MAIN_TOOLBAR_BUTTONS.forEach((value, index) => {
730
+    _initToolbarButtons() {
731
+        interfaceConfig.TOOLBAR_BUTTONS.forEach((value, index) => {
732
+            let place = getToolbarButtonPlace(value);
733
+
710
             if (value && value in defaultToolbarButtons) {
734
             if (value && value in defaultToolbarButtons) {
711
                 let button = defaultToolbarButtons[value];
735
                 let button = defaultToolbarButtons[value];
712
-                this._addMainToolbarButton(
736
+                this._addToolbarButton(
713
                     button,
737
                     button,
714
-                    (index === 0),
715
-                    (index === interfaceConfig.MAIN_TOOLBAR_BUTTONS.length -1),
738
+                    place,
716
                     (interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX !== undefined
739
                     (interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX !== undefined
717
                         && index
740
                         && index
718
                             === interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX));
741
                             === interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX));
721
     },
744
     },
722
 
745
 
723
     /**
746
     /**
724
-     * Adds the given button to the main (top) toolbar.
747
+     * Adds the given button to the main (top) or extended (left) toolbar.
725
      *
748
      *
726
      * @param {Object} the button to add.
749
      * @param {Object} the button to add.
727
      * @param {boolean} isFirst indicates if this is the first button in the
750
      * @param {boolean} isFirst indicates if this is the first button in the
731
      * @param {boolean} isSplitter if this button is a splitter button for
754
      * @param {boolean} isSplitter if this button is a splitter button for
732
      * the dialog, which means that a special splitter style will be applied
755
      * the dialog, which means that a special splitter style will be applied
733
      */
756
      */
734
-    _addMainToolbarButton(button, isFirst, isLast, isSplitter) {
757
+    _addToolbarButton(button, place, isSplitter) {
758
+        const places = {
759
+            main: 'mainToolbar',
760
+            extended: 'extendedToolbarButtons'
761
+        };
762
+        let id = places[place];
735
         let buttonElement = document.createElement("a");
763
         let buttonElement = document.createElement("a");
736
         if (button.className)
764
         if (button.className)
737
             buttonElement.className = button.className
765
             buttonElement.className = button.className
738
-                                    + ((isFirst) ? " first" : "")
739
-                                    + ((isLast) ? " last" : "")
740
-                                    + ((isSplitter) ? " splitter": "");
766
+                + ((isSplitter) ? " splitter": "");
741
 
767
 
742
         buttonElement.id = button.id;
768
         buttonElement.id = button.id;
743
 
769
 
770
+        if (button.html)
771
+            buttonElement.innerHTML = button.html;
772
+
773
+        //TODO: remove it after UI.updateDTMFSupport fix
774
+        if (button.hidden)
775
+            buttonElement.style.display = 'none';
776
+
744
         if (button.shortcutAttr)
777
         if (button.shortcutAttr)
745
             buttonElement.setAttribute("shortcut", button.shortcutAttr);
778
             buttonElement.setAttribute("shortcut", button.shortcutAttr);
746
 
779
 
754
         buttonElement.setAttribute("data-placement", "bottom");
787
         buttonElement.setAttribute("data-placement", "bottom");
755
         this._addPopups(buttonElement, button.popups);
788
         this._addPopups(buttonElement, button.popups);
756
 
789
 
757
-        document.getElementById("mainToolbar")
790
+        document.getElementById(id)
758
             .appendChild(buttonElement);
791
             .appendChild(buttonElement);
759
     },
792
     },
760
 
793
 
779
      */
812
      */
780
      _setToggledState(elementId, isToggled) {
813
      _setToggledState(elementId, isToggled) {
781
         $("#" + elementId).toggleClass("toggled", isToggled);
814
         $("#" + elementId).toggleClass("toggled", isToggled);
815
+    },
816
+
817
+    /**
818
+     * Sets Shortcuts and Tooltips for all toolbar buttons
819
+     *
820
+     * @private
821
+     */
822
+    _setShortcutsAndTooltips() {
823
+        Object.keys(defaultToolbarButtons).forEach(
824
+            id => {
825
+                if (UIUtil.isButtonEnabled(id)) {
826
+                    let button = defaultToolbarButtons[id];
827
+                    let buttonElement = document.getElementById(button.id);
828
+                    if (!buttonElement) return false;
829
+                    let tooltipPosition
830
+                        = (interfaceConfig.MAIN_TOOLBAR_BUTTONS
831
+                        .indexOf(id) > -1)
832
+                        ? "bottom" : "right";
833
+
834
+                    UIUtil.setTooltip(  buttonElement,
835
+                        button.tooltipKey,
836
+                        tooltipPosition);
837
+
838
+                    if (button.shortcut)
839
+                        APP.keyboardshortcut.registerShortcut(
840
+                            button.shortcut,
841
+                            button.shortcutAttr,
842
+                            button.shortcutFunc,
843
+                            button.shortcutDescription
844
+                        );
845
+                }
846
+            }
847
+        );
848
+    },
849
+
850
+    /**
851
+     * Sets Handlers for all toolbar buttons
852
+     *
853
+     * @private
854
+     */
855
+    _setButtonHandlers() {
856
+        Object.keys(buttonHandlers).forEach(
857
+            buttonId => $(`#${buttonId}`).click(function(event) {
858
+                !$(this).prop('disabled') && buttonHandlers[buttonId](event);
859
+            })
860
+        );
782
     }
861
     }
783
 };
862
 };
784
 
863
 

正在加载...
取消
保存