piskel/src/js/controller/dialogs/CreatePaletteController.js

133 lines
5.1 KiB
JavaScript
Raw Normal View History

(function () {
var ns = $.namespace('pskl.controller.dialogs');
ns.CreatePaletteController = function (piskelController) {
this.paletteService = pskl.app.paletteService;
this.paletteImportService = pskl.app.paletteImportService;
};
pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);
ns.CreatePaletteController.prototype.init = function (paletteId) {
this.superclass.init.call(this);
this.hiddenFileInput = document.querySelector('.create-palette-import-input');
this.nameInput = document.querySelector('input[name="palette-name"]');
2014-09-18 09:18:07 +04:00
var buttonsContainer = document.querySelector('.create-palette-actions');
var deleteButton = document.querySelector('.create-palette-delete');
var downloadButton = document.querySelector('.create-palette-download-button');
var importFileButton = document.querySelector('.create-palette-import-button');
this.addEventListener(this.nameInput, 'input', this.onNameInputChange_);
this.addEventListener(this.hiddenFileInput, 'change', this.onFileInputChange_);
this.addEventListener(buttonsContainer, 'click', this.onButtonClick_);
this.addEventListener(downloadButton, 'click', this.onDownloadButtonClick_);
this.addEventListener(importFileButton, 'click', this.onImportFileButtonClick_);
var colorsListContainer = document.querySelector('.colors-container');
this.colorsListWidget = new pskl.widgets.ColorsList(colorsListContainer);
var palette;
2014-09-18 09:18:07 +04:00
var isCurrentColorsPalette = paletteId == Constants.CURRENT_COLORS_PALETTE_ID;
if (paletteId && !isCurrentColorsPalette) {
importFileButton.style.display = 'none';
2014-09-18 09:18:07 +04:00
this.setTitle('Edit Palette');
var paletteObject = this.paletteService.getPaletteById(paletteId);
palette = pskl.model.Palette.fromObject(paletteObject);
} else {
2014-09-18 09:18:07 +04:00
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(palette.name);
this.colorsListWidget.setColors(palette.getColors());
};
ns.CreatePaletteController.prototype.destroy = function () {
this.colorsListWidget.destroy();
this.superclass.destroy.call(this);
this.nameInput = null;
this.hiddenFileInput = null;
};
2014-09-18 09:18:07 +04:00
ns.CreatePaletteController.prototype.onButtonClick_ = function (evt) {
var target = evt.target;
if (target.dataset.action === 'submit') {
this.saveAndSelectPalette_();
2014-09-18 09:18:07 +04:00
} else if (target.dataset.action === 'cancel') {
this.closeDialog();
} else if (target.dataset.action === 'delete') {
this.deletePalette_();
2014-09-18 09:18:07 +04:00
}
};
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();
}
2014-09-16 02:37:24 +04:00
};
2014-09-18 09:18:07 +04:00
ns.CreatePaletteController.prototype.onDownloadButtonClick_ = function () {
var paletteWriter = new pskl.service.palette.PaletteGplWriter(this.palette);
var paletteAsString = paletteWriter.write();
pskl.utils.BlobUtils.stringToBlob(paletteAsString, function(blob) {
pskl.utils.FileUtils.downloadAsFile(blob, this.palette.name + '.gpl');
}.bind(this), 'application/json');
2014-09-18 09:18:07 +04:00
};
ns.CreatePaletteController.prototype.onImportFileButtonClick_ = function () {
this.hiddenFileInput.click();
};
ns.CreatePaletteController.prototype.onFileInputChange_ = function (evt) {
var files = this.hiddenFileInput.files;
if (files.length == 1) {
2014-09-20 11:14:21 +04:00
this.paletteImportService.read(files[0], this.setPalette_.bind(this), this.displayErrorMessage_.bind(this));
}
};
2014-09-20 11:14:21 +04:00
ns.CreatePaletteController.prototype.displayErrorMessage_ = function (message) {
message = 'Could not import palette : ' + message;
$.publish(Events.SHOW_NOTIFICATION, [{
'content' : message
}]);
2014-09-20 11:14:21 +04:00
window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
};
ns.CreatePaletteController.prototype.onNameInputChange_ = function (evt) {
this.palette.name = pskl.utils.escapeHtml(this.nameInput.value);
};
})();