mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Split CreatePaletteControllers in ctrl + widget for colors list

Browse Source
This commit is contained in:
jdescottes
2014-09-18 07:59:56 +02:00
parent 508fb79c32
commit 9afe69cb87
7 changed files with 192 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/js/controller/dialogs/CreatePaletteController.js
View File

@ -4,8 +4,6 @@
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);
@ -13,8 +11,6 @@
ns.CreatePaletteController.prototype.init = function (paletteId) {
this.superclass.init.call(this);
this.colorsList = document.querySelector('.colors-list');
this.colorPreviewEl = document.querySelector('.color-preview');
this.hiddenFileInput = document.querySelector('.create-palette-import-input');
this.nameInput = document.querySelector('input[name="palette-name"]');
@ -23,7 +19,6 @@
var downloadButton = document.querySelector('.create-palette-download-button');
var importFileButton = document.querySelector('.create-palette-import-button');
this.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
this.nameInput.addEventListener('input', this.onNameInputChange_.bind(this));
this.hiddenFileInput.addEventListener('change', this.onFileInputChange_.bind(this));
@ -31,124 +26,73 @@
downloadButton.addEventListener('click', this.onDownloadButtonClick_.bind(this));
importFileButton.addEventListener('click', this.onImportFileButtonClick_.bind(this));
$('.colors-list').sortable({
placeholder: 'colors-list-drop-proxy',
update: this.onColorDrop_.bind(this),
items: '.create-palette-color'
});
var colorPickerContainer = document.querySelector('.color-picker-container');
this.hslRgbColorPicker = new pskl.controller.widgets.HslRgbColorPicker(colorPickerContainer, this.onColorUpdated_.bind(this));
this.hslRgbColorPicker.init();
var colorsListContainer = document.querySelector('.colors-container');
this.colorsListWidget = new pskl.controller.widgets.ColorsList(colorsListContainer);
var palette;
var isCurrentColorsPalette = paletteId == Constants.CURRENT_COLORS_PALETTE_ID;
if (paletteId && !isCurrentColorsPalette) {
var paletteObject = this.paletteService.getPaletteById(paletteId);
palette = pskl.model.Palette.fromObject(paletteObject);
importFileButton.style.display = 'none';
this.setTitle('Edit Palette');
var paletteObject = this.paletteService.getPaletteById(paletteId);
palette = pskl.model.Palette.fromObject(paletteObject);
} else {
if (isCurrentColorsPalette) {
var currentColorsPalette = this.paletteService.getPaletteById(Constants.CURRENT_COLORS_PALETTE_ID);
var colors = currentColorsPalette.getColors();
if (!colors.length) {
colors = ['#000000'];
}
palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'Current colors clone', colors);
} else {
palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'New palette', ['#000000']);
}
downloadButton.style.display = 'none';
deleteButton.style.display = 'none';
this.setTitle('Create Palette');
var uuid = pskl.utils.Uuid.generate();
if (isCurrentColorsPalette) {
palette = new pskl.model.Palette(uuid, 'Current colors clone', this.getCurrentColors_());
} else {
palette = new pskl.model.Palette(uuid, 'New palette', []);
}
}
this.setPalette_(palette);
};
ns.CreatePaletteController.prototype.getCurrentColors_ = function () {
var palette = this.paletteService.getPaletteById(Constants.CURRENT_COLORS_PALETTE_ID);
return palette.getColors();
};
ns.CreatePaletteController.prototype.setPalette_ = function (palette) {
this.palette = palette;
this.nameInput.value = pskl.utils.unescapeHtml(this.palette.name);
this.selectColor_(0);
this.refresh_();
this.nameInput.value = pskl.utils.unescapeHtml(palette.name);
this.colorsListWidget.setColors(palette.getColors());
};
ns.CreatePaletteController.prototype.destroy = function () {
this.colorsList = null;
this.colorPreviewEl = null;
this.colorsListWidget.destroy();
this.nameInput = null;
};
ns.CreatePaletteController.prototype.onColorUpdated_ = function (color) {
var rgbColor = color.toRgbString();
this.colorPreviewEl.style.background = rgbColor;
if (this.palette) {
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.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.onButtonClick_ = function (evt) {
var target = evt.target;
if (target.dataset.action === 'submit') {
this.saveAndSelectPalette_(this.palette);
this.closeDialog();
this.saveAndSelectPalette_();
} else if (target.dataset.action === 'cancel') {
this.closeDialog();
} else if (target.dataset.action === 'delete') {
if (window.confirm('Are you sure you want to delete palette ' + this.palette.name)) {
this.paletteService.deletePaletteById(this.palette.id);
pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, Constants.CURRENT_COLORS_PALETTE_ID);
this.closeDialog();
}
this.deletePalette_();
}
};
ns.CreatePaletteController.prototype.saveAndSelectPalette_ = function (palette) {
this.paletteService.savePalette(palette);
pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, palette.id);
ns.CreatePaletteController.prototype.saveAndSelectPalette_ = function () {
this.palette.setColors(this.colorsListWidget.getColors());
this.paletteService.savePalette(this.palette);
pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, this.palette.id);
this.closeDialog();
};
ns.CreatePaletteController.prototype.deletePalette_ = function () {
if (window.confirm('Are you sure you want to delete palette ' + this.palette.name)) {
this.paletteService.deletePaletteById(this.palette.id);
pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, Constants.CURRENT_COLORS_PALETTE_ID);
this.closeDialog();
}
};
ns.CreatePaletteController.prototype.onDownloadButtonClick_ = function () {
@ -174,52 +118,4 @@
ns.CreatePaletteController.prototype.onNameInputChange_ = function (evt) {
this.palette.name = pskl.utils.escapeHtml(this.nameInput.value);
};
ns.CreatePaletteController.prototype.selectColor_ = function (index) {
this.selectedIndex = index;
this.hslRgbColorPicker.setColor(this.palette.get(index));
};
ns.CreatePaletteController.prototype.removeColor_ = function (index) {
this.palette.removeAt(index);
this.refresh_();
};
ns.CreatePaletteController.prototype.refresh_ = function () {
var html = "";
var tpl = pskl.utils.Template.get('create-palette-color-template');
var colors = this.palette.getColors();
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;
};
ns.CreatePaletteController.prototype.isLight_ = function (color) {
var rgb = window.tinycolor(color).toRgb();
return rgb.r+rgb.b+rgb.g > 128*3;
};
ns.CreatePaletteController.prototype.onColorDrop_ = 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_();
};
})();