38 lines
1.5 KiB
HTML
38 lines
1.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head><meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
/* Transparent everywhere except the thin line at the panel edge. At rest
|
||
|
|
the view is a few pixels wide and sits on the boundary; while dragging
|
||
|
|
main widens it to the whole window and the line follows the pointer. */
|
||
|
|
html, body { margin: 0; height: 100%; background: transparent; overflow: hidden; cursor: col-resize; user-select: none; }
|
||
|
|
#line { position: fixed; top: 0; bottom: 0; width: 2px; left: 50%; transform: translateX(-1px);
|
||
|
|
background: rgba(140,150,170,.45); transition: background .12s; }
|
||
|
|
body:hover #line { background: rgba(214,255,61,.45); }
|
||
|
|
body.drag #line { display: none; }
|
||
|
|
</style></head>
|
||
|
|
<body title="Drag to resize · double-click to reset">
|
||
|
|
<div id="line"></div>
|
||
|
|
<script>
|
||
|
|
let dragging = false;
|
||
|
|
document.addEventListener("mousedown", (e) => {
|
||
|
|
if (e.button !== 0) return;
|
||
|
|
e.preventDefault();
|
||
|
|
dragging = true;
|
||
|
|
document.body.classList.add("drag");
|
||
|
|
window.grip.start();
|
||
|
|
});
|
||
|
|
// While dragging, this view covers the window from its left edge, so clientX
|
||
|
|
// is the pointer's x in the window.
|
||
|
|
document.addEventListener("mousemove", (e) => { if (dragging) window.grip.move(e.clientX); });
|
||
|
|
const stop = () => {
|
||
|
|
if (!dragging) return;
|
||
|
|
dragging = false;
|
||
|
|
document.body.classList.remove("drag");
|
||
|
|
window.grip.end();
|
||
|
|
};
|
||
|
|
document.addEventListener("mouseup", stop);
|
||
|
|
window.addEventListener("blur", stop);
|
||
|
|
document.addEventListener("dblclick", () => window.grip.reset());
|
||
|
|
</script>
|
||
|
|
</body></html>
|