integrate palette list with palette manager

src/css/dialogs/manage-palettes.css

@@ -23,6 +23,16 @@
   -moz-box-sizing: border-box;
 }
 
+.palette-manager-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  line-height: 45px;
+  margin-right: 10px;
+  font-size: 1.3em;
+  cursor: pointer;
+}
+
 .palette-manager-drawer {
   width: 200px;
   position: absolute;

src/css/toolbox/palettes-list.css

@@ -7,3 +7,45 @@
   background-repeat: no-repeat;
   background-position: 97%;
 }
+
+.palettes-list-colors {
+  overflow:hidden;
+}
+
+.palettes-list-color {
+  cursor : pointer;
+  float: left;
+  margin : 0px 0 5px 5px;
+  width : 32px;
+  height : 32px;
+  position: relative;
+}
+
+.palettes-list-color div{
+  width : 32px;
+  height : 32px;
+}
+
+.palettes-list-color.primary:before,
+.palettes-list-color.secondary:before {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  display: inline-block;
+  border: 7px solid gold;
+  border-top-color: transparent;
+
+  width: 0px;
+  height: 0px;
+}
+
+.palettes-list-color.primary:before {
+  left: -1px;
+  border-right-color: transparent;
+}
+
+
+.palettes-list-color.secondary:before {
+  right: -1px;
+  border-left-color: transparent;
+}

src/js/Constants.js

@@ -14,6 +14,7 @@ var Constants = {
   MINIMUM_ZOOM : 1,
 
   PREVIEW_FILM_SIZE : 120,
+  ANIMATED_PREVIEW_WIDTH : 200,
 
   DEFAULT_PEN_COLOR : '#000000',
   TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)',

src/js/Events.js

@@ -5,8 +5,13 @@ var Events = {
   TOOL_RELEASED : "TOOL_RELEASED",
   SELECT_PRIMARY_COLOR: "SELECT_PRIMARY_COLOR",
   SELECT_SECONDARY_COLOR: "SELECT_SECONDARY_COLOR",
+  PRIMARY_COLOR_SELECTED : 'PRIMARY_COLOR_SELECTED',
+  SECONDARY_COLOR_SELECTED : 'SECONDARY_COLOR_SELECTED',
 
   DIALOG_DISPLAY : 'DIALOG_DISPLAY',
+  DIALOG_HIDE : 'DIALOG_HIDE',
+
+  PALETTE_LIST_UPDATED : 'PALETTE_LIST_UPDATED',
 
   /**
    *  When this event is emitted, a request is sent to the localstorage

src/js/controller/AnimatedPreviewController.js

@@ -1,5 +1,6 @@
 (function () {
   var ns = $.namespace("pskl.controller");
+
   ns.AnimatedPreviewController = function (piskelController, container) {
     this.piskelController = piskelController;
     this.container = container;
@@ -26,6 +27,7 @@
     // consistent behavior across all other browsers that support the input type range
     // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
     $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
+    document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
   };
 
   ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {

src/js/controller/PaletteController.js

@@ -10,9 +10,6 @@
    * @public
    */
   ns.PaletteController.prototype.init = function() {
-    var transparentColorPalette = $(".palette-color[data-color=TRANSPARENT]");
-    transparentColorPalette.mouseup($.proxy(this.onPaletteColorClick_, this));
-
     $.subscribe(Events.SELECT_PRIMARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:true}));
     $.subscribe(Events.SELECT_SECONDARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:false}));
 
@@ -75,11 +72,13 @@
   ns.PaletteController.prototype.setPrimaryColor = function (color) {
     this.primaryColor = color;
     this.updateColorPicker_(color, $('#color-picker'));
+    $.publish(Events.PRIMARY_COLOR_SELECTED, [color]);
   };
 
   ns.PaletteController.prototype.setSecondaryColor = function (color) {
     this.secondaryColor = color;
     this.updateColorPicker_(color, $('#secondary-color-picker'));
+    $.publish(Events.SECONDARY_COLOR_SELECTED, [color]);
   };
 
   ns.PaletteController.prototype.getPrimaryColor = function () {
@@ -101,20 +100,6 @@
     this.setSecondaryColor(Constants.TRANSPARENT_COLOR);
   };
 
-  /**
-   * @private
-   */
-  ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
-    var selectedColor = $(event.target).data("color");
-    var isLeftClick = (event.which == 1);
-    var isRightClick = (event.which == 3);
-    if (isLeftClick) {
-      $.publish(Events.PRIMARY_COLOR_SELECTED, [selectedColor]);
-    } else if (isRightClick) {
-      $.publish(Events.SECONDARY_COLOR_SELECTED, [selectedColor]);
-    }
-  };
-
   /**
    * @private
    */

