55 lines
1.1 KiB
JavaScript
55 lines
1.1 KiB
JavaScript
import * as Dom from UnitJS.Dom;
|
|
|
|
var size = 8;
|
|
var currentColor = null;
|
|
var tBody = Dom.make('tbody');
|
|
|
|
return {
|
|
init: init
|
|
}
|
|
|
|
function init(elementId) {
|
|
var gridElement = document.getElementById(elementId || 'grid');
|
|
gridElement.appendChild(Dom.make('thead', {}, [
|
|
makeRow({tag: 'th', attributes: headerAttributes})
|
|
]));
|
|
for(var row = 0; row < size; row++) {
|
|
tBody.appendChild(makeRow({tag: 'td', attributes: bodyAttributes}));
|
|
}
|
|
gridElement.appendChild(tBody);
|
|
}
|
|
|
|
function makeRow(config) {
|
|
var cells = [];
|
|
for(var column = 0; column < size; column++) {
|
|
cells.push(Dom.make(config.tag, config.attributes(column)));
|
|
}
|
|
return Dom.make('tr', {}, cells);
|
|
}
|
|
|
|
function headerAttributes(i) {
|
|
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')
|
|
);
|
|
}
|
|
}
|
|
};
|
|
}
|