Enhancement : Color palettes

- Added clone feature when editing existing palette
- Added arrow up/down to increase decrease input values
- Paint.net palettes are supported

src/js/controller/dialogs/CreatePaletteController.js

@@ -1,10 +1,16 @@
 (function () {
   var ns = $.namespace('pskl.controller.dialogs');
 
+  var MODE = {
+    CREATE : 'CREATE',
+    EDIT : 'EDIT'
+  };
+
   ns.CreatePaletteController = function (piskelController) {
     this.paletteService = pskl.app.paletteService;
     this.paletteImportService = pskl.app.paletteImportService;
     this.selectedIndex = -1;
+    this.mode = null;
   };
 
   pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);
@@ -18,6 +24,7 @@
     this.nameInput = document.querySelector('input[name="palette-name"]');
 
     var submitButton = document.querySelector('.create-palette-submit');
+    var cloneButton = document.querySelector('.create-palette-clone');
     var cancelButton = document.querySelector('.create-palette-cancel');
     var importFileButton = document.querySelector('.create-palette-import-button');
 
@@ -26,6 +33,7 @@
     this.hiddenFileInput.addEventListener('change', this.onFileInputChange_.bind(this));
 
     submitButton.addEventListener('click', this.onSubmitButtonClick_.bind(this));
+    cloneButton.addEventListener('click', this.onCloneButtonClick_.bind(this));
     cancelButton.addEventListener('click', this.closeDialog.bind(this));
     importFileButton.addEventListener('click', this.onImportFileButtonClick_.bind(this));
 
@@ -37,8 +45,12 @@
     if (paletteId) {
       var paletteObject = this.paletteService.getPaletteById(paletteId);
       palette = pskl.model.Palette.fromObject(paletteObject);
+      importFileButton.style.display = 'none';
+      this.mode = MODE.EDIT;
     } else {
-      palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'New palette', []);
+      palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'New palette', ['#000000']);
+      cloneButton.style.display = 'none';
+      this.mode = MODE.CREATE;
     }
 
     this.setPalette_(palette);
@@ -47,6 +59,7 @@
   ns.CreatePaletteController.prototype.setPalette_ = function (palette) {
     this.palette = palette;
     this.nameInput.value = pskl.utils.unescapeHtml(this.palette.name);
+    this.selectColor_(0);
     this.refresh_();
   };
 
@@ -111,6 +124,12 @@
     this.closeDialog();
   };
 
+  ns.CreatePaletteController.prototype.onCloneButtonClick_ = function (evt) {
+    var palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), this.palette.name, this.palette.colors);
+    this.paletteService.savePalette(palette);
+    this.closeDialog();
+  };
+
   ns.CreatePaletteController.prototype.onImportFileButtonClick_ = function () {
     this.hiddenFileInput.click();
   };

src/js/controller/widgets/HslRgbColorPicker.js

@@ -11,6 +11,7 @@
     var isChromeOrFirefox = pskl.utils.UserAgent.isChrome || pskl.utils.UserAgent.isFirefox;
     var changeEvent = isChromeOrFirefox ? 'input' : 'change';
     this.container.addEventListener(changeEvent, this.onPickerChange_.bind(this));
+    this.container.addEventListener('keydown', this.onKeydown_.bind(this));
 
     this.spectrumEl = this.container.querySelector('.color-picker-spectrum');
 
@@ -25,7 +26,6 @@
     this.setColor("#000000");
   };
 
-
   ns.HslRgbColorPicker.prototype.onPickerChange_ = function (evt) {
     var target = evt.target;
 
@@ -53,6 +53,27 @@
     this.setColor(color);
   };
 
+  ns.HslRgbColorPicker.prototype.onKeydown_ = function (evt) {
+    var target = evt.target;
+
+    if (target.getAttribute('type').toLowerCase() === 'text') {
+      var value = parseInt(target.value, 10);
+      var dimension = target.dataset.dimension;
+
+      var key = pskl.service.keyboard.KeycodeTranslator.toChar(evt.keyCode);
+      if (key === 'up') {
+        value = value + 1;
+      } else if (key === 'down') {
+        value = value - 1;
+      }
+
+      value = this.normalizeDimension_(value, dimension);
+
+      target.value = value;
+      this.onPickerChange_(evt);
+    }
+  };
+
   ns.HslRgbColorPicker.prototype.setColor = function (inputColor) {
     if (!this.unplugged) {
       this.unplugged = true;
@@ -150,5 +171,18 @@
     }
   };
 
+  ns.HslRgbColorPicker.prototype.normalizeDimension_ = function (value, dimension) {
+    var ranges = {
+      'h' : [0, 359],
+      's' : [0, 100],
+      'v' : [0, 100],
+      'r' : [0, 255],
+      'g' : [0, 255],
+      'b' : [0, 255]
+    };
+    var range = ranges[dimension];
+    return Math.max(range[0], Math.min(range[1], value));
+  } ;
+
 
 })();