New CHnages with Cookies
This commit is contained in:
@@ -32,6 +32,8 @@ const {
|
|||||||
...rest
|
...rest
|
||||||
}: Props = Astro.props;
|
}: Props = Astro.props;
|
||||||
|
|
||||||
|
const cookiesValue = Astro.cookies.get(storageKey)?.value ?? languages[0].code;
|
||||||
|
|
||||||
const containerId = `ls-${Math.random().toString(36).slice(2)}`;
|
const containerId = `ls-${Math.random().toString(36).slice(2)}`;
|
||||||
const icon = "wr:size-4";
|
const icon = "wr:size-4";
|
||||||
const item = "wr:flex wr:w-full wr:items-center wr:gap-x-3.5 wr:rounded-lg wr:px-3 wr:py-2 wr:text-sm wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-900 wr:focus:bg-gray-100 focus:outline-hidden dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
|
const item = "wr:flex wr:w-full wr:items-center wr:gap-x-3.5 wr:rounded-lg wr:px-3 wr:py-2 wr:text-sm wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-900 wr:focus:bg-gray-100 focus:outline-hidden dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
|
||||||
@@ -89,7 +91,7 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script is:inline define:vars={{ containerId, storageKey, rootSelector, rootExtraClass, onChange, languages }}>
|
<script is:inline define:vars={{ containerId, storageKey, cookiesValue, rootSelector, rootExtraClass, onChange, languages }}>
|
||||||
(() => {
|
(() => {
|
||||||
const host = document.getElementById(containerId);
|
const host = document.getElementById(containerId);
|
||||||
if (!host) return;
|
if (!host) return;
|
||||||
@@ -167,7 +169,7 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
|
|||||||
const savedCookie = readCookie(storageKey);
|
const savedCookie = readCookie(storageKey);
|
||||||
const savedLS = localStorage.getItem(storageKey);
|
const savedLS = localStorage.getItem(storageKey);
|
||||||
const navLang = navigator.language ? navigator.language.split("-")[0] : null;
|
const navLang = navigator.language ? navigator.language.split("-")[0] : null;
|
||||||
const initial = savedCookie || savedLS || (languages.some(l => l.code === navLang) ? navLang : languages[0].code);
|
const initial = cookiesValue || savedCookie || savedLS || (languages.some(l => l.code === navLang) ? navLang : languages[0].code);
|
||||||
|
|
||||||
// initial apply
|
// initial apply
|
||||||
apply(initial);
|
apply(initial);
|
||||||
|
|||||||
@@ -27,6 +27,8 @@ const {
|
|||||||
...rest
|
...rest
|
||||||
}: Props = Astro.props;
|
}: Props = Astro.props;
|
||||||
|
|
||||||
|
const cookiesValue = Astro.cookies.get(storageKey)?.value ?? "system";
|
||||||
|
|
||||||
const containerId = `ts-${Math.random().toString(36).slice(2)}`;
|
const containerId = `ts-${Math.random().toString(36).slice(2)}`;
|
||||||
const icon = "wr:size-4";
|
const icon = "wr:size-4";
|
||||||
const item =
|
const item =
|
||||||
@@ -94,7 +96,7 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script is:inline define:vars={{ containerId, storageKey, rootSelector, darkBgClass, lightBgClass, rootExtraClass, onChange }}>
|
<script is:inline define:vars={{ containerId, storageKey, cookiesValue, rootSelector, darkBgClass, lightBgClass, rootExtraClass, onChange }}>
|
||||||
(() => {
|
(() => {
|
||||||
const host = document.getElementById(containerId);
|
const host = document.getElementById(containerId);
|
||||||
if (!host) return;
|
if (!host) return;
|
||||||
@@ -146,7 +148,7 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Init
|
// Init
|
||||||
const saved = (localStorage.getItem(storageKey)) || "system";
|
const saved = cookiesValue || (localStorage.getItem(storageKey)) || "system";
|
||||||
apply(saved);
|
apply(saved);
|
||||||
|
|
||||||
// React to system changes when mode=system
|
// React to system changes when mode=system
|
||||||
|
|||||||
Reference in New Issue
Block a user