src/js/controller/PalettesListController.js

@@ -1,25 +1,130 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
+  var NO_PALETTE_ID = '__no-palette';
+
   ns.PalettesListController = function () {
 
   };
 
   ns.PalettesListController.prototype.init = function () {
     this.paletteColorTemplate_ = pskl.utils.Template.get('palette-color-template');
-    this.colorListContainer_ = document.querySelectorAll('.palettes-list')[0];
-    this.colorPaletteSelect_ = document.querySelectorAll('.palette-picker')[0];
+    this.colorListContainer_ = document.querySelector('.palettes-list-colors');
+    this.colorPaletteSelect_ = document.querySelector('.palette-picker');
+    this.paletteListOptGroup_ = document.querySelector('.palette-picker-group');
 
     this.colorPaletteSelect_.addEventListener('change', this.onPaletteSelected_.bind(this));
+    this.colorListContainer_.addEventListener('mouseup', this.onColorContainerMouseup.bind(this));
+    this.colorListContainer_.addEventListener('contextmenu', this.onColorContainerContextMenu.bind(this));
+
+    $.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this));
+    $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'primary'));
+    $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'secondary'));
+
+    this.fillPaletteList();
+    this.fillColorListContainer();
+  };
+
+  ns.PalettesListController.prototype.fillPaletteList = function () {
+    var palettes = [{
+      id : NO_PALETTE_ID,
+      name : 'No palette'
+    }];
+    palettes = palettes.concat(this.retrievePalettes());
+
+    var html = palettes.map(function (palette) {
+      return pskl.utils.Template.replace('<option value="{{id}}">{{name}}</option>', palette);
+    }).join('');
+    this.paletteListOptGroup_.innerHTML = html;
+  };
+
+  ns.PalettesListController.prototype.fillColorListContainer = function () {
+    var html = '';
+
+    var palette = this.getSelectedPalette();
+    if (palette) {
+      html = palette.colors.map(function (color) {
+        return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
+      }.bind(this)).join('');
+    }
+
+    this.colorListContainer_.innerHTML = html;
+  };
+
+  ns.PalettesListController.prototype.getSelectedPalette = function (evt) {
+    var paletteId = this.colorPaletteSelect_.value;
+    var palettes = this.retrievePalettes();
+    var palette = this.getPaletteById(paletteId, palettes);
+    return palette;
   };
 
   ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
     var paletteId = this.colorPaletteSelect_.value;
-    console.log('paletteId', paletteId);
     if (paletteId === '__manage-palettes') {
       console.log('DISPLAY DIALOG');
       $.publish(Events.DIALOG_DISPLAY, 'manage-palettes');
-      this.colorPaletteSelect_.value= '__no-palette';
+      this.colorPaletteSelect_.value = NO_PALETTE_ID;
+    }
+    
+    this.fillColorListContainer();
+  };
+
+  ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {
+    event.preventDefault();
+  };
+
+  ns.PalettesListController.prototype.onColorContainerMouseup = function (event) {
+    var target = event.target;
+    var color = target.dataset.color;
+
+    if (color) {
+      if (event.button == Constants.LEFT_BUTTON) {
+        $.publish(Events.SELECT_PRIMARY_COLOR, [color]);
+      } else if (event.button == Constants.RIGHT_BUTTON) {
+        $.publish(Events.SELECT_SECONDARY_COLOR, [color]);
+      }
     }
   };
+
+  ns.PalettesListController.prototype.onColorUpdated = function (type, event, color) {
+    console.log('[PalettesListController] >>> ', arguments);
+    var colorContainer = this.colorListContainer_.querySelector('.palettes-list-color[data-color="'+color+'"]');
+    if (type === 'primary') {
+      this.removeClass_('primary', '.palettes-list-color');
+      colorContainer.classList.add('primary');
+      colorContainer.classList.remove('secondary');
+    } else if (type === 'secondary') {
+      this.removeClass_('secondary', '.palettes-list-color');
+      colorContainer.classList.add('secondary');
+      colorContainer.classList.remove('primary');
+    }
+  };
+
+  ns.PalettesListController.prototype.removeClass_ = function (cssClass, selector) {
+    var element = document.querySelector(selector + '.' + cssClass);
+    if (element) {
+      element.classList.remove(cssClass);
+    }
+  };
+
+  ns.PalettesListController.prototype.onPaletteListUpdated = function () {
+    this.fillPaletteList();
+  };
+
+  ns.PalettesListController.prototype.getPaletteById = function (paletteId, palettes) {
+    var match = null;
+
+    palettes.forEach(function (palette) {
+      if (palette.id === paletteId) {
+        match = palette;
+      }
+    });
+
+    return match;
+  };
+
+  ns.PalettesListController.prototype.retrievePalettes =  function () {
+    var palettesString = window.localStorage.getItem('piskel.palettes');
+    return JSON.parse(palettesString) || [];
+  };
 })();

