feature : add keyboard shortcuts

+ decentralized shortcut declaration
+ each service/controller is now responsible for declaring its shorcuts
- documentation (cheatsheet) is still to be maintained manually
- init order matters (shortcutService has to be instanciated before
  everyone else) => should have a standalone KeyboardService singleton
  which is ready as soon as it is loaded

js/controller/PaletteController.js

@@ -15,7 +15,9 @@
 
     $.subscribe(Events.SELECT_PRIMARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:true}));
     $.subscribe(Events.SELECT_SECONDARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:false}));
-    $.subscribe(Events.SWAP_COLORS, this.onSwapColorsEvent_.bind(this));
+
+    pskl.app.shortcutService.addShortcut('X', this.swapColors.bind(this));
+    pskl.app.shortcutService.addShortcut('D', this.resetColors.bind(this));
 
     // Initialize colorpickers:
     var colorPicker = $('#color-picker');
@@ -72,12 +74,17 @@
     return this.secondaryColor;
   };
 
-  ns.PaletteController.prototype.onSwapColorsEvent_ = function () {
+  ns.PaletteController.prototype.swapColors = function () {
     var primaryColor = this.getPrimaryColor();
     this.setPrimaryColor(this.getSecondaryColor());
     this.setSecondaryColor(primaryColor);
   };
 
+  ns.PaletteController.prototype.resetColors = function () {
+    this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR);
+    this.setSecondaryColor(Constants.TRANSPARENT_COLOR);
+  };
+
   /**
    * @private
    */

js/controller/PiskelController.js

@@ -15,6 +15,11 @@
     this.currentFrameIndex = 0;
 
     this.layerIdCounter = 1;
+  };
+
+  ns.PiskelController.prototype.init = function () {
+    pskl.app.shortcutService.addShortcut('up', this.selectPreviousFrame.bind(this));
+    pskl.app.shortcutService.addShortcut('down', this.selectNextFrame.bind(this));
 
     $.publish(Events.PISKEL_RESET);
     $.publish(Events.FRAME_SIZE_CHANGED);
@@ -116,6 +121,20 @@
     $.publish(Events.PISKEL_RESET);
   };
 
+  ns.PiskelController.prototype.selectNextFrame = function () {
+    var nextIndex = this.currentFrameIndex + 1;
+    if (nextIndex < this.getFrameCount()) {
+      this.setCurrentFrameIndex(nextIndex);
+    }
+  };
+
+  ns.PiskelController.prototype.selectPreviousFrame = function () {
+    var nextIndex = this.currentFrameIndex - 1;
+    if (nextIndex >= 0) {
+      this.setCurrentFrameIndex(nextIndex);
+    }
+  };
+
   ns.PiskelController.prototype.setCurrentLayerIndex = function (index) {
     this.currentLayerIndex = index;
     $.publish(Events.PISKEL_RESET);

js/controller/ToolController.js

@@ -29,15 +29,14 @@
    * @public
    */
   ns.ToolController.prototype.init = function() {
-    this.createToolMarkup_();
+    this.createToolsDom_();
+    this.addKeyboardShortcuts_();
 
     // Initialize tool:
     // Set SimplePen as default selected tool:
     this.selectTool_(this.tools[0]);
     // Activate listener on tool panel:
     $("#tool-section").click($.proxy(this.onToolIconClicked_, this));
-
-    $.subscribe(Events.SELECT_TOOL, $.proxy(this.onKeyboardShortcut_, this));
   };
 
   /**
@@ -85,7 +84,7 @@
     }
   };
 
-  ns.ToolController.prototype.onKeyboardShortcut_ = function(evt, charkey) {
+  ns.ToolController.prototype.onKeyboardShortcut_ = function(charkey) {
     for (var i = 0 ; i < this.tools.length ; i++) {
       var tool = this.tools[i];
       if (tool.shortcut.toLowerCase() === charkey.toLowerCase()) {
@@ -107,20 +106,32 @@
   /**
    * @private
    */
-  ns.ToolController.prototype.createToolMarkup_ = function() {
-    var currentTool, toolMarkup = '', extraClass;
-
+  ns.ToolController.prototype.createToolsDom_ = function() {
+    var toolMarkup = '';
     for(var i = 0 ; i < this.tools.length ; i++) {
-      var tool = this.tools[i];
-      var instance = tool.instance;
-
-      extraClass = instance.toolId;
-      if (this.currentSelectedTool == tool) {
-        extraClass = extraClass + " selected";
-      }
-      toolMarkup += '<li rel="tooltip" data-placement="right" class="tool-icon ' + extraClass + '" data-tool-id="' + instance.toolId +
-              '" title="' + instance.helpText + '"></li>';
+      toolMarkup += this.getToolMarkup_(this.tools[i]);
     }
     $('#tools-container').html(toolMarkup);
   };
+
+  /**
+   * @private
+   */
+  ns.ToolController.prototype.getToolMarkup_ = function(tool) {
+    var instance = tool.instance;
+
+    var classList = ['tool-icon', instance.toolId];
+    if (this.currentSelectedTool == tool) {
+      classList.push('selected');
+    }
+
+    return '<li rel="tooltip" data-placement="right" class="' + classList.join(' ') + '" data-tool-id="' + instance.toolId +
+              '" title="' + instance.helpText + '"></li>';
+  };
+
+  ns.ToolController.prototype.addKeyboardShortcuts_ = function () {
+    for(var i = 0 ; i < this.tools.length ; i++) {
+      pskl.app.shortcutService.addShortcut(this.tools[i].shortcut, this.onKeyboardShortcut_.bind(this));
+    }
+  };
 })();