extend divide component to be nestable

This commit is contained in:
Xymorot 2019-06-18 23:32:29 +02:00
parent d5d84aed78
commit 4d62eceb70
2 changed files with 46 additions and 17 deletions

View File

@ -54,8 +54,17 @@ main {
<div slot="1"> <div slot="1">
<h1>Hello World</h1> <h1>Hello World</h1>
<p>{ text }</p> <p>{ text }</p>
<Button on:click="{ handleClick }">test-inhalt</Button> <Button on:click="{handleClick}">test-inhalt</Button>
</div>
<div slot="2">
<Divide mode="v">
<div slot="1">
<Divide></Divide>
</div>
<div slot="2">
<Divide></Divide>
</div>
</Divide>
</div> </div>
<div slot="2">right side</div>
</Divide> </Divide>
</main> </main>

View File

@ -1,4 +1,5 @@
<script> <script>
import { onMount } from 'svelte/internal';
import { c, s } from 'services/utils'; import { c, s } from 'services/utils';
export let mode = 'h'; export let mode = 'h';
@ -6,10 +7,20 @@ export let basisFirst = 0.5;
export let basisSecond = 0.5; export let basisSecond = 0.5;
export let minSize = 100; export let minSize = 100;
let divide;
let dragging = false; let dragging = false;
let size = 5; let size = 5;
let total = 0;
$: classes = c(['divide', mode === 'v' ? 'divide--vertical' : false]); $: classes = c({
divide: true,
'divide--vertical': mode === 'v',
});
$: classesDivider = c({
divide__divider: true,
'divide__divider--vertical': mode === 'v',
});
$: style = s({ $: style = s({
'--divide-size': `${size}px`, '--divide-size': `${size}px`,
@ -19,12 +30,12 @@ $: style = s({
'--divide-min-height': minSize > 0 && mode === 'v' ? `${minSize}px` : '0', '--divide-min-height': minSize > 0 && mode === 'v' ? `${minSize}px` : '0',
}); });
$: total = getTotal(); onMount(() => {
total = getTotal();
});
function getTotal() { function getTotal() {
return mode === 'h' return mode === 'h' ? divide.clientWidth : divide.clientHeight;
? document.documentElement.clientWidth
: document.documentElement.clientHeight;
} }
function handleResize() { function handleResize() {
@ -39,7 +50,10 @@ function handleMousedown(event) {
function handleMousemove(event) { function handleMousemove(event) {
if (dragging) { if (dragging) {
const dragPos = mode === 'h' ? event.x : event.y; const dragPos =
mode === 'h'
? event.x - divide.getBoundingClientRect().x
: event.y - divide.getBoundingClientRect().y;
basisFirst = dragPos / total; basisFirst = dragPos / total;
basisSecond = 1 - basisFirst; basisSecond = 1 - basisFirst;
} }
@ -54,8 +68,6 @@ function handleMouseenter(event) {
dragging = false; dragging = false;
} }
} }
window.onresize = handleResize;
</script> </script>
<style> <style>
@ -85,6 +97,11 @@ window.onresize = handleResize;
max-height: calc(100% - var(--divide-size) - var(--divide-min-height)); max-height: calc(100% - var(--divide-size) - var(--divide-min-height));
} }
.divide__elem > :global(*) {
width: 100%;
height: 100%;
}
.divide__elem--first { .divide__elem--first {
flex-basis: calc(var(--divide-basis-first) - var(--divide-size) / 2); flex-basis: calc(var(--divide-basis-first) - var(--divide-size) / 2);
} }
@ -97,27 +114,30 @@ window.onresize = handleResize;
flex-direction: column; flex-direction: column;
} }
.divide--vertical .divide__divider { .divide__divider--vertical {
cursor: ns-resize; cursor: ns-resize;
width: 100%; width: 100%;
height: var(--divide-size); height: var(--divide-size);
} }
</style> </style>
<svelte:window on:resize="{handleResize}" />
<div <div
class="{ classes }" class="{classes}"
{style} {style}
on:mousemove|preventDefault="{ handleMousemove }" bind:this="{divide}"
on:mouseup|preventDefault="{ handleMouseup }" on:mousemove|preventDefault="{handleMousemove}"
on:mouseenter|preventDefault="{ handleMouseenter }" on:mouseup|preventDefault="{handleMouseup}"
on:mouseenter|preventDefault="{handleMouseenter}"
> >
<div class="divide__elem divide__elem--first"> <div class="divide__elem divide__elem--first">
<slot name="1"></slot> <slot name="1"></slot>
</div> </div>
<div <div
class="divide__divider" class="{classesDivider}"
draggable="true" draggable="true"
on:mousedown|preventDefault="{ handleMousedown }" on:mousedown|preventDefault="{handleMousedown}"
></div> ></div>
<div class="divide__elem divide__elem--second"> <div class="divide__elem divide__elem--second">
<slot name="2"></slot> <slot name="2"></slot>