src/js/controller/dialogs/DialogsController.js

@@ -36,7 +36,7 @@
   };
 
   ns.DialogsController.prototype.onDialogHideEvent_ = function () {
-    this.hideDialogWrapper_();
+    this.hideDialog();
   };
 
   ns.DialogsController.prototype.showDialogWrapper_ = function () {

src/js/controller/dialogs/PaletteManagerController.js

@@ -20,6 +20,7 @@
     this.paletteBody = document.querySelector('.palette-manager-details-body');
     this.paletteHead = document.querySelector('.palette-manager-details-head');
     this.createButton = document.querySelector('.palette-manager-actions-button[data-action="create"]');
+    this.closeButton = document.querySelector('.palette-manager-close');
 
     this.colorCardTemplate = pskl.utils.Template.get('palette-color-card-template');
     this.newColorTemplate = pskl.utils.Template.get('palette-new-color-template');
@@ -31,6 +32,7 @@
     this.paletteBody.addEventListener('click', this.delegatedPaletteBodyClick.bind(this));
     this.paletteHead.addEventListener('click', this.delegatedPaletteHeadClick.bind(this));
     this.createButton.addEventListener('click', this.createPalette.bind(this));
+    this.closeButton.addEventListener('click', this.closeDialog.bind(this));
 
     // Init markup
     this.createPaletteListMarkup();
@@ -41,6 +43,10 @@
     }
   };
 
+  ns.PaletteManagerController.prototype.closeDialog = function () {
+    $.publish(Events.DIALOG_HIDE);
+  };
+
   ns.PaletteManagerController.prototype.createPalette = function () {
     var name = window.prompt('Please enter a name for your palette', 'New palette');
     if (name) {
@@ -316,6 +322,7 @@
   ns.PaletteManagerController.prototype.persistToLocalStorage = function () {
     window.localStorage.setItem('piskel.palettes', JSON.stringify(this.originalPalettes));
     this.originalPalettes = this.retrieveUserPalettes();
+    $.publish(Events.PALETTE_LIST_UPDATED);
   };
 
   ns.PaletteManagerController.prototype.retrieveUserPalettes = function () {

src/templates/dialogs/manage-palettes.html

@@ -1,6 +1,7 @@
 <div class="palette-manager-wrapper">
   <h3 class="palette-manager-head">
     Palette manager
+    <span class="palette-manager-close">X</span>
   </h3>
   <div class="palette-manager-body">
     <div class="palette-manager-drawer">

src/templates/palettes-list.html

@@ -2,21 +2,24 @@
   <h3 class="toolbox-title palettes-title" style="overflow:hidden">
     <span style="line-height:24px ">Palettes</span>
     <select class="palette-picker" style="float:right; max-width:90px;">
-      <optgroup label="Available palettes">
+      <optgroup class="palette-picker-group" label="Available palettes">
         <option value="__no-palette">No palette</option>
-        <option value="palette1">Palette 1</option>
-        <option value="palette2">Palette 2</option>
       </optgroup>
       <optgroup label="Admin">
         <option value="__manage-palettes">Create and Manage palettes</option>
       </optgroup>
     </select>
   </h3>
-  <script type="text/template" id="palette-color-template">
-    <div class="palette-color" data-color="{{color}}" style="background:{{color}}">&nbsp;</div>
-  </script>
-  <script type="text/template" id="no-palette-selected-template">
-    <div class="palette-not-selected">No palette selected</div>
-  </script>
-  <div class="palettes-list"></div>
+  <div class="palettes-list-colors"></div>
 </div>
+
+
+<script type="text/template" id="palette-color-template">
+  <div class="palettes-list-color" data-color="{{color}}" title="{{color}}">
+    <div data-color="{{color}}" style="background:{{color}}"></div>
+  </div>
+</script>
+
+<script type="text/template" id="no-palette-selected-template">
+  <div class="palette-not-selected">No palette selected</div>
+</script>