Homogeneize layout, drop palette

src/js/app.js

@@ -40,6 +40,7 @@
 
       this.paletteImportService = new pskl.service.palette.PaletteImportService();
       this.paletteService = new pskl.service.palette.PaletteService();
+      this.paletteService.addDynamicPalette(new pskl.service.palette.CurrentColorsPalette());
 
       this.paletteController = new pskl.controller.PaletteController();
       this.paletteController.init();

src/js/controller/PalettesListController.js

@@ -24,15 +24,14 @@
     this.colorPaletteSelect_ = document.querySelector('.palettes-list-select');
 
     var createPaletteButton_ = document.querySelector('.create-palette-button');
-    var paletteActions = document.querySelector('.palette-actions');
+    var editPaletteButton_ = document.querySelector('.edit-palette-button');
 
     this.colorPaletteSelect_.addEventListener('change', this.onPaletteSelected_.bind(this));
     this.colorListContainer_.addEventListener('mouseup', this.onColorContainerMouseup.bind(this));
     this.colorListContainer_.addEventListener('contextmenu', this.onColorContainerContextMenu.bind(this));
 
     createPaletteButton_.addEventListener('click', this.onCreatePaletteClick_.bind(this));
-    paletteActions.addEventListener('click', this.onPaletteActionsClick_.bind(this));
-
+    editPaletteButton_.addEventListener('click', this.onEditPaletteClick_.bind(this));
 
     $.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this));
     $.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this));
@@ -46,11 +45,7 @@
   };
 
   ns.PalettesListController.prototype.fillPaletteList = function () {
-    var palettes = [{
-      id : Constants.CURRENT_COLORS_PALETTE_ID,
-      name : 'Current colors'
-    }];
-    palettes = palettes.concat(this.paletteService.getPalettes());
+    var palettes = this.paletteService.getPalettes();
 
     var html = palettes.map(function (palette) {
       return pskl.utils.Template.replace('<option value="{{id}}">{{name}}</option>', palette);
@@ -79,13 +74,9 @@
   ns.PalettesListController.prototype.getSelectedPaletteColors_ = function () {
     var colors = [];
     var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE);
-    if (paletteId === Constants.CURRENT_COLORS_PALETTE_ID) {
-      colors = this.usedColorService.getCurrentColors();
-    } else {
-      var palette = this.paletteService.getPaletteById(paletteId);
-      if (palette) {
-        colors = palette.colors;
-      }
+    var palette = this.paletteService.getPaletteById(paletteId);
+    if (palette) {
+      colors = palette.getColors();
     }
 
     if (colors.length > Constants.MAX_CURRENT_COLORS_DISPLAYED) {
@@ -120,18 +111,7 @@
     $.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 () {
+  ns.PalettesListController.prototype.onEditPaletteClick_ = function (evt) {
     var paletteId = this.colorPaletteSelect_.value;
     $.publish(Events.DIALOG_DISPLAY, {
       dialogId : 'create-palette',
@@ -139,28 +119,6 @@
     });
   };
 
-  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 () {
-    // getSelectedPalette
-    var paletteId = this.colorPaletteSelect_.value;
-    var palette = this.paletteService.getPaletteById(paletteId);
-
-    var paletteWriter = new pskl.service.palette.PaletteGplWriter(palette);
-    var paletteAsString = paletteWriter.write();
-
-    pskl.utils.BlobUtils.stringToBlob(paletteAsString, function(blob) {
-      pskl.utils.FileUtils.downloadAsFile(blob, palette.name + '.gpl');
-    }.bind(this), "application/json");
-  };
-
   ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {
     event.preventDefault();
   };

src/js/controller/dialogs/AbstractDialogController.js

@@ -16,4 +16,11 @@
     $.publish(Events.DIALOG_HIDE);
   };
 
+  ns.AbstractDialogController.prototype.setTitle = function (title) {
+    var dialogHead = document.querySelector('.dialog-head');
+    if (dialogHead) {
+      dialogHead.innerText = title;
+    }
+  };
+
 })();

src/js/controller/dialogs/CreatePaletteController.js

@@ -1,11 +1,6 @@
 (function () {
   var ns = $.namespace('pskl.controller.dialogs');
 
-  var MODE = {
-    CREATE : 'CREATE',
-    EDIT : 'EDIT'
-  };
-
   ns.CreatePaletteController = function (piskelController) {
     this.paletteService = pskl.app.paletteService;
     this.paletteImportService = pskl.app.paletteImportService;
@@ -23,34 +18,50 @@
     this.hiddenFileInput = document.querySelector('.create-palette-import-input');
     this.nameInput = document.querySelector('input[name="palette-name"]');
 
-    var submitButton = document.querySelector('.create-palette-submit');
-    var cloneButton = document.querySelector('.create-palette-clone');
-    var cancelButton = document.querySelector('.create-palette-cancel');
+    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.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
     this.nameInput.addEventListener('input', this.onNameInputChange_.bind(this));
     this.hiddenFileInput.addEventListener('change', this.onFileInputChange_.bind(this));
 
-    submitButton.addEventListener('click', this.onSubmitButtonClick_.bind(this));
-    cloneButton.addEventListener('click', this.onCloneButtonClick_.bind(this));
-    cancelButton.addEventListener('click', this.closeDialog.bind(this));
+    buttonsContainer.addEventListener('click', this.onButtonClick_.bind(this));
+    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 palette;
-    if (paletteId) {
+    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.mode = MODE.EDIT;
+      this.setTitle('Edit Palette');
     } else {
-      palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'New palette', ['#000000']);
-      cloneButton.style.display = 'none';
-      this.mode = MODE.CREATE;
+      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');
     }
 
     this.setPalette_(palette);
@@ -119,16 +130,20 @@
     this.selectColor_(this.palette.size()-1);
   };
 
-  ns.CreatePaletteController.prototype.onSubmitButtonClick_ = function (evt) {
-    this.saveAndSelectPalette_(this.palette);
-    this.closeDialog();
-  };
-
-  ns.CreatePaletteController.prototype.onCloneButtonClick_ = function (evt) {
-    var uuid = pskl.utils.Uuid.generate();
-    var palette = new pskl.model.Palette(uuid, this.palette.name, this.palette.colors);
-    this.saveAndSelectPalette_(palette);
-    this.closeDialog();
+  ns.CreatePaletteController.prototype.onButtonClick_ = function (evt) {
+    var target = evt.target;
+    if (target.dataset.action === 'submit') {
+      this.saveAndSelectPalette_(this.palette);
+      this.closeDialog();
+    } 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();
+      }
+    }
   };
 
   ns.CreatePaletteController.prototype.saveAndSelectPalette_ = function (palette) {
@@ -136,6 +151,15 @@
     pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, palette.id);
   };
 
+  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");
+  };
+
   ns.CreatePaletteController.prototype.onImportFileButtonClick_ = function () {
     this.hiddenFileInput.click();
   };
@@ -164,13 +188,13 @@
   ns.CreatePaletteController.prototype.refresh_ = function () {
     var html = "";
     var tpl = pskl.utils.Template.get('create-palette-color-template');
-    var colors = this.palette.colors;
+    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,
+        'color':color, index:index,
         ':selected':isSelected,
         ':light-color':this.isLight_(color)
       });
