|
---
|
|
import SettingsCard from "@components/settings/SettingsCard.astro";
|
|
import Toast from "@components/toasts/Toast.svelte";
|
|
import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
|
|
import Layout from "@layouts/Layout.astro";
|
|
import SettingsLayout from "@layouts/SettingsLayout.astro";
|
|
import SettingsSection from "@layouts/SettingsSection.astro";
|
|
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
|
|
const lang = getLangFromUrl(Astro.url);
|
|
const t = useTranslations(lang);
|
|
export function getStaticPaths() {
|
|
const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
|
|
return STATIC_PATHS;
|
|
}
|
|
export const prerender = true;
|
|
---
|
|
|
|
<Layout title="Settings">
|
|
<SettingsLayout title={t("settings.tab")}>
|
|
<SettingsSection title="Tab" subtitle="Customize and cloak your tab.">
|
|
<div class="w-full h-full flex flex-col items-center justify-center md:flex-row md:items-start md:justify-start gap-4">
|
|
<SettingsCard
|
|
title="Cloaking"
|
|
description="Choose how your tab looks"
|
|
input={{input: false}}
|
|
button={{name: "Cloak!", id: "cloak"}}
|
|
select={{ select: true, name: 'cloakselect', options: [
|
|
{name: 'Default', value: 'reset', disabled: false},
|
|
{name: 'Google', value: 'google', disabled: false },
|
|
{name: 'Wikipedia', value: 'wikipedia', disabled: false},
|
|
{name: 'Canvas', value: 'canvas', disabled: false},
|
|
{name: 'Google Classroom', value: 'classroom', disabled: false},
|
|
{name: 'Powerschool', value: 'powerschool', disabled: false}
|
|
] }}
|
|
both={{enabled: false}}
|
|
/>
|
|
<SettingsCard
|
|
title="A:B & Blob"
|
|
description="Choose to open your tab in about:blank or blob"
|
|
input={{input: false}}
|
|
button={{name: "Go!", id: "aboutblankbutton"}}
|
|
select={{ select: true, name: 'aboutblank', options: [
|
|
{name: 'About:Blank', value: 'a:b', disabled: false},
|
|
{name: 'Blob', value: 'blob', disabled: false}
|
|
] }}
|
|
both={{enabled: false}}
|
|
/>
|
|
</div>
|
|
</SettingsSection>
|
|
</SettingsLayout>
|
|
{ /* The toast notifications :D */ }
|
|
<ToastWrapper client:load>
|
|
<Toast toastProp={{toastType: "success", text: "Successfully set cloak!", class: "cloakMessageSuccess"}} client:load />
|
|
<Toast toastProp={{toastType: "success", text: "Saved your option for next time! \n Opening in new tab...", class: "abCloakMessage"}} client:load />
|
|
</ToastWrapper>
|
|
</Layout>
|
|
|
|
<script>
|
|
import { toast } from "@utils/toast.ts";
|
|
import { settings, Settings as SettingsEnum } from "@utils/settings/index";
|
|
import { pageLoad } from "@utils/events";
|
|
function setup(cloakValue: HTMLSelectElement, abValue: HTMLSelectElement) {
|
|
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 || 'a:b';
|
|
}
|
|
pageLoad(() => {
|
|
const cloakButton = document.getElementById("cloak") as HTMLButtonElement;
|
|
const cloakValue = document.getElementById("cloakselect") as HTMLSelectElement;
|
|
const abButton = document.getElementById("aboutblankbutton") as HTMLButtonElement;
|
|
const abValue = document.getElementById("aboutblank") as HTMLSelectElement;
|
|
setup(cloakValue, abValue);
|
|
cloakButton.addEventListener("click", () => {
|
|
settings.tabSettings.cloakTab(cloakValue.value);
|
|
toast('.cloakMessageSuccess');
|
|
});
|
|
abButton.addEventListener("click", () => {
|
|
toast('.abCloakMessage');
|
|
settings.tabSettings.abCloak(abValue.value);
|
|
});
|
|
})
|
|
</script>
|
|
|