badmanners/badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvements to scripts and index page on text-only browser

Browse source
This commit is contained in:
Bad Manners 2024-08-29 15:38:12 -03:00
parent ad03c0a6d0
commit 48fe7f041e
8 changed files with 72 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/AgeRestrictedModal.astro
View file

@ -30,10 +30,11 @@ import { IconTriangleExclamation } from "./icons";
screen from appearing in the future.
</p>
<div
style={{ display: "none" }}
id="age-verification-button-list"
class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 font-medium sm:max-w-2xl sm:flex-row"
>
<button
style={{ display: "none" }}
data-modal-reject
id="age-verification-reject"
class="rounded bg-stone-400 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-zinc-300 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
@ -41,7 +42,6 @@ import { IconTriangleExclamation } from "./icons";
Cancel
</button>
<button
style={{ display: "none" }}
data-modal-accept
id="age-verification-accept"
class="rounded bg-bm-500 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-bm-400 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
@ -55,46 +55,46 @@ import { IconTriangleExclamation } from "./icons";
<AgeRestrictedScriptInline />
<script>
type AgeVerified = "true" | undefined;
const ageRestrictedModalSetup = () => {
const modal = document.querySelector<HTMLElementTagNameMap["div"]>("div#modal-age-restricted");
// Not an age-restricted page
if (!modal) {
return;
}
if (modal !== document.querySelector("body > div#modal-age-restricted")) {
if (modal !== document.querySelector("body>div#modal-age-restricted")) {
throw new Error("#modal-age-restricted must be a direct child of the body element!");
}
let ageVerified: AgeVerified = localStorage.ageVerified;
if (ageVerified !== "true") {
const addAgeVerifiedQueryToLinks = () =>
document.body.querySelectorAll<HTMLElementTagNameMap["a"]>("a[href][data-age-restricted]").forEach((el) => {
let newHref = new URL(el.href);
newHref.searchParams.set("ageVerified", "true");
el.href = newHref.toString();
});
if (localStorage.ageVerified === "true") {
addAgeVerifiedQueryToLinks();
} else {
const rejectButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!;
const onRejectButtonClick = (e: MouseEvent) => {
e.preventDefault();
location.href = "about:blank";
};
rejectButton.addEventListener("click", onRejectButtonClick);
rejectButton.style.removeProperty("display");
const acceptButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!;
acceptButton.addEventListener(
modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!.addEventListener(
"click",
(e: MouseEvent) => {
e.preventDefault();
rejectButton.removeEventListener("click", onRejectButtonClick);
ageVerified = "true";
localStorage.ageVerified = ageVerified;
localStorage.ageVerified = "true";
document.body.style.overflow = "auto";
document.querySelectorAll("body > :not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
document.body.querySelectorAll<HTMLElementTagNameMap["a"]>("a[href][data-age-restricted]").forEach((el) => {
let newHref = new URL(el.href);
newHref.searchParams.set("ageVerified", "true");
el.href = newHref.href;
});
document.querySelectorAll("body>:not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
modal.style.display = "none";
addAgeVerifiedQueryToLinks();
},
{ once: true },
);
acceptButton.style.removeProperty("display");
modal
.querySelector<HTMLElementTagNameMap["div"]>("div#age-verification-button-list")!
.style.removeProperty("display");
rejectButton.focus();
}
};