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>
|
||||
|
||||
<Toaster />
|
||||
<slot />
|
||||
<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,81 +1,98 @@
|
|||
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) {
|
||||
const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
|
||||
localStorage.setItem(Settings.tabCloak, cloak);
|
||||
switch(cloak) {
|
||||
case "google":
|
||||
document.title = "Google";
|
||||
faviconElement.href = "/cloaks/google.png";
|
||||
break;
|
||||
case "wikipedia":
|
||||
document.title = "Wikipedia";
|
||||
faviconElement.href = "/cloaks/wikipedia.ico";
|
||||
break;
|
||||
case "canvas":
|
||||
document.title = "Dashboard";
|
||||
faviconElement.href = "/cloaks/canvas.ico";
|
||||
break;
|
||||
case "classroom":
|
||||
document.title = "Home";
|
||||
faviconElement.href = "/cloaks/classroom.png";
|
||||
break;
|
||||
case "powerschool":
|
||||
document.title = "PowerSchool";
|
||||
faviconElement.href = "/cloaks/ps.ico";
|
||||
break;
|
||||
case "reset":
|
||||
//force a reset of favicon & title
|
||||
localStorage.setItem("nebula||tabCloak", "default");
|
||||
window.location.reload();
|
||||
default:
|
||||
return;
|
||||
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.TabSettings.tabCloak, cloak);
|
||||
switch(cloak) {
|
||||
case "google":
|
||||
document.title = "Google";
|
||||
faviconElement.href = "/cloaks/google.png";
|
||||
break;
|
||||
case "wikipedia":
|
||||
document.title = "Wikipedia";
|
||||
faviconElement.href = "/cloaks/wikipedia.ico";
|
||||
break;
|
||||
case "canvas":
|
||||
document.title = "Dashboard";
|
||||
faviconElement.href = "/cloaks/canvas.ico";
|
||||
break;
|
||||
case "classroom":
|
||||
document.title = "Home";
|
||||
faviconElement.href = "/cloaks/classroom.png";
|
||||
break;
|
||||
case "powerschool":
|
||||
document.title = "PowerSchool";
|
||||
faviconElement.href = "/cloaks/ps.ico";
|
||||
break;
|
||||
case "reset":
|
||||
//force a reset of favicon & title
|
||||
localStorage.setItem("nebula||tabCloak", "default");
|
||||
window.location.reload();
|
||||
default:
|
||||
return;
|
||||
}
|
||||
},
|
||||
abCloak: function(type: AbCloaks | string) {
|
||||
localStorage.setItem(Settings.TabSettings.abblob, type);
|
||||
switch(type) {
|
||||
case "a:b":
|
||||
window.location.replace('https://google.com');
|
||||
const win = window.open();
|
||||
win!.document.body.style.margin = '0';
|
||||
win!.document.body.style.height = '100vh';
|
||||
const iframe = win!.document.createElement('iframe');
|
||||
iframe.style.border = 'none';
|
||||
iframe.style.width = '100%';
|
||||
iframe.style.height = '100%';
|
||||
iframe.style.margin = '0';
|
||||
const url = window.location.href;
|
||||
iframe.src = url;
|
||||
win!.document.body.appendChild(iframe);
|
||||
break;
|
||||
case "blob":
|
||||
const htmlContent = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe style="border: none; width: 100%; height: 100vh;" src="${window.location.href}"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
window.location.replace("https://google.com");
|
||||
const blob = new Blob([htmlContent], { type: 'text/html' });
|
||||
const blobURL = URL.createObjectURL(blob);
|
||||
window.open(blobURL, '_blank');
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function abCloak(type: AbCloaks | string) {
|
||||
localStorage.setItem(Settings.abblob, type);
|
||||
switch(type) {
|
||||
case "a:b":
|
||||
window.location.replace('https://google.com');
|
||||
const win = window.open();
|
||||
win!.document.body.style.margin = '0';
|
||||
win!.document.body.style.height = '100vh';
|
||||
const iframe = win!.document.createElement('iframe');
|
||||
iframe.style.border = 'none';
|
||||
iframe.style.width = '100%';
|
||||
iframe.style.height = '100%';
|
||||
iframe.style.margin = '0';
|
||||
const url = window.location.href;
|
||||
iframe.src = url;
|
||||
win!.document.body.appendChild(iframe);
|
||||
break;
|
||||
case "blob":
|
||||
const htmlContent = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe style="border: none; width: 100%; height: 100vh;" src="${window.location.href}"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
window.location.replace("https://google.com");
|
||||
const blob = new Blob([htmlContent], { type: 'text/html' });
|
||||
const blobURL = URL.createObjectURL(blob);
|
||||
window.open(blobURL, '_blank');
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
const proxySettings = {
|
||||
changeProxy: function(proxy: Proxy | string) {
|
||||
localStorage.setItem(Settings.ProxySettings.proxy, proxy);
|
||||
}
|
||||
}
|
||||
|
||||
export { cloakTab, abCloak, Settings }
|
||||
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