old dialog functionality
This commit is contained in:
not-nullptr
parent
3204d06ff1
commit
2d28049b2a
5 changed files with 28 additions and 123 deletions
|
|
@ -1,61 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { ModalManager, type Modal } from "$lib/util/modal";
|
||||
import { browser } from "$app/environment";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
const closeDuration = 180;
|
||||
|
||||
let modal: Modal | null = null;
|
||||
let closing = false;
|
||||
|
||||
$: pointer = modal ? "pointer-events-auto" : "pointer-events-none";
|
||||
$: opacity = closing || !modal ? "opacity-0" : "opacity-100";
|
||||
$: scale = !closing && modal ? "scale-100" : "scale-[0.9]";
|
||||
|
||||
function closeModal() {
|
||||
if (closing) return;
|
||||
closing = true;
|
||||
setTimeout(() => {
|
||||
closing = false;
|
||||
modal = null;
|
||||
}, closeDuration);
|
||||
}
|
||||
|
||||
function modalBgClick(e: MouseEvent) {
|
||||
if (e.target === e.currentTarget) closeModal();
|
||||
}
|
||||
|
||||
function modalEsc(e: KeyboardEvent) {
|
||||
console.log(e.key);
|
||||
if (e.key === "Escape") closeModal();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const id = ModalManager.addListener((d) => {
|
||||
modal = d;
|
||||
});
|
||||
return () => {
|
||||
ModalManager.removeListener(id);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
style="transition: 180ms ease; transition-property: opacity;"
|
||||
class={`fixed inset-0 z-50 h-screen w-screen ${opacity} ${pointer} flex items-center justify-center bg-[rgba(0,0,0,0.5)]`}
|
||||
tabindex="-1"
|
||||
id="modal-root"
|
||||
role="presentation"
|
||||
on:click={modalBgClick}
|
||||
on:keydown={modalEsc}
|
||||
>
|
||||
<div
|
||||
style="transition: 180ms ease; transition-property: transform;"
|
||||
class={`${scale} relative w-full max-w-[750px] rounded-[2.25rem] border border-solid border-gray-700 bg-black p-10 shadow-2xl shadow-stone-900`}
|
||||
>
|
||||
{#if modal}
|
||||
<h1 class="text-5xl">{modal.title}</h1>
|
||||
<p class="mt-4 text-lg leading-relaxed text-[#A6A5A7]">{modal.message}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { v4 } from "uuid";
|
||||
|
||||
export interface Modal {
|
||||
title: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export class ModalManager {
|
||||
private static listeners: {
|
||||
id: string;
|
||||
callback: (data: Modal) => void;
|
||||
}[] = [];
|
||||
|
||||
static addListener(callback: (data: Modal) => void) {
|
||||
const id = v4();
|
||||
this.listeners.push({ id, callback });
|
||||
return id;
|
||||
}
|
||||
|
||||
static removeListener(id: string) {
|
||||
this.listeners = this.listeners.filter((listener) => listener.id !== id);
|
||||
}
|
||||
|
||||
static notify(data: Modal) {
|
||||
this.listeners.forEach((listener) => listener.callback(data));
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
import Logo from "../components/LogoWithTextHorizontal.svelte";
|
||||
import { CodeBranchOutline, DiscordSolid, DownloadOutline } from "flowbite-svelte-icons";
|
||||
import { browser } from "$app/environment";
|
||||
import ModalManager from "$components/ModalRoot.svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import { setContext } from "svelte";
|
||||
import type { PageData } from "./$types";
|
||||
|
|
@ -52,11 +51,11 @@
|
|||
|
||||
<main class="min-h-full w-full">
|
||||
<header
|
||||
style="transition: 180ms ease;"
|
||||
style="transition: 180ms ease border;"
|
||||
class={`${
|
||||
scrolled
|
||||
? "fixed top-0 z-40 w-full border-b-2 border-b-[#ffffff11] bg-[#131215d0]"
|
||||
: "fixed top-0 z-40 w-full border-b-0 border-b-[transparent]"
|
||||
? "fixed top-0 z-[9999] w-full border-b-2 border-b-[#ffffff11] bg-[#131215d0]"
|
||||
: "fixed top-0 z-[9999] w-full border-b-0 border-b-[transparent]"
|
||||
} pl-[calc(100vw-100%)]`}
|
||||
>
|
||||
<nav
|
||||
|
|
@ -104,5 +103,3 @@
|
|||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<ModalManager />
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<script lang="ts">
|
||||
import embedImage from "$assets/branding/suyu__Embed-Image.png";
|
||||
import { ModalManager } from "$lib/util/modal";
|
||||
import type { PageData } from "./$types";
|
||||
import suyuWindow from "$assets/mockups/suyuwindow.png";
|
||||
import { XCircleOutline } from "flowbite-svelte-icons";
|
||||
import { Dialog } from "radix-svelte";
|
||||
|
||||
export let data: PageData;
|
||||
$: memberCount = parseFloat(data.memberCount.toPrecision(2));
|
||||
|
|
@ -15,13 +16,10 @@
|
|||
image: embedImage,
|
||||
};
|
||||
|
||||
function openModal() {
|
||||
ModalManager.notify({
|
||||
title: "suyu isn't available for download yet.",
|
||||
message:
|
||||
"Official downloads for suyu aren't available yet, but you're welcome to compile it yourself from the source code. If you're not comfortable with that, we recommend you wait for the official release.",
|
||||
});
|
||||
}
|
||||
let rootOpen: boolean;
|
||||
let rootModal: boolean = true;
|
||||
let contentOpenAutoFocus: boolean = true;
|
||||
let contentCloseAutoFocus: boolean = true;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -69,25 +67,24 @@
|
|||
and open-source, forever.
|
||||
</p>
|
||||
<div class="flex flex-row gap-4">
|
||||
<!-- <Dialog.Root bind:modal={rootModal} bind:open={rootOpen}> -->
|
||||
<button on:click={openModal} class="cta-button">
|
||||
Download <svg
|
||||
class=""
|
||||
style="--icon-color:#000"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="#000"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
><path
|
||||
d="M5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10.5303 8.53033C10.8207 8.23999 10.8236 7.77014 10.5368 7.47624L6.63419 3.47624C6.34492 3.17976 5.87009 3.17391 5.57361 3.46318C5.27713 3.75244 5.27128 4.22728 5.56054 4.52376L8.94583 7.99351L5.46967 11.4697Z"
|
||||
></path></svg
|
||||
>
|
||||
</button>
|
||||
<!-- </Dialog.Trigger> -->
|
||||
<!-- <Dialog.Portal>
|
||||
<Dialog.Root bind:modal={rootModal} bind:open={rootOpen}>
|
||||
<Dialog.Trigger class="cta-button">
|
||||
Download <svg
|
||||
class=""
|
||||
style="--icon-color:#000"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="#000"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
><path
|
||||
d="M5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10.5303 8.53033C10.8207 8.23999 10.8236 7.77014 10.5368 7.47624L6.63419 3.47624C6.34492 3.17976 5.87009 3.17391 5.57361 3.46318C5.27713 3.75244 5.27128 4.22728 5.56054 4.52376L8.94583 7.99351L5.46967 11.4697Z"
|
||||
></path></svg
|
||||
>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay
|
||||
class="fixed inset-0 z-[9999] bg-black/80 data-[state=open]:animate-[overlayShow_555ms_cubic-bezier(.16,1,.3,1)]"
|
||||
/>
|
||||
|
|
@ -116,7 +113,7 @@
|
|||
</Dialog.Close>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root> -->
|
||||
</Dialog.Root>
|
||||
<a
|
||||
href="https://gitlab.com/suyu-emu/"
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
import { getContext } from "svelte";
|
||||
import type { PageData } from "./$types";
|
||||
import type { Writable } from "svelte/store";
|
||||
import { ModalManager } from "$lib/util/modal";
|
||||
|
||||
const token = getContext<Writable<string>>("token");
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue