Color Palette : Added popup mgr + palettes list

src/css/dialogs/dialogs.css

@@ -0,0 +1,30 @@
+#dialog-container-wrapper {
+  position: absolute;
+  z-index: 10000;
+
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  padding: 50px;
+
+  box-sizing: border-box;
+  -moz-box-sizing : border-box;
+
+  color: white;
+  display : none;
+}
+
+#dialog-container {
+  width: 100%;
+  height:  100%;
+
+  box-sizing: border-box;
+  -moz-box-sizing : border-box;
+
+  padding: 20px 3%;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.9);
+  overflow: auto;
+}

src/css/spectrum/spectrum-overrides.css

@@ -8,6 +8,7 @@
   background-color: #2B2B2B;
   border: solid 4px #888;
   padding: 5px;
+  box-shadow : 0 0 5px 0 black;
 }
 
 .sp-container[data-y-position=bottom] {

src/css/style.css

@@ -199,74 +199,6 @@ body {
   width: 120px;
 }
 
-/**
- * Layers container
- */
-.layers-list-container {
-  border: 4px solid #888;
-  font-size: medium;
-  color: white;
-  text-align: left;
-  border-radius: 4px;
-  margin-top: 10px;
-}
-
-.layers-title {
-  padding: 8px;
-  margin: 0;
-  font-size: 15px;
-  background: #222;
-  background-image: url('../img/layers.svg');
-  background-size: 22px;
-  background-repeat: no-repeat;
-  background-position: 97%;
-}
-
-.layers-list {
-  font-size : 12px;
-}
-
-.layer-item {
-  height:24px;
-  line-height: 24px;
-  padding : 0 10px;
-  border-top: 1px solid #444;
-  cursor : pointer;
-}
-
-.layer-item:hover {
-  background : #222;
-}
-
-.current-layer-item,
-.current-layer-item:hover {
-  background : #333;
-  color: gold;
-}
-
-.layers-button-container {
-  overflow : hidden;
-}
-
-.layers-button-arrow {
-  font-family : 'Lucida Grande', Calibri;
-  padding : 2px 6px 0 6px;
-}
-
-.layers-button {
-  margin: 0;
-  width: 25%;
-  float : left;
-}
-
-/* @override */
-.button.layers-button {
-  border-left-width: 0;
-}
-
-.layers-button:last-child {
-  border-right-width: 0;
-}
 /**
  * User messages
  */

src/css/toolbox/layers-list.css

@@ -0,0 +1,40 @@
+
+/**
+ * Layers container
+ */
+.layers-list-container {
+}
+
+.layers-title {
+  background-image: url('../../img/layers.svg');
+  background-size: 22px;
+  background-repeat: no-repeat;
+  background-position: 97%;
+}
+
+.layers-list {
+  font-size : 12px;
+}
+
+.layer-item {
+  height:24px;
+  line-height: 24px;
+  padding : 0 10px;
+  border-top: 1px solid #444;
+  cursor : pointer;
+}
+
+.layer-item:hover {
+  background : #222;
+}
+
+.current-layer-item,
+.current-layer-item:hover {
+  background : #333;
+  color: gold;
+}
+
+.layers-button-arrow {
+  font-family : 'Lucida Grande', Calibri;
+  padding : 2px 6px 0 6px;
+}

src/css/toolbox/palettes-list.css

@@ -0,0 +1,9 @@
+.palettes-list-container {
+}
+
+.palettes-title {
+  background-image: url('../img/layers.svg');
+  background-size: 22px;
+  background-repeat: no-repeat;
+  background-position: 97%;
+}

src/css/toolbox/toolbox.css

@@ -0,0 +1,34 @@
+.toolbox-container {
+  border: 4px solid #888;
+  font-size: medium;
+  color: white;
+  text-align: left;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+.toolbox-title {
+  padding: 8px;
+  margin: 0;
+  font-size: 15px;
+  background: #222;
+}
+
+.toolbox-button-container {
+  overflow : hidden;
+}
+
+.toolbox-button {
+  margin: 0;
+  width: 25%;
+  float : left;
+}
+
+/* @override */
+.button.toolbox-button {
+  border-left-width: 0;
+}
+
+.toolbox-button:last-child {
+  border-right-width: 0;
+}

src/index.html

@@ -43,6 +43,7 @@
       <div class="column right-column">
         <iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
       </div>
     </div>
 
@@ -63,6 +64,13 @@
       </div>
     </div>
   </div>
+
+  <div id="dialog-container-wrapper">
+    <div id="dialog-container">
+      <iframe src="templates/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+    </div>
+  </div>
+
   <iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
   <script type="text/javascript" src="piskel-boot.js"></script>
 </body>

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

src/piskel-script-list.js

@@ -66,6 +66,7 @@ exports.scripts = [
   "js/controller/MinimapController.js",
   "js/controller/ToolController.js",
   "js/controller/PaletteController.js",
+  "js/controller/PalettesListController.js",
   "js/controller/NotificationController.js",
 
   // Settings sub-controllers
@@ -76,9 +77,16 @@ exports.scripts = [
   "js/controller/settings/LocalStorageController.js",
   "js/controller/settings/SaveController.js",
   "js/controller/settings/ImportController.js",
+
   // Settings controller
   "js/controller/settings/SettingsController.js",
 
+  // Dialogs sub-controllers
+  "js/controller/dialogs/ManagePalettesController.js",
+
+  // Dialogs controller
+  "js/controller/dialogs/DialogsController.js",
+
   // Services
   "js/service/LocalStorageService.js",
   "js/service/GithubStorageService.js",

src/piskel-style-list.js

@@ -7,6 +7,10 @@ exports.styles = [
   "css/settings.css",
   "css/tools.css",
   "css/cheatsheet.css",
+  "css/dialogs/dialogs.css",
+  "css/toolbox/toolbox.css",
+  "css/toolbox/layers-list.css",
+  "css/toolbox/palettes-list.css",
   "css/spectrum/spectrum.css",
   "css/spectrum/spectrum-overrides.css",
   "css/bootstrap/bootstrap.css",

src/templates/dialogs/manage-palettes.html

@@ -0,0 +1,3 @@
+<div>
+  BITE BITE BITE
+</div>

src/templates/layers-list.html

@@ -1,10 +1,10 @@
-<div class="layers-list-container">
-  <h3 class="layers-title">Layers</h3>
-  <div class="layers-button-container">
-    <button class="button layers-button" data-action="add"  >Add</button>
-    <button class="button layers-button" data-action="delete"  >Delete</button>
-    <button class="button layers-button layers-button-arrow" data-action="up"   >&#8593;</button>
-    <button class="button layers-button layers-button-arrow" data-action="down" >&#8595;</button>
+<div class="toolbox-container layers-list-container">
+  <h3 class="toolbox-title layers-title">Layers</h3>
+  <div class="toolbox-button-container layers-button-container">
+    <button class="button toolbox-button" data-action="add"  >Add</button>
+    <button class="button toolbox-button" data-action="delete"  >Delete</button>
+    <button class="button toolbox-button layers-button-arrow" data-action="up"   >&#8593;</button>
+    <button class="button toolbox-button layers-button-arrow" data-action="down" >&#8595;</button>
   </div>
   <script type="text/template" id="layer-item-template">
     <li class="layer-item" data-layer-name="{{layername}}">{{layername}}</li>

src/templates/palettes-list.html

@@ -0,0 +1,22 @@
+<div class="toolbox-container palettes-list-container">
+  <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">
+        <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>