@@ -179,12 +203,6 @@
     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) {
@@ -193,7 +211,7 @@
   };
 
 
-  ns.CreatePaletteController.prototype.onDrop_ = function (evt, drop) {
+  ns.CreatePaletteController.prototype.onColorDrop_ = function (evt, drop) {
     var colorElement = drop.item.get(0);
 
     var oldIndex = parseInt(colorElement.dataset.paletteIndex, 10);

src/js/controller/widgets/ColorsListController.js

@@ -0,0 +1,8 @@
+(function () {
+  var ns = $.namespace('pskl.controller.widgets');
+
+  ns.ColorsListController = function (container) {
+    this.container = container;
+    this.colorsList = this.container.querySelector('.colors-list');
+  };
+})();

src/js/model/Palette.js

@@ -12,6 +12,10 @@
     return new ns.Palette(paletteObj.id, paletteObj.name, colors);
   };
 
+  ns.Palette.prototype.getColors = function () {
+    return this.colors;
+  };
+
   ns.Palette.prototype.get = function (index) {
     return this.colors[index];
   };

src/js/service/FileDropperService.js

@@ -31,14 +31,27 @@
     for (var i = 0; i < files.length ; i++) {
       var file = files[i];
       var isImage = file.type.indexOf('image') === 0;
+      var isPiskel = /\.piskel$/i.test(file.name);
+      var isPalette = /\.(gpl|txt)$/i.test(file.name);
       if (isImage) {
         this.readImageFile_(file);
-      } else if (/\.piskel$/i.test(file.name)) {
+      } else if (isPiskel) {
         pskl.utils.PiskelFileUtils.loadFromFile(file, this.onPiskelFileLoaded_);
+      } else if (isPalette) {
+        pskl.app.paletteImportService.read(file, this.onPaletteLoaded_.bind(this));
       }
     }
   };
 
+  ns.FileDropperService.prototype.readImageFile_ = function (imageFile) {
+    pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
+  };
+
+  ns.FileDropperService.prototype.onPaletteLoaded_ = function (palette) {
+    pskl.app.paletteService.savePalette(palette);
+    pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, palette.id);
+  };
+
   ns.FileDropperService.prototype.onPiskelFileLoaded_ = function (piskel, descriptor, fps) {
     if (window.confirm('This will replace your current animation')) {
       piskel.setDescriptor(descriptor);
@@ -47,10 +60,6 @@
     }
   };
 
