From 090443c3187919899cbe84a5c1b7a514441539ee Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 30 Mar 2014 22:42:28 +0200 Subject: [PATCH] Feature : Color palette : fix spectrum issue The palette manager UI is redrawn almost everytime the model changes. This way, UI is always in sync with the model. However, spectrum instances are spawning everytime a redraw is performed. They cannot be cleaned before the redraw is performed, because if a spectrum picker is opened, it should remain like this. This allows the cuser to keep modifying a color without having to reopen the picker each time he/she stops on a color. As a workaround, I keep a reference on all the spectrum containers and destroy them all when the manager is disposed. Ideally I'd prefer to have a single spectrum instance that I could move around depending on which color the user wants to edit. I.e. I want to mutualize all the picker instances ... But this will require a bit more work. Also added a notification when the user saves a palette. Updated z-index of user-message container so that it is always above the rest of the application. --- src/css/style.css | 2 +- .../dialogs/PaletteManagerController.js | 65 ++++++++++--------- src/templates/dialogs/manage-palettes.html | 2 +- 3 files changed, 35 insertions(+), 34 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 40ffb989..b9a7a74c 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -206,7 +206,7 @@ body { border-bottom: 0; font-weight: bold; font-size: 13px; - z-index: 10000; + z-index: 30000; max-width: 300px; } diff --git a/src/js/controller/dialogs/PaletteManagerController.js b/src/js/controller/dialogs/PaletteManagerController.js index ba0c837e..91692105 100644 --- a/src/js/controller/dialogs/PaletteManagerController.js +++ b/src/js/controller/dialogs/PaletteManagerController.js @@ -13,6 +13,9 @@ this.palettes = this.retrieveUserPalettes(); this.originalPalettes = this.retrieveUserPalettes(); this.selectedPaletteId = null; + + // Keep track of all spectrum instances created, to dispose them when closing the popup + this.spectrumContainers = []; }; ns.PaletteManagerController.prototype.init = function () { @@ -73,6 +76,11 @@ }; }; + ns.PaletteManagerController.prototype.redraw = function () { + this.createPaletteListMarkup(); + this.selectPalette(this.selectedPaletteId); + }; + ns.PaletteManagerController.prototype.selectPalette = function (paletteId) { this.deselectCurrentPalette(); var paletteListItem = this.palettesList.querySelector('[data-palette-id='+paletteId+']'); @@ -84,9 +92,6 @@ }; ns.PaletteManagerController.prototype.refreshPaletteDetails = function () { - // Destroy and disconnect events - this.destroySpectrumPickers(); - this.createPaletteHeadMarkup(); this.createPaletteBodyMarkup(); this.initPaletteDetailsEvents(); @@ -182,7 +187,8 @@ } else if (target.classList.contains('palette-manager-palette-button')) { var action = target.dataset.action; if (action === 'save') { - this.savePaletteAndRedraw(this.getSelectedPalette().id); + this.savePalette(this.getSelectedPalette().id); + this.redraw(); } else if (action === 'revert') { this.revertChanges(); } else if (action === 'delete') { @@ -197,8 +203,8 @@ ns.PaletteManagerController.prototype.initPaletteCardsSpectrum = function () { var oSelf = this; - var colorSquares = $(this.getSpectrumSelector_()); - colorSquares.spectrum({ + var container = $(this.getSpectrumSelector_()); + container.spectrum({ clickoutFiresChange : true, showInput: true, showButtons: false, @@ -212,40 +218,43 @@ var colorId = parseInt(target.parentNode.dataset.colorId, 10); var palette = oSelf.getSelectedPalette(); var color = palette.colors[colorId]; - colorSquares.spectrum("set", color); + container.spectrum("set", color); } }); + + this.spectrumContainers.push(container); }; + /** + * Destroy all spectrum instances generated by the palette manager + */ ns.PaletteManagerController.prototype.destroySpectrumPickers = function () { - var sp = $(this.getSpectrumSelector_()); - if (sp) { - sp.spectrum("destroy"); - } + this.spectrumContainers.forEach(function (container) { + container.spectrum("destroy"); + }); + this.spectrumContainers = []; }; ns.PaletteManagerController.prototype.updateColorInSelectedPalette = function (colorId, color) { var palette = this.getSelectedPalette(); - palette.colors.splice(colorId, 1, '#' + (color.toHex().toUpperCase())); + var hexColor = '#' + (color.toHex().toUpperCase()); + palette.colors.splice(colorId, 1, hexColor); - this.createPaletteListMarkup(); - this.selectPalette(this.selectedPaletteId); + this.redraw(); }; ns.PaletteManagerController.prototype.addColorInSelectedPalette = function (color) { var selectedPalette = this.getSelectedPalette(); selectedPalette.colors.push(color); - this.createPaletteListMarkup(); - this.selectPalette(this.selectedPaletteId); + this.redraw(); }; ns.PaletteManagerController.prototype.removeColorInSelectedPalette = function (colorId) { var palette = this.getSelectedPalette(); palette.colors.splice(colorId, 1); - this.createPaletteListMarkup(); - this.selectPalette(this.selectedPaletteId); + this.redraw(); }; ns.PaletteManagerController.prototype.renameSelectedPalette = function () { @@ -253,8 +262,7 @@ var name = window.prompt('Please enter a new name for palette "' + palette.name + '"', palette.name); if (name) { palette.name = name; - this.createPaletteListMarkup(); - this.selectPalette(palette.id); + this.redraw(); } }; @@ -309,8 +317,7 @@ palette.name = originalPalette.name; palette.colors = originalPalette.colors.slice(0); - this.createPaletteListMarkup(); - this.selectPalette(palette.id); + this.redraw(); }; ns.PaletteManagerController.prototype.deleteSelectedPalette = function () { @@ -340,8 +347,7 @@ this.savePalette(palette.id); }.bind(this)); - this.createPaletteListMarkup(); - this.selectPalette(this.getSelectedPalette().id); + this.redraw(); }; ns.PaletteManagerController.prototype.savePalette = function (paletteId) { @@ -355,16 +361,11 @@ } this.persistToLocalStorage(); + + $.publish(Events.SHOW_NOTIFICATION, [{"content": "Palette " + palette.name + " successfully saved !"}]); + window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000); }; - ns.PaletteManagerController.prototype.savePaletteAndRedraw = function (paletteId) { - this.savePalette(paletteId); - - this.createPaletteListMarkup(); - this.selectPalette(this.getSelectedPalette().id); - }; - - ns.PaletteManagerController.prototype.persistToLocalStorage = function () { window.localStorage.setItem('piskel.palettes', JSON.stringify(this.originalPalettes)); this.originalPalettes = this.retrieveUserPalettes(); diff --git a/src/templates/dialogs/manage-palettes.html b/src/templates/dialogs/manage-palettes.html index 208b1abf..946a4f61 100644 --- a/src/templates/dialogs/manage-palettes.html +++ b/src/templates/dialogs/manage-palettes.html @@ -21,7 +21,7 @@