Implement continuous draw + use select control for colors

css/toolbox.css

@@ -1,28 +1,9 @@
-#toolbox, #colors {
+#toolbox {
 	list-style: none;
 	padding: 0;
 }
 
-#colors, #colors * {
+#colors {
 	width: 2em;
 	height: 2em;
 }
-
-#colors * {
-	padding: 2px;
-	display: none;
-}
-
-#colors.open *, #colors .current {
-	display: block;
-}
-
-#colors.open li:hover {
-	border: 2px dashed #777;
-	padding: 0;
-}
-
-#colors {
-	cursor: pointer;
-	display: inline-block;
-}

index.html

@@ -15,13 +15,13 @@
 				<li id="toolpicker">
 					<span>Tool</span>
 					<select id="tool">
-						<option>Toggle</option>
+						<option value="draw">Draw</option>
-						<option>Surface</option>
+						<option value="paint">Paint</option>
 					</select>
 				</li>
 				<li id="palette">
 					<span>Color</span>
-					<ul id="colors"></ul>
+					<select id="colors" class="color0"></select>
 				</li>
 			</ul>
 			<table id="grid"/>

js/Grid.js

@@ -1,10 +1,11 @@
 import * as Dom from UnitJS.Dom;
-import currentColor from Toolbox;
+import {color, tool} from Toolbox;
 
 var grid = {
 	element: null,
 	data: {}
 };
+var down = false;
 
 return {
 	init: init
@@ -18,6 +19,9 @@ function init(size, elementId) {
 		);
 		grid.data[row] = {};
 	}
+	grid.element.addEventListener('mouseleave', function() {
+		down = false;
+	});
 }
 
 function makeRow(config) {
@@ -30,9 +34,24 @@ function makeRow(config) {
 
 function bodyAttributes(i, j) {
 	return {
-		onClick: function(e) {
+		onMousedown: function(e) {
-			grid.data[i][j] = currentColor();
+			down = true;
-			e.target.className = 'color' + grid.data[i][j];
+			if(tool() == 'draw') {
+				colorize(i, j, e);
+			}
+		},
+		onMouseup: function(e) {
+			down = false;
+		},
+		onMouseenter: function(e) {
+			if(down && tool() == 'draw') {
+				colorize(i, j, e);
+			}
 		}
 	};
 }
+
+function colorize(i, j, e) {
+	grid.data[i][j] = color();
+	e.target.className = grid.data[i][j];
+}

js/Toolbox.js

@@ -1,40 +1,30 @@
 import * as Dom from UnitJS.Dom;
 
-var tool = 'toggle';
+var tool;
-var colorPicker = {
+var colors;
-	element: null,
-	current: 0
-};
 
 return {
 	init: init,
-	currentColor: currentColor
+	tool: tool,
+	color: color
 };
 
 function init(size, elementId) {
-	colorPicker.element = document.getElementById(elementId || 'colors');
+	root = document.getElementById(elementId || 'toolbox');
-	for(var color = 0; color < size; color++) {
+	colors = root.querySelector('#colors');
-		colorPicker.element.appendChild(Dom.make('li', colorBox(color)));
+	for(var i = 0; i < size; i++) {
+		colors.appendChild(Dom.make('option', {class: 'color' + i}));
 	}
-	colorPicker.element.addEventListener('click', function() {
+	colors.addEventListener('change', function() {
-		colorPicker.element.classList.toggle('open');
+		colors.className = color();
 	});
-	colorPicker.element.children[0].classList.add('current');
+	tool = root.querySelector('#tool');
 }
 
-function colorBox(i) {
+function tool() {
-	return {
+	return tool.value;
-		class: 'color' + i,
-		onClick: function(e) {
-			if(colorPicker.element.classList.contains('open')) {
-				colorPicker.element.children[colorPicker.current].classList.remove('current');
-				colorPicker.current = i;
-				colorPicker.element.children[colorPicker.current].classList.add('current');
-			}
-		}
-	};
 }
 
-function currentColor() {
+function color() {
-	return colorPicker.current;
+	return 'color' + colors.selectedIndex;
 }