From b66d5ee93b234378e4db7b95bbbeeff4ca3737b5 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Fri, 11 Jul 2014 00:14:21 +0200 Subject: [PATCH] Cleanup of tooltip generation --- src/css/tools.css | 4 +- src/js/controller/ToolController.js | 11 +---- src/js/drawingtools/BaseTool.js | 40 ++++++++++++++----- src/js/drawingtools/Circle.js | 8 +--- src/js/drawingtools/ColorSwap.js | 14 +++---- src/js/drawingtools/Lighten.js | 14 +++---- src/js/drawingtools/Rectangle.js | 6 --- src/js/drawingtools/ShapeTool.js | 4 ++ src/js/drawingtools/VerticalMirrorPen.js | 13 +++--- .../drawingtools/selectiontools/BaseSelect.js | 6 +++ .../selectiontools/RectangleSelect.js | 10 +---- .../selectiontools/ShapeSelect.js | 10 +---- src/js/service/keyboard/CheatsheetService.js | 2 +- src/js/utils/Template.js | 14 ++++--- src/templates/drawing-tools.html | 37 +++++++++++++++-- 15 files changed, 107 insertions(+), 86 deletions(-) diff --git a/src/css/tools.css b/src/css/tools.css index 95560083..c27716a5 100644 --- a/src/css/tools.css +++ b/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; diff --git a/src/js/controller/ToolController.js b/src/js/controller/ToolController.js index 99041e6d..4aaa988f 100644 --- a/src/js/controller/ToolController.js +++ b/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 = "("+tool.shortcut+")"; - 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)); diff --git a/src/js/drawingtools/BaseTool.js b/src/js/drawingtools/BaseTool.js index 27022c4d..2a364c2f 100644 --- a/src/js/drawingtools/BaseTool.js +++ b/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 = "{{modifier}}{{helptext}}
"; - 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 diff --git a/src/js/drawingtools/Circle.js b/src/js/drawingtools/Circle.js index 75def4ef..3b2f7da2 100644 --- a/src/js/drawingtools/Circle.js +++ b/src/js/drawingtools/Circle.js @@ -11,13 +11,7 @@ this.toolId = "tool-circle"; - this.shortHelpText = "Circle tool"; - this.helpText = [ - "
", - "Circle tool {{shortcut}}
", - this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'), - "
" - ].join(""); + this.helpText = "Circle tool"; }; pskl.utils.inherit(ns.Circle, ns.ShapeTool); diff --git a/src/js/drawingtools/ColorSwap.js b/src/js/drawingtools/ColorSwap.js index a0888a41..47cc8e26 100644 --- a/src/js/drawingtools/ColorSwap.js +++ b/src/js/drawingtools/ColorSwap.js @@ -8,14 +8,12 @@ ns.ColorSwap = function() { this.toolId = "tool-colorswap"; - this.shortHelpText = "Paint all"; - this.helpText = [ - "
", - "Paint all pixels of the same color {{shortcut}}
", - this.getModifierHelpText('ctrl', 'Apply to all layers'), - this.getModifierHelpText('shift', 'Apply to all frames'), - "
" - ].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); diff --git a/src/js/drawingtools/Lighten.js b/src/js/drawingtools/Lighten.js index 7626ec29..425a3526 100644 --- a/src/js/drawingtools/Lighten.js +++ b/src/js/drawingtools/Lighten.js @@ -12,14 +12,12 @@ this.superclass.constructor.call(this); this.toolId = "tool-lighten"; - this.shortHelpText = "Lighten / Darken"; - this.helpText = [ - "
", - "Lighten {{shortcut}}
", - this.getModifierHelpText('ctrl', 'Darken'), - this.getModifierHelpText('shift', 'Apply only once per pixel'), - "
" - ].join(""); + this.helpText = "Lighten"; + + this.tooltipDescriptors = [ + {key : 'ctrl', description : 'Darken'}, + {key : 'shift', description : 'Apply only once per pixel'} + ]; this.resetUsedPixels_(); }; diff --git a/src/js/drawingtools/Rectangle.js b/src/js/drawingtools/Rectangle.js index 08fe8b34..250da4b7 100644 --- a/src/js/drawingtools/Rectangle.js +++ b/src/js/drawingtools/Rectangle.js @@ -12,12 +12,6 @@ this.toolId = "tool-rectangle"; this.shortHelpText = "Rectangle tool"; - this.helpText = [ - "
", - "Rectangle tool {{shortcut}}
", - this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'), - "
" - ].join(""); }; pskl.utils.inherit(ns.Rectangle, ns.ShapeTool); diff --git a/src/js/drawingtools/ShapeTool.js b/src/js/drawingtools/ShapeTool.js index df9d12b5..e0916171 100644 --- a/src/js/drawingtools/ShapeTool.js +++ b/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); diff --git a/src/js/drawingtools/VerticalMirrorPen.js b/src/js/drawingtools/VerticalMirrorPen.js index 220d875a..e2d851a9 100644 --- a/src/js/drawingtools/VerticalMirrorPen.js +++ b/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 = [ - "
", - "Vertical Mirror pen {{shortcut}}
", - this.getModifierHelpText('ctrl', 'Use horizontal axis'), - this.getModifierHelpText('shift', 'Use horizontal and vertical axis'), - "
" - ].join(""); + this.tooltipDescriptors = [ + {key : 'ctrl', description : 'Use horizontal axis'}, + {key : 'shift', description : 'Use horizontal and vertical axis'} + ]; }; pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen); diff --git a/src/js/drawingtools/selectiontools/BaseSelect.js b/src/js/drawingtools/selectiontools/BaseSelect.js index 3738a3f3..ae33c364 100644 --- a/src/js/drawingtools/selectiontools/BaseSelect.js +++ b/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); diff --git a/src/js/drawingtools/selectiontools/RectangleSelect.js b/src/js/drawingtools/selectiontools/RectangleSelect.js index d15a9369..3abb4ba8 100644 --- a/src/js/drawingtools/selectiontools/RectangleSelect.js +++ b/src/js/drawingtools/selectiontools/RectangleSelect.js @@ -9,15 +9,7 @@ ns.RectangleSelect = function() { this.toolId = "tool-rectangle-select"; - this.shortHelpText = "Rectangle selection"; - this.helpText = [ - "
", - "Rectangle selection {{shortcut}}
", - "Drag the selection to move it. You may switch to other layers and frames.
", - this.getModifierHelpText('ctrl+c', 'Copy the selected area'), - this.getModifierHelpText('ctrl+v', 'Paste the copied area'), - "
" - ].join(""); + this.helpText = "Rectangle selection"; ns.BaseSelect.call(this); this.hasSelection = false; diff --git a/src/js/drawingtools/selectiontools/ShapeSelect.js b/src/js/drawingtools/selectiontools/ShapeSelect.js index 58ca7957..4c829001 100644 --- a/src/js/drawingtools/selectiontools/ShapeSelect.js +++ b/src/js/drawingtools/selectiontools/ShapeSelect.js @@ -9,15 +9,7 @@ ns.ShapeSelect = function() { this.toolId = "tool-shape-select"; - this.shortHelpText = "Shape selection"; - this.helpText = [ - "
", - "Shape selection {{shortcut}}
", - "Drag the selection to move it. You may switch to other layers and frames.
", - this.getModifierHelpText('ctrl+c', 'Copy the selected area'), - this.getModifierHelpText('ctrl+v', 'Paste the copied area'), - "
" - ].join(""); + this.helpText = "Shape selection"; ns.BaseSelect.call(this); }; diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js index e1ae2a92..03c085bc 100644 --- a/src/js/service/keyboard/CheatsheetService.js +++ b/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'); diff --git a/src/js/utils/Template.js b/src/js/utils/Template.js index 01c9671d..cc4393db 100644 --- a/src/js/utils/Template.js +++ b/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) { diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html index f94f33b1..623e7141 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -1,10 +1,9 @@
- -
    +
      + +
    + + + + + + + + + + + + + +
    \ No newline at end of file