405 lines
12 KiB
JavaScript
405 lines
12 KiB
JavaScript
import {deserializeTable, serializeTable, calculateColumnLength} from "./tables.mjs";
|
|
|
|
let createDialog = document.querySelector("#create-dialog");
|
|
let loadDialog = document.querySelector("#load-dialog");
|
|
|
|
let itemContextMenu = document.querySelector("#item-context-menu");
|
|
let deleteRow = itemContextMenu.querySelector("#delete-row");
|
|
let deleteColumn = itemContextMenu.querySelector("#delete-column");
|
|
let insertRowAbove = itemContextMenu.querySelector("#insert-row-above");
|
|
let insertRowBelow = itemContextMenu.querySelector("#insert-row-below");
|
|
let insertColumnLeft = itemContextMenu.querySelector("#insert-column-left");
|
|
let insertColumnRight = itemContextMenu.querySelector("#insert-column-right");
|
|
|
|
let output = document.querySelector("#output");
|
|
let tableElement = document.querySelector("table");
|
|
let table = {
|
|
columns: [
|
|
{text: "ABC", leftAligned: false, rightAligned: false},
|
|
{text: "DEF", leftAligned: false, rightAligned: false},
|
|
{text: "GHI", leftAligned: false, rightAligned: false}
|
|
],
|
|
rows: [
|
|
["1", "2", "3"],
|
|
["4", "5", "6"],
|
|
["7", "8", "9"]
|
|
]
|
|
};
|
|
|
|
|
|
|
|
Array.prototype.insert = function(index, item) {
|
|
this.splice(index, 0, item);
|
|
};
|
|
|
|
Array.prototype.remove = function(index) {
|
|
this.splice(index, 1);
|
|
};
|
|
|
|
Node.prototype.insertAfter = function(newNode, referenceNode) {
|
|
this.insertBefore(newNode, referenceNode?.nextSibling);
|
|
};
|
|
|
|
NodeList.prototype.indexOf = function(searchElement) {
|
|
for (let [index, element] of this.entries()) {
|
|
if (element === searchElement) {
|
|
return index;
|
|
}
|
|
}
|
|
return -1;
|
|
};
|
|
|
|
function findTableIndices(input) {
|
|
let index = tableElement.querySelectorAll("input[type=text]").indexOf(input);
|
|
let columnIndex = index % table.columns.length;
|
|
let rowIndex = -1;
|
|
|
|
if (index >= table.columns.length) {
|
|
rowIndex = Math.floor(index / table.columns.length - 1);
|
|
}
|
|
|
|
return {columnIndex, rowIndex};
|
|
}
|
|
|
|
function updateItemAlignment(input, column) {
|
|
input.classList.remove("left");
|
|
input.classList.remove("right");
|
|
if (column.leftAligned) {
|
|
input.classList.add("left");
|
|
}
|
|
if (column.rightAligned) {
|
|
input.classList.add("right");
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function createItemElement(item, column) {
|
|
let input = document.createElement("input");
|
|
input.type = "text";
|
|
input.size = column.maxLength;
|
|
input.value = item;
|
|
if (column.leftAligned) {
|
|
input.classList.add("left");
|
|
}
|
|
if (column.rightAligned) {
|
|
input.classList.add("right");
|
|
}
|
|
return input;
|
|
}
|
|
|
|
function createRowElement(row, isHeader) {
|
|
let tr = document.createElement(isHeader ? "th" : "tr");
|
|
|
|
for (let i = 0; i < row.length; i++) {
|
|
let td = document.createElement("td");
|
|
td.appendChild(createItemElement(row[i], table.columns[i]));
|
|
tr.appendChild(td);
|
|
}
|
|
|
|
return tr;
|
|
}
|
|
|
|
function reloadTable() {
|
|
for (let i = 0; i < table.columns.length; i++) {
|
|
table.columns[i].maxLength = calculateColumnLength(table.columns[i], table.rows, i);
|
|
}
|
|
|
|
while (tableElement.lastChild) {
|
|
tableElement.removeChild(tableElement.lastChild);
|
|
}
|
|
|
|
let columnRow = [];
|
|
for (let column of table.columns) {
|
|
columnRow.push(column.text);
|
|
}
|
|
tableElement.appendChild(createRowElement(columnRow, true));
|
|
|
|
for (let row of table.rows) {
|
|
tableElement.appendChild(createRowElement(row, false));
|
|
}
|
|
|
|
output.value = serializeTable(table);
|
|
}
|
|
|
|
|
|
|
|
createDialog.addEventListener("input", function(event) {
|
|
if (event.target.value === "") {
|
|
event.target.setCustomValidity("Please enter a value");
|
|
} else {
|
|
event.target.setCustomValidity("");
|
|
}
|
|
|
|
event.target.checkValidity();
|
|
});
|
|
|
|
createDialog.addEventListener("submit", function() {
|
|
let columns = createDialog.querySelector("#cols").valueAsNumber;
|
|
let rows = createDialog.querySelector("#rows").valueAsNumber;
|
|
|
|
table.columns = [];
|
|
for (let i = 0; i < columns; i++) {
|
|
table.columns.push({text: "", leftAligned: false, rightAligned: false});
|
|
}
|
|
|
|
table.rows = [];
|
|
for (let i = 0; i < rows; i++) {
|
|
let row = new Array(columns);
|
|
row.fill("");
|
|
table.rows.push(row);
|
|
}
|
|
|
|
reloadTable();
|
|
});
|
|
|
|
document.querySelector("#open-create-button").addEventListener("click", function() {
|
|
createDialog.querySelector("form").reset();
|
|
createDialog.showModal();
|
|
}, {passive: true});
|
|
|
|
loadDialog.querySelector("#load-button").addEventListener("click", function() {
|
|
try {
|
|
table = deserializeTable(loadDialog.querySelector("textarea").value);
|
|
reloadTable();
|
|
loadDialog.close();
|
|
} catch (e) {
|
|
loadDialog.querySelector("#error").innerText = e.message;
|
|
}
|
|
}, {passive: true});
|
|
|
|
document.querySelector("#open-load-button").addEventListener("click", function() {
|
|
loadDialog.querySelector("textarea").value = "";
|
|
loadDialog.querySelector("#error").innerText = "";
|
|
loadDialog.showModal();
|
|
}, {passive: true});
|
|
|
|
|
|
|
|
itemContextMenu.querySelector("form").addEventListener("change", function(event) {
|
|
let leftAligned = ["left", "center"].includes(event.target.id);
|
|
let rightAligned = ["center", "right"].includes(event.target.id);
|
|
let columnIndex = parseInt(itemContextMenu.dataset.columnIndex, 10);
|
|
let column = table.columns[columnIndex];
|
|
|
|
column.leftAligned = leftAligned;
|
|
column.rightAligned = rightAligned;
|
|
|
|
updateItemAlignment(tableElement.querySelectorAll("th input[type=text]")[columnIndex], column);
|
|
for (let tr of tableElement.querySelectorAll("tr")) {
|
|
updateItemAlignment(tr.querySelectorAll("input[type=text]")[columnIndex], column);
|
|
}
|
|
|
|
output.value = serializeTable(table);
|
|
});
|
|
|
|
deleteRow.addEventListener("click", function() {
|
|
let rowIndex = parseInt(itemContextMenu.dataset.rowIndex, 10);
|
|
|
|
table.rows.remove(rowIndex);
|
|
tableElement.querySelectorAll("tr")[rowIndex].remove();
|
|
|
|
output.value = serializeTable(table);
|
|
itemContextMenu.close();
|
|
}, {passive: true});
|
|
|
|
deleteColumn.addEventListener("click", function() {
|
|
let columnIndex = parseInt(itemContextMenu.dataset.columnIndex, 10);
|
|
|
|
table.columns.remove(columnIndex);
|
|
for (let row of table.rows) {
|
|
row.remove(columnIndex);
|
|
}
|
|
|
|
for (let tr of tableElement.querySelectorAll("th, tr")) {
|
|
tr.querySelectorAll("td")[columnIndex].remove();
|
|
}
|
|
|
|
output.value = serializeTable(table);
|
|
itemContextMenu.close();
|
|
}, {passive: true});
|
|
|
|
insertRowAbove.addEventListener("click", function() {
|
|
let rowIndex = parseInt(itemContextMenu.dataset.rowIndex, 10);
|
|
|
|
let newRow = new Array(table.columns.length);
|
|
newRow.fill("");
|
|
table.rows.insert(rowIndex, newRow);
|
|
|
|
tableElement.insertBefore(createRowElement(newRow, false), tableElement.querySelectorAll("tr")[rowIndex]);
|
|
|
|
output.value = serializeTable(table);
|
|
itemContextMenu.close();
|
|
}, {passive: true});
|
|
|
|
insertRowBelow.addEventListener("click", function() {
|
|
let rowIndex = parseInt(itemContextMenu.dataset.rowIndex, 10);
|
|
|
|
let newRow = new Array(table.columns.length);
|
|
newRow.fill("");
|
|
table.rows.insert(rowIndex + 1, newRow);
|
|
|
|
let rowElement = createRowElement(newRow, false);
|
|
let referenceNode = rowIndex >= 0
|
|
? tableElement.querySelectorAll("tr")[rowIndex]
|
|
: tableElement.querySelector("th");
|
|
tableElement.insertAfter(rowElement, referenceNode);
|
|
|
|
output.value = serializeTable(table);
|
|
itemContextMenu.close();
|
|
}, {passive: true});
|
|
|
|
insertColumnLeft.addEventListener("click", function() {
|
|
let columnIndex = parseInt(itemContextMenu.dataset.columnIndex, 10);
|
|
|
|
let column = {
|
|
text: "",
|
|
leftAligned: false,
|
|
rightAligned: false,
|
|
maxLength: 3
|
|
};
|
|
table.columns.insert(columnIndex, column);
|
|
for (let row of table.rows) {
|
|
row.insert(columnIndex, "");
|
|
}
|
|
|
|
let td = document.createElement("td");
|
|
td.appendChild(createItemElement("", column));
|
|
|
|
let th = tableElement.querySelector("th");
|
|
for (let tr of tableElement.querySelectorAll("th, tr")) {
|
|
tr.insertBefore(td.cloneNode(true), tr.querySelectorAll("td")[columnIndex]);
|
|
}
|
|
|
|
output.value = serializeTable(table);
|
|
itemContextMenu.close();
|
|
}, {passive: true});
|
|
|
|
insertColumnRight.addEventListener("click", function() {
|
|
let columnIndex = parseInt(itemContextMenu.dataset.columnIndex, 10);
|
|
|
|
let column = {
|
|
text: "",
|
|
leftAligned: false,
|
|
rightAligned: false,
|
|
maxLength: 3
|
|
};
|
|
table.columns.insert(columnIndex + 1, column);
|
|
for (let row of table.rows) {
|
|
row.insert(columnIndex + 1, "");
|
|
}
|
|
|
|
let td = document.createElement("td");
|
|
td.appendChild(createItemElement("", column));
|
|
|
|
let th = tableElement.querySelector("th");
|
|
for (let tr of tableElement.querySelectorAll("th, tr")) {
|
|
tr.insertAfter(td.cloneNode(true), tr.querySelectorAll("td")[columnIndex]);
|
|
}
|
|
|
|
output.value = serializeTable(table);
|
|
itemContextMenu.close();
|
|
}, {passive: true});
|
|
|
|
|
|
|
|
tableElement.addEventListener("input", function(event) {
|
|
let {columnIndex, rowIndex} = findTableIndices(event.target);
|
|
if (rowIndex < 0) {
|
|
// is modifying a header
|
|
table.columns[columnIndex].text = event.target.value;
|
|
} else {
|
|
// is modifying a row
|
|
table.rows[rowIndex][columnIndex] = event.target.value;
|
|
}
|
|
|
|
output.value = serializeTable(table);
|
|
|
|
table.columns[columnIndex].maxLength = calculateColumnLength(table.columns[columnIndex], table.rows, columnIndex);
|
|
for (let tr of tableElement.querySelectorAll("th, tr")) {
|
|
tr.querySelectorAll("input[type=text]")[columnIndex].size = table.columns[columnIndex].maxLength;
|
|
}
|
|
});
|
|
|
|
tableElement.addEventListener("contextmenu", function(event) {
|
|
if (event.shiftKey || event.target.localName !== "input") {
|
|
return;
|
|
}
|
|
|
|
let {columnIndex, rowIndex} = findTableIndices(event.target);
|
|
itemContextMenu.dataset.columnIndex = columnIndex;
|
|
itemContextMenu.dataset.rowIndex = rowIndex;
|
|
itemContextMenu.style.margin = 0;
|
|
itemContextMenu.style.top = itemContextMenu.style.left = "0px";
|
|
itemContextMenu.showModal();
|
|
|
|
let rect = itemContextMenu.getBoundingClientRect();
|
|
let top = event.clientY;
|
|
let left = event.clientX;
|
|
|
|
if (top + rect.height > window.innerHeight) {
|
|
top = window.innerHeight - rect.height;
|
|
}
|
|
if (left + rect.width > window.innerWidth) {
|
|
left = window.innerWidth - rect.width;
|
|
}
|
|
itemContextMenu.style.margin = 0;
|
|
itemContextMenu.style.top = `${top}px`;
|
|
itemContextMenu.style.left = `${left}px`;
|
|
|
|
let column = table.columns[columnIndex];
|
|
if (column.leftAligned && column.rightAligned) {
|
|
itemContextMenu.querySelector("#center").checked = true;
|
|
} else if (column.leftAligned) {
|
|
itemContextMenu.querySelector("#left").checked = true;
|
|
} else if (column.rightAligned) {
|
|
itemContextMenu.querySelector("#right").checked = true;
|
|
} else {
|
|
itemContextMenu.querySelector("#none").checked = true;
|
|
}
|
|
|
|
deleteRow.disabled = event.target.closest("th") !== null;
|
|
deleteColumn.disabled = table.columns.length < 2;
|
|
insertRowAbove.disabled = event.target.closest("th") !== null;
|
|
|
|
event.preventDefault();
|
|
});
|
|
|
|
|
|
|
|
document.querySelector("#copy-to-clipboard").addEventListener("click", function() {
|
|
output.select();
|
|
navigator.clipboard.writeText(output.value).then(
|
|
function() {
|
|
// success
|
|
},
|
|
function(reason) {
|
|
// TODO: make visible to user
|
|
console.error(`Failed to copy to clipboard: ${reason}`);
|
|
}
|
|
);
|
|
}, {passive: true});
|
|
|
|
|
|
|
|
window.addEventListener("click", function(event) {
|
|
if (event.target.localName !== "dialog") {
|
|
return;
|
|
}
|
|
|
|
let rect = event.target.getBoundingClientRect();
|
|
if (rect.top <= event.clientY && rect.left <= event.clientX && rect.bottom >= event.clientY && rect.right >= event.clientX) {
|
|
return;
|
|
}
|
|
event.target.close();
|
|
}, {passive: true});
|
|
|
|
for (let cancelButton of document.querySelectorAll("dialog #cancel-button")) {
|
|
cancelButton.addEventListener("click", function(event) {
|
|
event.preventDefault();
|
|
event.target.closest("dialog").close();
|
|
});
|
|
}
|
|
|
|
reloadTable();
|