It's closeee...
This commit is contained in:
MotorTruck1221
parent
c1b1a9de4c
commit
833b323267
5 changed files with 173 additions and 148 deletions
|
|
@ -1,19 +1,23 @@
|
|||
<div id="parent" class="flex flex-row flex-wrap gap-4 items-center font-roboto justify-center">
|
||||
<div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
|
||||
<div class="w-full" id="main-theme">
|
||||
<img src="/classic_theme.png" alt="Classic nebula" class="aspect-[16/9] rounded-t-3xl"/>
|
||||
<div id="main-theme" class="rounded-3xl border border-text-color border-2 bg-navbar-color w-64 flex flex-col cursor-pointer">
|
||||
<div class="w-full">
|
||||
<img src="/classic_theme.png" alt="Classic nebula" class="aspect-[16/9] rounded-t-3xl" loading="eager" />
|
||||
</div>
|
||||
<div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
|
||||
Classic Nebula
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-0 h-0 visibility-none hidden"> <asset-loader /> </div>
|
||||
<div class="w-0 h-0 visibility-none hidden">
|
||||
<asset-loader />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import { SettingsVals } from "@utils/values";
|
||||
import { Elements } from "@utils/index";
|
||||
import { Marketplace } from "@utils/marketplace";
|
||||
const mp = Marketplace.getInstances().next().value as Marketplace;
|
||||
type Assets = {
|
||||
import { SettingsVals } from "@utils/values";
|
||||
|
||||
type Item = {
|
||||
description: string,
|
||||
image: string,
|
||||
package_name: string,
|
||||
|
|
@ -25,7 +29,8 @@
|
|||
type: string,
|
||||
version: string
|
||||
}
|
||||
async function getItem(item: any) {
|
||||
|
||||
const getItem = async (item: any) => {
|
||||
try {
|
||||
const res = await fetch(new URL(`/api/packages/${item}`, window.location.origin));
|
||||
const data = await res.json();
|
||||
|
|
@ -37,88 +42,108 @@
|
|||
}
|
||||
}
|
||||
|
||||
async function getAssets() {
|
||||
const items = JSON.parse(await mp.getValueFromStore(SettingsVals.marketPlace.themes)) || [];
|
||||
const promises = items.map(getItem);
|
||||
const dataArray = await Promise.all(promises);
|
||||
const accumulatedData = dataArray.filter((data) => data !== null);
|
||||
return accumulatedData;
|
||||
}
|
||||
const constructElements = async (item: Item, mainTheme: HTMLDivElement, parent: HTMLDivElement, marketplace: Marketplace) => {
|
||||
const main = document.createElement("div");
|
||||
main.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer", "border-text-color");
|
||||
main.dataset.name = item.package_name
|
||||
|
||||
const attachThemeEvent = (elem: HTMLElement, def: boolean | Assets) => {
|
||||
elem.addEventListener("click", async () => {
|
||||
if (def === true || def === false) return mp.theme({ type: "remove" })
|
||||
await mp.theme({ type: "normal", payload: def.payload, sources: { video: def.background_video, bg: def.background_image }, name: def.package_name })
|
||||
});
|
||||
};
|
||||
const click = document.createElement("div");
|
||||
click.classList.add("w-full");
|
||||
|
||||
const attachDeleteEvent = (elem: HTMLElement, mainElem: HTMLElement, parentElem: HTMLElement, asset: Assets) => {
|
||||
elem.addEventListener("click", async () => {
|
||||
await mp.uninstallTheme({ name: asset.package_name });
|
||||
await mp.theme({ type: 'remove' });
|
||||
parentElem.removeChild(mainElem);
|
||||
});
|
||||
}
|
||||
const img = document.createElement("img");
|
||||
img.classList.add("aspect-[16/9]", "rounded-t-3xl");
|
||||
img.src = `/packages/${item.package_name}/${item.image}`;
|
||||
img.alt = `${item.type}-${item.package_name}`;
|
||||
img.loading = "lazy";
|
||||
|
||||
const createElem = (asset: Assets) => {
|
||||
const parent = document.getElementById("parent");
|
||||
const mainDiv = document.createElement("div");
|
||||
mainDiv.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer");
|
||||
const info = document.createElement("div");
|
||||
info.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
|
||||
|
||||
const clickDiv = document.createElement("div");
|
||||
clickDiv.classList.add("w-full");
|
||||
attachThemeEvent(clickDiv, asset);
|
||||
const imgDiv = document.createElement("img");
|
||||
imgDiv.classList.add("aspect-[16/9]", "rounded-t-3xl");
|
||||
imgDiv.src = `/packages/${asset.package_name}/${asset.image}`;
|
||||
imgDiv.alt = `${asset.type}-${asset.title}`;
|
||||
clickDiv.appendChild(imgDiv);
|
||||
|
||||
const infoDiv = document.createElement("div");
|
||||
infoDiv.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
|
||||
const infoTitle = document.createElement("p");
|
||||
infoTitle.classList.add("text-2xl");
|
||||
infoTitle.innerHTML = asset.title;
|
||||
infoTitle.innerHTML = item.title;
|
||||
|
||||
const elemInfoMain = document.createElement("div");
|
||||
elemInfoMain.classList.add("flex", "flex-row");
|
||||
const deleteButton = document.createElement("div");
|
||||
deleteButton.classList.add("h-8", "w-8", "cursor-pointer");
|
||||
attachDeleteEvent(deleteButton, mainDiv, parent!, asset);
|
||||
//FUCK SVG's
|
||||
const deleteButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`
|
||||
deleteButton.innerHTML= deleteButtonSVG;
|
||||
elemInfoMain.appendChild(deleteButton);
|
||||
const infoInner = document.createElement("div");
|
||||
infoInner.classList.add("flex", "flex-row");
|
||||
|
||||
const openButton = document.createElement("a");
|
||||
openButton.classList.add("h-8", "w-8", "cursor-pointer");
|
||||
openButton.href = `../catalog/package/${asset.package_name}`
|
||||
const openButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`
|
||||
openButton.innerHTML = openButtonSVG;
|
||||
elemInfoMain.appendChild(openButton);
|
||||
const infoInnerDelete = document.createElement("div");
|
||||
infoInnerDelete.classList.add("h-8", "w-8", "cursor-pointer");
|
||||
// This is cursed yes. SVG's SUUUCK
|
||||
infoInnerDelete.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`;
|
||||
|
||||
infoDiv.appendChild(elemInfoMain);
|
||||
infoDiv.appendChild(infoTitle);
|
||||
const infoInnerOpen = document.createElement("a");
|
||||
infoInnerOpen.classList.add("h-8", "w-8", "cursor-pointer");
|
||||
infoInnerOpen.href = `../catalog/package/${item.package_name}`;
|
||||
infoInnerOpen.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`;
|
||||
|
||||
click.appendChild(img);
|
||||
infoInner.appendChild(infoInnerDelete);
|
||||
infoInner.appendChild(infoInnerOpen);
|
||||
info.appendChild(infoTitle);
|
||||
info.appendChild(infoInner);
|
||||
main.appendChild(click);
|
||||
main.appendChild(info);
|
||||
parent.appendChild(main);
|
||||
|
||||
mainDiv.appendChild(clickDiv);
|
||||
mainDiv.appendChild(infoDiv);
|
||||
parent?.appendChild(mainDiv);
|
||||
console.log(mainDiv);
|
||||
Elements.attachEvent(mainTheme, "click", () => {
|
||||
main.classList.remove("border", "border-2");
|
||||
mainTheme.classList.add("border", "border-2");
|
||||
marketplace.theme({ type: 'remove' });
|
||||
});
|
||||
|
||||
Elements.attachEvent(click, "click", async () => {
|
||||
mainTheme.classList.remove("border", "border-2");
|
||||
main.classList.add("border-2", "border");
|
||||
await marketplace.theme(
|
||||
{
|
||||
type: 'normal',
|
||||
payload: item.payload,
|
||||
sources: {
|
||||
video: item.background_video,
|
||||
bg: item.background_image
|
||||
},
|
||||
name: item.package_name
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
//I don't actually want this to run on every page but defining a custom component is an easy way around it.
|
||||
class AssetLoader extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
(async function() {
|
||||
const mainElem = document.getElementById("main-theme");
|
||||
try { attachThemeEvent(mainElem!, true) } catch(_) {}
|
||||
const assets = await getAssets();
|
||||
console.log(assets);
|
||||
assets.map((asset) => { createElem(asset); });
|
||||
})();
|
||||
Elements.attachEvent(infoInnerDelete, "click", async () => {
|
||||
main.classList.remove("border", "border-2");
|
||||
mainTheme.classList.add("border-2", "border");
|
||||
await marketplace.uninstallTheme({ name: item.package_name });
|
||||
parent.removeChild(main);
|
||||
await marketplace.theme({ type: 'remove' });
|
||||
});
|
||||
|
||||
const themeName = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.name);
|
||||
if (themeName !== null && main.dataset.name === themeName) {
|
||||
mainTheme.classList.remove("border-2", "border");
|
||||
main.classList.add("border-2", "border");
|
||||
}
|
||||
}
|
||||
customElements.define('asset-loader', AssetLoader);
|
||||
|
||||
const init = async () => {
|
||||
await Marketplace.ready();
|
||||
const mp = Marketplace.getInstances().next().value!;
|
||||
const els = Elements.select([
|
||||
{ type: 'id', val: 'main-theme' },
|
||||
{ type: 'id', val: 'parent' }
|
||||
]);
|
||||
const itemsJSON = JSON.parse(await mp.getValueFromStore(SettingsVals.marketPlace.themes)) || [];
|
||||
const itemPromises = itemsJSON.map(getItem);
|
||||
const itemsArray = await Promise.all(itemPromises);
|
||||
return {
|
||||
items: itemsArray.filter((data) => data !== null),
|
||||
elements: els,
|
||||
marketplace: mp
|
||||
}
|
||||
}
|
||||
|
||||
Elements.createCustomElement("asset-loader", async () => {
|
||||
const { items, elements, marketplace } = await init();
|
||||
const mainTheme = Elements.exists<HTMLDivElement>(await elements.next());
|
||||
const parentElem = Elements.exists<HTMLDivElement>(await elements.next());
|
||||
const promises = items.map(item => constructElements(item, mainTheme, parentElem, marketplace));
|
||||
await Promise.all(promises);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { Settings } from "@utils/settings";
|
||||
import { log } from "@utils/index";
|
||||
import { Marketplace } from "@utils/marketplace";
|
||||
import { SettingsVals } from "@utils/values";
|
||||
const titleText = `
|
||||
_ _ _ _ ____ _
|
||||
| \\ | | ___| |__ _ _| | __ _ / ___| ___ _ ____ _(_) ___ ___ ___
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
`;
|
||||
const info = "Hello developer or curious individual & welcome to the console! \nThere isn't a whole lot here for you unless you have run into an error.";
|
||||
const sysInfo = `In which case please include the info below when opening the issue: \n\nOS: ${navigator.platform} \nBrowser: ${navigator.userAgent} \nService workers: ${"serviceWorker" in navigator ? "Yes" : "No"}`
|
||||
const init = async () => {
|
||||
const init = async (): Promise<Marketplace> => {
|
||||
log({ type: 'normal', bg: false, prefix: false }, titleText);
|
||||
log({ type: 'normal', bg: true, prefix: false }, info);
|
||||
log({ type: 'normal', bg: true, prefix: false }, sysInfo);
|
||||
|
|
@ -24,25 +25,43 @@
|
|||
await checkProxyScripts();
|
||||
const conn = await createBareMuxConn("/baremux/worker.js");
|
||||
const sw = new SW(conn);
|
||||
new Marketplace();
|
||||
// We don't do anything with the values (they aren't even any), so we just are iterating.
|
||||
for await (const _ of Settings.initDefaults());
|
||||
const mp = new Marketplace();
|
||||
const { serviceWorker, bareMuxConn, sj } = await sw.getSWInfo();
|
||||
log({ type: 'info', bg: true, prefix: true }, `General init completed! \n\nServiceWorker: ${serviceWorker.active?.state} \nBareMuxConn: ${bareMuxConn ? 'Active': 'Not active'} \nScramjetController: ${sj ? 'Active' : 'Not active'}`);
|
||||
return mp;
|
||||
}
|
||||
const initSettings = async () => {
|
||||
|
||||
const handleTheme = async (marketplace: Marketplace) => {
|
||||
const name = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.name);
|
||||
const payload = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.payload);
|
||||
const video = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.video);
|
||||
const image = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.image);
|
||||
if (name !== null) {
|
||||
marketplace.theme({
|
||||
type: 'normal',
|
||||
name: name,
|
||||
payload: payload,
|
||||
sources: {
|
||||
video: video,
|
||||
bg: image
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const initSettings = async (marketplace: Marketplace) => {
|
||||
log({ type: 'info', bg: true, prefix: true }, "Initializing settings...");
|
||||
for await (const _ of Settings.initDefaults());
|
||||
await handleTheme(marketplace);
|
||||
log({ type: 'info', bg: true, prefix: true }, "Initialized Settings!");
|
||||
}
|
||||
|
||||
const eventHandler = new EventHandler({
|
||||
events: {
|
||||
"DOMContentLoaded": async () => {
|
||||
await init();
|
||||
await initSettings();
|
||||
},
|
||||
"astro:after-swap": (async () => {
|
||||
})
|
||||
const mp = await init();
|
||||
await initSettings(mp);
|
||||
}
|
||||
},
|
||||
logging: true
|
||||
});
|
||||
|
|
|
|||
|
|
@ -31,56 +31,9 @@ const t = useTranslations(lang);
|
|||
}}
|
||||
both={{enabled: false}}
|
||||
/>
|
||||
<SettingsCard
|
||||
title="Proxy Catalog"
|
||||
description="Whether or not to proxy the Catalog"
|
||||
input={{input: false}}
|
||||
button={{name: 'Set', id: 'setmp' }}
|
||||
select={{
|
||||
select: true,
|
||||
name: 'mp',
|
||||
options: [
|
||||
{name: 'False', value: 'false', disabled: false},
|
||||
{name: 'True', value: 'true', disabled: false}
|
||||
]
|
||||
}}
|
||||
both={{enabled: false}}
|
||||
/>
|
||||
<SettingsCard
|
||||
title="Catalog URL"
|
||||
description="Change which marketplace your using"
|
||||
input={{
|
||||
input: true,
|
||||
required: true,
|
||||
placeholder: `${origin}/api/catalog-assets`
|
||||
}}
|
||||
button={{name: 'Change', id: 'setcataloghostname' }}
|
||||
select={{select: false}}
|
||||
both={{enabled: false}}
|
||||
/>
|
||||
</SettingsSection>
|
||||
</SettingsLayout>
|
||||
<ToastWrapper client:load>
|
||||
<Toast toastProp={{
|
||||
toastType: 'success',
|
||||
text: 'Catalog is now proxied',
|
||||
class: 'mpMessage'
|
||||
}}
|
||||
client:load />
|
||||
<Toast toastProp={{
|
||||
toastType: 'success',
|
||||
text: 'Catalog URL set!',
|
||||
class: 'cataloghostnameSuccess'
|
||||
}}
|
||||
client:load />
|
||||
<Toast toastProp={{
|
||||
toastType: 'error',
|
||||
text: "Catalog doesn't exist!",
|
||||
class: 'cataloghosnameError'
|
||||
}}
|
||||
client:load/>
|
||||
</ToastWrapper>
|
||||
<script>
|
||||
<script>
|
||||
import { EventHandler } from "@utils/events";
|
||||
import { navigate } from "astro:transitions/client";
|
||||
import { defaultStore } from "@utils/storage";
|
||||
|
|
@ -95,7 +48,7 @@ const t = useTranslations(lang);
|
|||
const lang = defaultStore.getVal(SettingsVals.i18n.lang);
|
||||
const val = Elements.exists<HTMLSelectElement>(await els.next());
|
||||
const button = Elements.exists<HTMLButtonElement>(await els.next());
|
||||
val.value = lang;
|
||||
val.value = lang || "en_US";
|
||||
Elements.attachEvent(button, "click", () => {
|
||||
defaultStore.setVal(SettingsVals.i18n.lang, val.value);
|
||||
navigate(`${window.location.origin}/${val.value}/settings/misc`);
|
||||
|
|
@ -106,7 +59,7 @@ const t = useTranslations(lang);
|
|||
events: {
|
||||
"astro:page-load": handler
|
||||
},
|
||||
logging: true
|
||||
logging: false
|
||||
})
|
||||
.bind();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -74,6 +74,20 @@ class Elements {
|
|||
static attachEvent<Element extends HTMLElement, EType extends keyof HTMLElementEventMap>(item: Element, event: EType, fn: () => unknown) {
|
||||
item.addEventListener(event, fn);
|
||||
}
|
||||
|
||||
static createCustomElement(name: string, fn: () => unknown) {
|
||||
class CustomEl extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
(async () => await fn())();
|
||||
}
|
||||
}
|
||||
|
||||
if (customElements.get(name)) return log({ type: "error", bg: true, prefix: false, throw: false }, `An element with the name ${name} already exists! This WILL not work! And`);
|
||||
|
||||
log({ type: 'info', bg: false, prefix: true }, `Creating custom element with the name ${name}`);
|
||||
customElements.define(name, CustomEl);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -94,10 +94,24 @@ class Marketplace {
|
|||
static *getInstances() {
|
||||
//Marketplace.instances.forEach((val) => yield val);
|
||||
for (const item of Marketplace.#instances.keys()) {
|
||||
yield item;
|
||||
yield item! as Marketplace;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect if our Marketplace is ready or not. If it's not, don't resolve until it IS
|
||||
*/
|
||||
static ready(): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
const t = setInterval(() => {
|
||||
if (Marketplace.#instances.size !== 0) {
|
||||
clearInterval(t);
|
||||
resolve(true);
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Install a theme into both localstorage AND set the theme.
|
||||
*
|
||||
|
|
@ -132,11 +146,11 @@ class Marketplace {
|
|||
}
|
||||
|
||||
async uninstallTheme(theme: Omit<Theme, "payload" | "video" | "bgImage">) {
|
||||
const items = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.plugins)) || [];
|
||||
const items = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.themes)) || [];
|
||||
if (!items.find((th: string) => th === theme.name)) {
|
||||
return log({ type: 'error', bg: false, prefix: false, throw: true }, `Theme: ${theme.name} is not installed!`);
|
||||
}
|
||||
const idx = items.indexOf(theme.name.toLowerCase());
|
||||
const idx = items.indexOf(theme.name);
|
||||
items.splice(idx, 1);
|
||||
this.#storage.setVal(SettingsVals.marketPlace.themes, JSON.stringify(items));
|
||||
}
|
||||
|
|
@ -257,8 +271,8 @@ class Marketplace {
|
|||
if (tsp !== opts.payload) {
|
||||
this.#storage.setVal(SettingsVals.marketPlace.appearance.theme.payload, opts.payload);
|
||||
this.#storage.setVal(SettingsVals.marketPlace.appearance.theme.name, opts.name);
|
||||
s.href = `/packages/${opts.name}/${opts.payload}`;
|
||||
}
|
||||
s.href = `/packages/${opts.name}/${opts.payload}`;
|
||||
}
|
||||
else {
|
||||
if (tsp) return s.href = `/packages/${tsn}/${tsp}`;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue