Added color picker in create palette popup

src/css/dialogs-create-palette.css

@@ -1,6 +1,6 @@
 #dialog-container.create-palette {
   width: 500px;
-  height: 200px;
+  height: 600px;
   top : 50%;
   left : 50%;
   position : absolute;
@@ -8,14 +8,55 @@
 }
 
 .show #dialog-container.create-palette {
-  margin-top: -100px;
+  margin-top: -300px;
 }
 
-.create-palette-method-item {
+.create-palette-section {
-  line-height : 24px;
+  position: absolute;
+  left: 10px;
+  top: 50px;
 }
 
-.create-palette-method-item label{
+.colors-container {
-  margin-top: 3px;
+  position: absolute;
-  margin-left: 5px;
+
+  left: 10px;
+  right: 10px;
+  top: 85px;
+
+  height: 460px;
+
+  border: 1px solid black;
+  background: #333;
+}
+
+.color-picker-container {
+  position:absolute;
+  left : 280px;
+  top:0;
+  bottom:0;
+  right:0;
+  background: #222;
+}
+
+.create-palette-submit {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+
+.color-preview {
+  width: 170px;
+  height: 76px;
+  margin: 11px;
+}
+
+/*SPECTRUM OVERRIDES*/
+
+.create-palette .sp-container{
+  background-color: transparent;
+  border: none;
+  box-shadow : none;
+  border-radius:0;
+  padding:5px;
 }

src/css/dialogs-manage-palettes.css

@@ -23,16 +23,6 @@
   -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/dialogs.css

@@ -79,6 +79,7 @@
 }
 
 .dialog-wrapper {
+  height: 100%;
   position : relative;
 }
 
@@ -101,4 +102,4 @@
   margin-right: 10px;
   font-size: 1.3em;
   cursor: pointer;
-}
+}

src/index.html

@@ -68,6 +68,7 @@
   <div id="dialog-container-wrapper">
     <div id="dialog-container">
       <iframe src="templates/dialogs/create-palette.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+      <iframe src="templates/dialogs/create-palette-method.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
       <iframe src="templates/dialogs/import-image.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
       <iframe src="templates/dialogs/browse-local.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
     </div>

src/js/app.js

@@ -129,6 +129,9 @@
       if (pskl.devtools) {
         pskl.devtools.init();
       }
