added shortcuts to select previous / next color in palette

src/js/controller/PalettesListController.js

@@ -39,6 +39,10 @@
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.highlightSelectedColors.bind(this));
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
 
+
+    pskl.app.shortcutService.addShortcuts(['>', 'shift+>'], this.selectNextColor_.bind(this));
+    pskl.app.shortcutService.addShortcut('<', this.selectPreviousColor_.bind(this));
+
     this.fillPaletteList();
     this.updateFromUserSettings();
     this.fillColorListContainer();
@@ -58,8 +62,8 @@
     var colors = this.getSelectedPaletteColors_();
 
     if (colors.length > 0) {
-      var html = colors.map(function (color) {
+      var html = colors.map(function (color, index) {
-        return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
+        return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color, index : index});
       }.bind(this)).join('');
       this.colorListContainer_.innerHTML = html;
 
@@ -76,10 +80,13 @@
     }
   };
 
+  ns.PalettesListController.prototype.selectPalette = function (paletteId) {
+    pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId);
+  };
+
   ns.PalettesListController.prototype.getSelectedPaletteColors_ = function () {
     var colors = [];
-    var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE);
+    var palette = this.getSelectedPalette_();
-    var palette = this.paletteService.getPaletteById(paletteId);
     if (palette) {
       colors = palette.getColors();
     }
@@ -91,8 +98,34 @@
     return colors;
   };
 
-  ns.PalettesListController.prototype.selectPalette = function (paletteId) {
+  ns.PalettesListController.prototype.getSelectedPalette_ = function () {
-    pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId);
+    var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE);
+    return this.paletteService.getPaletteById(paletteId);
+  };
+
+  ns.PalettesListController.prototype.selectNextColor_ = function () {
+    this.selectColor_(this.getCurrentColorIndex_() + 1);
+  };
+
+  ns.PalettesListController.prototype.selectPreviousColor_ = function () {
+    this.selectColor_(this.getCurrentColorIndex_() - 1);
+  };
+
+  ns.PalettesListController.prototype.getCurrentColorIndex_ = function () {
+    var currentIndex = 0;
+    var selectedColor = document.querySelector('.' + PRIMARY_COLOR_CLASSNAME);
+    if (selectedColor) {
+      currentIndex = parseInt(selectedColor.dataset.colorIndex, 10);
+    }
+    return currentIndex;
+  };
+
+  ns.PalettesListController.prototype.selectColor_ = function (index) {
+    var colors = this.getSelectedPaletteColors_();
+    var color = colors[index];
+    if (color) {
+      $.publish(Events.SELECT_PRIMARY_COLOR, [color]);
+    }
   };
 
   ns.PalettesListController.prototype.onUserSettingsChange_ = function (evt, name, value) {

src/js/controller/dialogs/DialogsController.js

@@ -27,7 +27,8 @@
     $.subscribe(Events.DIALOG_DISPLAY, this.onDialogDisplayEvent_.bind(this));
     $.subscribe(Events.DIALOG_HIDE, this.onDialogHideEvent_.bind(this));
 
-    pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'create-palettes'));
+    pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'create-palette'));
+
     this.dialogWrapper_.classList.add('animated');
   };
 

src/js/service/CurrentColorsService.js

@@ -9,21 +9,23 @@
 
     this.colorSorter = new pskl.service.color.ColorSorter();
     this.paletteService = pskl.app.paletteService;
-
-    this.framesColorsCache_ = {};
   };
 
   ns.CurrentColorsService.prototype.init = function () {
     $.subscribe(Events.PISKEL_RESET, this.onPiskelUpdated_.bind(this));
     $.subscribe(Events.TOOL_RELEASED, this.onPiskelUpdated_.bind(this));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
   };
 
-  ns.CurrentColorsService.prototype.isCurrentColorsPaletteSelected_ = function () {
+  ns.CurrentColorsService.prototype.getCurrentColors = function () {
-    var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE);
+    return this.currentColors;
-    var palette = this.paletteService.getPaletteById(paletteId);
+  };
 
