mmk2410/SpaceApper
mmk2410/SpaceApper
1
0
Fork 0
Code Issues 1 Pull requests Releases 2 Wiki Activity

Initial commit

Browse source
This commit is contained in:
Marcel Kapfer 2024-07-28 23:22:45 +02:00
commit 3454be6cf7
Signed by: mmk2410
GPG key ID: CADE6F0C09F21B09
12 changed files with 302 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

64
options/options.css Normal file
View file

@ -0,0 +1,64 @@
html {
font-family: sans-serif;
}
button {
background-color: #e7e7e7;
border-radius: 5px;
border: none;
padding: 5px 10px;
box-shadow: none;
}
.btn-primary {
color: #fff;
background-color: #7a01d0;
}
#spaces {
width: 100%;
border-collapse: collapse;
}
#spaces td {
border-bottom: 1px solid #999;
border-top: 1px solid #999;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
#spaces td:first-of-type {
border-left: none;
}
#spaces td:last-of-type {
border-right: none;
}
#spaces thead td {
font-weight: bold;
padding: 10px;
}
#spaces tbody input {
border: none;
height: 100%;
width: 100%;
font-size: inherit;
padding: 10px;
box-sizing: border-box;
}
#spaces tbody button {
margin: 10px;
}
#actions {
width: 100%;
margin: 10px 0;
text-align: right;
}
#actions button:first-of-type {
margin-right: 5px;
}

31
options/options.html Normal file
View file

@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="options.css" />
</head>
<body>
<form>
<table id="spaces">
<thead>
<tr>
<td>Name</td>
<td>URL</td>
<td>Icon URL</td>
<td></td>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="actions">
<button id="add" type="button">Add</button>
<button type="submit" class="btn-primary">Save</button>
</div>
</form>
<script type="module" src="options.js"></script>
</body>
</html>

81
options/options.js Normal file
View file

@ -0,0 +1,81 @@
import { createSpaces, removeSpaces, hashSpaceName } from "../scripts/spaces.mjs";
import { getApps, storeApps } from "../scripts/storage.mjs";
function buildInputRow(name, value) {
const td = document.createElement("td");
const input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", name);
input.setAttribute("value", value);
td.appendChild(input);
return td;
}
function buildSpaceElement(app) {
const tr = document.createElement("tr");
tr.className = "space";
tr.appendChild(buildInputRow("title", app.title));
tr.appendChild(buildInputRow("url", app.url));
tr.appendChild(buildInputRow("icon", app.icon));
const removeTd = document.createElement("td");
const removeButton = document.createElement("button");
removeButton.setAttribute("type", "button");
removeButton.addEventListener("click", removeSpace);
removeButton.textContent = "Remove";
removeTd.appendChild(removeButton);
tr.appendChild(removeTd);
return tr;
}
async function setupPage() {
const apps = await getApps();
const spaces = document.querySelector("#spaces > tbody");
apps.forEach((app) => {
spaces.appendChild(buildSpaceElement(app));
});
}
function addSpace() {
const spaces = document.querySelector("#spaces > tbody");
const newApp = {
title: "",
url: "",
icon: "",
};
spaces.appendChild(buildSpaceElement(newApp));
}
function removeSpace(e) {
e.target.parentElement.parentElement.remove();
}
async function saveChanges(e) {
await e.preventDefault();
const apps = [];
const spaces = Array.from(document.getElementsByClassName("space"));
spaces.forEach((space) => {
const app = {
name: hashSpaceName(space.querySelector("input[name='url']").value),
title: space.querySelector("input[name='title']").value,
url: space.querySelector("input[name='url']").value,
icon: space.querySelector("input[name='icon']").value,
};
apps.push(app);
});
await removeSpaces();
await storeApps(apps);
await createSpaces();
}
document.addEventListener("DOMContentLoaded", setupPage);
document.getElementById("add").addEventListener("click", addSpace);
document.querySelector("form").addEventListener("submit", saveChanges);