2014-08-30 20:39:54 +04:00
|
|
|
(function () {
|
|
|
|
var ns = $.namespace('pskl.controller.dialogs');
|
|
|
|
|
|
|
|
ns.CreatePaletteController = function (piskelController) {
|
2014-09-06 14:37:11 +04:00
|
|
|
this.paletteService = pskl.app.paletteService;
|
2014-09-07 16:31:28 +04:00
|
|
|
this.paletteImportService = pskl.app.paletteImportService;
|
2014-08-30 20:39:54 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);
|
|
|
|
|
2014-09-06 14:37:11 +04:00
|
|
|
ns.CreatePaletteController.prototype.init = function (paletteId) {
|
2014-08-30 20:39:54 +04:00
|
|
|
this.superclass.init.call(this);
|
2014-09-07 14:22:44 +04:00
|
|
|
|
2014-09-07 16:31:28 +04:00
|
|
|
this.hiddenFileInput = document.querySelector('.create-palette-import-input');
|
2014-09-06 14:37:11 +04:00
|
|
|
this.nameInput = document.querySelector('input[name="palette-name"]');
|
2014-09-07 14:22:44 +04:00
|
|
|
|
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');
|
2014-09-07 16:31:28 +04:00
|
|
|
var importFileButton = document.querySelector('.create-palette-import-button');
|
2014-09-06 14:37:11 +04:00
|
|
|
|
2017-01-16 02:52:48 +03:00
|
|
|
this.addEventListener(this.nameInput, 'input', this.onNameInputChange_);
|
|
|
|
this.addEventListener(this.hiddenFileInput, 'change', this.onFileInputChange_);
|
2014-09-04 02:22:02 +04:00
|
|
|
|
2017-01-16 02:52:48 +03:00
|
|
|
this.addEventListener(buttonsContainer, 'click', this.onButtonClick_);
|
|
|
|
this.addEventListener(downloadButton, 'click', this.onDownloadButtonClick_);
|
|
|
|
this.addEventListener(importFileButton, 'click', this.onImportFileButtonClick_);
|
2014-09-07 14:22:44 +04:00
|
|
|
|
2014-09-18 09:59:56 +04:00
|
|
|
var colorsListContainer = document.querySelector('.colors-container');
|
2014-11-21 03:15:55 +03:00
|
|
|
this.colorsListWidget = new pskl.widgets.ColorsList(colorsListContainer);
|
2014-09-04 02:22:02 +04:00
|
|
|
|
2014-09-07 16:31:28 +04:00
|
|
|
var palette;
|
2014-09-18 09:18:07 +04:00
|
|
|
var isCurrentColorsPalette = paletteId == Constants.CURRENT_COLORS_PALETTE_ID;
|
|
|
|
if (paletteId && !isCurrentColorsPalette) {
|
2014-09-10 01:53:57 +04:00
|
|
|
importFileButton.style.display = 'none';
|
2014-09-18 09:18:07 +04:00
|
|
|
this.setTitle('Edit Palette');
|
2014-09-18 09:59:56 +04:00
|
|
|
|
|
|
|
var paletteObject = this.paletteService.getPaletteById(paletteId);
|
|
|
|
palette = pskl.model.Palette.fromObject(paletteObject);
|
2014-09-07 16:31:28 +04:00
|
|
|
} else {
|
2014-09-18 09:18:07 +04:00
|
|
|
downloadButton.style.display = 'none';
|
|
|
|
deleteButton.style.display = 'none';
|
|
|
|
this.setTitle('Create Palette');
|
2014-09-18 09:59:56 +04:00
|
|
|
|
|
|
|
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', []);
|
|
|
|
}
|
2014-09-07 16:31:28 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
this.setPalette_(palette);
|
|
|
|
};
|
|
|
|
|
2014-09-18 09:59:56 +04:00
|
|
|
ns.CreatePaletteController.prototype.getCurrentColors_ = function () {
|
|
|
|
var palette = this.paletteService.getPaletteById(Constants.CURRENT_COLORS_PALETTE_ID);
|
|
|
|
return palette.getColors();
|
|
|
|
};
|
|
|
|
|
2014-09-07 16:31:28 +04:00
|
|
|
ns.CreatePaletteController.prototype.setPalette_ = function (palette) {
|
|
|
|
this.palette = palette;
|
2014-09-18 09:59:56 +04:00
|
|
|
this.nameInput.value = pskl.utils.unescapeHtml(palette.name);
|
|
|
|
this.colorsListWidget.setColors(palette.getColors());
|
2014-09-04 10:34:17 +04:00
|
|
|
};
|
2014-09-04 02:22:02 +04:00
|
|
|
|
2014-09-07 14:22:44 +04:00
|
|
|
ns.CreatePaletteController.prototype.destroy = function () {
|
2014-09-18 09:59:56 +04:00
|
|
|
this.colorsListWidget.destroy();
|
2017-01-16 02:52:48 +03:00
|
|
|
this.superclass.destroy.call(this);
|
|
|
|
|
2014-09-07 14:22:44 +04:00
|
|
|
this.nameInput = null;
|
2017-01-16 02:52:48 +03:00
|
|
|
this.hiddenFileInput = null;
|
2014-09-07 14:22:44 +04:00
|
|
|
};
|
|
|
|
|
2014-09-18 09:18:07 +04:00
|
|
|
ns.CreatePaletteController.prototype.onButtonClick_ = function (evt) {
|
|
|
|
var target = evt.target;
|
|
|
|
if (target.dataset.action === 'submit') {
|
2014-09-18 09:59:56 +04:00
|
|
|
this.saveAndSelectPalette_();
|
2014-09-18 09:18:07 +04:00
|
|
|
} else if (target.dataset.action === 'cancel') {
|
|
|
|
this.closeDialog();
|
|
|
|
} else if (target.dataset.action === 'delete') {
|
2014-09-18 09:59:56 +04:00
|
|
|
this.deletePalette_();
|
2014-09-18 09:18:07 +04:00
|
|
|
}
|
2014-09-10 01:53:57 +04:00
|
|
|
};
|
|
|
|
|
2014-09-18 09:59:56 +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');
|
2015-04-14 19:02:33 +03:00
|
|
|
}.bind(this), 'application/json');
|
2014-09-18 09:18:07 +04:00
|
|
|
};
|
|
|
|
|
2014-09-07 16:31:28 +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-07 16:31:28 +04:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2014-09-20 11:14:21 +04:00
|
|
|
ns.CreatePaletteController.prototype.displayErrorMessage_ = function (message) {
|
2015-04-14 19:02:33 +03:00
|
|
|
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);
|
|
|
|
};
|
|
|
|
|
2014-09-06 14:37:11 +04:00
|
|
|
ns.CreatePaletteController.prototype.onNameInputChange_ = function (evt) {
|
2014-09-07 14:22:44 +04:00
|
|
|
this.palette.name = pskl.utils.escapeHtml(this.nameInput.value);
|
2014-09-06 14:37:11 +04:00
|
|
|
};
|
2015-04-14 19:02:33 +03:00
|
|
|
})();
|