starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-20 00:53:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Deleting episodes and seasons, work in mm redesign

Browse Source
This commit is contained in:
Aleksi Lassila
2024-05-02 17:18:30 +03:00
parent 0d05e3b530
commit d608c4b917
26 changed files with 594 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/lib/components/DebugElements.svelte Normal file
View File

@@ -0,0 +1,87 @@
<script lang="ts">
import { Selectable } from '../selectable';
import classNames from 'classnames';
import { onMount } from 'svelte';
let showOverlay = false;
let x = 0;
let y = 0;
let width = 0;
let height = 0;
const focusedObject = Selectable.focusedObject;
let element: HTMLElement | undefined = undefined;
focusedObject.subscribe((object) => {
element = object?.getHtmlElement();
if (element) updateOverlayPosition(element);
});
function updateOverlayPosition(htmlElement: HTMLElement) {
const rect = htmlElement.getBoundingClientRect();
x = rect.left;
y = rect.top;
width = rect.width;
height = rect.height;
}
const handleKeydown = (event: KeyboardEvent) => {
if (event.repeat) return;
if (event.key === 'Shift') showOverlay = !showOverlay;
};
const handleKeyup = (event: KeyboardEvent) => {
if (event.repeat) return;
if (event.key === 'Shift') showOverlay = !showOverlay;
};
onMount(() => {
const interval = setInterval(() => {
if (element && showOverlay) {
updateOverlayPosition(element);
}
}, 100);
return () => clearInterval(interval);
});
</script>
<svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup} />
{#if showOverlay}
<div
class={classNames('fixed bg-red-500/20 z-50 pointer-events-none')}
style={`left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px;`}
/>
<div class="fixed inset-0 border-x-[96px] border-y-[48px] border-green-500/10 z-50" />
<div class="fixed inset-0 px-32 grid grid-cols-12 gap-x-16 *:bg-purple-500/10 items-stretch z-50">
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
</div>
<!-- <div class="fixed inset-0 border-x-[96px] border-y-[48px] border-green-500/10 z-50" />-->
<!-- <div class="fixed inset-0 px-28 grid grid-cols-12 gap-x-10 *:bg-purple-500/10 items-stretch z-50">-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- <div />-->
<!-- </div>-->
{/if}