File size: 4,257 Bytes
01fcadf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
---
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"; //A helper function so we don't have to run this logic everytime.
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>
|