48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
(async () => {
|
|
|
|
const uiResizer = document.getElementById('resizer');
|
|
const uiLeftColumn = uiResizer.previousElementSibling;
|
|
const uiRightColumn = uiResizer.nextElementSibling;
|
|
const uiParent = uiResizer.parentElement;
|
|
|
|
let isResizing = false;
|
|
let abortSignal = null;
|
|
|
|
function onMouseMove(e) {
|
|
// we resize the columns by applying felx: <ratio> to the columns
|
|
|
|
// compute the percentage the mouse is in the parent
|
|
const percentage = (e.clientX - uiParent.offsetLeft) / uiParent.clientWidth;
|
|
// clamp the percentage between 0.1 and 0.9
|
|
const clampedPercentage = Math.max(0.1, Math.min(0.9, percentage));
|
|
// set the flex property of the columns
|
|
uiLeftColumn.style.flex = `${clampedPercentage}`;
|
|
uiRightColumn.style.flex = `${1 - clampedPercentage}`;
|
|
}
|
|
|
|
function onMouseUp(e) {
|
|
// restore user selection
|
|
document.body.style.userSelect = '';
|
|
|
|
// remove the mousemove and mouseup events
|
|
if (abortSignal) {
|
|
abortSignal.abort();
|
|
abortSignal = null;
|
|
}
|
|
}
|
|
|
|
uiResizer.addEventListener('mousedown', e => {
|
|
e.preventDefault();
|
|
isResizing = true;
|
|
|
|
// prevent text selection
|
|
document.body.style.userSelect = 'none';
|
|
|
|
// register the mousemove and mouseup events
|
|
abortSignal = new AbortController();
|
|
document.addEventListener('mousemove', onMouseMove, { signal: abortSignal.signal });
|
|
document.addEventListener('mouseup', onMouseUp, { signal: abortSignal.signal });
|
|
});
|
|
|
|
})();
|