-    return palette.id === Constants.CURRENT_COLORS_PALETTE_ID;
+  ns.CurrentColorsService.prototype.setCurrentColors = function (colors) {
+    if (colors.join('') !== this.currentColors.join('')) {
+      this.currentColors = colors;
+      $.publish(Events.CURRENT_COLORS_UPDATED);
+    }
   };
 
   ns.CurrentColorsService.prototype.onUserSettingsChange_ = function (evt, name, value) {
@@ -34,16 +36,19 @@
     }
   };
 
-  ns.CurrentColorsService.prototype.getCurrentColors = function () {
-    return this.currentColors;
-  };
-
   ns.CurrentColorsService.prototype.onPiskelUpdated_ = function (evt) {
     if (this.isCurrentColorsPaletteSelected_()) {
       this.updateCurrentColors_();
     }
   };
 
+  ns.CurrentColorsService.prototype.isCurrentColorsPaletteSelected_ = function () {
+    var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE);
+    var palette = this.paletteService.getPaletteById(paletteId);
+
+    return palette.id === Constants.CURRENT_COLORS_PALETTE_ID;
+  };
+
   ns.CurrentColorsService.prototype.updateCurrentColors_ = function () {
     var layers = this.piskelController.getLayers();
     var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);});
@@ -61,22 +66,21 @@
 
     // limit the array to the max colors to display
     var colorsArray = Object.keys(colors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
-    this.currentColors = this.colorSorter.sort(colorsArray);
+    var currentColors = this.colorSorter.sort(colorsArray);
 
-    // TODO : only fire if there was a change
+    this.setCurrentColors(currentColors);
-    $.publish(Events.CURRENT_COLORS_UPDATED);
   };
 
   ns.CurrentColorsService.prototype.getFrameColors_ = function (frame) {
     var frameColors = {};
     frame.forEachPixel(function (color, x, y) {
-      var hexColor = this.toHexColor_(color);
+      var hexColor = this.toHexString_(color);
       frameColors[hexColor] = true;
     }.bind(this));
     return frameColors;
   };
 
-  ns.CurrentColorsService.prototype.toHexColor_ = function (color) {
+  ns.CurrentColorsService.prototype.toHexString_ = function (color) {
     if (color === Constants.TRANSPARENT_COLOR) {
       return color;
     } else {

src/js/service/keyboard/CheatsheetService.js

@@ -11,8 +11,7 @@
       throw 'cheatsheetEl_ DOM element could not be retrieved';
     }
     this.initMarkup_();
-    pskl.app.shortcutService.addShortcut('shift+?', this.toggleCheatsheet_.bind(this));
+    pskl.app.shortcutService.addShortcuts(['?', 'shift+?'], this.toggleCheatsheet_.bind(this));
-    pskl.app.shortcutService.addShortcut('?', this.toggleCheatsheet_.bind(this));
 
     var link = $('.cheatsheet-link');
     link.click(this.toggleCheatsheet_.bind(this));
@@ -107,7 +106,8 @@
       this.toDescriptor_('N', 'Create new frame'),
       this.toDescriptor_('shift + N', 'Duplicate selected frame'),
       this.toDescriptor_('shift + ?', 'Open/Close this popup'),
-      this.toDescriptor_('alt + P', 'Open the Palette Manager'),
+      this.toDescriptor_('alt + P', 'Create a Palette'),
+      this.toDescriptor_('</>', 'Select previous/next palette color'),
       this.toDescriptor_('alt + O', 'Toggle Onion Skin'),
       this.toDescriptor_('alt + L', 'Toggle Layer Preview')
     ];

src/js/service/keyboard/KeycodeTranslator.js

@@ -7,7 +7,9 @@
     40 : "down",
     46 : "del",
     189 : "-",
-    187 : "+"
+    187 : "+",
+    188 : "<",
+    190 : ">"
   };
 
   var ns = $.namespace('pskl.service.keyboard');

src/js/service/keyboard/ShortcutService.js

@@ -35,6 +35,12 @@
     }
   };
 