+
+      // FIXME : remove
+      $.publish(Events.DIALOG_DISPLAY, 'create-palette');
     },
 
     loadPiskel_ : function (serializedPiskel, descriptor, fps) {

src/js/controller/PalettesListController.js

@@ -102,7 +102,7 @@
   };
 
   ns.PalettesListController.prototype.onCreatePaletteClick_ = function (evt) {
-    $.publish(Events.DIALOG_DISPLAY, 'create-palette');
+    $.publish(Events.DIALOG_DISPLAY, 'create-palette-method');
   };
 
   ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {

src/js/controller/dialogs/CreatePaletteController.js

@@ -2,11 +2,147 @@
   var ns = $.namespace('pskl.controller.dialogs');
 
   ns.CreatePaletteController = function (piskelController) {
+    this.tinyColor = null;
+    this.hsvColor = {h:0,s:0,v:0};
   };
 
   pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);
 
   ns.CreatePaletteController.prototype.init = function () {
     this.superclass.init.call(this);
+
+    $(".color-picker-spectrum").spectrum({
+        flat: true,
+        showInput: true,
+        showButtons: false,
+        change : this.setColor.bind(this)
+    });
+
+    this.tinyColorPickerContainer = document.querySelector('.color-picker-container');
+    this.tinyColorPickerContainer.addEventListener('input', this.onPickerInput_.bind(this));
+
+    this.colorPreviewEl = document.querySelector('.color-preview');
+
+    this.setColor("#000000");
+  };
+
+  ns.CreatePaletteController.prototype.onPickerInput_ = function (evt) {
+    var target = evt.target;
+
+    var model = target.dataset.model;
+    var dimension = target.dataset.dimension;
+    var value = parseInt(target.value, 10);
+
+    if (dimension === 'v' || dimension === 's') {
+      value = value/100;
+    }
+
+    var color;
+    if (model === 'rgb') {
+      color = this.tinyColor.toRgb();
+    } else if (model === 'hsv') {
+      color = this.hsvColor;
+    }
+
+    if (isNaN(value)) {
+      value = color[dimension];
+    } else {
+      color[dimension] = value;
+    }
+
+    this.setColor(color);
+  };
+
+  ns.CreatePaletteController.prototype.setColor = function (inputColor) {
+    if (!this.unplugged) {
+      this.unplugged = true;
+
+      this.hsvColor = this.toHsvColor_(inputColor);
+      this.tinyColor = this.toTinyColor_(inputColor);
+
+      this.updateInputs();
+      $(".color-picker-spectrum").spectrum("set", this.tinyColor);
+
+      this.onColorUpdated_(this.tinyColor);
+
+      this.unplugged = false;
+    }
+  };
+
+  ns.CreatePaletteController.prototype.toTinyColor_ = function (color) {
+    if (typeof color == "object" && color.hasOwnProperty("_tc_id")) {
+      return color;
+    } else {
+      return window.tinycolor(JSON.parse(JSON.stringify(color)));
+    }
+  };
+
+  ns.CreatePaletteController.prototype.toHsvColor_ = function (color) {
+    var isHsvColor = ['h','s','v'].every(color.hasOwnProperty.bind(color));
+    if (isHsvColor) {
+      return {
+        h : Math.max(0, Math.min(255, color.h)),
+        s : Math.max(0, Math.min(1, color.s)),
+        v : Math.max(0, Math.min(1, color.v))
+      };
+    } else {
+      return this.toTinyColor_(color).toHsv();
+    }
+  };
+
+  ns.CreatePaletteController.prototype.updateInputs = function () {
+    var inputs = this.tinyColorPickerContainer.querySelectorAll('input');
+    var rgb = this.tinyColor.toRgb();
+
+
+    for (var i = 0 ; i < inputs.length ; i++) {
+      var input = inputs[i];
+      var dimension = input.dataset.dimension;
+      var model = input.dataset.model;
+
+      if (model === 'rgb') {
+        input.value = rgb[dimension];
+      } else if (model === 'hsv') {
+        var value = this.hsvColor[dimension];
+        if (dimension === 'v' || dimension === 's') {
+          value = 100 * value;
+        }
+        input.value = Math.round(value);
+      }
+
+      if (input.getAttribute('type') === 'range') {
+        this.updateSliderBackground(input);
+      }
+    }
+  };
+
+  ns.CreatePaletteController.prototype.updateSliderBackground = function (slider) {
+    var dimension = slider.dataset.dimension;
+    var model = slider.dataset.model;
+
+    var start, end;
+    var isHueSlider = dimension === 'h';
+    if (!isHueSlider) {
+      if (model === 'hsv') {
+        start = JSON.parse(JSON.stringify(this.hsvColor));
+        start[dimension] = 0;
+
+        end = JSON.parse(JSON.stringify(this.hsvColor));
+        end[dimension] = 1;
+      } else {
+        start = this.tinyColor.toRgb();
+        start[dimension] = 0;
+
+        end = this.tinyColor.toRgb();
+        end[dimension] = 255;
+      }
+      var colorStart = window.tinycolor(start).toRgbString();
+      var colorEnd = window.tinycolor(end).toRgbString();
+      slider.style.backgroundImage = "linear-gradient(to right, " + colorStart + " 0, " + colorEnd + " 100%)";
+    }
+  };
+
+  ns.CreatePaletteController.prototype.onColorUpdated_ = function (color) {
+    this.colorPreviewEl.style.background = color.toRgbString();
   };
 })();

src/js/controller/dialogs/DialogsController.js

@@ -6,6 +6,10 @@
       template : 'templates/dialogs/manage-palettes.html',
       controller : ns.PaletteManagerController
     },
