From 8ebdc4cd41d4744cbb9926b086801f329982024f Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 17 Sep 2014 01:32:59 +0200 Subject: [PATCH] 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 | 2 +- src/js/controller/PalettesListController.js | 11 +++- .../controller/widgets/HslRgbColorPicker.js | 3 +- src/js/lib/spectrum/spectrum.js | 3 +- src/js/service/keyboard/CheatsheetService.js | 14 +++++ src/js/service/palette/PaletteGplWriter.js | 58 +++++++++++++++++++ src/piskel-script-list.js | 1 + 7 files changed, 87 insertions(+), 5 deletions(-) create mode 100644 src/js/service/palette/PaletteGplWriter.js diff --git a/src/css/color-picker-slider.css b/src/css/color-picker-slider.css index 05156f72..8c3cdda6 100644 --- a/src/css/color-picker-slider.css +++ b/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"]{ diff --git a/src/js/controller/PalettesListController.js b/src/js/controller/PalettesListController.js index 86ce65f3..300dd2a1 100644 --- a/src/js/controller/PalettesListController.js +++ b/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) { diff --git a/src/js/controller/widgets/HslRgbColorPicker.js b/src/js/controller/widgets/HslRgbColorPicker.js index a046035c..a83adaec 100644 --- a/src/js/controller/widgets/HslRgbColorPicker.js +++ b/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"); diff --git a/src/js/lib/spectrum/spectrum.js b/src/js/lib/spectrum/spectrum.js index bc378df1..b60d3894 100644 --- a/src/js/lib/spectrum/spectrum.js +++ b/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) { diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js index 03c085bc..56818073 100644 --- a/src/js/service/keyboard/CheatsheetService.js +++ b/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_(); diff --git a/src/js/service/palette/PaletteGplWriter.js b/src/js/service/palette/PaletteGplWriter.js new file mode 100644 index 00000000..30c9fa2a --- /dev/null +++ b/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 diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 55892ca9..7d34b17d 100644 --- a/src/piskel-script-list.js +++ b/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",