Browse Source

An initial version of a "keyboard shortcuts" help panel.

j8
Boris Grozev 9 years ago
parent
commit
d79971a737
6 changed files with 153 additions and 3 deletions
  1. 1
    1
      Makefile
  2. 54
    0
      css/keyboard-shortcuts.css
  3. 67
    0
      index.html
  4. 13
    0
      lang/main.json
  5. 8
    1
      modules/UI/UI.js
  6. 10
    1
      modules/keyboardshortcut/keyboardshortcut.js

+ 1
- 1
Makefile View File

3
 UGLIFYJS = ./node_modules/.bin/uglifyjs
3
 UGLIFYJS = ./node_modules/.bin/uglifyjs
4
 EXORCIST = ./node_modules/.bin/exorcist
4
 EXORCIST = ./node_modules/.bin/exorcist
5
 CLEANCSS = ./node_modules/.bin/cleancss
5
 CLEANCSS = ./node_modules/.bin/cleancss
6
-CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css
6
+CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css keyboard-shortcuts.css
7
 DEPLOY_DIR = libs
7
 DEPLOY_DIR = libs
8
 BROWSERIFY_FLAGS = -d
8
 BROWSERIFY_FLAGS = -d
9
 OUTPUT_DIR = .
9
 OUTPUT_DIR = .

+ 54
- 0
css/keyboard-shortcuts.css View File

1
+#keyboard-shortcuts {
2
+    display: none;
3
+    position: absolute;
4
+    bottom: 20px;
5
+    left: 20px;
6
+    overflow: hidden;
7
+    z-index: 1;
8
+    opacity: .85;
9
+    border-top-left-radius: 15px;
10
+    border-top-right-radius: 15px;
11
+    border-bottom-right-radius: 15px;
12
+    border-bottom-left-radius: 15px;
13
+    background-color: rgb(0, 0, 0);
14
+    background-image: none;
15
+    background-repeat: repeat;
16
+    background-attachment: scroll;
17
+    background-position: 0px center;
18
+    background-clip: border-box;
19
+    background-origin: padding-box;
20
+    background-size: auto auto;
21
+}
22
+
23
+#keyboard-shortcuts.header {
24
+    font-size: 15pt; 
25
+}
26
+
27
+#keyboard-shortcuts.content {
28
+    font-size: 10pt; 
29
+    color: #ffffff;
30
+}
31
+
32
+#keyboard-shortcuts.item {
33
+    color: #ffffff;
34
+    font-size: 10pt; 
35
+}
36
+#keyboard-shortcuts.item-details {
37
+    color: #ffffff;
38
+    font-size: 10pt; 
39
+}
40
+
41
+#keyboard-shortcuts.item-action {
42
+    color: #ffffff;
43
+    font-size: 10pt; 
44
+}
45
+
46
+#keyboard-shortcuts.item-description {
47
+    color: #ffffff;
48
+    font-size: 10pt; 
49
+}
50
+
51
+#keyboard-shortcuts.regular-key {
52
+    color: #ffffff;
53
+    font-size: 10pt; 
54
+}

+ 67
- 0
index.html View File

279
             <a id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]feedback"><i class="fa fa-heart"></i></a>
279
             <a id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]feedback"><i class="fa fa-heart"></i></a>
280
         </div>
280
         </div>
281
     </div>
281
     </div>
282
+    <div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
283
+        <div class="header"><h3 data-i18n="keyboardShortcuts.keyboardShortcuts"></h3></div>
284
+        <div class="content">
285
+            <ul class="item">
286
+                <li class="item-details">
287
+                    <span class="item-action">
288
+                        <kbd class="regular-key">M</kbd>
289
+                    </span>
290
+                    <strong class="item-description" data-i18n="keyboardShortcuts.mute"></strong>
291
+                </li>
292
+                <li class="item-details">
293
+                    <span class="item-action">
294
+                        <kbd class="regular-key">V</kbd>
295
+                    </span>
296
+                    <strong class="item-description" data-i18n="keyboardShortcuts.videoMute"></strong>
297
+                </li>
298
+                <li class="item-details">
299
+                    <span class="item-action">
300
+                        <kbd class="regular-key">C</kbd>
301
+                    </span>
302
+                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleChat"></strong>
303
+                </li>
304
+                <li class="item-details">
305
+                    <span class="item-action">
306
+                        <kbd class="regular-key">R</kbd>
307
+                    </span>
308
+                    <strong class="item-description" data-i18n="keyboardShortcuts.raiseHand"></strong>
309
+                </li>
310
+                <li class="item-details">
311
+                    <span class="item-action">
312
+                        <kbd class="regular-key">T</kbd>
313
+                    </span>
314
+                    <strong class="item-description" data-i18n="keyboardShortcuts.pushToTalk"></strong>
315
+                </li>
316
+                <li class="item-details">
317
+                    <span class="item-action">
318
+                        <kbd class="regular-key">D</kbd>
319
+                    </span>
320
+                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleScreensharing"></strong>
321
+                </li>
322
+                <li class="item-details">
323
+                    <span class="item-action">
324
+                        <kbd class="regular-key">F</kbd>
325
+                    </span>
326
+                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleFilmstrip"></strong>
327
+                </li>
328
+                <li class="item-details">
329
+                    <span class="item-action">
330
+                        <kbd class="regular-key">?</kbd>
331
+                    </span>
332
+                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleShortcuts"></strong>
333
+                </li>
334
+                <li class="item-details">
335
+                    <span class="item-action">
336
+                        <kbd class="regular-key">0</kbd>
337
+                    </span>
338
+                    <strong class="item-description" data-i18n="keyboardShortcuts.focusLocal"></strong>
339
+                </li>
340
+                <li class="item-details">
341
+                    <span class="item-action">
342
+                        <kbd class="regular-key">1-9</kbd>
343
+                    </span>
344
+                    <strong class="item-description" data-i18n="keyboardShortcuts.focusRemote"></strong>
345
+                </li>
346
+            </ul>
347
+        </div>
348
+    </div>
282
   </body>
