blankie
/
mdtabeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add "Create table"

This commit is contained in:
blankie 2023-10-20 08:58:01 +11:00
parent 02e72fe8ac
commit 7ba6b9f6ad
Signed by: blankie
GPG Key ID: CC15FC822C7F61F5
3 changed files with 55 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/index.html
View File

@ -9,18 +9,34 @@
<body> <body>
<noscript><p class="left right">Javascript is required because the closest non-JS alternative is doing everything server-side, and I do not want to bother with that</p></noscript> <noscript><p class="left right">Javascript is required because the closest non-JS alternative is doing everything server-side, and I do not want to bother with that</p></noscript>
<dialog id="create-dialog">
<h3>Create table</h3>
<form method="dialog">
<label>
Columns:
<input type="number" id="cols" min="1" value="3" />
</label>
<br>
<label>
Rows:
<input type="number" id="rows" min="0" value="3" />
</label>
<hr>
<input type="submit" value="Create" />
<button id="cancel-button">Cancel</button>
</form>
</dialog>
<button id="open-create-button">Create table</button>
<dialog id="load-dialog"> <dialog id="load-dialog">
<h3>Load table</h3> <h3>Load table</h3>
<span id="error"></span> <span id="error"></span>
<textarea autofocus></textarea> <textarea autofocus></textarea>
<hr> <hr>
<div class="buttons"> <button id="load-button">Load table</button>
<button id="load-button">Load table</button> <button id="cancel-button">Close</button>
<form method="dialog">
<button>Close</button>
</form>
</div>
</dialog> </dialog>
<button id="open-load-button">Load table</button> <button id="open-load-button">Load table</button>

32
public/main.mjs
View File

@ -1,5 +1,6 @@
import {deserializeTable, serializeTable, calculateColumnLength} from "./tables.mjs"; import {deserializeTable, serializeTable, calculateColumnLength} from "./tables.mjs";
let createDialog = document.querySelector("#create-dialog");
let loadDialog = document.querySelector("#load-dialog"); let loadDialog = document.querySelector("#load-dialog");
let itemContextMenu = document.querySelector("#item-context-menu"); let itemContextMenu = document.querySelector("#item-context-menu");
@ -123,6 +124,30 @@ function reloadTable() {
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() { loadDialog.querySelector("#load-button").addEventListener("click", function() {
try { try {
table = deserializeTable(loadDialog.querySelector("textarea").value); table = deserializeTable(loadDialog.querySelector("textarea").value);
@ -359,4 +384,11 @@ window.addEventListener("click", function(event) {
event.target.close(); event.target.close();
}, {passive: true}); }, {passive: true});
for (let cancelButton of document.querySelectorAll("dialog #cancel-button")) {
cancelButton.addEventListener("click", function(event) {
event.preventDefault();
event.target.closest("dialog").close();
});
}
reloadTable(); reloadTable();

5
public/style.css
View File

@ -29,7 +29,7 @@ textarea {
text-align: center; text-align: center;
} }
#load-dialog h3 { dialog h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
@ -40,9 +40,6 @@ textarea {
width: 80vw; width: 80vw;
height: 75vh; height: 75vh;
} }
#load-dialog .buttons {
text-align: right;
}
#load-dialog form { #load-dialog form {
display: inline; display: inline;
} }