feature : add keyboard shortcuts : added help panel displayed on shift+?

js/service/KeyboardEventService.js

@@ -9,7 +9,11 @@
         "x" : Events.CUT,
         "c" : Events.COPY,
         "v" : Events.PASTE
-      }
+      },
+      "shift" : {
+        "?" : Events.TOGGLE_HELP
+      },
+      "x" : Events.SWAP_COLORS
     };
 
     // See ToolController
@@ -41,6 +45,8 @@
     if(charkey) {
       if (this.isCtrlKeyPressed_(evt)) {
         eventToTrigger = this.keyboardActions_.ctrl[charkey];
+      } else if (this.isShiftKeyPressed_(evt)) {
+        eventToTrigger = this.keyboardActions_.shift[charkey];
       } else {
         eventToTrigger = this.keyboardActions_[charkey];
       }
@@ -56,6 +62,10 @@
     return this.isMac_() ? evt.metaKey : evt.ctrlKey;
   };
 
+  ns.KeyboardEventService.prototype.isShiftKeyPressed_ = function (evt) {
+    return evt.shiftKey;
+  };
+
   ns.KeyboardEventService.prototype.isMac_ = function () {
     return navigator.appVersion.indexOf("Mac") != -1;
   };

js/service/keyboard/CheatsheetService.js

@@ -0,0 +1,88 @@
+(function () {
+  var ns = $.namespace('pskl.service.keyboard');
+
+  ns.CheatsheetService = function () {
+    this.isDisplayed_ = false;
+  };
+
+  ns.CheatsheetService.prototype.init = function () {
+    this.cheatsheetEl_ = document.getElementById('cheatsheet-wrapper');
+    if (!this.cheatsheetEl_) {
+      throw 'cheatsheetEl_ DOM element could not be retrieved';
+    }
+    this.initMarkup_();
+    $.subscribe(Events.TOGGLE_HELP, this.toggleCheatsheet_.bind(this));
+  };
+
+  ns.CheatsheetService.prototype.toggleCheatsheet_ = function () {
+    if (this.isDisplayed_) {
+      this.hideCheatsheet_();
+    } else {
+      this.showCheatsheet_();
+    }
+  };
+
+  ns.CheatsheetService.prototype.showCheatsheet_ = function () {
+    this.cheatsheetEl_.style.display = 'block';
+    this.isDisplayed_ = true;
+  };
+
+
+  ns.CheatsheetService.prototype.hideCheatsheet_ = function () {
+    this.cheatsheetEl_.style.display = 'none';
+    this.isDisplayed_ = false;
+  };
+
+  ns.CheatsheetService.prototype.initMarkup_ = function () {
+    this.initMarkupForTools_();
+
+
+  };
+
+  ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
+    var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
+
+    var toolShortcutsContainer = $('.cheatsheet-tool-shortcuts', this.cheatsheetEl_).get(0);
+    var tools = pskl.app.toolController.tools;
+    for (var i = 0 ; i < tools.length ; i++) {
+      var tool = tools[i];
+      var shortcutEl = pskl.utils.Template.createFromHTML(
+        pskl.utils.Template.replace(shortcutTemplate, {
+          shortcutIcon : 'tool-icon ' + tool.instance.toolId,
+          shortcutDescription : tool.instance.helpText,
+          shortcutKey : tool.shortcut
+        })
+      );
+      toolShortcutsContainer.appendChild(shortcutEl);
+    }
+  };
+
+  this.initMarkupForMisc_ = function () {
+    var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
+
+    var miscShortcutsContainer = $('.cheatsheet-misc-shortcuts', this.cheatsheetEl_).get(0);
+    var toDescriptor = function (shortcut, description) {
+      return {shortcut:shortcut, description:description};
+    };
+    var miscKeys = [
+      toDescriptor('X', 'Swap primary/secondary colors'),
+      toDescriptor('ctrl + X', 'Cut selection'),
+      toDescriptor('ctrl + C', 'Copy selection'),
+      toDescriptor('ctrl + V', 'Paste selection'),
+      toDescriptor('ctrl + Z', 'Undo'),
+      toDescriptor('ctrl + Y', 'Redo')
+    ];
+    for (var i = 0 ; i < miscKeys.length ; i++) {
+      var key = miscKeys[i];
+      var shortcutEl = pskl.utils.Template.createFromHTML(
+        pskl.utils.Template.replace(shortcutTemplate, {
+          shortcutIcon : '',
+          shortcutDescription : key.description,
+          shortcutKey : key.shortcut
+        })
+      );
+      miscShortcutsContainer.appendChild(shortcutEl);
+    }
+  };
+
+})();

js/service/keyboard/KeycodeTranslator.js

@@ -1,5 +1,7 @@
 (function () {
-  var specialKeys = {};
+  var specialKeys = {
+    191 : "?"
+  };
 
   var ns = $.namespace('pskl.service.keyboard');