remove: delete Divide pattern until there is a clearer idea of the UI
This commit is contained in:
parent
3079c33d37
commit
6b1b995c9c
|
@ -1,5 +1,4 @@
|
||||||
<script>
|
<script>
|
||||||
import Divide from 'molecules/Divide.svelte';
|
|
||||||
import NhentaiLogin from 'polymers/NhentaiLogin.svelte';
|
import NhentaiLogin from 'polymers/NhentaiLogin.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -45,19 +44,5 @@
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<Divide>
|
<NhentaiLogin></NhentaiLogin>
|
||||||
<div slot="1">
|
|
||||||
<NhentaiLogin></NhentaiLogin>
|
|
||||||
</div>
|
|
||||||
<div slot="2">
|
|
||||||
<Divide mode="v">
|
|
||||||
<div slot="1">
|
|
||||||
<Divide></Divide>
|
|
||||||
</div>
|
|
||||||
<div slot="2">
|
|
||||||
<Divide></Divide>
|
|
||||||
</div>
|
|
||||||
</Divide>
|
|
||||||
</div>
|
|
||||||
</Divide>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -1,130 +0,0 @@
|
||||||
<script>
|
|
||||||
import { onMount } from 'svelte/internal';
|
|
||||||
import { c, s } from 'services/utils';
|
|
||||||
|
|
||||||
export let mode = 'h';
|
|
||||||
export let basisFirst = 0.5;
|
|
||||||
export let basisSecond = 0.5;
|
|
||||||
export let minSize = 100;
|
|
||||||
|
|
||||||
let divide;
|
|
||||||
let dragging = false;
|
|
||||||
let size = 5;
|
|
||||||
let total = 0;
|
|
||||||
|
|
||||||
$: classes = c({
|
|
||||||
divide: true,
|
|
||||||
'divide--vertical': mode === 'v',
|
|
||||||
});
|
|
||||||
|
|
||||||
$: classesDivider = c({
|
|
||||||
divide__divider: true,
|
|
||||||
'divide__divider--vertical': mode === 'v',
|
|
||||||
});
|
|
||||||
|
|
||||||
$: style = s({
|
|
||||||
'--divide-size': `${size}px`,
|
|
||||||
'--divide-basis-first': `${basisFirst * 100}%`,
|
|
||||||
'--divide-basis-second': `${basisSecond * 100}%`,
|
|
||||||
'--divide-min-width': minSize > 0 && mode === 'h' ? `${minSize}px` : '0',
|
|
||||||
'--divide-min-height': minSize > 0 && mode === 'v' ? `${minSize}px` : '0',
|
|
||||||
});
|
|
||||||
|
|
||||||
function getTotal() {
|
|
||||||
return mode === 'h' ? divide.clientWidth : divide.clientHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMousedown(event) {
|
|
||||||
if (event.button === 0) {
|
|
||||||
dragging = true;
|
|
||||||
total = getTotal();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMousemove(event) {
|
|
||||||
if (dragging) {
|
|
||||||
const dragPos =
|
|
||||||
mode === 'h' ? event.x - divide.getBoundingClientRect().x : event.y - divide.getBoundingClientRect().y;
|
|
||||||
basisFirst = dragPos / total;
|
|
||||||
basisSecond = 1 - basisFirst;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseup() {
|
|
||||||
dragging = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseenter(event) {
|
|
||||||
if (event.buttons !== 1) {
|
|
||||||
dragging = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.divide {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divide__divider {
|
|
||||||
cursor: ew-resize;
|
|
||||||
width: var(--divide-size);
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--color-foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
.divide__divider:hover {
|
|
||||||
background-color: var(--color-foreground-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.divide__elem {
|
|
||||||
flex: 0 0 50%;
|
|
||||||
min-width: var(--divide-min-width);
|
|
||||||
max-width: calc(100% - var(--divide-size) - var(--divide-min-width));
|
|
||||||
min-height: 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 {
|
|
||||||
flex-basis: calc(var(--divide-basis-first) - var(--divide-size) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.divide__elem--second {
|
|
||||||
flex-basis: calc(var(--divide-basis-second) - var(--divide-size) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.divide--vertical {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divide__divider--vertical {
|
|
||||||
cursor: ns-resize;
|
|
||||||
width: 100%;
|
|
||||||
height: var(--divide-size);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="{classes}"
|
|
||||||
{style}
|
|
||||||
bind:this="{divide}"
|
|
||||||
on:mousemove|preventDefault="{handleMousemove}"
|
|
||||||
on:mouseup|preventDefault="{handleMouseup}"
|
|
||||||
on:mouseenter|preventDefault="{handleMouseenter}"
|
|
||||||
>
|
|
||||||
<div class="divide__elem divide__elem--first">
|
|
||||||
<slot name="1"></slot>
|
|
||||||
</div>
|
|
||||||
<div class="{classesDivider}" draggable="true" on:mousedown|preventDefault="{handleMousedown}"></div>
|
|
||||||
<div class="divide__elem divide__elem--second">
|
|
||||||
<slot name="2"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
Loading…
Reference in New Issue