+  ns.ShortcutService.prototype.addShortcuts = function (keys, callback) {
+    keys.forEach(function (key) {
+      this.addShortcut(key, callback);
+    }.bind(this));
+  };
+
   ns.ShortcutService.prototype.removeShortcut = function (rawKey) {
     var parsedKey = this.parseKey_(rawKey.toLowerCase());
 

src/js/utils/FrameUtils.js

@@ -83,9 +83,9 @@
      * @param  {String} strColor2 color under
      * @return {String} the composite color
      */
-    mergePixels_ : function (strColor1, strColor2, globalOpacity1) {
+    mergePixels__ : function (strColor1, strColor2, globalOpacity1) {
-      var col1 = pskl.utils.FrameUtils.toRgba_(strColor1);
+      var col1 = pskl.utils.FrameUtils.toRgba__(strColor1);
-      var col2 = pskl.utils.FrameUtils.toRgba_(strColor2);
+      var col2 = pskl.utils.FrameUtils.toRgba__(strColor2);
       if (typeof globalOpacity1 == 'number') {
         col1 = JSON.parse(JSON.stringify(col1));
         col1.a = globalOpacity1 * col1.a;
@@ -105,7 +105,7 @@
      * @param  {String} c color as a string
      * @return {Object} {r:Number,g:Number,b:Number,a:Number}
      */
-    toRgba_ : function (c) {
+    toRgba__ : function (c) {
       if (colorCache[c]) {
         return colorCache[c];
       }

src/templates/dialogs/create-palette.html

@@ -28,33 +28,33 @@
           <div class="color-picker-slider">
             <span>H</span>
             <input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359" tabindex="-1"/>
-            <input type="text"  data-model="hsv" data-dimension="h" class="textfield" value="0" tabindex="101"/>
+            <input type="text"  data-model="hsv" data-dimension="h" class="textfield" value="0" />
           </div>
           <div class="color-picker-slider">
             <span>S</span>
             <input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100" tabindex="-1"/>
-            <input type="text"  data-model="hsv" data-dimension="s" class="textfield" value="0" tabindex="102"/>
+            <input type="text"  data-model="hsv" data-dimension="s" class="textfield" value="0" />
           </div>
           <div class="color-picker-slider">
             <span>V</span>
             <input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100" tabindex="-1"/>
-            <input type="text"  data-model="hsv" data-dimension="v" class="textfield" value="0" tabindex="103"/>
+            <input type="text"  data-model="hsv" data-dimension="v" class="textfield" value="0" />
           </div>
           <br/>
           <div class="color-picker-slider">
             <span>R</span>
             <input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255" tabindex="-1"/>
-            <input type="text"  data-model="rgb" data-dimension="r" class="textfield" value="0" tabindex="104"/>
+            <input type="text"  data-model="rgb" data-dimension="r" class="textfield" value="0" />
           </div>
           <div class="color-picker-slider">
             <span>G</span>
             <input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255" tabindex="-1"/>
-            <input type="text"  data-model="rgb" data-dimension="g" class="textfield" value="0" tabindex="105"/>
+            <input type="text"  data-model="rgb" data-dimension="g" class="textfield" value="0" />
           </div>
           <div class="color-picker-slider">
             <span>B</span>
             <input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255" tabindex="-1"/>
-            <input type="text"  data-model="rgb" data-dimension="b" class="textfield" value="0" tabindex="106"/>
+            <input type="text"  data-model="rgb" data-dimension="b" class="textfield" value="0" />
           </div>
           <div class="color-preview"></div>
         </div>
@@ -67,14 +67,6 @@
       </div>
   </div>
 
-  <script type="text/template" id="color-picker-slider-template">
-    <div class="color-picker-slider">
-      <span>{{dim|upper}}</span>
-      <input type="range" data-model="{{model}}" data-dimension="{{dim}}" value="0" min="0" max="{{max}}"/>
-      <input type="text"  data-model="{{model}}" data-dimension="{{dim}}" class="textfield" value="0"/>
-    </div>
-  </script>
-
   <script type="text/template" id="create-palette-color-template">
     <li
       class="create-palette-color {{:selected}} {{:light-color}}"

src/templates/palettes-list.html

@@ -14,7 +14,7 @@
   </div>
   <div class="palettes-list-colors"></div>
   <script type="text/template" id="palette-color-template">
-    <div class="palettes-list-color" data-color="{{color}}" title="{{color}}">
+    <div class="palettes-list-color" data-color="{{color}}" data-color-index="{{index}}" title="{{color}}">
       <div data-color="{{color}}" style="background:{{color}}"></div>
     </div>
   </script>