diff --git a/src/css/bootstrap/bootstrap.css b/src/css/bootstrap/bootstrap.css
index 724ca00b..de0c1a0e 100755
--- a/src/css/bootstrap/bootstrap.css
+++ b/src/css/bootstrap/bootstrap.css
@@ -36,7 +36,7 @@
}
.tooltip {
position: absolute;
- z-index: 1030;
+ z-index: 30000;
display: block;
visibility: visible;
padding: 5px;
diff --git a/src/css/dialogs-create-palette.css b/src/css/dialogs-create-palette.css
index 9aa5b9d2..57c04941 100644
--- a/src/css/dialogs-create-palette.css
+++ b/src/css/dialogs-create-palette.css
@@ -112,7 +112,7 @@
position: absolute;
top: 0;
right: 0;
- padding: 2px 4px;
+ padding: 2px 4px 0 0;
opacity : 0.2;
font-weight: bold;
diff --git a/src/js/controller/dialogs/CreatePaletteController.js b/src/js/controller/dialogs/CreatePaletteController.js
index 9c57a473..c9f7a853 100644
--- a/src/js/controller/dialogs/CreatePaletteController.js
+++ b/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();
};
diff --git a/src/js/controller/widgets/HslRgbColorPicker.js b/src/js/controller/widgets/HslRgbColorPicker.js
index 304b9943..a046035c 100644
--- a/src/js/controller/widgets/HslRgbColorPicker.js
+++ b/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));
+ } ;
+
})();
\ No newline at end of file
diff --git a/src/js/lib/spectrum/spectrum.js b/src/js/lib/spectrum/spectrum.js
index 731b0ce1..bc378df1 100644
--- a/src/js/lib/spectrum/spectrum.js
+++ b/src/js/lib/spectrum/spectrum.js
@@ -504,8 +504,10 @@
$(doc).bind("mousedown.spectrum", onMousedown);
- // Piskel-specific : change the color as soon as the user does a mouseup
- $(doc).bind("mouseup.spectrum", updateColor);
+ if (!flat) {
+ // Piskel-specific : change the color as soon as the user does a mouseup
+ $(doc).bind("mouseup.spectrum", updateColor);
+ }
$(window).bind("resize.spectrum", resize);
replacer.addClass("sp-active");
diff --git a/src/js/service/palette/PaletteImportService.js b/src/js/service/palette/PaletteImportService.js
index bb10f1f3..d0ec4e60 100644
--- a/src/js/service/palette/PaletteImportService.js
+++ b/src/js/service/palette/PaletteImportService.js
@@ -1,18 +1,15 @@
(function () {
var ns = $.namespace('pskl.service.palette');
- var supportedFileFormats = ['gpl'];
+ var fileReaders = {
+ 'gpl' : ns.PaletteGplReader,
+ 'txt' : ns.PaletteTxtReader
+ };
ns.PaletteImportService = function () {};
ns.PaletteImportService.prototype.read = function (file, onSuccess, onError) {
- var reader;
- if (this.isImage_(file)){
- reader = new ns.PaletteImageReader(file, onSuccess, onError);
- } else if (this.isSupportedFormat_(file)) {
- reader = this.getFileReader_(file, onSuccess, onError);
- }
-
+ var reader = this.getFileReader_(file, onSuccess, onError);
if (reader) {
reader.read();
} else {
@@ -25,19 +22,24 @@
};
ns.PaletteImportService.prototype.getFileReader_ = function (file, onSuccess, onError) {
- var extension = this.getExtension_(file);
- if (extension === 'gpl') {
- return new ns.PaletteGplReader(file, onSuccess, onError);
+ var readerClass = this.getReaderClass_(file);
+
+ var reader = null;
+ if (readerClass) {
+ reader = new readerClass(file, onSuccess, onError);
}
+
+ return reader;
};
- ns.PaletteImportService.prototype.isSupportedFormat_ = function (file) {
+ ns.PaletteImportService.prototype.getReaderClass_ = function (file) {
var extension = this.getExtension_(file);
- return supportedFileFormats.indexOf(extension) != -1;
+ return fileReaders[extension];
};
ns.PaletteImportService.prototype.getExtension_ = function (file) {
var parts = file.name.split('.');
- return parts[parts.length-1];
+ var extension = parts[parts.length-1];
+ return extension.toLowerCase();
};
})();
\ No newline at end of file
diff --git a/src/js/service/palette/PaletteTxtReader.js b/src/js/service/palette/PaletteTxtReader.js
new file mode 100644
index 00000000..ee7dcf66
--- /dev/null
+++ b/src/js/service/palette/PaletteTxtReader.js
@@ -0,0 +1,38 @@
+(function () {
+ var ns = $.namespace('pskl.service.palette');
+
+ var RE_COLOR_LINE = /^[A-F0-9]{2}([A-F0-9]{2})([A-F0-9]{2})([A-F0-9]{2})/;
+
+ ns.PaletteTxtReader = function (file, onSuccess, onError) {
+ this.file = file;
+ this.onSuccess = onSuccess;
+ this.onError = onError;
+ };
+
+ ns.PaletteTxtReader.prototype.read = function () {
+ pskl.utils.FileUtils.readFile(this.file, this.onFileLoaded_.bind(this));
+ };
+
+ ns.PaletteTxtReader.prototype.onFileLoaded_ = function (content) {
+ var text = pskl.utils.Base64.toText(content);
+ var lines = text.match(/[^\r\n]+/g);
+
+ var colorLines = lines.filter(function (l) {
+ return RE_COLOR_LINE.test(l);
+ });
+
+ var colors = colorLines.map(function (l) {
+ var matches = l.match(RE_COLOR_LINE);
+ var color = "#" + matches[1] + matches[2] + matches[3];
+ return color;
+ });
+
+ if (colors.length) {
+ var uuid = pskl.utils.Uuid.generate();
+ var palette = new pskl.model.Palette(uuid, 'Imported palette', colors);
+ this.onSuccess(palette);
+ } else {
+ this.onError();
+ }
+ };
+})();
\ No newline at end of file
diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js
index e8dd9681..55892ca9 100644
--- a/src/piskel-script-list.js
+++ b/src/piskel-script-list.js
@@ -120,9 +120,10 @@
"js/service/BeforeUnloadService.js",
"js/service/HistoryService.js",
"js/service/palette/PaletteService.js",
- "js/service/palette/PaletteImportService.js",
+ "js/service/palette/PaletteTxtReader.js",
"js/service/palette/PaletteGplReader.js",
"js/service/palette/PaletteImageReader.js",
+ "js/service/palette/PaletteImportService.js",
"js/service/SavedStatusService.js",
"js/service/keyboard/ShortcutService.js",
"js/service/keyboard/KeycodeTranslator.js",
diff --git a/src/templates/dialogs/create-palette.html b/src/templates/dialogs/create-palette.html
index 5e86c764..2392d98e 100644
--- a/src/templates/dialogs/create-palette.html
+++ b/src/templates/dialogs/create-palette.html
@@ -8,7 +8,10 @@
Name
-
+
+