Fix handling cells with newlines

This commit is contained in:
blankie 2023-11-06 15:08:57 +11:00
parent a1673f0805
commit 450d3d37b8
Signed by: blankie
GPG Key ID: CC15FC822C7F61F5
2 changed files with 25 additions and 20 deletions

View File

@ -49,8 +49,8 @@ NodeList.prototype.indexOf = function(searchElement) {
return -1; return -1;
}; };
function findTableIndices(textarea) { function findTableIndices(input) {
let index = tableElement.querySelectorAll("textarea").indexOf(textarea); let index = tableElement.querySelectorAll("input[type=text]").indexOf(input);
let columnIndex = index % table.columns.length; let columnIndex = index % table.columns.length;
let rowIndex = -1; let rowIndex = -1;
@ -61,31 +61,31 @@ function findTableIndices(textarea) {
return {columnIndex, rowIndex}; return {columnIndex, rowIndex};
} }
function updateItemAlignment(textarea, column) { function updateItemAlignment(input, column) {
textarea.classList.remove("left"); input.classList.remove("left");
textarea.classList.remove("right"); input.classList.remove("right");
if (column.leftAligned) { if (column.leftAligned) {
textarea.classList.add("left"); input.classList.add("left");
} }
if (column.rightAligned) { if (column.rightAligned) {
textarea.classList.add("right"); input.classList.add("right");
} }
} }
function createItemElement(item, column) { function createItemElement(item, column) {
let textarea = document.createElement("textarea"); let input = document.createElement("input");
textarea.rows = 1; input.type = "text";
textarea.cols = column.maxLength; input.size = column.maxLength;
textarea.value = item; input.value = item;
if (column.leftAligned) { if (column.leftAligned) {
textarea.classList.add("left"); input.classList.add("left");
} }
if (column.rightAligned) { if (column.rightAligned) {
textarea.classList.add("right"); input.classList.add("right");
} }
return textarea; return input;
} }
function createRowElement(row, isHeader) { function createRowElement(row, isHeader) {
@ -185,9 +185,9 @@ itemContextMenu.querySelector("form").addEventListener("change", function(event)
column.leftAligned = leftAligned; column.leftAligned = leftAligned;
column.rightAligned = rightAligned; column.rightAligned = rightAligned;
updateItemAlignment(tableElement.querySelectorAll("th textarea")[columnIndex], column); updateItemAlignment(tableElement.querySelectorAll("th input[type=text]")[columnIndex], column);
for (let tr of tableElement.querySelectorAll("tr")) { for (let tr of tableElement.querySelectorAll("tr")) {
updateItemAlignment(tr.querySelectorAll("textarea")[columnIndex], column); updateItemAlignment(tr.querySelectorAll("input[type=text]")[columnIndex], column);
} }
output.value = serializeTable(table); output.value = serializeTable(table);
@ -316,13 +316,13 @@ tableElement.addEventListener("input", function(event) {
output.value = serializeTable(table); output.value = serializeTable(table);
table.columns[columnIndex].maxLength = calculateColumnLength(table.columns[columnIndex], table.rows, columnIndex); table.columns[columnIndex].maxLength = calculateColumnLength(table.columns[columnIndex], table.rows, columnIndex);
for (let rowElement of tableElement.querySelectorAll("th, tr")) { for (let tr of tableElement.querySelectorAll("th, tr")) {
rowElement.children[columnIndex].querySelector("textarea").cols = table.columns[columnIndex].maxLength; tr.querySelectorAll("input[type=text]")[columnIndex].size = table.columns[columnIndex].maxLength;
} }
}); });
tableElement.addEventListener("contextmenu", function(event) { tableElement.addEventListener("contextmenu", function(event) {
if (event.shiftKey || event.target.localName !== "textarea") { if (event.shiftKey || event.target.localName !== "input") {
return; return;
} }

View File

@ -9,6 +9,11 @@ table {
textarea { textarea {
white-space: pre; white-space: pre;
} }
/* make text boxes look like textareas */
input[type=text] {
font-size: medium;
font-family: monospace;
}
th { th {
padding: 0; padding: 0;
@ -56,7 +61,7 @@ dialog h3 {
overflow-x: scroll; overflow-x: scroll;
scrollbar-width: thin; scrollbar-width: thin;
} }
th textarea { th input[type=text] {
font-weight: bold; font-weight: bold;
} }