File size: 1,483 Bytes
a03b3ba |
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 |
<script lang="ts">
import { click_outside } from "../utils/events";
import { createEventDispatcher } from "svelte";
export let selected_size: number;
export let min: number;
export let max: number;
const dispatch = createEventDispatcher<{
click_outside: void;
}>();
let width = 0;
let height = 0;
let c_width = 0;
let c_height = 0;
let wrap_el: HTMLDivElement;
let anchor_right = false;
let anchor_top = false;
$: {
if (wrap_el && (width || height || c_height || c_width)) {
const box = wrap_el.getBoundingClientRect();
anchor_right = box.width + 30 > width / 2;
anchor_top = box.y < 80;
}
}
</script>
<svelte:window bind:innerHeight={height} bind:innerWidth={width} />
<div
class="wrap"
use:click_outside={() => dispatch("click_outside")}
bind:this={wrap_el}
bind:clientWidth={c_width}
bind:clientHeight={c_height}
class:right={anchor_right}
class:top={anchor_top}
class:bottom={!anchor_top}
>
<input type="range" bind:value={selected_size} {min} {max} step={1} />
</div>
<style>
.wrap {
width: 180px;
position: absolute;
display: flex;
flex-direction: column;
gap: 5px;
background: var(--background-fill-secondary);
border: 1px solid var(--block-border-color);
border-radius: var(--radius-md);
box-shadow:
0 0 5px rgba(0, 0, 0, 0.1),
0 5px 30px rgba(0, 0, 0, 0.2);
padding: var(--size-2);
cursor: default;
}
.bottom {
bottom: 85px;
}
.top {
top: 30px;
}
.right {
right: 10px;
}
</style>
|