website/src/components/window.svelte

84 lines
2.2 KiB
Svelte
Raw Normal View History

2024-08-15 00:43:18 +03:00
<script lang="ts">
2024-11-02 00:53:21 +03:00
import { highestZIndex, isMobile } from '$lib/window.ts';
2024-11-01 16:19:11 +03:00
import { draggable } from '@neodrag/svelte';
2024-10-30 14:00:36 +03:00
export let title: string | undefined = undefined;
2024-08-15 00:43:18 +03:00
export let iconUri: string = '';
export let id: string = '';
2024-09-26 04:25:55 +03:00
export let sticky: boolean = false;
export let entry: boolean = false;
2024-10-30 14:00:36 +03:00
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))
2024-11-02 00:53:21 +03:00
const isOnMobile = isMobile()
const _draggable = isOnMobile ? () => {} : draggable;
2024-08-15 00:43:18 +03:00
</script>
<div
2024-11-02 00:53:21 +03:00
use:_draggable={{
disabled: isOnMobile,
2024-11-02 00:05:10 +03:00
applyUserSelectHack: true,
handle: '.window-titlebar',
onDragStart: (data) => {
$highestZIndex += 1
data.currentNode.style.zIndex = $highestZIndex.toString()
2024-11-02 00:53:21 +03:00
},
2024-11-02 00:05:10 +03:00
}}
2024-08-15 00:43:18 +03:00
class="
2024-11-02 00:05:10 +03:00
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]
2024-10-30 14:00:36 +03:00
bg-ralsei-black border-ralsei-white border-ridge border-8 border-t-[12px]
animate-{chosenKeyframe}
2024-08-15 00:43:18 +03:00
"
{id}
2024-08-15 00:43:18 +03:00
>
2024-10-30 14:00:36 +03:00
{#if title !== undefined}
<div
class="
2024-11-01 16:19:11 +03:00
window-titlebar p-1 border-ralsei-white border-8
2024-10-30 14:00:36 +03:00
bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
2024-11-02 00:53:21 +03:00
{!isOnMobile ? "cursor-move" : ""}
2024-10-30 14:00:36 +03:00
"
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>
2024-10-30 14:00:36 +03:00
{/if}
<div class="
{removePadding ? "" : "p-2"} bg-gradient-to-tl
to-ralsei-pink-neon/15 from-ralsei-pink-regular/20
">
<slot />
2024-08-15 00:43:18 +03:00
</div>
</div>