Refactoring tooltip code + display CMD on mac

Gruntfile.js

@@ -192,7 +192,7 @@ module.exports = function(grunt) {
           {src: ['src/js/lib/iframeLoader-0.1.0.js'], dest: 'dest/js/lib/iframeLoader-0.1.0.js'},
           {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
           {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
-          {expand: true, src: ['**/*.html'], cwd: 'src/templates/', dest: 'dest/templates' + version + '/', filter: 'isFile'}
+          {expand: true, src: ['**/*.html'], cwd: 'src/templates/', dest: 'dest/templates/', filter: 'isFile'}
         ]
       }
     },

src/js/controller/ToolController.js

@@ -10,7 +10,7 @@
       toDescriptor('simplePen', 'P', new pskl.drawingtools.SimplePen()),
       toDescriptor('verticalMirrorPen', 'V', new pskl.drawingtools.VerticalMirrorPen()),
       toDescriptor('paintBucket', 'B', new pskl.drawingtools.PaintBucket()),
-      toDescriptor('colorSwap', 'F', new pskl.drawingtools.ColorSwap()),
+      toDescriptor('colorSwap', 'A', new pskl.drawingtools.ColorSwap()),
       toDescriptor('eraser', 'E', new pskl.drawingtools.Eraser()),
       toDescriptor('stroke', 'L', new pskl.drawingtools.Stroke()),
       toDescriptor('rectangle', 'R', new pskl.drawingtools.Rectangle()),

src/js/drawingtools/BaseTool.js

@@ -58,6 +58,18 @@
     });
   };
 
+  ns.BaseTool.prototype.getShortHelpText = function() {
+    return this.shortHelpText || this.helpText;
+  };
+
+  ns.BaseTool.prototype.getModifierHelpText = function(modifier, helptext) {
+    var tpl = "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>{{modifier}}</span>{{helptext}}</span><br/>";
+    modifier = modifier.toUpperCase();
+    if (pskl.utils.UserAgent.isMac) {
+      modifier = modifier.replace('CTRL', 'CMD');
+    }
+    return pskl.utils.Template.replace(tpl, {modifier : modifier, helptext : helptext});
+  };
 
   ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};
 

src/js/drawingtools/Circle.js

@@ -11,10 +11,11 @@
 
     this.toolId = "tool-circle";
 
+    this.shortHelpText = "Circle tool";
     this.helpText = [
       "<div class='tools-tooltip-container'>",
       "Circle tool {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Keep 1 to 1 ratio</span><br/>",
+      this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'),
       "</div>"
     ].join("");
   };

src/js/drawingtools/ColorSwap.js

@@ -7,11 +7,13 @@
 
   ns.ColorSwap = function() {
     this.toolId = "tool-colorswap";
+
+    this.shortHelpText = "Paint all";
     this.helpText = [
       "<div class='tools-tooltip-container'>",
       "Paint all pixels of the same color {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL</span>Apply to all layers</span><br/>",
+      this.getModifierHelpText('ctrl', 'Apply to all layers'),
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Apply to all frames</span><br/>",
+      this.getModifierHelpText('shift', 'Apply to all frames'),
       "</div>"
     ].join("");
   };

src/js/drawingtools/Lighten.js

@@ -12,11 +12,12 @@
     this.superclass.constructor.call(this);
     this.toolId = "tool-lighten";
 
+    this.shortHelpText = "Lighten / Darken";
     this.helpText = [
       "<div class='tools-tooltip-container'>",
       "Lighten {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL</span>Darken</span><br/>",
+      this.getModifierHelpText('ctrl', 'Darken'),
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Apply only once per pixel</span><br/>",
+      this.getModifierHelpText('shift', 'Apply only once per pixel'),
       "</div>"
     ].join("");
 

src/js/drawingtools/Rectangle.js

@@ -11,10 +11,11 @@
 
     this.toolId = "tool-rectangle";
 
+    this.shortHelpText = "Rectangle tool";
     this.helpText = [
       "<div class='tools-tooltip-container'>",
       "Rectangle tool {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Keep 1 to 1 ratio</span><br/>",
+      this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'),
       "</div>"
     ].join("");
   };

src/js/drawingtools/VerticalMirrorPen.js

@@ -5,13 +5,13 @@
     this.superclass.constructor.call(this);
 
     this.toolId = "tool-vertical-mirror-pen";
-    this.helpText = "Vertical Mirror pen (CTRL for Horizontal, SHIFT for both)";
+    this.shortHelpText = "Vertical Mirror pen";
 
     this.helpText = [
       "<div class='tools-tooltip-container'>",
       "Vertical Mirror pen {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL</span>Use horizontal axis</span><br/>",
+      this.getModifierHelpText('ctrl', 'Use horizontal axis'),
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Use horizontal and vertical axis</span><br/>",
+      this.getModifierHelpText('shift', 'Use horizontal and vertical axis'),
       "</div>"
     ].join("");
   };

src/js/drawingtools/selectiontools/RectangleSelect.js

@@ -9,12 +9,13 @@
   ns.RectangleSelect = function() {
     this.toolId = "tool-rectangle-select";
 
+    this.shortHelpText = "Rectangle selection";
     this.helpText = [
       "<div class='tools-tooltip-container'>",
       "Rectangle selection {{shortcut}}<br/>",
       "<span class='tools-tooltip-modifier'>Drag the selection to move it. You may switch to other layers and frames.</span><br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+C</span>Copy the selected area</span><br/>",
+      this.getModifierHelpText('ctrl+c', 'Copy the selected area'),
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+V</span>Paste the copied area</span><br/>",
+      this.getModifierHelpText('ctrl+v', 'Paste the copied area'),
       "</div>"
     ].join("");
 

src/js/drawingtools/selectiontools/ShapeSelect.js

@@ -9,12 +9,13 @@
   ns.ShapeSelect = function() {
     this.toolId = "tool-shape-select";
 
+    this.shortHelpText = "Shape selection";
     this.helpText = [
       "<div class='tools-tooltip-container'>",
       "Shape selection {{shortcut}}<br/>",
       "<span class='tools-tooltip-modifier'>Drag the selection to move it. You may switch to other layers and frames.</span><br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+C</span>Copy the selected area</span><br/>",
+      this.getModifierHelpText('ctrl+c', 'Copy the selected area'),
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+V</span>Paste the copied area</span><br/>",
+      this.getModifierHelpText('ctrl+v', 'Paste the copied area'),
       "</div>"
     ].join("");
 

src/js/service/keyboard/CheatsheetService.js

@@ -55,6 +55,9 @@
   };
 
   ns.CheatsheetService.prototype.toDescriptor_ = function (shortcut, description, icon) {
+    if (pskl.utils.UserAgent.isMac) {
+      shortcut = shortcut.replace('ctrl', 'cmd');
+    }
     return {
       'shortcut' : shortcut,
       'description' : description,
@@ -84,7 +87,7 @@
 
   ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
     var descriptors = pskl.app.toolController.tools.map(function (tool) {
-      return this.toDescriptor_(tool.shortcut, tool.instance.helpText, 'tool-icon ' + tool.instance.toolId);
+      return this.toDescriptor_(tool.shortcut, tool.instance.getShortHelpText(), 'tool-icon ' + tool.instance.toolId);
     }.bind(this));
 
     this.initMarkupAbstract_(descriptors, '.cheatsheet-tool-shortcuts');