From c6c2bbbb84b606767f523dff38f4c9c27c947064 Mon Sep 17 00:00:00 2001 From: Tissevert Date: Sun, 24 Jul 2022 11:20:22 +0200 Subject: [PATCH] Start designing a proper toolbox --- css/colors.css | 31 ++++++++++++++++++++++++++++++ css/grid.css | 45 ++++++++------------------------------------ css/main.css | 4 ++++ css/toolbox.css | 28 +++++++++++++++++++++++++++ index.html | 15 ++++++++++++++- js/Grid.js | 50 +++++++++++++++++-------------------------------- js/Main.js | 6 +++++- js/Toolbox.js | 40 +++++++++++++++++++++++++++++++++++++++ 8 files changed, 147 insertions(+), 72 deletions(-) create mode 100644 css/colors.css create mode 100644 css/toolbox.css create mode 100644 js/Toolbox.js diff --git a/css/colors.css b/css/colors.css new file mode 100644 index 0000000..9f518c5 --- /dev/null +++ b/css/colors.css @@ -0,0 +1,31 @@ +.color0 { + background: #d9c7b0; +} + +.color1 { + background: #d5d5fb; +} + +.color2 { + background: #ffe6c0; +} + +.color3 { + background: #edffd3; +} + +.color4 { + background: #ffd0d0; +} + +.color5 { + background: #fcf; +} + +.color6 { + background: #adf; +} + +.color7 { + background: #fff89e; +} diff --git a/css/grid.css b/css/grid.css index 168b91e..8a5bcb5 100644 --- a/css/grid.css +++ b/css/grid.css @@ -1,48 +1,19 @@ -#grid td { +#grid { + border-collapse: collapse; background: #ddd; } -#grid td, #grid th { +#grid td { width: 2em; height: 2em; } -#grid tbody.ready td, #grid th { +#grid td { cursor: pointer; + padding: 1px; } -#grid .color0 { - background: #d9c7b0; -} - -#grid .color1 { - background: #d5d5fb; -} - -#grid .color2 { - background: #ffe6c0; -} - -#grid .color3 { - background: #edffd3; -} - -#grid .color4 { - background: #ffd0d0; -} - -#grid .color5 { - background: #fcf; -} - -#grid .color6 { - background: #adf; -} - -#grid .color7 { - background: #fff89e; -} - -#grid th.current { - border: 2px dashed #777; +#grid td:hover { + padding: 0; + border: 1px dashed #aaa; } diff --git a/css/main.css b/css/main.css index e2009d2..75d9471 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,7 @@ #mode { list-style: none; } + +body { + cursor: default; +} diff --git a/css/toolbox.css b/css/toolbox.css new file mode 100644 index 0000000..52cdaad --- /dev/null +++ b/css/toolbox.css @@ -0,0 +1,28 @@ +#toolbox, #colors { + list-style: none; + padding: 0; +} + +#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 172308b..c8393fa 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,20 @@
  • Édition
    • -
    + + diff --git a/js/Grid.js b/js/Grid.js index 54e3123..3559c6e 100644 --- a/js/Grid.js +++ b/js/Grid.js @@ -1,54 +1,38 @@ import * as Dom from UnitJS.Dom; +import currentColor from Toolbox; -var size = 8; -var currentColor = null; -var tBody = Dom.make('tbody'); +var grid = { + element: null, + data: {} +}; return { init: init -} +}; -function init(elementId) { - var gridElement = document.getElementById(elementId || 'grid'); - gridElement.appendChild(Dom.make('thead', {}, [ - makeRow({tag: 'th', attributes: headerAttributes}) - ])); +function init(size, elementId) { + grid.element = document.getElementById(elementId || 'grid'); for(var row = 0; row < size; row++) { - tBody.appendChild(makeRow({tag: 'td', attributes: bodyAttributes})); + grid.element.appendChild( + makeRow({tag: 'td', attributes: bodyAttributes, row: row, size: size}) + ); + grid.data[row] = {}; } - gridElement.appendChild(tBody); } function makeRow(config) { var cells = []; - for(var column = 0; column < size; column++) { - cells.push(Dom.make(config.tag, config.attributes(column))); + for(var column = 0; column < config.size; column++) { + cells.push(Dom.make(config.tag, config.attributes(config.row, column))); } return Dom.make('tr', {}, cells); } -function headerAttributes(i) { +function bodyAttributes(i, j) { return { - class: 'color' + i, onClick: function(e) { - if(currentColor != undefined) { - currentColor.classList.remove('current'); - } - currentColor = e.target; - currentColor.classList.add('current'); - tBody.classList.add('ready'); - } - }; -} - -function bodyAttributes(i) { - return { - onClick: function(e) { - if(currentColor != null) { - e.target.classList.toggle( - currentColor.className.replace(/.*(color\d).*/, '$1') - ); - } + grid.data[i][j] = currentColor(); + e.target.className = 'color' + grid.data[i][j]; } }; } diff --git a/js/Main.js b/js/Main.js index 9f52774..513730d 100644 --- a/js/Main.js +++ b/js/Main.js @@ -1,3 +1,7 @@ import Grid; +import Toolbox; -Grid.init(); +var size = 8; + +Grid.init(size); +Toolbox.init(size); diff --git a/js/Toolbox.js b/js/Toolbox.js new file mode 100644 index 0000000..a3c573d --- /dev/null +++ b/js/Toolbox.js @@ -0,0 +1,40 @@ +import * as Dom from UnitJS.Dom; + +var tool = 'toggle'; +var colorPicker = { + element: null, + current: 0 +}; + +return { + init: init, + currentColor: currentColor +}; + +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))); + } + colorPicker.element.addEventListener('click', function() { + colorPicker.element.classList.toggle('open'); + }); + colorPicker.element.children[0].classList.add('current'); +} + +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 currentColor() { + return colorPicker.current; +}