-  ns.FileDropperService.prototype.readImageFile_ = function (imageFile) {
-    pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
-  };
-
   ns.FileDropperService.prototype.processImageSource_ = function (imageSource) {
     this.importedImage_ = new Image();
     this.importedImage_.onload = this.onImageLoaded_.bind(this);

src/js/service/palette/CurrentColorsPalette.js

@@ -0,0 +1,12 @@
+(function () {
+  var ns = $.namespace('pskl.service.palette');
+
+  ns.CurrentColorsPalette = function () {
+    this.name = 'Current colors';
+    this.id = Constants.CURRENT_COLORS_PALETTE_ID;
+  };
+
+  ns.CurrentColorsPalette.prototype.getColors = function () {
+    return pskl.app.currentColorsService.getCurrentColors();
+  };
+})();

src/js/service/palette/PaletteGplReader.js

@@ -1,7 +1,7 @@
 (function () {
   var ns = $.namespace('pskl.service.palette');
 
-  var RE_COLOR_LINE = /^(\d{1,3}\s+)(\d{1,3}\s+)(\d{1,3}\s+)/;
+  var RE_COLOR_LINE = /^(\s*\d{1,3})(\s*\d{1,3})(\s*\d{1,3})/;
   var RE_EXTRACT_NAME = /^name\s*\:\s*(.*)$/i;
 
   ns.PaletteGplReader = function (file, onSuccess, onError) {

src/js/service/palette/PaletteGplWriter.js

@@ -1,10 +1,8 @@
 (function () {
   var ns = $.namespace('pskl.service.palette');
 
-  ns.PaletteGplWriter = function (palette, onSuccess, onError) {
+  ns.PaletteGplWriter = function (palette) {
     this.palette = palette;
-    this.onSuccess = onSuccess;
-    this.onError = onError;
   };
 
   ns.PaletteGplWriter.prototype.write = function () {
@@ -13,7 +11,7 @@
     lines.push('Name: ' + this.palette.name);
     lines.push('Columns: 0');
     lines.push('#');
-    this.palette.colors.forEach(function (color) {
+    this.palette.getColors().forEach(function (color) {
       lines.push(this.writeColorLine(color));
     }.bind(this));
     lines.push('\r\n');
@@ -35,24 +33,8 @@
 
   ns.PaletteGplWriter.prototype.padString = function (str, size) {
     str = str.toString();
-    for (var i = 0 ; i < size-str.length ; i++) {
-      str = ' ' + str;
-    }
-    return str;
+    var pad = (new Array(1+size-str.length)).join(' ');
+    return pad + str;
   };
 
 })();
-
-// GIMP Palette
-// Name: Fabric_jeans
-// Columns: 0
-// #
-// 194 198 201 Untitled
-// 173 180 194 Untitled
-// 123 126 145 Untitled
-//  91 136 195 Untitled
-//  41  52  74 Untitled
-//  20  25  37 Untitled
-// 164 156 145 Untitled
-// 103  92  82 Untitled
-//  87  58 107 Untitled

src/js/service/palette/PaletteService.js

@@ -2,13 +2,18 @@
   var ns = $.namespace('pskl.service.palette');
 
   ns.PaletteService = function () {
-    this.palettes = [];
+    this.dynamicPalettes = [];
     this.localStorageService = window.localStorage;
   };
 
   ns.PaletteService.prototype.getPalettes = function () {
     var palettesString = this.localStorageService.getItem('piskel.palettes');
-    return JSON.parse(palettesString) || [];
+    var palettes = JSON.parse(palettesString) || [];
+    palettes = palettes.map(function (palette) {
+      return pskl.model.Palette.fromObject(palette);
+    });
+
+    return this.dynamicPalettes.concat(palettes);
   };
 
   ns.PaletteService.prototype.getPaletteById = function (paletteId) {
@@ -32,6 +37,10 @@
     window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
   };
 
+  ns.PaletteService.prototype.addDynamicPalette = function (palette) {
+    this.dynamicPalettes.push(palette);
+  };
+
   ns.PaletteService.prototype.deletePaletteById = function (id) {
     var palettes = this.getPalettes();
     var filteredPalettes = palettes.filter(function (palette) {
@@ -42,6 +51,9 @@
   };
 
   ns.PaletteService.prototype.savePalettes_ = function (palettes) {
+    palettes = palettes.filter(function (palette) {
+      return palette instanceof pskl.model.Palette;
+    });
     this.localStorageService.setItem('piskel.palettes', JSON.stringify(palettes));
     $.publish(Events.PALETTE_LIST_UPDATED);
   };