-
Notifications
You must be signed in to change notification settings - Fork 0
/
grid.js
80 lines (69 loc) · 2.3 KB
/
grid.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
const ROWS = 100;
const COLUMNS = 26;
const COLUMN_NAME_STRING = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const ADDRESS_BAR = document.querySelector(".cell-address-input");
const formulaBar = document.querySelector(".formula-input");
(function fillAddressCols() {
const addressColumnContainer = document.querySelector(
".address-col-container"
);
for (let i = 0; i < ROWS; i++) {
const nameDiv = createNamingCell(`${i + 1}`, "address-col");
// appendChild is used to add a node as the last child to an element
addressColumnContainer.appendChild(nameDiv);
}
})();
(function fillAddressRows() {
const addressRowContainer = document.querySelector(".address-row-container");
for (let i = 0; i < COLUMNS; i++) {
const nameDiv = createNamingCell(
COLUMN_NAME_STRING.charAt(i),
"address-row"
);
addressRowContainer.appendChild(nameDiv);
}
})();
(function fillCells() {
const cellsContainer = document.querySelector(".cells-container");
for (let i = 0; i < ROWS; i++) {
const rowCont = document.createElement("div");
rowCont.setAttribute("class", "cell-row-container");
for (let j = 0; j < COLUMNS; j++) {
const dataCell = createNamingCell(null, "cell");
// adding below data attributes to identify cells easily
dataCell.dataset.row = i;
dataCell.dataset.col = j;
dataCell.contentEditable = true; // This makes the cell editable
addAddressListener(dataCell, i, j);
rowCont.appendChild(dataCell);
}
cellsContainer.appendChild(rowCont);
}
})();
autoClickFirstCell();
function createNamingCell(text, className) {
const nameDiv = document.createElement("div");
if (className) {
nameDiv.setAttribute("class", className);
}
if (text) {
const textNode = document.createTextNode(text);
nameDiv.appendChild(textNode);
}
return nameDiv;
}
function addAddressListener(cell, i, j) {
// this listener is attached to each cell, so that the cell address gets filled up
//when ever we select a cell
cell.addEventListener("click", function () {
const rowId = i + 1;
const colId = COLUMN_NAME_STRING.charAt(j);
ADDRESS_BAR.value = `${rowId}${colId}`;
});
}
function autoClickFirstCell() {
//auto-click first cell via DOM
const firstCell = document.querySelector(".cell");
firstCell.click();
firstCell.focus();
}