Cleanup of tooltip generation

src/css/tools.css

@@ -244,11 +244,11 @@
   color:gold;
 }
 
-.tools-tooltip-modifier {
+.tools-tooltip-descriptor {
   color:#999;
 }
 
-.tools-tooltip-modifier-button {
+.tools-tooltip-descriptor-button {
   padding:2px;
   border:1px Solid #999;
   font-size:0.8em;

src/js/controller/ToolController.js

@@ -131,19 +131,10 @@
     return pskl.utils.Template.replace(tpl, {
       cssclass : classList.join(' '),
       toolid : toolId,
-      title : this.getTooltipText_(tool)
+      title : tool.instance.getTooltipText(tool.shortcut)
     });
   };
 
-  ns.ToolController.prototype.getTooltipText_ = function (tool) {
-    var shortcutMarkup = "<span class='tools-tooltip-shortcut'>("+tool.shortcut+")</span>";
-    if (tool.instance.helpText.indexOf('{{shortcut}}') !== -1) {
-      return tool.instance.helpText.replace('{{shortcut}}', shortcutMarkup);
-    } else {
-      return tool.instance.helpText + ' ' + shortcutMarkup;
-    }
-  };
-
   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));

src/js/drawingtools/BaseTool.js

@@ -43,7 +43,7 @@
       try {
         overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
       } catch (e) {
-        console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
+        window.console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
       }
       this.highlightedPixelRow = null;
       this.highlightedPixelCol = null;
@@ -58,23 +58,45 @@
     });
   };
 