349
   </body>
283
 </html>
350
 </html>

+ 13
- 0
lang/main.json View File

11
     "defaultNickname": "ex. Jane Pink",
11
     "defaultNickname": "ex. Jane Pink",
12
     "defaultLink": "e.g. __url__",
12
     "defaultLink": "e.g. __url__",
13
     "calling": "Calling __name__ ...",
13
     "calling": "Calling __name__ ...",
14
+    "keyboardShortcuts": {
15
+        "keyboardShortcuts": "Keyboard shortcuts:",
16
+        "raiseHand": "Raise your hand.",
17
+        "pushToTalk": "Push to talk.",
18
+        "toggleScreensharing": "Switch between camera and screensharing.",
19
+        "toggleFilmstrip": "Show or hide the filmstrip.",
20
+        "toggleShortcuts": "Show or hide this help menu.",
21
+        "focusLocal": "Focus on the local video.",
22
+        "focusRemote": "Focus on one of the remote videos.",
23
+        "toggleChat": "Open or close the chat panel.",
24
+        "mute": "Mute or unmute the microphone.",
25
+        "videoMute": "Stop or start the local video."
26
+    },
14
     "welcomepage":{
27
     "welcomepage":{
15
         "go": "GO",
28
         "go": "GO",
16
         "roomname": "Enter room name",
29
         "roomname": "Enter room name",

+ 8
- 1
modules/UI/UI.js View File

1379
 };
1379
 };
1380
 
1380
 
1381
 UI.hideRingOverLay = function () {
1381
 UI.hideRingOverLay = function () {
1382
-    if(!RingOverlay.hide())
1382
+    if (!RingOverlay.hide())
1383
         return;
1383
         return;
1384
     ToolbarToggler.resetAlwaysVisibleToolbar();
1384
     ToolbarToggler.resetAlwaysVisibleToolbar();
1385
     FilmStrip.toggleFilmStrip(true);
1385
     FilmStrip.toggleFilmStrip(true);
1386
 };
1386
 };
1387
 
1387
 
1388
+/**
1389
+ * Shows or hides the keyboard shortcuts panel.'
1390
+ */
1391
+UI.toggleKeyboardShortcutsPanel = function() {
1392
+    $('#keyboard-shortcuts').toggle();
1393
+};
1394
+
1388
 module.exports = UI;
1395
 module.exports = UI;

+ 10
- 1
modules/keyboardshortcut/keyboardshortcut.js View File

3
 var shortcuts = {};
3
 var shortcuts = {};
4
 function initShortcutHandlers() {
4
 function initShortcutHandlers() {
5
     shortcuts = {
5
     shortcuts = {
6
+        191: {
7
+            character: "/",
8
+            function: function(e) {
9
+                // Only trigger on "?", not on "/".
10
+                if (e.shiftKey) {
11
+                    APP.UI.toggleKeyboardShortcutsPanel();
12
+                }
13
+            }
14
+        },
6
         67: {
15
         67: {
7
             character: "C",
16
             character: "C",
8
             id: "toggleChatPopover",
17
             id: "toggleChatPopover",
56
                 $(":focus").is("input[type=password]") ||
65
                 $(":focus").is("input[type=password]") ||
57
                 $(":focus").is("textarea"))) {
66
                 $(":focus").is("textarea"))) {
58
                 if (typeof shortcuts[keycode] === "object") {
67
                 if (typeof shortcuts[keycode] === "object") {
59
-                    shortcuts[keycode].function();
68
+                    shortcuts[keycode].function(e);
60
                 }
69
                 }
61
                 else if (keycode >= "0".charCodeAt(0) &&
70
                 else if (keycode >= "0".charCodeAt(0) &&
62
                     keycode <= "9".charCodeAt(0)) {
71
                     keycode <= "9".charCodeAt(0)) {

Loading…
Cancel
Save