diff --git a/css/toolbox.css b/css/toolbox.css
index 52cdaad..7dba7f7 100644
--- a/css/toolbox.css
+++ b/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;
-}
diff --git a/index.html b/index.html
index c8393fa..b04b833 100644
--- a/index.html
+++ b/index.html
@@ -15,13 +15,13 @@
Tool
Color
-
+
diff --git a/js/Grid.js b/js/Grid.js
index 3559c6e..c4bc787 100644
--- a/js/Grid.js
+++ b/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) {
- grid.data[i][j] = currentColor();
- e.target.className = 'color' + grid.data[i][j];
+ onMousedown: function(e) {
+ down = true;
+ 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];
+}
diff --git a/js/Toolbox.js b/js/Toolbox.js
index a3c573d..cd9f264 100644
--- a/js/Toolbox.js
+++ b/js/Toolbox.js
@@ -1,40 +1,30 @@
import * as Dom from UnitJS.Dom;
-var tool = 'toggle';
-var colorPicker = {
- element: null,
- current: 0
-};
+var tool;
+var colors;
return {
init: init,
- currentColor: currentColor
+ tool: tool,
+ color: color
};
function init(size, elementId) {
- colorPicker.element = document.getElementById(elementId || 'colors');
- for(var color = 0; color < size; color++) {
- colorPicker.element.appendChild(Dom.make('li', colorBox(color)));
+ root = document.getElementById(elementId || 'toolbox');
+ colors = root.querySelector('#colors');
+ for(var i = 0; i < size; i++) {
+ colors.appendChild(Dom.make('option', {class: 'color' + i}));
}
- colorPicker.element.addEventListener('click', function() {
- colorPicker.element.classList.toggle('open');
+ colors.addEventListener('change', function() {
+ colors.className = color();
});
- colorPicker.element.children[0].classList.add('current');
+ tool = root.querySelector('#tool');
}
-function colorBox(i) {
- return {
- 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 tool() {
+ return tool.value;
}
-function currentColor() {
- return colorPicker.current;
+function color() {
+ return 'color' + colors.selectedIndex;
}