146 lines
3.5 KiB
Vue
146 lines
3.5 KiB
Vue
<!-- Adapted from https://phuoc.ng/collection/html-dom/order-resizable-split-views/ -->
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="top">
|
|
<slot name="top"/>
|
|
</div>
|
|
<div class="resizer bg-grey-lighten-2" :data-direction="horizontal?'horizontal':'vertical'" ref="resizerElement"></div>
|
|
<div class="scrollpane">
|
|
<slot name="bottom"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import {onMounted, ref} from "vue";
|
|
|
|
const resizerElement = ref()
|
|
const props = defineProps(['horizontal'])
|
|
|
|
function resizable() {
|
|
const resizer = resizerElement.value
|
|
const direction = resizer.getAttribute('data-direction') || 'horizontal';
|
|
const prevSibling = resizer.previousElementSibling;
|
|
const nextSibling = resizer.nextElementSibling;
|
|
|
|
// The current position of mouse
|
|
let x = 0;
|
|
let y = 0;
|
|
let prevSiblingHeight = 0;
|
|
let prevSiblingWidth = 0;
|
|
|
|
// Handle the mousedown event
|
|
// that's triggered when user drags the resizer
|
|
const mouseDownHandler = function (e) {
|
|
// Get the current mouse position
|
|
x = e.clientX;
|
|
y = e.clientY;
|
|
const rect = prevSibling.getBoundingClientRect();
|
|
prevSiblingHeight = rect.height;
|
|
prevSiblingWidth = rect.width;
|
|
|
|
// Attach the listeners to document
|
|
document.addEventListener('mousemove', mouseMoveHandler);
|
|
document.addEventListener('mouseup', mouseUpHandler);
|
|
};
|
|
|
|
const mouseMoveHandler = function (e) {
|
|
// How far the mouse has been moved
|
|
const dx = e.clientX - x;
|
|
const dy = e.clientY - y;
|
|
|
|
switch (direction) {
|
|
case 'vertical':
|
|
const h =
|
|
((prevSiblingHeight + dy) * 100) /
|
|
resizer.parentNode.getBoundingClientRect().height;
|
|
prevSibling.style.height = h + '%';
|
|
break;
|
|
case 'horizontal':
|
|
default:
|
|
const w =
|
|
((prevSiblingWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
|
|
prevSibling.style.width = w + '%';
|
|
break;
|
|
}
|
|
|
|
const cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
|
|
resizer.style.cursor = cursor;
|
|
document.body.style.cursor = cursor;
|
|
|
|
prevSibling.style.userSelect = 'none';
|
|
prevSibling.style.pointerEvents = 'none';
|
|
|
|
nextSibling.style.userSelect = 'none';
|
|
nextSibling.style.pointerEvents = 'none';
|
|
};
|
|
|
|
const mouseUpHandler = function () {
|
|
resizer.style.removeProperty('cursor');
|
|
document.body.style.removeProperty('cursor');
|
|
|
|
prevSibling.style.removeProperty('user-select');
|
|
prevSibling.style.removeProperty('pointer-events');
|
|
|
|
nextSibling.style.removeProperty('user-select');
|
|
nextSibling.style.removeProperty('pointer-events');
|
|
|
|
// Remove the handlers of mousemove and mouseup
|
|
document.removeEventListener('mousemove', mouseMoveHandler);
|
|
document.removeEventListener('mouseup', mouseUpHandler);
|
|
};
|
|
|
|
// Attach the handler
|
|
resizer.addEventListener('mousedown', mouseDownHandler);
|
|
};
|
|
|
|
onMounted(resizable)
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@use 'src/styles/vars' as *;
|
|
|
|
body {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.resizer[data-direction='horizontal'] {
|
|
background-color: #cbd5e0;
|
|
cursor: ew-resize;
|
|
height: 100%;
|
|
width: 2px;
|
|
}
|
|
|
|
.resizer[data-direction='vertical'] {
|
|
cursor: ns-resize;
|
|
height: 4px;
|
|
width: 100%;
|
|
}
|
|
|
|
.top {
|
|
height: 60%;
|
|
width: 100%;
|
|
min-height: 5em;
|
|
}
|
|
|
|
.scrollpane {
|
|
flex: 1;
|
|
width: 100%;
|
|
min-height: 5em;
|
|
}
|
|
</style> |