fix my scuffed toast notifs
This commit is contained in:
MotorTruck1221
parent
f0c9b7eb82
commit
e96af1f6fb
6 changed files with 212 additions and 86 deletions
|
|
@ -1,8 +1,9 @@
|
|||
<script>
|
||||
import { cloakTab, Settings } from "@utils/settings.ts";
|
||||
import { tabSettings, proxySettings, Settings } from "@utils/settings.ts";
|
||||
// This loads the settings in a nice way
|
||||
cloakTab(localStorage.getItem(Settings.tabCloak) as string || "default");
|
||||
tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
|
||||
proxySettings.changeProxy(localStorage.getItem(Settings.ProxySettings.proxy as string) || "automatic");
|
||||
document.addEventListener("astro:after-swap", function() {
|
||||
cloakTab(localStorage.getItem(Settings.tabCloak) as string || "default");
|
||||
tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,5 +2,7 @@
|
|||
import { Toaster } from "svelte-french-toast";
|
||||
</script>
|
||||
|
||||
<div class="hidden" id="toastwrapper">
|
||||
<Toaster />
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
import Layout from "@layouts/Layout.astro";
|
||||
import SettingsLayout from "@layouts/SettingsLayout.astro";
|
||||
import SettingsSection from "@layouts/SettingsSection.astro";
|
||||
import SettingsCard from "@components/settings/SettingsCard.astro";
|
||||
import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
|
||||
import Toast from "@components/toasts/Toast.svelte";
|
||||
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
|
|
@ -18,8 +21,109 @@ export const prerender = true;
|
|||
|
||||
<Layout title="Settings">
|
||||
<SettingsLayout title={t("settings.proxy")}>
|
||||
<SettingsSection title="Proxy" subtitle="Choose the rewriter/proxy to use.">
|
||||
Guhh
|
||||
<SettingsSection title="Proxy" subtitle="A wide variety of settings for the proxy/rewriter itself.">
|
||||
<div class="w-full h-full flex flex-col items-center justify-center flex-wrap md:flex-row md:items-start md:justify-start gap-4">
|
||||
<SettingsCard
|
||||
title="Proxy"
|
||||
description="Choose the proxy/rewriter that fits your needs"
|
||||
input={{input:false}}
|
||||
button={{name: 'Change', id: 'setproxy'}}
|
||||
select={{
|
||||
select: true,
|
||||
name: 'proxy',
|
||||
options: [
|
||||
{name: 'Automatic', value: 'automatic', disabled: false},
|
||||
{name: 'Ultraviolet', value: 'uv', disabled: false},
|
||||
{name: 'Rammerhead', value: 'rh', disabled: false}
|
||||
]
|
||||
}}
|
||||
/>
|
||||
<SettingsCard
|
||||
title="Open in"
|
||||
description="Choose how to open your sites"
|
||||
input={{input:false}}
|
||||
button={{name: 'Set', id: 'setopenin'}}
|
||||
select={{
|
||||
select: true,
|
||||
name: 'openin',
|
||||
options: [
|
||||
{name: 'Embed', value: 'embed', disabled: false},
|
||||
{name: 'About:Blank', value: 'a:b', disabled: false},
|
||||
{name: 'Blob', value: 'blob', disabled: false}
|
||||
]
|
||||
}}
|
||||
/>
|
||||
<SettingsCard
|
||||
title="Search Engine"
|
||||
description="Choose your search engine"
|
||||
input={{input: false}}
|
||||
button={{name: 'Set Search Engine', id: 'setsearchengine'}}
|
||||
select={{
|
||||
select: true,
|
||||
name: 'searchengine',
|
||||
options: [
|
||||
{name: 'DuckDuckGo', value: 'ddg', disabled: false},
|
||||
{name: 'Google', value: 'google', disabled: false},
|
||||
{name: 'Bing', value: 'bing', disabled: false}
|
||||
]
|
||||
}}
|
||||
/>
|
||||
<SettingsCard
|
||||
title="Wisp Server"
|
||||
description="Choose the wisp server you feel is the fastest"
|
||||
input={{input: false}}
|
||||
button={{name: 'Select', id: 'setwispurl'}}
|
||||
select={{
|
||||
select: true,
|
||||
name: 'wispurl',
|
||||
options: [
|
||||
{name: 'Automatic', value: 'automatic', disabled: false},
|
||||
{name: 'US-1', value: 'us-1', disabled: true}
|
||||
]
|
||||
}}
|
||||
/>
|
||||
<SettingsCard
|
||||
title="Transport"
|
||||
description="Select the transport to use"
|
||||
input={{input: false}}
|
||||
button={{name: 'Set transport', id: 'settransport'}}
|
||||
select={{
|
||||
select: true,
|
||||
name: 'transport',
|
||||
options: [
|
||||
{name: 'Libcurl', value: 'libcurl', disabled: false},
|
||||
{name: 'Epoxy', value: 'epoxy', disabled: false}
|
||||
]
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</SettingsLayout>
|
||||
<ToastWrapper client:load>
|
||||
<Toast toastProp={{
|
||||
toastType: 'success',
|
||||
text: 'Successfully changed proxy!',
|
||||
class: 'proxyMessage'
|
||||
}}
|
||||
client:load />
|
||||
</ToastWrapper>
|
||||
</Layout>
|
||||
<script>
|
||||
import { toast } from "@utils/toast.ts";
|
||||
import { proxySettings, Settings as SettingsEnum } from "@utils/settings.ts";
|
||||
function setup(proxySelectVal: HTMLSelectElement) {
|
||||
proxySelectVal.value = localStorage.getItem(SettingsEnum.ProxySettings.proxy) as string;
|
||||
}
|
||||
document.addEventListener("astro:page-load", () => {
|
||||
try {
|
||||
const proxyButton = document.getElementById("setproxy") as HTMLButtonElement;
|
||||
const proxySelectVal = document.getElementById('proxy') as HTMLSelectElement;
|
||||
setup(proxySelectVal);
|
||||
proxyButton.addEventListener("click", () => {
|
||||
proxySettings.changeProxy(proxySelectVal.value);
|
||||
toast('.proxyMessage');
|
||||
});
|
||||
}
|
||||
catch(_) {/* Don't return anything on purpose */}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -58,10 +58,10 @@ export const prerender = true;
|
|||
|
||||
<script>
|
||||
import { toast } from "@utils/toast.ts"; //A helper function so we don't have to run this logic everytime.
|
||||
import { cloakTab, abCloak, Settings as SettingsEnum } from "@utils/settings.ts";
|
||||
import { tabSettings, Settings as SettingsEnum } from "@utils/settings.ts";
|
||||
function setup(cloakValue: HTMLSelectElement, abValue: HTMLSelectElement) {
|
||||
const cloakLocal = localStorage.getItem(SettingsEnum.tabCloak);
|
||||
const abCloakLocal = localStorage.getItem(SettingsEnum.abblob);
|
||||
const cloakLocal = localStorage.getItem(SettingsEnum.TabSettings.tabCloak);
|
||||
const abCloakLocal = localStorage.getItem(SettingsEnum.TabSettings.abblob);
|
||||
cloakLocal === "default" ? cloakValue.value = "reset" : cloakValue.value = cloakLocal as string;
|
||||
abValue.value = abCloakLocal as string;
|
||||
}
|
||||
|
|
@ -73,13 +73,13 @@ export const prerender = true;
|
|||
const abValue = document.getElementById("aboutblank") as HTMLSelectElement;
|
||||
setup(cloakValue, abValue);
|
||||
cloakButton.addEventListener("click", () => {
|
||||
cloakTab(cloakValue.value);
|
||||
tabSettings.cloakTab(cloakValue.value);
|
||||
toast('.cloakMessageSuccess');
|
||||
});
|
||||
abButton.addEventListener("click", () => {
|
||||
toast('.abCloakMessage');
|
||||
abCloak(abValue.value);
|
||||
})
|
||||
tabSettings.abCloak(abValue.value);
|
||||
});
|
||||
}
|
||||
catch (_) { /* We don't want to return anything on purpose */ }
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
enum Settings {
|
||||
"tabCloak" = "nebula||tabCloak",
|
||||
"abblob" = "nebula||abBlob"
|
||||
enum TabSettings {
|
||||
tabCloak = "nebula||tabCloak",
|
||||
abblob = "nebula||abBlob"
|
||||
}
|
||||
enum ProxySettings {
|
||||
proxy = "nebula||proxy"
|
||||
}
|
||||
const Settings = {
|
||||
TabSettings,
|
||||
ProxySettings
|
||||
}
|
||||
|
||||
type TabCloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool";
|
||||
type AbCloaks = "a:b" | "blob"
|
||||
function cloakTab(cloak: TabCloaks | string) {
|
||||
type AbCloaks = "a:b" | "blob";
|
||||
type Proxy = "automatic" | "uv" | "rh"
|
||||
|
||||
const tabSettings = {
|
||||
cloakTab: function(cloak: TabCloaks | string) {
|
||||
const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
|
||||
localStorage.setItem(Settings.tabCloak, cloak);
|
||||
localStorage.setItem(Settings.TabSettings.tabCloak, cloak);
|
||||
switch(cloak) {
|
||||
case "google":
|
||||
document.title = "Google";
|
||||
|
|
@ -35,10 +46,9 @@ function cloakTab(cloak: TabCloaks | string) {
|
|||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function abCloak(type: AbCloaks | string) {
|
||||
localStorage.setItem(Settings.abblob, type);
|
||||
},
|
||||
abCloak: function(type: AbCloaks | string) {
|
||||
localStorage.setItem(Settings.TabSettings.abblob, type);
|
||||
switch(type) {
|
||||
case "a:b":
|
||||
window.location.replace('https://google.com');
|
||||
|
|
@ -77,5 +87,12 @@ function abCloak(type: AbCloaks | string) {
|
|||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { cloakTab, abCloak, Settings }
|
||||
const proxySettings = {
|
||||
changeProxy: function(proxy: Proxy | string) {
|
||||
localStorage.setItem(Settings.ProxySettings.proxy, proxy);
|
||||
}
|
||||
}
|
||||
|
||||
export { tabSettings, proxySettings, Settings }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ interface Props {
|
|||
}
|
||||
|
||||
function toast(query: string) {
|
||||
const wrapper = document.getElementById("toastwrapper") as HTMLDivElement;
|
||||
wrapper.classList.remove("hidden");
|
||||
//this is a really hacky solution for toast notifications LOL
|
||||
const element = document.querySelector(query) as HTMLElement;
|
||||
//click the element
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue