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

css/cheatsheet.css

@@ -0,0 +1,77 @@
+#cheatsheet-wrapper {
+  position: absolute;
+  z-index: 10000;
+
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  padding: 50px;
+  box-sizing: border-box;
+
+  color: white;
+}
+
+.cheatsheet-container {
+  width: 100%;
+  height:  100%;
+  box-sizing: border-box;
+  padding: 20px 10%;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.9);
+  overflow: auto;
+}
+
+.cheatsheet-container h3 {
+  font-size:24px;
+  margin-top: 0;
+}
+
+.cheatsheet-section {
+  float: left;
+  width : 50%;
+}
+
+.cheatsheet-shortcut {
+  overflow: hidden;
+  margin: 10px 0;
+}
+
+.cheatsheet-icon.tool-icon {
+  float: left;
+  display: inline-block;
+
+  height: 30px;
+  width: 30px;
+  margin: 0 20px 0 0;
+
+  background-size: 20px 20px;
+  background-position: 5px 5px;
+}
+
+.cheatsheet-description {
+  font-family:Courier;
+  color: white;
+  font-size : 13px;
+  margin-left: 20px;
+  line-height : 30px;
+}
+
+.cheatsheet-key {
+  display : inline-block;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+
+  border : 1px solid gold;
+  border-radius: 2px;
+
+  box-sizing: border-box;
+
+  text-align: center;
+  font-family:Courier;
+  font-weight: bold;
+  font-size : 18px;
+  color: gold;
+}

index.html

@@ -12,6 +12,7 @@
   <link rel="stylesheet" type="text/css" href="css/forms.css">
   <link rel="stylesheet" type="text/css" href="css/settings.css">
   <link rel="stylesheet" type="text/css" href="css/tools.css">
+  <link rel="stylesheet" type="text/css" href="css/cheatsheet.css">
   <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
   <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
@@ -53,9 +54,8 @@
         </div>
       </div>
     </div>
-
   </div>
-
+  <iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
   <script type="text/javascript" src="piskel-boot.js"></script>
 </body>
 </html>

js/Events.js

@@ -46,5 +46,7 @@ var Events = {
   CUT: "CUT",
   COPY: "COPY",
   PASTE: "PASTE",
-  SELECT_TOOL : "SELECT_TOOL"
+  SELECT_TOOL : "SELECT_TOOL",
+  TOGGLE_HELP : "TOGGLE_HELP",
+  SWAP_COLORS : "SWAP_COLORS"
 };

js/app.js

@@ -57,6 +57,9 @@
       this.toolController = new pskl.controller.ToolController();
       this.toolController.init();
 
+      this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
+      this.cheatsheetService.init();
+
       this.paletteController = new pskl.controller.PaletteController();
       this.paletteController.init();
 

js/controller/PaletteController.js

@@ -18,6 +18,8 @@
       this.updateColorPicker_(color, $('#secondary-color-picker'));
     }, this));
 
+    $.subscribe(Events.SWAP_COLORS, this.onSwapColorsEvent_.bind(this));
+
     // Initialize colorpickers:
     var colorPicker = $('#color-picker');
     colorPicker.val(Constants.DEFAULT_PEN_COLOR);
@@ -43,6 +45,15 @@
     }
   };
 
+  ns.PaletteController.prototype.onSwapColorsEvent_ = function () {
+    // TODO : juliandescottes : oooooh huge crap ... palette controller doesn't know which colors are selected !!
+    // JC Denton commented : 'what a shame'
+    var primaryColor = pskl.app.drawingController.primaryColor;
+    var secondaryColor = pskl.app.drawingController.secondaryColor;
+    $.publish(Events.PRIMARY_COLOR_SELECTED, [secondaryColor]);
+    $.publish(Events.SECONDARY_COLOR_SELECTED, [primaryColor]);
+  };
+
   /**
    * @private
    */
@@ -64,7 +75,7 @@
     if (color == Constants.TRANSPARENT_COLOR) {
       // We can set the current palette color to transparent.
       // You can then combine this transparent color with an advanced
-      // tool for customized deletions. 
+      // tool for customized deletions.
       // Eg: bucket + transparent: Delete a colored area
       //     Stroke + transparent: hollow out the equivalent of a stroke
 

js/controller/ToolController.js

@@ -109,7 +109,7 @@
    */
   ns.ToolController.prototype.createToolMarkup_ = function() {
     var currentTool, toolMarkup = '', extraClass;
-    // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that.
+
     for(var i = 0 ; i < this.tools.length ; i++) {
       var tool = this.tools[i];
       var instance = tool.instance;

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');
 

piskel-script-list.js

@@ -63,6 +63,7 @@ exports.scripts = [
   "js/service/LocalStorageService.js",
   "js/service/HistoryService.js",
   "js/service/keyboard/KeycodeTranslator.js",
+  "js/service/keyboard/CheatsheetService.js",
   "js/service/KeyboardEventService.js",
   "js/service/ImageUploadService.js",
 

templates/cheatsheet.html

@@ -0,0 +1,19 @@
+<div id="cheatsheet-wrapper" style="display:none">
+  <div class="cheatsheet-container">
+    <div class="cheatsheet-section">
+      <h3>Tool shortcuts</h3>
+      <ul class="cheatsheet-tool-shortcuts"></ul>
+    </div>
+    <div class="cheatsheet-section">
+      <h3>Misc shortcuts</h3>
+      <ul class="cheatsheet-misc-shortcuts"></ul>
+    </div>
+  </div>
+</div>
+<script type="text/template" id="cheatsheet-shortcut-template">
+  <li class="cheatsheet-shortcut">
+    <div class="cheatsheet-icon {{shortcutIcon}}"></div>
+    <span class="cheatsheet-key">{{shortcutKey}}</span>
+    <span class="cheatsheet-description">{{shortcutDescription}}</span>
+  </li>
+</script>