39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
const resizer = document.getElementById('resizer');
|
|
const leftColumn = resizer.previousElementSibling;
|
|
const rightColumn = resizer.nextElementSibling;
|
|
const container = resizer.parentNode;
|
|
|
|
// Minimum and maximum width for left column in px
|
|
const minLeftWidth = 100;
|
|
const maxLeftWidth = container.clientWidth - 100;
|
|
|
|
let isResizing = false;
|
|
|
|
resizer.addEventListener('mousedown', e => {
|
|
e.preventDefault();
|
|
isResizing = true;
|
|
document.body.style.userSelect = 'none'; // prevent text selection
|
|
});
|
|
|
|
document.addEventListener('mousemove', e => {
|
|
if (!isResizing) return;
|
|
|
|
// Calculate new width of left column relative to container
|
|
const containerRect = container.getBoundingClientRect();
|
|
let newLeftWidth = e.clientX - containerRect.left;
|
|
|
|
// Clamp the width
|
|
newLeftWidth = Math.max(minLeftWidth, Math.min(newLeftWidth, containerRect.width - minLeftWidth));
|
|
|
|
// Set the left column's flex-basis (fixed width)
|
|
leftColumn.style.flex = '0 0 ' + newLeftWidth + 'px';
|
|
rightColumn.style.flex = '1 1 0'; // fill remaining space
|
|
});
|
|
|
|
document.addEventListener('mouseup', e => {
|
|
if (isResizing) {
|
|
isResizing = false;
|
|
document.body.style.userSelect = ''; // restore user selection
|
|
}
|
|
});
|