Merge pull request #732 from champtar/shortcut-help

Improve keyboard shortcut handling

modules/keyboardshortcut/keyboardshortcut.js

@@ -3,67 +3,64 @@
 var shortcuts = {};
 function initShortcutHandlers() {
     shortcuts = {
-        27: {
+        "ESCAPE": {
             character: "Esc",
             function: function() {
                 APP.UI.showKeyboardShortcutsPanel(false);
             }
         },
-        67: {
+        "C": {
             character: "C",
             id: "toggleChatPopover",
             function: function() {
                 APP.UI.toggleChat();
             }
         },
-        68: {
+        "D": {
             character: "D",
             id: "toggleDesktopSharingPopover",
             function: function () {
                 APP.conference.toggleScreenSharing();
             }
         },
-        70: {
+        "F": {
             character: "F",
             id: "filmstripPopover",
             function: function() {
                 APP.UI.toggleFilmStrip();
             }
         },
-        77: {
+        "M": {
             character: "M",
             id: "mutePopover",
             function: function() {
                 APP.conference.toggleAudioMuted();
             }
         },
-        82: {
+        "R": {
             character: "R",
             function: function() {
                 APP.conference.maybeToggleRaisedHand();
             }
 
         },
-        84: {
+        "T": {
             character: "T",
             function: function() {
                 APP.conference.muteAudio(true);
             }
         },
-        86: {
+        "V": {
             character: "V",
             id: "toggleVideoPopover",
             function: function() {
                 APP.conference.toggleVideoMuted();
             }
         },
-        191: {
-            character: "/",
+        "?": {
+            character: "?",
             function: function(e) {
-                // Only trigger on "?", not on "/".
-                if (e.shiftKey) {
-                    APP.UI.toggleKeyboardShortcutsPanel();
-                }
+                APP.UI.toggleKeyboardShortcutsPanel();
             }
         }
     };
@@ -72,20 +69,21 @@ function initShortcutHandlers() {
 var KeyboardShortcut = {
     init: function () {
         initShortcutHandlers();
+        var self = this;
         window.onkeyup = function(e) {
-            var keycode = e.which;
+            var key = self.getKeyboardKey(e).toUpperCase();
+            var num = parseInt(key, 10);
             if(!($(":focus").is("input[type=text]") ||
                 $(":focus").is("input[type=password]") ||
                 $(":focus").is("textarea"))) {
-                if (typeof shortcuts[keycode] === "object") {
-                    shortcuts[keycode].function(e);
+                if (shortcuts.hasOwnProperty(key)) {
+                    shortcuts[key].function(e);
                 }
-                else if (keycode >= "0".charCodeAt(0) &&
-                    keycode <= "9".charCodeAt(0)) {
-                    APP.UI.clickOnVideo(keycode - "0".charCodeAt(0) + 1);
+                else if (!isNaN(num) && num >= 0 && num <= 9) {
+                    APP.UI.clickOnVideo(num + 1);
                 }
-                //esc while the smileys are visible hides them
-            } else if (keycode === 27 &&
+            //esc while the smileys are visible hides them
+            } else if (key === "ESCAPE" &&
                 $('#smileysContainer').is(':visible')) {
                 APP.UI.toggleSmileys();
             }
@@ -95,13 +93,13 @@ var KeyboardShortcut = {
             if(!($(":focus").is("input[type=text]") ||
                 $(":focus").is("input[type=password]") ||
                 $(":focus").is("textarea"))) {
-                if(e.which === "T".charCodeAt(0)) {
+                var key = self.getKeyboardKey(e).toUpperCase();
+                if(key === "T") {
                     if(APP.conference.isLocalAudioMuted())
                         APP.conference.muteAudio(false);
                 }
             }
         };
-        var self = this;
         $('body').popover({ selector: '[data-toggle=popover]',
             trigger: 'click hover',
             content: function() {
@@ -116,14 +114,40 @@ var KeyboardShortcut = {
      * @returns {string} the keyboard shortcut used for the id given
      */
     getShortcut: function (id) {
-        for (var keycode in shortcuts) {
-            if (shortcuts.hasOwnProperty(keycode)) {
-                if (shortcuts[keycode].id === id) {
-                    return " (" + shortcuts[keycode].character + ")";
+        for (var key in shortcuts) {
+            if (shortcuts.hasOwnProperty(key)) {
+                if (shortcuts[key].id === id) {
+                    return " (" + shortcuts[key].character + ")";
                 }
             }
         }
         return "";
+    },
+    /**
+     * @param e a KeyboardEvent
+     * @returns {string} e.key or something close if not supported
+     */
+    getKeyboardKey: function (e) {
+        if (typeof e.key === "string") {
+            return e.key;
+        }
+        if (e.type === "keypress" && (
+                (e.which >= 32 && e.which <= 126) ||
+                (e.which >= 160 && e.which <= 255) )) {
+            return String.fromCharCode(e.which);
+        }
+        // try to fallback (0-9A-Za-z and QWERTY keyboard)
+        switch (e.which) {
+        case 27:
+            return "Escape";
+        case 191:
+            return e.shiftKey ? "?" : "/";
+        }
+        if (e.shiftKey || e.type === "keypress") {
+            return String.fromCharCode(e.which);
+        } else {
+            return String.fromCharCode(e.which).toLowerCase();
+        }
     }
 };