mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Palette creator can save palettes to local storage
This commit is contained in:
jdescottes
@ -13,19 +13,26 @@
|
||||
|
||||
ns.PalettesListController = function (paletteController, usedColorService) {
|
||||
this.usedColorService = usedColorService;
|
||||
this.paletteService = pskl.app.paletteService;
|
||||
this.paletteController = paletteController;
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.init = function () {
|
||||
this.paletteColorTemplate_ = pskl.utils.Template.get('palette-color-template');
|
||||
|
||||
this.colorListContainer_ = document.querySelector('.palettes-list-colors');
|
||||
this.colorPaletteSelect_ = document.querySelector('.palettes-list-select');
|
||||
this.createPaletteButton_ = document.querySelector('.create-palette-button');
|
||||
|
||||
var createPaletteButton_ = document.querySelector('.create-palette-button');
|
||||
var paletteActions = document.querySelector('.palette-actions');
|
||||
|
||||
this.colorPaletteSelect_.addEventListener('change', this.onPaletteSelected_.bind(this));
|
||||
this.colorListContainer_.addEventListener('mouseup', this.onColorContainerMouseup.bind(this));
|
||||
this.colorListContainer_.addEventListener('contextmenu', this.onColorContainerContextMenu.bind(this));
|
||||
this.createPaletteButton_.addEventListener('click', this.onCreatePaletteClick_.bind(this));
|
||||
|
||||
createPaletteButton_.addEventListener('click', this.onCreatePaletteClick_.bind(this));
|
||||
paletteActions.addEventListener('click', this.onPaletteActionsClick_.bind(this));
|
||||
|
||||
|
||||
$.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this));
|
||||
$.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this));
|
||||
@ -42,7 +49,7 @@
|
||||
id : Constants.CURRENT_COLORS_PALETTE_ID,
|
||||
name : 'Current colors'
|
||||
}];
|
||||
palettes = palettes.concat(this.retrievePalettes());
|
||||
palettes = palettes.concat(this.paletteService.getPalettes());
|
||||
|
||||
var html = palettes.map(function (palette) {
|
||||
return pskl.utils.Template.replace('<option value="{{id}}">{{name}}</option>', palette);
|
||||
@ -74,7 +81,7 @@
|
||||
if (paletteId === Constants.CURRENT_COLORS_PALETTE_ID) {
|
||||
colors = this.usedColorService.getCurrentColors();
|
||||
} else {
|
||||
var palette = this.getPaletteById(paletteId, this.retrievePalettes());
|
||||
var palette = this.paletteService.getPaletteById(paletteId);
|
||||
if (palette) {
|
||||
colors = palette.colors;
|
||||
}
|
||||
@ -87,14 +94,14 @@
|
||||
return colors;
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.selectPalette = function (paletteId) {
|
||||
this.colorPaletteSelect_.value = paletteId;
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.selectPaletteFromUserSettings = function () {
|
||||
this.selectPalette(pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE));
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.selectPalette = function (paletteId) {
|
||||
this.colorPaletteSelect_.value = paletteId;
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
|
||||
var paletteId = this.colorPaletteSelect_.value;
|
||||
pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId);
|
||||
@ -102,7 +109,39 @@
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.onCreatePaletteClick_ = function (evt) {
|
||||
$.publish(Events.DIALOG_DISPLAY, 'create-palette-method');
|
||||
$.publish(Events.DIALOG_DISPLAY, 'create-palette');
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.onPaletteActionsClick_ = function (evt) {
|
||||
var classList = evt.target.classList;
|
||||
if (classList.contains('palette-action-edit')) {
|
||||
this.editSelectedPalette_();
|
||||
} else if (classList.contains('palette-action-delete')) {
|
||||
this.deleteSelectedPalette_();
|
||||
} else if (classList.contains('palette-action-download')) {
|
||||
this.downloadSelectedPalette_();
|
||||
}
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.editSelectedPalette_ = function () {
|
||||
var paletteId = this.colorPaletteSelect_.value;
|
||||
$.publish(Events.DIALOG_DISPLAY, {
|
||||
dialogId : 'create-palette',
|
||||
initArgs : paletteId
|
||||
});
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.deleteSelectedPalette_ = function () {
|
||||
var paletteId = this.colorPaletteSelect_.value;
|
||||
var palette = this.paletteService.getPaletteById(paletteId);
|
||||
if (window.confirm('Are you sure you want to delete palette ' + palette.name)) {
|
||||
this.paletteService.deletePaletteById(palette.id);
|
||||
this.selectPalette(Constants.CURRENT_COLORS_PALETTE_ID);
|
||||
}
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.downloadSelectedPalette_ = function () {
|
||||
window.alert('not implemented yet');
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {
|
||||
@ -155,21 +194,4 @@
|
||||
this.selectPaletteFromUserSettings();
|
||||
this.fillColorListContainer();
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.getPaletteById = function (paletteId, palettes) {
|
||||
var match = null;
|
||||
|
||||
palettes.forEach(function (palette) {
|
||||
if (palette.id === paletteId) {
|
||||
match = palette;
|
||||
}
|
||||
});
|
||||
|
||||
return match;
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.retrievePalettes = function () {
|
||||
var palettesString = window.localStorage.getItem('piskel.palettes');
|
||||
return JSON.parse(palettesString) || [];
|
||||
};
|
||||
})();
|
||||
@ -2,22 +2,34 @@
|
||||
var ns = $.namespace('pskl.controller.dialogs');
|
||||
|
||||
ns.CreatePaletteController = function (piskelController) {
|
||||
this.tinyColor = null;
|
||||
this.hsvColor = {h:0,s:0,v:0};
|
||||
this.palette = [];
|
||||
this.paletteService = pskl.app.paletteService;
|
||||
this.selectedIndex = -1;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);
|
||||
|
||||
ns.CreatePaletteController.prototype.init = function () {
|
||||
ns.CreatePaletteController.prototype.init = function (paletteId) {
|
||||
this.superclass.init.call(this);
|
||||
console.log(paletteId);
|
||||
if (paletteId) {
|
||||
var palette = this.paletteService.getPaletteById(paletteId);
|
||||
this.palette = pskl.model.Palette.fromObject(palette);
|
||||
} else {
|
||||
paletteId = pskl.utils.Uuid.generate();
|
||||
this.palette = new pskl.model.Palette(paletteId, 'New palette', []);
|
||||
}
|
||||
|
||||
this.colorsList = document.querySelector('.colors-list');
|
||||
this.colorPickerContainer = document.querySelector('.color-picker-container');
|
||||
this.colorPreviewEl = document.querySelector('.color-preview');
|
||||
|
||||
this.submitButton = document.querySelector('.create-palette-submit');
|
||||
this.nameInput = document.querySelector('input[name="palette-name"]');
|
||||
this.nameInput.value = this.palette.name;
|
||||
|
||||
this.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
|
||||
this.submitButton.addEventListener('click', this.onSubmitButtonClick_.bind(this));
|
||||
this.nameInput.addEventListener('input', this.onNameInputChange_.bind(this));
|
||||
|
||||
this.hslRgbColorPicker = new pskl.controller.widgets.HslRgbColorPicker(this.colorPickerContainer, this.onColorUpdated_.bind(this));
|
||||
this.hslRgbColorPicker.init();
|
||||
@ -26,45 +38,114 @@
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onColorUpdated_ = function (color) {
|
||||
this.colorPreviewEl.style.background = color.toRgbString();
|
||||
this.palette[this.selectedIndex] = color.toRgbString();
|
||||
this.refresh_();
|
||||
var rgbColor = color.toRgbString();
|
||||
this.colorPreviewEl.style.background = rgbColor;
|
||||
this.palette.set(this.selectedIndex, rgbColor);
|
||||
|
||||
this.refreshColorElement_(this.selectedIndex);
|
||||
};
|
||||
|
||||
/**
|
||||
* Lightweight refresh only changing the color of one element of the palette color list
|
||||
*/
|
||||
ns.CreatePaletteController.prototype.refreshColorElement_ = function (index) {
|
||||
var color = this.palette.get(this.selectedIndex);
|
||||
var element = document.querySelector('[data-palette-index="'+index+'"]');
|
||||
if (element) {
|
||||
element.style.background = color;
|
||||
element.classList.toggle('light-color', this.isLight_(color));
|
||||
}
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onColorContainerClick_ = function (evt) {
|
||||
var target = evt.target;
|
||||
if (target.dataset.paletteIndex) {
|
||||
this.selectColor_(target.dataset.paletteIndex);
|
||||
} else if (target.classList.contains('add-color-button')) {
|
||||
this.palette.push(this.palette[this.selectedIndex] || "#000000");
|
||||
this.refresh_();
|
||||
this.selectColor_(this.palette.length-1);
|
||||
if (target.classList.contains('create-palette-color')) {
|
||||
this.onPaletteColorClick_(evt, target);
|
||||
} else if (target.classList.contains('create-palette-new-color')) {
|
||||
this.onNewColorClick_(evt, target);
|
||||
} else if (target.classList.contains('create-palette-remove-color')) {
|
||||
this.onRemoveColorClick_(evt, target);
|
||||
}
|
||||
this.refresh_();
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onPaletteColorClick_ = function (evt, target) {
|
||||
var index = parseInt(target.dataset.paletteIndex,10);
|
||||
this.selectColor_(index);
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onRemoveColorClick_ = function (evt, target) {
|
||||
var colorElement = target.parentNode;
|
||||
var index = parseInt(colorElement.dataset.paletteIndex,10);
|
||||
this.removeColor_(index);
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onNewColorClick_ = function (evt, target) {
|
||||
var newColor = this.palette.get(this.selectedIndex) || '#000000';
|
||||
this.palette.add(newColor);
|
||||
this.selectColor_(this.palette.size()-1);
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onSubmitButtonClick_ = function (evt) {
|
||||
this.paletteService.savePalette(this.palette);
|
||||
this.closeDialog();
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onNameInputChange_ = function (evt) {
|
||||
this.palette.name = this.nameInput.value;
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.selectColor_ = function (index) {
|
||||
this.selectedIndex = index;
|
||||
this.hslRgbColorPicker.setColor(this.palette.get(index));
|
||||
};
|
||||
|
||||
var previous = this.colorsList.querySelector('.selectedColor');
|
||||
if (previous) {
|
||||
previous.classList.remove('selected');
|
||||
}
|
||||
|
||||
var next = this.colorsList.querySelector('[data-palette-index="'+index+'"]');
|
||||
next.classList.add('selected');
|
||||
|
||||
this.hslRgbColorPicker.setColor(this.palette[index]);
|
||||
ns.CreatePaletteController.prototype.removeColor_ = function (index) {
|
||||
this.palette.removeAt(index);
|
||||
this.refresh_();
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.refresh_ = function () {
|
||||
var html = "";
|
||||
var tpl = '<div data-palette-index="{{index}}" data-palette-color="{{color}}" style="height:40px;width:40px;float:left; margin:10px;background:{{color}}"></div>';
|
||||
this.palette.forEach(function (color, index) {
|
||||
html += pskl.utils.Template.replace(tpl, {color:color, index:index});
|
||||
});
|
||||
var tpl = pskl.utils.Template.get('create-palette-color-template');
|
||||
var colors = this.palette.colors;
|
||||
|
||||
html += '<div class=add-color-button style="height:40px;width:40px;margin:10px;float:left; background:gold">ADD</div>';
|
||||
colors.forEach(function (color, index) {
|
||||
var isSelected = (index === this.selectedIndex);
|
||||
|
||||
html += pskl.utils.Template.replace(tpl, {
|
||||
color:color, index:index,
|
||||
':selected':isSelected,
|
||||
':light-color':this.isLight_(color)
|
||||
});
|
||||
}.bind(this));
|
||||
|
||||
html += '<li class="create-palette-new-color">+</li>';
|
||||
|
||||
this.colorsList.innerHTML = html;
|
||||
|
||||
$('.colors-list').sortable({
|
||||
placeholder: 'colors-list-drop-proxy',
|
||||
update: this.onDrop_.bind(this),
|
||||
items: '.create-palette-color'
|
||||
});
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.isLight_ = function (color) {
|
||||
var rgb = window.tinycolor(color).toRgb();
|
||||
return rgb.r+rgb.b+rgb.g > 128*3;
|
||||
};
|
||||
|
||||
|
||||
ns.CreatePaletteController.prototype.onDrop_ = function (evt, drop) {
|
||||
var colorElement = drop.item.get(0);
|
||||
|
||||
var oldIndex = parseInt(colorElement.dataset.paletteIndex, 10);
|
||||
var newIndex = $('.create-palette-color').index(drop.item);
|
||||
this.palette.move(oldIndex, newIndex);
|
||||
|
||||
this.selectedIndex = newIndex;
|
||||
|
||||
this.refresh_();
|
||||
};
|
||||
})();
|
||||
@ -1,63 +0,0 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.dialogs');
|
||||
|
||||
ns.CreatePaletteMethodController = function (piskelController) {
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.CreatePaletteMethodController, ns.AbstractDialogController);
|
||||
|
||||
ns.CreatePaletteMethodController.prototype.init = function () {
|
||||
this.superclass.init.call(this);
|
||||
|
||||
this.createButton = document.querySelector('.create-palette-method-continue');
|
||||
this.cancelButton = document.querySelector('.create-palette-method-cancel');
|
||||
|
||||
this.createButton.addEventListener('click', this.onCreateButtonClick_.bind(this));
|
||||
|
||||
this.cancelButton.addEventListener('click', function () {
|
||||
$.publish(Events.DIALOG_HIDE);
|
||||
});
|
||||
};
|
||||
|
||||
ns.CreatePaletteMethodController.prototype.onCreateButtonClick_ = function (evt) {
|
||||
var method = this.getSelectedMethod_();
|
||||
|
||||
var initArgs = {
|
||||
method : method
|
||||
};
|
||||
|
||||
if (method === 'palette') {
|
||||
initArgs.paletteId = this.getSelectedPaletteId_();
|
||||
}
|
||||
|
||||
this.closeDialog();
|
||||
|
||||
window.setTimeout(function () {
|
||||
$.publish(Events.DIALOG_DISPLAY, {
|
||||
dialogId : 'create-palette',
|
||||
initArgs : initArgs
|
||||
});
|
||||
},500);
|
||||
};
|
||||
|
||||
ns.CreatePaletteMethodController.prototype.getSelectedMethod_ = function (evt) {
|
||||
var options = document.querySelectorAll('.create-palette-method-list input[type="radio"]');
|
||||
|
||||
var method;
|
||||
for (var i = 0 ; i < options.length ; i++) {
|
||||
console.log(options[i]);
|
||||
if (options[i].checked) {
|
||||
method = options[i].value;
|
||||
}
|
||||
}
|
||||
|
||||
return method;
|
||||
};
|
||||
|
||||
ns.CreatePaletteMethodController.prototype.getSelectedPaletteId_ = function (evt) {
|
||||
var select = document.querySelector('.palettes-list-select');
|
||||
return select.value;
|
||||
};
|
||||
|
||||
|
||||
})();
|
||||
@ -2,14 +2,6 @@
|
||||
var ns = $.namespace('pskl.controller.dialogs');
|
||||
|
||||
var dialogs = {
|
||||
'manage-palettes' : {
|
||||
template : 'templates/dialogs/manage-palettes.html',
|
||||
controller : ns.PaletteManagerController
|
||||
},
|
||||
'create-palette-method' : {
|
||||
template : 'templates/dialogs/create-palette-method.html',
|
||||
controller : ns.CreatePaletteMethodController
|
||||
},
|
||||
'create-palette' : {
|
||||
template : 'templates/dialogs/create-palette.html',
|
||||
controller : ns.CreatePaletteController
|
||||
@ -35,7 +27,7 @@
|
||||
$.subscribe(Events.DIALOG_DISPLAY, this.onDialogDisplayEvent_.bind(this));
|
||||
$.subscribe(Events.DIALOG_HIDE, this.onDialogHideEvent_.bind(this));
|
||||
|
||||
pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'manage-palettes'));
|
||||
pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'create-palettes'));
|
||||
this.dialogWrapper_.classList.add('animated');
|
||||
};
|
||||
|
||||
|
||||
@ -1,382 +0,0 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.dialogs');
|
||||
|
||||
var tinycolor = window.tinycolor;
|
||||
|
||||
var SELECTED_CLASSNAME = 'selected';
|
||||
var NEW_COLOR_CLASS = 'palette-manager-new-color';
|
||||
var CLOSE_ICON_CLASS = 'palette-manager-delete-card';
|
||||
var EDIT_NAME_CLASS = 'edit-icon';
|
||||
|
||||
ns.PaletteManagerController = function (piskelController) {
|
||||
this.piskelController = piskelController;
|
||||
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 = [];
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.PaletteManagerController, ns.AbstractDialogController);
|
||||
|
||||
ns.PaletteManagerController.prototype.init = function () {
|
||||
this.superclass.init.call(this);
|
||||
|
||||
this.palettesList = document.querySelector('.palette-manager-list');
|
||||
this.paletteBody = document.querySelector('.palette-manager-details-body');
|
||||
this.paletteHead = document.querySelector('.palette-manager-details-head');
|
||||
this.createButton = document.querySelector('.palette-manager-actions-button[data-action="create"]');
|
||||
this.saveAllButton = document.querySelector('.palette-manager-actions-button[data-action="save-all"]');
|
||||
|
||||
this.colorCardTemplate = pskl.utils.Template.get('palette-color-card-template');
|
||||
this.newColorTemplate = pskl.utils.Template.get('palette-new-color-template');
|
||||
this.paletteHeadTemplate = pskl.utils.Template.get('palette-details-head-template');
|
||||
|
||||
// Events
|
||||
this.palettesList.addEventListener('click', this.onPaletteListClick.bind(this));
|
||||
// Delegated event listener for events repeated on all cards
|
||||
this.paletteBody.addEventListener('click', this.delegatedPaletteBodyClick.bind(this));
|
||||
this.paletteHead.addEventListener('click', this.delegatedPaletteHeadClick.bind(this));
|
||||
this.createButton.addEventListener('click', this.onCreateClick_.bind(this));
|
||||
this.saveAllButton.addEventListener('click', this.saveAll.bind(this));
|
||||
|
||||
// Init markup
|
||||
this.createPaletteListMarkup();
|
||||
if (this.palettes.length > 0) {
|
||||
this.selectPalette(this.palettes[0].id);
|
||||
} else {
|
||||
this.createPalette('New palette');
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.destroy = function () {
|
||||
this.destroySpectrumPickers();
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.onCreateClick_ = function (evt) {
|
||||
this.createPalette();
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.createPalette = function (name) {
|
||||
if (!name) {
|
||||
name = window.prompt('Please enter a name for your palette', 'New palette');
|
||||
}
|
||||
if (name) {
|
||||
var palette = this.createPaletteObject(name);
|
||||
this.palettes.push(palette);
|
||||
this.createPaletteListMarkup();
|
||||
this.selectPalette(palette.id);
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.createPaletteObject = function (name) {
|
||||
return {
|
||||
id : 'palette-' + Date.now() + '-' + Math.floor(Math.random()*1000),
|
||||
name : name,
|
||||
colors : []
|
||||
};
|
||||
};
|
||||
|
||||
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+']');
|
||||
if (paletteListItem) {
|
||||
this.selectedPaletteId = paletteId;
|
||||
paletteListItem.classList.add(SELECTED_CLASSNAME);
|
||||
this.refreshPaletteDetails();
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.refreshPaletteDetails = function () {
|
||||
this.createPaletteHeadMarkup();
|
||||
this.createPaletteBodyMarkup();
|
||||
this.initPaletteDetailsEvents();
|
||||
this.initPaletteCardsSpectrum();
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.createPaletteListMarkup = function () {
|
||||
var html = this.palettes.map(function (palette) {
|
||||
var paletteCopy = {
|
||||
id : palette.id,
|
||||
name : this.isPaletteModified(palette) ? palette.name + " *" : palette.name
|
||||
};
|
||||
return pskl.utils.Template.replace('<li data-palette-id="{{id}}">{{name}}</li>', paletteCopy);
|
||||
}.bind(this)).join('');
|
||||
this.palettesList.innerHTML = html;
|
||||
};
|
||||
|
||||
/**
|
||||
* Fill the palette body container with color cards for the selected palette
|
||||
*/
|
||||
ns.PaletteManagerController.prototype.createPaletteHeadMarkup = function () {
|
||||
var palette = this.getSelectedPalette();
|
||||
var dict = {
|
||||
'name' : palette.name,
|
||||
'save:disabled' : !this.isPaletteModified(palette),
|
||||
'revert:disabled' : !this.isPaletteModified(palette),
|
||||
'delete:disabled' : this.palettes.length < 2
|
||||
};
|
||||
var html = pskl.utils.Template.replace(this.paletteHeadTemplate, dict);
|
||||
|
||||
this.paletteHead.innerHTML = html;
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.isPaletteModified = function (palette) {
|
||||
var isModified = false;
|
||||
var originalPalette = this.getPaletteById(palette.id, this.originalPalettes);
|
||||
if (originalPalette) {
|
||||
var differentName = originalPalette.name !== palette.name;
|
||||
var differentColors = palette.colors.join('') !== originalPalette.colors.join('');
|
||||
isModified = differentName || differentColors;
|
||||
} else {
|
||||
isModified = true;
|
||||
}
|
||||
return isModified;
|
||||
};
|
||||
|
||||
/**
|
||||
* Fill the palette body container with color cards for the selected palette
|
||||
*/
|
||||
ns.PaletteManagerController.prototype.createPaletteBodyMarkup = function () {
|
||||
var palette = this.getSelectedPalette();
|
||||
|
||||
var html = this.getColorCardsMarkup(palette.colors);
|
||||
html += pskl.utils.Template.replace(this.newColorTemplate, {classname : NEW_COLOR_CLASS});
|
||||
|
||||
this.paletteBody.innerHTML = html;
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.initPaletteDetailsEvents = function () {
|
||||
// New Card click event
|
||||
var newCard = this.paletteBody.querySelector('.' + NEW_COLOR_CLASS);
|
||||
newCard.addEventListener('click', this.onNewCardClick.bind(this));
|
||||
|
||||
if (this.palettes.length < 2) {
|
||||
var deleteButton = this.paletteHead.querySelector('.palette-manager-palette-button[data-action="delete"]');
|
||||
deleteButton.setAttribute("disabled", "disabled");
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.onNewCardClick = function () {
|
||||
var color;
|
||||
var palette = this.getSelectedPalette();
|
||||
if (palette && palette.colors.length > 0) {
|
||||
color = palette.colors[palette.colors.length-1];
|
||||
} else {
|
||||
color = '#FFFFFF';
|
||||
}
|
||||
this.addColorInSelectedPalette(color);
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.delegatedPaletteBodyClick = function (event) {
|
||||
var target = event.target;
|
||||
if (target.classList.contains(CLOSE_ICON_CLASS)) {
|
||||
var colorId = parseInt(target.parentNode.dataset.colorId, 10);
|
||||
this.removeColorInSelectedPalette(colorId);
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.delegatedPaletteHeadClick = function (event) {
|
||||
var target = event.target;
|
||||
if (target.classList.contains(EDIT_NAME_CLASS)) {
|
||||
this.renameSelectedPalette();
|
||||
} else if (target.classList.contains('palette-manager-palette-button')) {
|
||||
var action = target.dataset.action;
|
||||
if (action === 'save') {
|
||||
this.savePalette(this.getSelectedPalette().id);
|
||||
this.redraw();
|
||||
} else if (action === 'revert') {
|
||||
this.revertChanges();
|
||||
} else if (action === 'delete') {
|
||||
this.deleteSelectedPalette();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.getSpectrumSelector_ = function () {
|
||||
return ':not(.' + NEW_COLOR_CLASS + ')>.palette-manager-color-square';
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.initPaletteCardsSpectrum = function () {
|
||||
var oSelf = this;
|
||||
var container = $(this.getSpectrumSelector_());
|
||||
container.spectrum({
|
||||
clickoutFiresChange : true,
|
||||
showInput: true,
|
||||
showButtons: false,
|
||||
change : function (color) {
|
||||
var target = this;
|
||||
var colorId = parseInt(target.parentNode.dataset.colorId, 10);
|
||||
oSelf.updateColorInSelectedPalette(colorId, color);
|
||||
},
|
||||
beforeShow : function() {
|
||||
var target = this;
|
||||
var colorId = parseInt(target.parentNode.dataset.colorId, 10);
|
||||
var palette = oSelf.getSelectedPalette();
|
||||
var color = palette.colors[colorId];
|
||||
container.spectrum("set", color);
|
||||
}
|
||||
});
|
||||
|
||||
this.spectrumContainers.push(container);
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy all spectrum instances generated by the palette manager
|
||||
*/
|
||||
ns.PaletteManagerController.prototype.destroySpectrumPickers = function () {
|
||||
this.spectrumContainers.forEach(function (container) {
|
||||
container.spectrum("destroy");
|
||||
});
|
||||
this.spectrumContainers = [];
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.updateColorInSelectedPalette = function (colorId, color) {
|
||||
var palette = this.getSelectedPalette();
|
||||
var hexColor = '#' + (color.toHex().toUpperCase());
|
||||
palette.colors.splice(colorId, 1, hexColor);
|
||||
|
||||
this.redraw();
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.addColorInSelectedPalette = function (color) {
|
||||
var selectedPalette = this.getSelectedPalette();
|
||||
selectedPalette.colors.push(color);
|
||||
|
||||
this.redraw();
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.removeColorInSelectedPalette = function (colorId) {
|
||||
var palette = this.getSelectedPalette();
|
||||
palette.colors.splice(colorId, 1);
|
||||
|
||||
this.redraw();
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.renameSelectedPalette = function () {
|
||||
var palette = this.getSelectedPalette();
|
||||
var name = window.prompt('Please enter a new name for palette "' + palette.name + '"', palette.name);
|
||||
if (name) {
|
||||
palette.name = name;
|
||||
this.redraw();
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.getSelectedPalette = function () {
|
||||
return this.getPaletteById(this.selectedPaletteId, this.palettes);
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.getColorCardsMarkup = function (colors) {
|
||||
var html = colors.map(function (color, index) {
|
||||
var dict = {
|
||||
colorId : index,
|
||||
hex : color,
|
||||
rgb : tinycolor(color).toRgbString(),
|
||||
hsl : tinycolor(color).toHslString()
|
||||
};
|
||||
return pskl.utils.Template.replace(this.colorCardTemplate, dict);
|
||||
}.bind(this)).join('');
|
||||
return html;
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.getPaletteById = function (paletteId, palettes) {
|
||||
var match = null;
|
||||
|
||||
palettes.forEach(function (palette) {
|
||||
if (palette.id === paletteId) {
|
||||
match = palette;
|
||||
}
|
||||
});
|
||||
|
||||
return match;
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.removePaletteById = function (paletteId, palettes) {
|
||||
var palette = this.getPaletteById(paletteId, palettes);
|
||||
if (palette) {
|
||||
var index = palettes.indexOf(palette);
|
||||
palettes.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.deselectCurrentPalette = function () {
|
||||
var selectedItem = this.palettesList.querySelector('.' + SELECTED_CLASSNAME);
|
||||
if (selectedItem) {
|
||||
this.selectedPaletteId = null;
|
||||
selectedItem.classList.remove(SELECTED_CLASSNAME);
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.revertChanges = function () {
|
||||
var palette = this.getSelectedPalette();
|
||||
var originalPalette = this.getPaletteById(palette.id, this.originalPalettes);
|
||||
palette.name = originalPalette.name;
|
||||
palette.colors = originalPalette.colors.slice(0);
|
||||
|
||||
this.redraw();
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.deleteSelectedPalette = function () {
|
||||
var palette = this.getSelectedPalette();
|
||||
if (this.palettes.length > 1) {
|
||||
if (window.confirm('Are you sure you want to delete "' + palette.name + '" ?')) {
|
||||
this.removePaletteById(palette.id, this.palettes);
|
||||
this.removePaletteById(palette.id, this.originalPalettes);
|
||||
|
||||
this.persistToLocalStorage();
|
||||
|
||||
this.createPaletteListMarkup();
|
||||
this.selectPalette(this.palettes[0].id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.onPaletteListClick = function (event) {
|
||||
var target = event.target;
|
||||
if (target.dataset.paletteId) {
|
||||
this.selectPalette(target.dataset.paletteId);
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.saveAll = function () {
|
||||
this.palettes.forEach(function (palette) {
|
||||
this.savePalette(palette.id);
|
||||
}.bind(this));
|
||||
|
||||
this.redraw();
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.savePalette = function (paletteId) {
|
||||
var palette = this.getPaletteById(paletteId, this.palettes);
|
||||
var originalPalette = this.getPaletteById(paletteId, this.originalPalettes);
|
||||
if (originalPalette) {
|
||||
originalPalette.name = palette.name;
|
||||
originalPalette.colors = palette.colors;
|
||||
} else {
|
||||
this.originalPalettes.push(palette);
|
||||
}
|
||||
|
||||
this.persistToLocalStorage();
|
||||
|
||||
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Palette " + palette.name + " successfully saved !"}]);
|
||||
window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.persistToLocalStorage = function () {
|
||||
window.localStorage.setItem('piskel.palettes', JSON.stringify(this.originalPalettes));
|
||||
this.originalPalettes = this.retrieveUserPalettes();
|
||||
$.publish(Events.PALETTE_LIST_UPDATED);
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.retrieveUserPalettes = function () {
|
||||
var palettesString = window.localStorage.getItem('piskel.palettes');
|
||||
return JSON.parse(palettesString) || [];
|
||||
};
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user