-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
- Record
- No record has been fetched yet
+
+ Pick a record
+ Select the signatures that should be included in the random selection.
+
+
+
+
+
+
+ Record
+ No record has been fetched yet
+
+
-
+
diff --git a/src/main/js/index.js b/src/main/js/index.js
index 7869b19..a6928db 100644
--- a/src/main/js/index.js
+++ b/src/main/js/index.js
@@ -1,9 +1,12 @@
// noinspection JSUnresolvedVariable
-const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
+const {$, $a, doAfterLoad} = window.fwdekker;
+/**
+ * The key to store the selected signatures under in local storage.
+ * @type {string}
+ */
const storageKey = "/tools/random-fo76//selected-signatures";
-const signatureColCount = 8;
/**
@@ -34,7 +37,7 @@ const fetchFromApi = (query, callback, handle) => {
const getSelectedSignatures = () => {
const signatures = [];
- const selectedCheckboxes = document.querySelectorAll("#signatures input:checked");
+ const selectedCheckboxes = $a("#signatures input:checked");
for (let i = 0; i < selectedCheckboxes.length; i++) {
const selectedCheckbox = selectedCheckboxes[i];
signatures.push(selectedCheckbox.value);
@@ -49,7 +52,7 @@ const getSelectedSignatures = () => {
* @param signatures the array of signatures to select
*/
const setSelectedSignatures = signatures => {
- const checkboxes = document.querySelectorAll("#signatures input");
+ const checkboxes = $a("#signatures input");
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = false;
@@ -63,11 +66,11 @@ const setSelectedSignatures = signatures => {
* Selects all signatures.
*/
const setAllSignatures = checked => {
- const checkboxes = document.querySelectorAll("#signatures input");
+ const checkboxes = $a("#signatures input");
for (let i = 0; i < checkboxes.length; i++)
- checkboxes[i].checked = checked;
- saveSelectedSignaturesToStorage();
+ checkboxes[i].checked = checked; // Does not invoke callback
+ saveSelectedSignaturesToStorage();
updateSignatureToggle();
};
@@ -76,11 +79,7 @@ const setAllSignatures = checked => {
*/
const loadSelectedSignaturesFromStorage = () => {
const item = localStorage.getItem(storageKey);
- let signatures;
- if (item === null)
- signatures = [];
- else
- signatures = item.split(",");
+ const signatures = (item == null || item.trim() === "") ? [] : item.split(",");
setSelectedSignatures(signatures);
};
@@ -94,9 +93,9 @@ const saveSelectedSignaturesToStorage = () => localStorage.setItem(storageKey, g
* Updates the button used to toggle all signatures on or off.
*/
const updateSignatureToggle = () => {
- const signatureToggle = $("#signatureToggle");
+ const signatureToggle = $("#signature-toggle");
- if (getSelectedSignatures().length === document.querySelectorAll("#signatures input").length) {
+ if (getSelectedSignatures().length === $a("#signatures input").length) {
signatureToggle.innerHTML = "Deselect all signatures";
signatureToggle.addEventListener("click", () => setAllSignatures(false));
} else {
@@ -115,25 +114,10 @@ const createSignatureButtons = signatures => {
const form = $("#signatures");
form.innerHTML = "";
- let row;
for (let i = 0; i < signatures.length; i++) {
const signature = signatures[i];
- if (i % signatureColCount === 0) {
- if (row !== undefined)
- form.appendChild(row);
-
- row = document.createElement("div");
- row.className = "row";
- }
-
- const col = document.createElement("div");
- col.className = "column";
-
- const label = document.createElement("label");
- label.htmlFor = `signature-${signature}`;
- label.innerHTML = signature;
- col.appendChild(label);
+ const cell = document.createElement("div");
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
@@ -144,12 +128,15 @@ const createSignatureButtons = signatures => {
updateSignatureToggle();
saveSelectedSignaturesToStorage();
});
- col.appendChild(checkbox);
+ cell.appendChild(checkbox);
- row.appendChild(col);
+ const label = document.createElement("label");
+ label.htmlFor = `signature-${signature}`;
+ label.innerHTML = signature;
+ cell.appendChild(label);
+
+ form.appendChild(cell);
}
- if (row !== undefined)
- form.appendChild(row);
};
/**
@@ -165,37 +152,29 @@ const showRecord = (record) => {
};
-// Apply template
-doAfterLoad(() => {
- $("#nav").appendChild(nav("/Tools/Random FO76/"));
- $("#header").appendChild(header({
- title: "Random Fallout 76 record",
- description: "" +
- "Retrieve a random record from the
Fallout 76 game files using " +
- "
⎋ my data dumps"
- }));
- $("#footer").appendChild(footer({
- vcsURL: "https://git.fwdekker.com/tools/random-fo76/",
- version: "v%%VERSION_NUMBER%%"
- }));
- $("main").classList.remove("hidden");
-});
-
// Load page from API
doAfterLoad(() => {
+ const gameVersion = $("#game-version");
+ const dumpsVersion = $("#dumps-version");
+
fetchFromApi("action=get-meta",
meta => {
- $("#gameVersion").innerHTML = meta["game_version"];
- $("#dumpsVersion").innerHTML = meta["dumps_version"];
+ gameVersion.innerHTML = meta["game_version"];
+ gameVersion.removeAttribute("aria-busy");
+ dumpsVersion.innerHTML = meta["dumps_version"];
+ dumpsVersion.removeAttribute("aria-busy");
},
() => {
- $("#gameVersion").innerHTML = "Error";
- $("#dumpsVersion").innerHTML = "Error";
+ gameVersion.innerHTML = "Error";
+ gameVersion.removeAttribute("aria-busy");
+ dumpsVersion.innerHTML = "Error";
+ dumpsVersion.removeAttribute("aria-busy");
}
);
fetchFromApi("action=list-signatures",
signatures => {
+ $("#signatures").removeAttribute("aria-busy");
createSignatureButtons(signatures);
loadSelectedSignaturesFromStorage();
},