Enhancement palettes : Added download palette

- palettes can be downloaded as GPL palettes
- slightly tweaked the UI of hsl rgb picker
- switched preferred format of spectrum to hex

src/css/color-picker-slider.css

@@ -82,7 +82,7 @@
   float:left;
   height : 10px;
   width : 100px;
-  margin: 7px 5px;
+  margin: 7px 1px 7px 8px;
 }
 
 .color-picker-slider input[type="text"]{

src/js/controller/PalettesListController.js

@@ -149,7 +149,16 @@
   };
 
   ns.PalettesListController.prototype.downloadSelectedPalette_ = function () {
-    window.alert('not implemented yet');
+    // getSelectedPalette
+    var paletteId = this.colorPaletteSelect_.value;
+    var palette = this.paletteService.getPaletteById(paletteId);
+
+    var paletteWriter = new pskl.service.palette.PaletteGplWriter(palette);
+    var paletteAsString = paletteWriter.write();
+
+    pskl.utils.BlobUtils.stringToBlob(paletteAsString, function(blob) {
+      pskl.utils.FileUtils.downloadAsFile(blob, palette.name + '.gpl');
+    }.bind(this), "application/json");
   };
 
   ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {

src/js/controller/widgets/HslRgbColorPicker.js

@@ -20,7 +20,8 @@
         showInput: true,
         showButtons: false,
         move : this.setColor.bind(this),
-        change : this.setColor.bind(this)
+        change : this.setColor.bind(this),
+        preferredFormat: 'hex'
     });
 
     this.setColor("#000000");

src/js/lib/spectrum/spectrum.js

@@ -669,10 +669,9 @@
                 }
             }
 
-
             // Update the text entry input as it changes happen
             if (opts.showInput) {
-                textInput.val(realColor.toString(Constants.PREFERRED_COLOR_FORMAT || format));
+                textInput.val(realColor.toString(format));
             }
 
             if (opts.showPalette) {

src/js/service/keyboard/CheatsheetService.js

@@ -14,13 +14,27 @@
     pskl.app.shortcutService.addShortcut('shift+?', this.toggleCheatsheet_.bind(this));
     pskl.app.shortcutService.addShortcut('?', this.toggleCheatsheet_.bind(this));
 
+    document.body.addEventListener('click', this.onBodyClick_.bind(this));
+
     var link = $('.cheatsheet-link');
     link.click(this.toggleCheatsheet_.bind(this));
 
+
     $.subscribe(Events.TOGGLE_HELP, this.toggleCheatsheet_.bind(this));
     $.subscribe(Events.ESCAPE, this.onEscape_.bind(this));
   };
 
+  ns.CheatsheetService.prototype.onBodyClick_ = function (event) {
+    if (this.isDisplayed_) {
+      var target = event.target;
+      var cheatsheetContainerEl = document.querySelector('.cheatsheet-container');
+      var isInCheatsheetContainer = pskl.utils.Dom.isParent(target, cheatsheetContainerEl);
+      if (!isInCheatsheetContainer) {
+        this.hideCheatsheet_();
+      }
+    }
+  };
+
   ns.CheatsheetService.prototype.toggleCheatsheet_ = function () {
     if (this.isDisplayed_) {
       this.hideCheatsheet_();

src/js/service/palette/PaletteGplWriter.js

@@ -0,0 +1,58 @@
+(function () {
+  var ns = $.namespace('pskl.service.palette');
+
+  ns.PaletteGplWriter = function (palette, onSuccess, onError) {
+    this.palette = palette;
+    this.onSuccess = onSuccess;
+    this.onError = onError;
+  };
+
+  ns.PaletteGplWriter.prototype.write = function () {
+    var lines = [];
+    lines.push('GIMP Palette');
+    lines.push('Name: ' + this.palette.name);
+    lines.push('Columns: 0');
+    lines.push('#');
+    this.palette.colors.forEach(function (color) {
+      lines.push(this.writeColorLine(color));
+    }.bind(this));
+    lines.push('\r\n');
+
+    return lines.join('\r\n');
+  };
+
+  ns.PaletteGplWriter.prototype.writeColorLine = function (color) {
+    var tinycolor = window.tinycolor(color);
+    var rgb = tinycolor.toRgb();
+    var strBuffer = [];
+    strBuffer.push(this.padString(rgb.r, 3));
+    strBuffer.push(this.padString(rgb.g, 3));
+    strBuffer.push(this.padString(rgb.b, 3));
+    strBuffer.push('Untitled');
+
+    return strBuffer.join(' ');
+  };
+
+  ns.PaletteGplWriter.prototype.padString = function (str, size) {
+    str = str.toString();
+    for (var i = 0 ; i < size-str.length ; i++) {
+      str = ' ' + str;
+    }
+    return str;
+  };
+
+})();
+
+// GIMP Palette
+// Name: Fabric_jeans
+// Columns: 0
+// #
+// 194 198 201 Untitled
+// 173 180 194 Untitled
+// 123 126 145 Untitled
+//  91 136 195 Untitled
+//  41  52  74 Untitled
+//  20  25  37 Untitled
+// 164 156 145 Untitled
+// 103  92  82 Untitled
+//  87  58 107 Untitled

src/piskel-script-list.js

@@ -122,6 +122,7 @@
   "js/service/palette/PaletteService.js",
   "js/service/palette/PaletteTxtReader.js",
   "js/service/palette/PaletteGplReader.js",
+  "js/service/palette/PaletteGplWriter.js",
   "js/service/palette/PaletteImageReader.js",
   "js/service/palette/PaletteImportService.js",
   "js/service/SavedStatusService.js",