src/frontend/shared/Slider.svelte

<!-- videoslider/frontend/shared/Slider.svelte -->
<script lang="ts">
	// Svelte and D3 imports
	import { onMount, tick } from "svelte";
	import { drag } from "d3-drag";
	import { select } from "d3-selection";

	/** A utility function to constrain a value within a minimum and maximum range. */
	function clamp(value: number, min: number, max: number): number {
		return Math.min(Math.max(value, min), max);
	}

	// ------------------
	// Props
	// ------------------
	/** The slider's position as a normalized value (0 to 1). Can be two-way bound. */
	export let position = 0.5;
	/** If true, disables all dragging and interaction. */
	export let disabled = false;
	/** The color of the vertical slider line. */
	export let slider_color = "var(--border-color-primary)";
	/** The dimensions of the content being compared. */
	export let image_size: { top: number; left: number; width: number; height: number };
	/** A reference to the content element. */
	export let el: HTMLDivElement | undefined = undefined;
	/** A reference to the main wrapper element. */
	export let parent_el: HTMLDivElement | undefined = undefined;

	// -----------------
	// Internal State
	// -----------------
	/** A reference to the draggable handle element. */
	let inner: HTMLDivElement | undefined;
	/** The slider's horizontal position in pixels. */
	let px = 0;
	/** True while the user is actively dragging the handle. */
	let active = false;
	let container_width = 0;

	/**
	 * Calculates and sets the slider's pixel position based on its container's dimensions.
	 * This is called reactively and by the ResizeObserver.
	 */
	function set_position(): void {
		if (!parent_el) return;
		const rect = parent_el.getBoundingClientRect();
		container_width = rect.width;
		px = clamp(container_width * position, 0, container_width);
	}

	/** A utility function to round a number to a specific number of decimal points. */
	function round(n: number, points: number): number {
		const mod = Math.pow(10, points);
		return Math.round((n + Number.EPSILON) * mod) / mod;
	}

	/** Updates the internal state based on the drag's x-coordinate in pixels. */
	function update_position(x: number): void {
		if (!parent_el || !image_size?.width) return;
		container_width = parent_el.getBoundingClientRect().width;
		px = clamp(x, 0, container_width);
		position = round((px - image_size.left) / image_size.width, 5);
	}

	// -----------------
	// D3 Drag Handlers
	// -----------------

	/** Handles the start of a drag action. */
	function drag_start(event: any): void {
		if (disabled) return;
		active = true;
		update_position(event.x);
	}

	/** Handles the movement during a drag action. */
	function drag_move(event: any): void {
		if (disabled) return;
		update_position(event.x);
	}

	/** Handles the end of a drag action. */
	function drag_end(): void {
		if (disabled) return;
		active = false;
	}

	// -----------------
	// Reactive Logic & Lifecycle
	// -----------------

	/** Reactively updates the slider's pixel position whenever the normalized `position` changes. */
	$: set_position();

	/** Reactively applies the calculated pixel position to the handle's style. */
	$: if (inner) {
		inner.style.transform = `translateX(${px}px)`;
	}

	/** On mount, sets up the d3-drag handler and a ResizeObserver to keep the layout correct. */
	onMount(() => {
		if (!inner) return;

		const drag_handler = drag()
			.on("start", drag_start)
			.on("drag", drag_move)
			.on("end", drag_end)
			.touchable(() => true);

		select(inner).call(drag_handler);

		const resizeObserver = new ResizeObserver(() => {
			tick().then(() => set_position());
		});

		if (parent_el) {
			resizeObserver.observe(parent_el);
		}

		return () => {
			resizeObserver.disconnect();
		};
	});
</script>

<svelte:window on:resize={() => {
	tick().then(() => set_position());
}} />

<div class="wrap" role="none" bind:this={parent_el}>
	<div class="content" bind:this={el}>
		<slot />
	</div>
	<div
		class="outer"
		class:disabled
		bind:this={inner}
		role="none"
		class:grab={active}
		on:click|stopPropagation
	>
		<span class="icon-wrap" class:active class:disabled>
			<span class="icon left">◢</span>
			<span class="icon center" style:--color={slider_color}></span>
			<span class="icon right">◢</span>
		</span>
		<div class="inner" style:--color={slider_color}></div>
	</div>
</div>

<style>
	.wrap {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: var(--layer-1);
		overflow: hidden;
	}
	.icon-wrap {
		display: flex;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		left: 50%;
		width: 40px;
		transition: 0.2s;
		color: var(--body-text-color);
		height: 30px;
		border-radius: 5px;
		background-color: var(--color-accent);
		align-items: center;
		justify-content: center;
		z-index: var(--layer-3);
		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
		font-size: 12px;
		pointer-events: auto;
	}
	.icon.left {
		transform: rotate(135deg);
		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
	}
	.icon.right {
		transform: rotate(-45deg);
		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
	}
	.icon.center {
		display: block;
		width: 1px;
		height: 100%;
		background-color: var(--color);
		opacity: 0.5;
	}
	.outer {
		width: 40px;
		height: 100%;
		position: absolute;
		cursor: grab;
		top: 0;
		left: -20px;
		pointer-events: auto;
		z-index: 1000;
	}
	.grab {
		cursor: grabbing;
	}
	.inner {
		width: 1px;
		height: 100%;
		background: var(--color);
		position: absolute;
		left: calc((100% - 1px) / 2);
	}
	.disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}
	.disabled .inner {
		box-shadow: none;
	}
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>