From 982a5ab04898ddfbd9e64ad5edb102d4235b261f Mon Sep 17 00:00:00 2001 From: jdescottes Date: Thu, 10 Jul 2014 01:32:16 +0200 Subject: [PATCH] Refactoring tooltip code + display CMD on mac --- Gruntfile.js | 2 +- src/js/controller/ToolController.js | 2 +- src/js/drawingtools/BaseTool.js | 12 ++++++++++++ src/js/drawingtools/Circle.js | 3 ++- src/js/drawingtools/ColorSwap.js | 6 ++++-- src/js/drawingtools/Lighten.js | 5 +++-- src/js/drawingtools/Rectangle.js | 3 ++- src/js/drawingtools/VerticalMirrorPen.js | 6 +++--- .../drawingtools/selectiontools/RectangleSelect.js | 5 +++-- src/js/drawingtools/selectiontools/ShapeSelect.js | 5 +++-- src/js/service/keyboard/CheatsheetService.js | 5 ++++- 11 files changed, 38 insertions(+), 16 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 23895699..44a84e32 100644 --- a/Gruntfile.js +++ b/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'} ] } }, diff --git a/src/js/controller/ToolController.js b/src/js/controller/ToolController.js index c5aa6c36..99041e6d 100644 --- a/src/js/controller/ToolController.js +++ b/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()), diff --git a/src/js/drawingtools/BaseTool.js b/src/js/drawingtools/BaseTool.js index 25a7c9cd..27022c4d 100644 --- a/src/js/drawingtools/BaseTool.js +++ b/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 = "{{modifier}}{{helptext}}
"; + 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) {}; diff --git a/src/js/drawingtools/Circle.js b/src/js/drawingtools/Circle.js index f9f2bfdc..75def4ef 100644 --- a/src/js/drawingtools/Circle.js +++ b/src/js/drawingtools/Circle.js @@ -11,10 +11,11 @@ this.toolId = "tool-circle"; + this.shortHelpText = "Circle tool"; this.helpText = [ "
", "Circle tool {{shortcut}}
", - "SHIFTKeep 1 to 1 ratio
", + this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'), "
" ].join(""); }; diff --git a/src/js/drawingtools/ColorSwap.js b/src/js/drawingtools/ColorSwap.js index 48310f31..a0888a41 100644 --- a/src/js/drawingtools/ColorSwap.js +++ b/src/js/drawingtools/ColorSwap.js @@ -7,11 +7,13 @@ ns.ColorSwap = function() { this.toolId = "tool-colorswap"; + + this.shortHelpText = "Paint all"; this.helpText = [ "
", "Paint all pixels of the same color {{shortcut}}
", - "CTRLApply to all layers
", - "SHIFTApply to all frames
", + this.getModifierHelpText('ctrl', 'Apply to all layers'), + this.getModifierHelpText('shift', 'Apply to all frames'), "
" ].join(""); }; diff --git a/src/js/drawingtools/Lighten.js b/src/js/drawingtools/Lighten.js index 16b47ba2..7626ec29 100644 --- a/src/js/drawingtools/Lighten.js +++ b/src/js/drawingtools/Lighten.js @@ -12,11 +12,12 @@ this.superclass.constructor.call(this); this.toolId = "tool-lighten"; + this.shortHelpText = "Lighten / Darken"; this.helpText = [ "
", "Lighten {{shortcut}}
", - "CTRLDarken
", - "SHIFTApply only once per pixel
", + this.getModifierHelpText('ctrl', 'Darken'), + this.getModifierHelpText('shift', 'Apply only once per pixel'), "
" ].join(""); diff --git a/src/js/drawingtools/Rectangle.js b/src/js/drawingtools/Rectangle.js index 3d4372c2..08fe8b34 100644 --- a/src/js/drawingtools/Rectangle.js +++ b/src/js/drawingtools/Rectangle.js @@ -11,10 +11,11 @@ this.toolId = "tool-rectangle"; + this.shortHelpText = "Rectangle tool"; this.helpText = [ "
", "Rectangle tool {{shortcut}}
", - "SHIFTKeep 1 to 1 ratio
", + this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'), "
" ].join(""); }; diff --git a/src/js/drawingtools/VerticalMirrorPen.js b/src/js/drawingtools/VerticalMirrorPen.js index de9e991c..220d875a 100644 --- a/src/js/drawingtools/VerticalMirrorPen.js +++ b/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 = [ "
", "Vertical Mirror pen {{shortcut}}
", - "CTRLUse horizontal axis
", - "SHIFTUse horizontal and vertical axis
", + this.getModifierHelpText('ctrl', 'Use horizontal axis'), + this.getModifierHelpText('shift', 'Use horizontal and vertical axis'), "
" ].join(""); }; diff --git a/src/js/drawingtools/selectiontools/RectangleSelect.js b/src/js/drawingtools/selectiontools/RectangleSelect.js index 85851c40..d15a9369 100644 --- a/src/js/drawingtools/selectiontools/RectangleSelect.js +++ b/src/js/drawingtools/selectiontools/RectangleSelect.js @@ -9,12 +9,13 @@ 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.
", - "CTRL+CCopy the selected area
", - "CTRL+VPaste the copied area
", + this.getModifierHelpText('ctrl+c', 'Copy the selected area'), + this.getModifierHelpText('ctrl+v', 'Paste the copied area'), "
" ].join(""); diff --git a/src/js/drawingtools/selectiontools/ShapeSelect.js b/src/js/drawingtools/selectiontools/ShapeSelect.js index 290d4436..58ca7957 100644 --- a/src/js/drawingtools/selectiontools/ShapeSelect.js +++ b/src/js/drawingtools/selectiontools/ShapeSelect.js @@ -9,12 +9,13 @@ 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.
", - "CTRL+CCopy the selected area
", - "CTRL+VPaste the copied area
", + this.getModifierHelpText('ctrl+c', 'Copy the selected area'), + this.getModifierHelpText('ctrl+v', 'Paste the copied area'), "
" ].join(""); diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js index f0952e76..e1ae2a92 100644 --- a/src/js/service/keyboard/CheatsheetService.js +++ b/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');