Homogeneize layout, drop palette

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');
+  };
+})();