Color Palette : Added popup mgr + palettes list

src/js/Events.js

@@ -6,6 +6,8 @@ var Events = {
   SELECT_PRIMARY_COLOR: "SELECT_PRIMARY_COLOR",
   SELECT_SECONDARY_COLOR: "SELECT_SECONDARY_COLOR",
 
+  DIALOG_DISPLAY : 'DIALOG_DISPLAY',
+
   /**
    *  When this event is emitted, a request is sent to the localstorage
    *  Service to save the current framesheet. The storage service

src/js/app.js

@@ -36,6 +36,9 @@
       this.paletteController = new pskl.controller.PaletteController();
       this.paletteController.init();
 
+      this.palettesListController = new pskl.controller.PalettesListController();
+      this.palettesListController.init();
+
       this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container'));
       this.drawingController.init();
 
@@ -54,6 +57,9 @@
       this.settingsController = new pskl.controller.settings.SettingsController(this.piskelController);
       this.settingsController.init();
 
+      this.dialogsController = new pskl.controller.dialogs.DialogsController(this.piskelController);
+      this.dialogsController.init();
+
       this.toolController = new pskl.controller.ToolController();
       this.toolController.init();
 

src/js/controller/PalettesListController.js

@@ -0,0 +1,25 @@
+(function () {
+  var ns = $.namespace('pskl.controller');
+
+  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.colorPaletteSelect_.addEventListener('change', this.onPaletteSelected_.bind(this));
+  };
+
+  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';
+    }
+  };
+})();

src/js/controller/dialogs/DialogsController.js

@@ -0,0 +1,48 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs');
+
+  var dialogs = {
+    'manage-palettes' : {
+      template : 'templates/dialogs/manage-palettes.html',
+      controller : ns.ManagePalettesController
+    }
+  };
+
+  ns.DialogsController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  ns.DialogsController.prototype.init = function () {
+    this.dialogContainer_ = document.getElementById('dialog-container');
+    this.dialogWrapper_ = document.getElementById('dialog-container-wrapper');
+    $.subscribe(Events.DIALOG_DISPLAY, this.onDialogDisplayEvent_.bind(this));
+    $.subscribe(Events.DIALOG_HIDE, this.onDialogHideEvent_.bind(this));
+  };
+
+  ns.DialogsController.prototype.onDialogDisplayEvent_ = function (evt, dialogId) {
+    var config = dialogs[dialogId];
+
+    if (config) {
+      this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
+      (new config.controller(this.piskelController)).init();
+      this.showDialogWrapper_();
+    } else {
+      console.error('Could not find dialog configuration for dialogId : ' + dialogId);
+    }
+  };
+
+  ns.DialogsController.prototype.onDialogHideEvent_ = function () {
+    this.hideDialogWrapper_();
+  };
+
+  ns.DialogsController.prototype.showDialogWrapper_ = function () {
+    pskl.app.shortcutService.addShortcut('ESC', this.hideDialogWrapper_.bind(this));
+    this.dialogWrapper_.style.display = 'block';
+  };
+
+  ns.DialogsController.prototype.hideDialogWrapper_ = function () {
+    pskl.app.shortcutService.removeShortcut('ESC');
+    this.dialogWrapper_.style.display = 'none';
+  };
+
+})();

src/js/controller/dialogs/ManagePalettesController.js

@@ -0,0 +1,9 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs');
+
+  ns.ManagePalettesController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  ns.ManagePalettesController.prototype.init = function () {};
+})();