-  ns.BaseTool.prototype.getShortHelpText = function() {
+  ns.BaseTool.prototype.getHelpText = 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');
+  ns.BaseTool.prototype.getTooltipText = function(shortcut) {
+    var tpl = pskl.utils.Template.get('drawing-tool-tooltip-container-template');
+
+    var descriptors = "";
+    if (Array.isArray(this.tooltipDescriptors)) {
+      this.tooltipDescriptors.forEach(function (descriptor) {
+        descriptors += this.getTooltipDescription(descriptor);
+      }.bind(this));
     }
-    return pskl.utils.Template.replace(tpl, {modifier : modifier, helptext : helptext});
+
+    return pskl.utils.Template.replace(tpl, {
+      helptext : this.getHelpText(),
+      shortcut : shortcut,
+      descriptors : descriptors
+    });
+  };
+
+  ns.BaseTool.prototype.getTooltipDescription = function(descriptor) {
+    var tpl;
+    if (descriptor.key) {
+      tpl = pskl.utils.Template.get('drawing-tool-tooltip-descriptor-template');
+      descriptor.key = descriptor.key.toUpperCase();
+      if (pskl.utils.UserAgent.isMac) {
+        descriptor.key = descriptor.key.replace('CTRL', 'CMD');
+      }
+    } else {
+      tpl = pskl.utils.Template.get('drawing-tool-tooltip-descriptor-simple-template');
+    }
+    return pskl.utils.Template.replace(tpl, descriptor);
   };
 
   ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};
 
   /**
-   * Bresenham line algorihtm: Get an array of pixels from
+   * Bresenham line algorithm: Get an array of pixels from
    * start and end coordinates.
    *
    * http://en.wikipedia.org/wiki/Bresenham's_line_algorithm

src/js/drawingtools/Circle.js

@@ -11,13 +11,7 @@
 
     this.toolId = "tool-circle";
 
-    this.shortHelpText = "Circle tool";
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Circle tool {{shortcut}}<br/>",
-      this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'),
-      "</div>"
-    ].join("");
+    this.helpText = "Circle tool";
   };
 
   pskl.utils.inherit(ns.Circle, ns.ShapeTool);

src/js/drawingtools/ColorSwap.js

@@ -8,14 +8,12 @@
   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/>",
-      this.getModifierHelpText('ctrl', 'Apply to all layers'),
-      this.getModifierHelpText('shift', 'Apply to all frames'),
-      "</div>"
-    ].join("");
+    this.helpText = "Paint all pixels of the same color";
+
+    this.tooltipDescriptors = [
+      {key : 'ctrl', description : 'Apply to all layers'},
+      {key : 'shift', description : 'Apply to all frames'}
+    ];
   };
 
   pskl.utils.inherit(ns.ColorSwap, ns.BaseTool);

src/js/drawingtools/Lighten.js

@@ -12,14 +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/>",
-      this.getModifierHelpText('ctrl', 'Darken'),
-      this.getModifierHelpText('shift', 'Apply only once per pixel'),
-      "</div>"
-    ].join("");
+    this.helpText = "Lighten";
+
+    this.tooltipDescriptors = [
+      {key : 'ctrl', description : 'Darken'},
+      {key : 'shift', description : 'Apply only once per pixel'}
+    ];
 
     this.resetUsedPixels_();
   };

src/js/drawingtools/Rectangle.js

@@ -12,12 +12,6 @@
     this.toolId = "tool-rectangle";
 
     this.shortHelpText = "Rectangle tool";
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Rectangle tool {{shortcut}}<br/>",
-      this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'),
-      "</div>"
-    ].join("");
   };
 
   pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);

src/js/drawingtools/ShapeTool.js

@@ -8,6 +8,10 @@
     // Shapes's first point coordinates (set in applyToolAt)
     this.startCol = null;
     this.startRow = null;
+
+    this.tooltipDescriptors = [
+      {key : 'shift', description : 'Keep 1 to 1 ratio'}
+    ];
   };
 
   pskl.utils.inherit(ns.ShapeTool, ns.BaseTool);

src/js/drawingtools/VerticalMirrorPen.js

@@ -5,15 +5,12 @@
     this.superclass.constructor.call(this);
 
     this.toolId = "tool-vertical-mirror-pen";
-    this.shortHelpText = "Vertical Mirror pen";
+    this.helpText = "Vertical Mirror pen";
 
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Vertical Mirror pen {{shortcut}}<br/>",
-      this.getModifierHelpText('ctrl', 'Use horizontal axis'),
-      this.getModifierHelpText('shift', 'Use horizontal and vertical axis'),
-      "</div>"
-    ].join("");
+    this.tooltipDescriptors = [
+      {key : 'ctrl', description : 'Use horizontal axis'},
+      {key : 'shift', description : 'Use horizontal and vertical axis'}
+    ];
   };
 
   pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);

src/js/drawingtools/selectiontools/BaseSelect.js

@@ -15,6 +15,12 @@
     this.startRow = null;
 
     this.selection = null;
+
+    this.tooltipDescriptors = [
+      {description : "Drag the selection to move it. You may switch to other layers and frames."},
+      {key : 'ctrl+c', description : 'Copy the selected area'},
+      {key : 'ctrl+v', description : 'Paste the copied area'}
+    ];
   };
 
   pskl.utils.inherit(ns.BaseSelect, ns.BaseTool);

src/js/drawingtools/selectiontools/RectangleSelect.js

@@ -9,15 +9,7 @@
   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/>",
-      this.getModifierHelpText('ctrl+c', 'Copy the selected area'),
-      this.getModifierHelpText('ctrl+v', 'Paste the copied area'),
-      "</div>"
-    ].join("");
+    this.helpText = "Rectangle selection";
 
     ns.BaseSelect.call(this);
     this.hasSelection = false;

src/js/drawingtools/selectiontools/ShapeSelect.js

@@ -9,15 +9,7 @@
   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/>",
-      this.getModifierHelpText('ctrl+c', 'Copy the selected area'),
-      this.getModifierHelpText('ctrl+v', 'Paste the copied area'),
-      "</div>"
-    ].join("");
+    this.helpText = "Shape selection";
 
     ns.BaseSelect.call(this);
   };

src/js/service/keyboard/CheatsheetService.js

@@ -87,7 +87,7 @@
 
   ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
     var descriptors = pskl.app.toolController.tools.map(function (tool) {
-      return this.toDescriptor_(tool.shortcut, tool.instance.getShortHelpText(), 'tool-icon ' + tool.instance.toolId);
+      return this.toDescriptor_(tool.shortcut, tool.instance.getHelpText(), 'tool-icon ' + tool.instance.toolId);
     }.bind(this));
 
     this.initMarkupAbstract_(descriptors, '.cheatsheet-tool-shortcuts');

src/js/utils/Template.js

@@ -1,14 +1,18 @@
 (function () {
   var ns = $.namespace("pskl.utils");
+  var templates = {};
 
   ns.Template = {
     get : function (templateId) {
-      var template = document.getElementById(templateId);
-      if (template) {
-        return template.innerHTML;
-      } else {
-        console.error("Could not find template for id :", templateId);
+      if (!templates[templateId]) {
+        var template = document.getElementById(templateId);
+        if (template) {
+          templates[templateId] = template.innerHTML;
+        } else {
+          console.error("Could not find template for id :", templateId);
+        }
       }
+      return templates[templateId];
     },
 
     createFromHTML : function (html) {

src/templates/drawing-tools.html

@@ -1,10 +1,9 @@
 <div class="sticky-section left-sticky-section" id="tool-section">
   <div class="sticky-section-wrap">
     <div class="vertical-centerer">
-      <script type="text/template" id="drawing-tool-item-template">
-        <li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
-      </script>
-      <ul id="tools-container" class="tools-wrapper"></ul>
+      <ul id="tools-container" class="tools-wrapper">
+        <!-- Drawing tools will be inserted here -->
+      </ul>
       <div class="palette-wrapper">
         <div
           class="tool-icon tool-color-picker"
@@ -31,4 +30,34 @@
       </div>
     </div>
   </div>
+
+  <!-- Templates -->
+
+  <!-- Drawing tool icon-button -->
+  <script type="text/template" id="drawing-tool-item-template">
+    <li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
+  </script>
+
+  <!-- Drawing tool tooltip container -->
+  <script type="text/template" id="drawing-tool-tooltip-container-template">
+    <div class='tools-tooltip-container'>
+      <div>{{helptext}} <span class='tools-tooltip-shortcut'>({{shortcut}})</span></div>
+      {{descriptors}}
+    </div>
+  </script>
+
+  <!-- Drawing tool tooltip line for modifier -->
+  <script type="text/template" id="drawing-tool-tooltip-descriptor-template">
+    <div class='tools-tooltip-descriptor'>
+      <span class='tools-tooltip-descriptor-button'>{{key}}</span>
+      {{description}}
+    </div>
+  </script>
+
+  <!-- Drawing tool tooltip line -->
+  <script type="text/template" id="drawing-tool-tooltip-descriptor-simple-template">
+    <div class='tools-tooltip-descriptor'>
+      {{description}}
+    </div>
+  </script>
 </div>