adding palette basics

index.html

@@ -26,6 +26,8 @@
       <div class="canvas-background"></div>
     </div>
     <input id="color-picker" class="color" type="text" value=""/>
+    <ul id="palette" onclick="piskel.onPaletteClick(event)">
+    </ul>
     <div class='preview-container'>
       <div id='preview-canvas-container' class="canvas-container">
         <div class="canvas-background"></div>

js/frameSheetModel.js

@@ -18,6 +18,10 @@ var FrameSheetModel = (function() {
 			return true; // I'm always right dude
 		},
 
+		getUsedColors : function () {
+			return ["#000", "#fff"]
+		},
+
 		// Could be used to pass around model using long GET param (good enough for simple models) and 
 		// do some temporary locastorage
 		serialize: function() {

js/piskel.js

@@ -29,7 +29,8 @@
       isRightClicked = false, 
       activeFrameIndex = -1, 
       animIndex = 0,
-      penColor = DEFAULT_PEN_COLOR;
+      penColor = DEFAULT_PEN_COLOR,
+      paletteColors = [];
 
 
   var piskel = {
@@ -42,6 +43,7 @@
       this.initPreviewSlideshow();
       this.initAnimationPreview();
       this.initColorPicker();
+      this.initPalette();
     },
 
     setActiveFrame: function(index) {
@@ -69,11 +71,25 @@
     },
 
     initColorPicker: function() {
-      var colorPicker = document.getElementById('color-picker');
-      colorPicker.value = DEFAULT_PEN_COLOR;
-      colorPicker.addEventListener('change', function(evt) {
+      this.colorPicker = $('color-picker');
+      this.colorPicker.value = DEFAULT_PEN_COLOR;
+      this.colorPicker.addEventListener('change', this.onPickerChange.bind(this));
+    },
+
+    onPickerChange : function(evt) {
         penColor = colorPicker.value;
-      });
+    },
+
+    initPalette : function (color) {
+      var colors = frameSheet.getUsedColors();
+      var paletteEl = $('palette');
+      paletteEl.innerHTML = "";
+      for (var i = 0 ; i < colors.length ; i++) {
+        var color = colors[i];
+        var colorEl = document.createElement("li");
+        colorEl.setAttribute("data-color", color);
+        paletteEl.appendChild(colorEl);
+      }
     },
 
     initDrawingArea : function() {
@@ -87,13 +103,13 @@
         drawingAreaContainer.setAttribute('style', 
           'width:' + framePixelWidth * drawingCanvasDpi + 'px; height:' + framePixelHeight * drawingCanvasDpi + 'px;');
 
-        drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(arguments[0])');
+        drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(event)');
         drawingAreaContainer.appendChild(drawingAreaCanvas);
 
         var body = document.getElementsByTagName('body')[0];
         body.setAttribute('onmouseup', 'piskel.onCanvasMouseup(arguments[0])');
-        drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(arguments[0])');
-        drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(arguments[0])');
+        drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)');
+        drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)');
 
         this.drawFrameToCanvas(frameSheet.getFrameByIndex(this.getActiveFrameIndex()), drawingAreaCanvas, drawingCanvasDpi);
     },
@@ -325,6 +341,12 @@
       event.cancelBubble = true;
       return false;
     },
+
+    onPaletteClick : function (event) {
+      var color = event.target.getAttribute("data-color");
+      var colorPicker = $('color-picker');
+      colorPicker.color.fromString(color);
+    },
     
     getRelativeCoordinates : function (x, y) {
       var canvasRect = drawingAreaCanvas.getBoundingClientRect();