+    'create-palette-method' : {
+      template : 'templates/dialogs/create-palette-method.html',
+      controller : ns.CreatePaletteMethodController
+    },
     'create-palette' : {
       template : 'templates/dialogs/create-palette.html',
       controller : ns.CreatePaletteController
@@ -46,8 +50,8 @@
     if (!this.isDisplayed()) {
       var config = dialogs[dialogId];
       if (config) {
-        this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
         this.dialogContainer_.classList.add(dialogId);
+        this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
 
         var controller = new config.controller(this.piskelController);
         controller.init(initArgs);

src/piskel-script-list.js

@@ -101,6 +101,7 @@
   "js/controller/dialogs/AbstractDialogController.js",
   "js/controller/dialogs/PaletteManagerController.js",
   "js/controller/dialogs/CreatePaletteController.js",
+  "js/controller/dialogs/CreatePaletteMethodController.js",
   "js/controller/dialogs/ImportImageController.js",
   "js/controller/dialogs/BrowseLocalController.js",
 

src/piskel-style-list.js

@@ -11,11 +11,13 @@
   "css/tools.css",
   "css/icons.css",
   "css/cheatsheet.css",
+  "css/color-picker-slider.css",
   "css/dialogs.css",
   "css/dialogs-import-image.css",
   "css/dialogs-manage-palettes.css",
   "css/dialogs-browse-local.css",
   "css/dialogs-create-palette.css",
+  "css/dialogs-create-palette-method.css",
   "css/toolbox.css",
   "css/toolbox-layers-list.css",
   "css/toolbox-palettes-list.css",

src/templates/dialogs/browse-local.html

@@ -1,7 +1,7 @@
 <div class="dialog-wrapper">
   <h3 class="dialog-head">
     Browse Local Piskels
-    <span class="palette-manager-close dialog-close">X</span>
+    <span class="dialog-close">X</span>
   </h3>
   <div style="padding:10px 20px; font-size:1.5em">
     <table class="local-piskel-list">

src/templates/dialogs/create-palette.html

@@ -1,30 +1,60 @@
 <div class="dialog-wrapper">
   <h3 class="dialog-head">
     Create palette
-    <span class="palette-manager-close dialog-close">X</span>
+    <span class="dialog-close">X</span>
   </h3>
-  <div style="padding:10px 20px; font-size:1.3em">
+  <div class="dialog-create-palette" style="font-size:1.3em">
-    Select your creation method : 
+    <form action="" method="POST" name="create-palette-form">
-    <form action="">
+      <div class="create-palette-section form-section">
-      <ul style="margin:10px 0" class="create-palette-method-list">
+        <span class="dialog-create-palette-name">Name :</span><input type="text" class="textfield" name="palette-name" placeholder="New palette"/>
-        <li class="create-palette-method-item"><input type="radio" name="palette-creation-mode" id="palette-creation-mode-manual" value="manual" checked="checked"><label for="palette-creation-mode-manual">Manual</label></li>
+      </div>
-        <li class="create-palette-method-item"><input type="radio" name="palette-creation-mode" id="palette-creation-mode-import" value="import"><label for="palette-creation-mode-import">Import from existing file or image</label><br></li>
+      <div class="colors-container">
-        <li class="create-palette-method-item"><input type="radio" name="palette-creation-mode" id="palette-creation-mode-clone" value="clone"><label for="palette-creation-mode-clone">Clone existing palette</label>
+        <div class="color-picker-container">
-          <select class="palettes-list-select" style="margin:3px 0;">
+          <div class="color-picker-spectrum"></div>
-            <option value="current-colors">Current colors</option>
+          <div class="color-picker-slider">
-          </select>
+            <span>H</span>
-        </li>
+            <input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359"/>
-      </ul>
+            <input type="text"  data-model="hsv" data-dimension="h" class="textfield" value="0"/>
-      <button class="button button-primary" style="float:right">Continue</button>
+          </div>
-      <button class="button" style="float:right">Cancel</button>
+          <div class="color-picker-slider">
+            <span>S</span>
+            <input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100"/>
+            <input type="text"  data-model="hsv" data-dimension="s" class="textfield" value="0"/>
+          </div>
+          <div class="color-picker-slider">
+            <span>V</span>
+            <input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100"/>
+            <input type="text"  data-model="hsv" data-dimension="v" class="textfield" value="0"/>
+          </div>
+          <br/>
+          <div class="color-picker-slider">
+            <span>R</span>
+            <input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255"/>
+            <input type="text"  data-model="rgb" data-dimension="r" class="textfield" value="0"/>
+          </div>
+          <div class="color-picker-slider">
+            <span>G</span>
+            <input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255"/>
+            <input type="text"  data-model="rgb" data-dimension="g" class="textfield" value="0"/>
+          </div>
+          <div class="color-picker-slider">
+            <span>B</span>
+            <input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255"/>
+            <input type="text"  data-model="rgb" data-dimension="b" class="textfield" value="0"/>
+          </div>
+          <div class="color-preview"></div>
+        </div>
+      </div>
+      <input type="submit" name="create-palette-submit" class="button button-primary create-palette-submit" value="Save" />
     </form>
   </div>
-  <script type="text/template" id="local-storage-item-template">
+
-    <tr class="local-piskel-item">
+  <script type="text/template" id="color-picker-slider-template">
-      <td class="local-piskel-name">{{name}}</td>
+    <div class="color-picker-slider">
-      <td class="local-piskel-save-date">{{date}}</td>
+      <span>{{dim|upper}}</span>
-      <td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
+      <input type="range" data-model="{{model}}" data-dimension="{{dim}}" value="0" min="0" max="{{max}}"/>
-      <td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
+      <input type="text"  data-model="{{model}}" data-dimension="{{dim}}" class="textfield" value="0"/>
-    </tr>
+    </div>
   </script>
+
 </div>

src/templates/dialogs/import-image.html

@@ -1,7 +1,7 @@
 <div class="dialog-wrapper">
   <h3 class="dialog-head">
     Import Image
-    <span class="palette-manager-close dialog-close">X</span>
+    <span class="dialog-close">X</span>
   </h3>
   <div class="dialog-import-body">
     <form action="" method="POST" name="import-image-form">

src/templates/dialogs/manage-palettes.html

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