Update UI

This commit is contained in:
Foxster
2023-12-15 19:52:23 -08:00
parent e0116394d4
commit c6630a2c0b
16 changed files with 268 additions and 97 deletions

View File

@@ -7,7 +7,7 @@
//
import { urlSearchParams, sourceURL } from "./common/modules/constants.js";
import { isValidHTTPURL, open } from "./common/modules/utilities.js";
import { isValidHTTPURL, open, formatVersionDate } from "./common/modules/utilities.js";
// import sources from "./common/assets/sources.json" assert { type: "json" }; // Doesn't work in Safari
// const { default: sources } = await import("./common/assets/sources.json", {assert: { type: "json" } }); // Broken on Safari 17.2
import { sources } from "./common/modules/constants.js";
@@ -22,7 +22,8 @@ import { sources } from "./common/modules/constants.js";
const sourceURL = textField.value;
if (!isValidHTTPURL(sourceURL))
alert("Invalid HTTP URL.");
else open(`./view/?source=${sourceURL}`);
// else open(`./view/?source=${sourceURL}`);
else insertSource(sourceURL, "afterbegin", true);
};
// If source provided
@@ -55,16 +56,55 @@ import { sources } from "./common/modules/constants.js";
goButton.addEventListener("click", viewSource);
async function insertSource(url) {
async function insertSource(url, position = "beforeend", flag = false) {
fetch(url).then(data => data.json()).then(source => {
document.getElementById("source-code").insertAdjacentHTML("beforebegin",`
<a href="./view/?source=${url}">
<div class="suggestion">
<i class="bi bi-search"></i>
${source.name}
let lastUpdated = new Date("1970-01-01");
let appCount = 0;
let altSourceIcon = "./common/assets/img/generic_app.jpeg";
let altSourceTintColor = "var(--app-tint-color);";
for (const app of source.apps) {
if (app.beta || app.patreon?.hidden) return;
let appVersionDate = new Date(app.versions ? app.versions[0].date : app.versionDate);
if (appVersionDate > lastUpdated) {
lastUpdated = appVersionDate;
altSourceIcon = app.iconURL;
altSourceTintColor = app.tintColor;
}
appCount++;
}
document.getElementById("suggestions").insertAdjacentHTML(position ,`
<a href="./view/?source=${url}">
<div class="source" style="background-color: #${(source.tintColor ?? altSourceTintColor).replaceAll("#", "")}; ${flag ? "margin-bottom: 0.75rem;" : ""}">
<img src="${source.iconURL ?? altSourceIcon ?? "./common/assets/img/generic_app.jpeg"}" alt="source-icon">
<div class="right">
<div class="text">
<p class="title">${source.name}</p>
<p class="subtitle">Last updated: ${lastUpdated.toISOString().split("T")[0]}</p>
</div>
</a>`
);
<div class="app-count">
${appCount}
</div>
</div>
</div>
</a>
`);
});
}
window.onscroll = e => {
const title = document.querySelector("h1");
const navBar = document.getElementById("nav-bar");
const navBarTitle = navBar.querySelector("#title");
console.log(title.getBoundingClientRect().y);
if (title.getBoundingClientRect().y < 20) {
navBar.classList.remove("hide-border");
navBarTitle.classList.remove("hidden");
} else {
navBar.classList.add("hide-border");
navBarTitle.classList.add("hidden");
}
}
})();