File size: 2,494 Bytes
0ad74ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<script lang="ts">
import { onMount } from "svelte";
export let position = 0.5;
export let disabled = false;
export let show_nav = true;
let active = false;
let hidden = true;
let el: HTMLDivElement;
let inner: HTMLDivElement;
let box: DOMRect;
let px = 0;
let offset = 0;
function handle_mousedown(e: MouseEvent) {
if (disabled) return;
active = true;
box = el.getBoundingClientRect();
const innerbox = inner.getBoundingClientRect();
offset = e.clientX - innerbox.left;
}
function handle_mouseup(e: MouseEvent) {
active = false;
}
function handle_mousemove(e: MouseEvent) {
if (!active) return;
px = clamp(e.clientX - offset - box.left, 100, box.width - 240);
position = round((px + 10) / box.width, 5);
}
function clamp(n: number, min: number, max: number) {
return n < min ? min : n > max ? max : n;
}
function round(n: number, points: number) {
const mod = Math.pow(10, points);
return Math.round((n + Number.EPSILON) * mod) / mod;
}
function set_position() {
box = el.getBoundingClientRect();
px = box.width * position - 10;
hidden = false;
}
onMount(set_position);
$: if (!hidden && show_nav) {
box = el.getBoundingClientRect();
px = box.width * position - 10;
} else if (!hidden && !show_nav) {
box = el.getBoundingClientRect();
px = box.width * position - 10;
}
</script>
<svelte:window
on:resize={set_position}
on:mousemove={handle_mousemove}
on:mouseup={handle_mouseup}
/>
<div class="wrap" bind:this={el}>
<slot />
<div
class="outer hidden sm:block"
class:disabled
on:mousedown={handle_mousedown}
on:mouseup={handle_mouseup}
bind:this={inner}
role="none"
style="transform: translateX({px}px)"
>
<div {hidden} class="inner">
<div class="notches text-gray-400 select-none">||</div>
</div>
</div>
</div>
<style>
.wrap {
position: relative;
width: 100%;
height: 100%;
}
.outer {
width: 20px;
height: 100%;
position: absolute;
cursor: grab;
position: absolute;
top: 0;
left: 0;
cursor: ew-resize;
}
.inner {
width: 15px;
height: 100%;
background: #fbfcfc;
position: absolute;
left: calc((100% - 2px) / 2);
border-right: 1px solid rgb(229, 231, 235);
border-left: 1px solid rgb(229, 231, 235);
}
.disabled {
cursor: auto;
}
.disabled .inner {
box-shadow: none;
}
.notches {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1, 2.5);
font-weight: bold;
}
</style>
|