89 lines
2.4 KiB
Svelte
89 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { highestZIndex, isMobile } from '$lib/window.ts';
|
|
import { draggable } from '@neodrag/svelte';
|
|
|
|
export let title: string | undefined = undefined;
|
|
export let iconUri: string = '';
|
|
export let id: string = '';
|
|
export let sticky: boolean = false;
|
|
export let entry: boolean = false;
|
|
export let removePadding: boolean = false;
|
|
export let center: boolean = false;
|
|
|
|
const scaleKeyframes = [
|
|
"window-open",
|
|
"window-open-vertical",
|
|
"window-open-vertical",
|
|
"window-open-horizontal",
|
|
"window-open-horizontal",
|
|
"window-open-move-up",
|
|
"window-open-move-down",
|
|
"window-open-move-left",
|
|
"window-open-move-right",
|
|
];
|
|
$: chosenKeyframe = scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length))
|
|
|
|
const isOnMobile = isMobile()
|
|
const _draggable = isOnMobile ? () => {} : draggable;
|
|
|
|
const focusWindow = (node: HTMLElement) => {
|
|
$highestZIndex += 1
|
|
node.style.zIndex = $highestZIndex.toString()
|
|
}
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div
|
|
use:_draggable={{
|
|
disabled: isOnMobile,
|
|
applyUserSelectHack: true,
|
|
handle: '.window-titlebar',
|
|
onDragStart: (data) => {focusWindow(data.currentNode)},
|
|
}}
|
|
on:click={(data) => {focusWindow(data.currentTarget)}}
|
|
class="
|
|
relative flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""}
|
|
max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl min-w-[30ch] lg:min-w-[40ch] w-full md:w-fit [height:fit-content]
|
|
bg-ralsei-black border-ralsei-white border-ridge border-8 border-t-[12px]
|
|
animate-{chosenKeyframe}
|
|
"
|
|
{id}
|
|
>
|
|
{#if title !== undefined}
|
|
<div
|
|
class="
|
|
window-titlebar p-1 border-ralsei-white border-8
|
|
bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
|
|
{!isOnMobile ? "cursor-move" : ""}
|
|
"
|
|
style="border-style: hidden hidden ridge hidden;"
|
|
>
|
|
<div class="flex bg-opacity-100 pixelate-bg">
|
|
<h1
|
|
class="
|
|
font-monospace text-xl text-ralsei-pink-regular
|
|
grow justify-self-start self-center {entry ? 'p-name' : ''}
|
|
"
|
|
>
|
|
{title}
|
|
</h1>
|
|
{#if iconUri !== ''}
|
|
<img
|
|
class="justify-self-end self-center max-h-7"
|
|
style="image-rendering: pixelated;"
|
|
src={iconUri}
|
|
alt={iconUri}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<div class="
|
|
{removePadding ? "" : "p-2"} bg-gradient-to-tl
|
|
to-ralsei-pink-neon/15 from-ralsei-pink-regular/20
|
|
">
|
|
<slot />
|
|
</div>
|
|
</div>
|