From 5b578806c7261abab4ed2f04595786cbff3a0602 Mon Sep 17 00:00:00 2001 From: MotorTruck1221 Date: Sat, 4 Jan 2025 02:33:46 -0700 Subject: [PATCH] Settings init is close to being ready to do --- src/components/settings/Loader.astro | 24 ++++++++- src/utils/index.ts | 73 +++++++++++++++++++++++++++- src/utils/values.ts | 15 +++++- 3 files changed, 109 insertions(+), 3 deletions(-) diff --git a/src/components/settings/Loader.astro b/src/components/settings/Loader.astro index 57606b8..a16c115 100644 --- a/src/components/settings/Loader.astro +++ b/src/components/settings/Loader.astro @@ -25,8 +25,21 @@ */ import { EventHandler } from "@utils/events"; import { SW, createProxyScripts, checkProxyScripts, createBareMuxConn, setTransport } from "@utils/serviceWorker"; - + import { log } from "@utils/index"; + const titleText = ` + _ _ _ _ ____ _ + | \\ | | ___| |__ _ _| | __ _ / ___| ___ _ ____ _(_) ___ ___ ___ + | \\| |/ _ \\ '_ \\| | | | |/ _' | \\___ \\ / _ \\ '__\\ \\ / / |/ __/ _ \\/ __| + | |\\ | __/ |_) | |_| | | (_| | ___) | __/ | \\ V /| | (_| __/\\__ \\ + |_| \\_|\\___|_.__/ \\__,_|_|\\__,_| |____/ \\___|_| \\_/ |_|\\___\\___||___/ + `; + 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 () => { + log("normal", { bg: false, prefix: false }, titleText); + log("normal", { bg: true, prefix: false }, info); + log("normal", { bg: true, prefix: false }, sysInfo); + log("info", { bg: true, prefix: true }, "General init..."); for (const script of createProxyScripts()) { document.body.appendChild(script); } @@ -34,12 +47,21 @@ const conn = await createBareMuxConn("/baremux/worker.js"); await setTransport(conn, "libcurl"); window.sw = new SW(conn); + log("info", { bg: true, prefix: true }, "General init completed"); } + const settingsInit = async () => { + log("info", { bg: true, prefix: true }, "Initializing settings..."); + log("info", { bg: true, prefix: true }, "Initialized Settings!"); + }; + const eventHandler = new EventHandler({ events: { "DOMContentLoaded": (async () => { await init(); + }), + "astro:page-load": (async () => { + await settingsInit(); }) }, logging: true diff --git a/src/utils/index.ts b/src/utils/index.ts index 6a91a2e..39059f0 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -19,6 +19,13 @@ interface Props { position?: ToastPosition; } +/** + * This allows us to call our toast notifs. + * + * @example + * import { toast } from "@utils/index"; + * toast(".toastMessage"); +*/ function toast(query: string) { const wrapper = document.getElementById("toastwrapper") as HTMLDivElement; wrapper.classList.remove("hidden"); @@ -28,6 +35,13 @@ function toast(query: string) { element.click(); } +/** + * Allows use to turn a basic phrase into a full URL. Mainly used when ther user enters something in for use in UV/SJ + * + * @example + * import { search } from "@utils/index"; + * search("YES", "https://www.google.com/search?q=%s"); +*/ function search(input: string, template: string) { try { return new URL(input).toString() } catch (_) {}; @@ -39,10 +53,67 @@ function search(input: string, template: string) { return template.replace("%s", encodeURIComponent(input)); } +type LogTypes = "normal" | "info" | "error" | "warn"; +/** + * Custom built log function with styles applied. + * + * @example + * import { log } from "@utils/index"; + * log("info", opts: { bg: true, prefix: false }, message: "This is an example"); // BG can be true or false when BG is false, most of the time it reverts back to normal styling (except for the "normal" mode). When prefix is true, this adds a prefix of the type of message used. +*/ +const log = (type: LogTypes, opts: { bg: boolean, prefix: boolean }, message: string) => { + const styles = { + warn: { + bg: { + color: "#ffffff", + bg: "#cc3300" + }, + normal: "#ffffff" + }, + error: { + bg: { + color: "#ffffff", + bg: "#cc0000" + }, + normal: "#ffffff" + }, + info: { + bg: { + color: "#ffffff", + bg: "#088F8F" + }, + normal: "#088F8F" + }, + normal: { + bg: { + color: "#ffffff", + bg: "#7967dd" + }, + normal: "#7967dd" + } + } + switch(type) { + case "info": + console.info(`%c${opts.prefix ? `Info: ${message}` : message}`, `${opts.bg ? `color: ${styles.info.bg.color}; background-color: ${styles.info.bg.bg}; padding: 2px 10px; font-weight: bold;` : `color: ${styles.info.normal}; font-weight: bold;`}`); + break; + case "error": + console.error(`%c${opts.prefix ? `Error: ${message}` : message }`, `${opts.bg ? `color: ${styles.error.bg.color}; background-color: ${styles.error.bg.bg}; padding: 2px 10px;` : `color: ${styles.error.normal};`}`); + break; + case "warn": + console.warn(`%c${opts.prefix ? `Warning: ${message}` : message}`, `${opts.bg ? `color: ${styles.warn.bg.color}; background-color: ${styles.warn.bg.bg}; padding: 2px 10px;` : `color: ${styles.warn.normal};`}`); + break; + case "normal": + console.log(`%c${message}`, `${opts.bg ? `color: ${styles.normal.bg.color}; background-color: ${styles.normal.bg.bg}; padding: 2px 10px; font-weight: bold;` : `color: ${styles.normal.normal}; font-weight: bold;`}`); + break; + } +}; + + export { type TType, type ToastPosition, type Props, toast, - search + search, + log }; diff --git a/src/utils/values.ts b/src/utils/values.ts index e1b46f3..ccc72da 100644 --- a/src/utils/values.ts +++ b/src/utils/values.ts @@ -30,7 +30,20 @@ const SupportedSites: Record = { */ const SettingsVals = { proxy: { - wispServer: "wispServerUrl" + wispServer: "wispServerUrl", + proxy: "proxy", + searchEngine: "searchEngine", + transport: "transport" + }, + tab: { + cloak: "cloak" + }, + marketPlace: { + appearance: { + video: "video", + image: "image", + themeName: "themeName" + } } }