update

Author: chirizxc

site/app.js

@@ -192,8 +192,17 @@ async function copyText(value, button) {
   flashCopied(button);
 }
 
-function setSplitFromClientX(clientX) {
+function setSplitFromPointer(clientX, clientY) {
   const rect = els.split.getBoundingClientRect();
+  const isVertical = window.matchMedia("(max-width: 900px)").matches;
+
+  if (isVertical) {
+    const raw = ((clientY - rect.top) / rect.height) * 100;
+    const clamped = Math.max(20, Math.min(80, raw));
+    document.documentElement.style.setProperty("--top-height", `${clamped}%`);
+    return;
+  }
+
   const raw = ((clientX - rect.left) / rect.width) * 100;
   const clamped = Math.max(20, Math.min(80, raw));
   document.documentElement.style.setProperty("--left-width", `${clamped}%`);
@@ -302,33 +311,82 @@ function initEvents() {
 
   els.input.addEventListener("scroll", syncYamlScroll, { passive: true });
 
-  els.divider.addEventListener("pointerdown", (event) => {
-    if (window.matchMedia("(max-width: 900px)").matches) {
-      return;
-    }
+  const startDrag = (clientX, clientY) => {
     dragging = true;
-    els.divider.setPointerCapture(event.pointerId);
-    setSplitFromClientX(event.clientX);
-  });
+    document.body.style.userSelect = "none";
+    document.body.classList.add("is-resizing");
+    setSplitFromPointer(clientX, clientY);
+  };
 
-  els.divider.addEventListener("pointermove", (event) => {
+  const moveDrag = (clientX, clientY) => {
     if (!dragging) {
       return;
     }
-    setSplitFromClientX(event.clientX);
-  });
+    setSplitFromPointer(clientX, clientY);
+  };
 
-  els.divider.addEventListener("pointerup", (event) => {
+  const stopDrag = () => {
     if (!dragging) {
       return;
     }
     dragging = false;
-    els.divider.releasePointerCapture(event.pointerId);
+    document.body.style.userSelect = "";
+    document.body.classList.remove("is-resizing");
+  };
+
+  els.divider.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    startDrag(event.clientX, event.clientY);
   });
 
-  els.divider.addEventListener("pointercancel", () => {
-    dragging = false;
+  window.addEventListener("pointermove", (event) => {
+    moveDrag(event.clientX, event.clientY);
   });
+  window.addEventListener("pointerup", stopDrag);
+  window.addEventListener("pointercancel", stopDrag);
+
+  els.divider.addEventListener("mousedown", (event) => {
+    if (event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    startDrag(event.clientX, event.clientY);
+  });
+
+  window.addEventListener("mousemove", (event) => {
+    moveDrag(event.clientX, event.clientY);
+  });
+  window.addEventListener("mouseup", stopDrag);
+
+  els.divider.addEventListener(
+    "touchstart",
+    (event) => {
+      const touch = event.touches[0];
+      if (!touch) {
+        return;
+      }
+      event.preventDefault();
+      startDrag(touch.clientX, touch.clientY);
+    },
+    { passive: false },
+  );
+
+  window.addEventListener(
+    "touchmove",
+    (event) => {
+      const touch = event.touches[0];
+      if (!touch) {
+        return;
+      }
+      if (dragging) {
+        event.preventDefault();
+      }
+      moveDrag(touch.clientX, touch.clientY);
+    },
+    { passive: false },
+  );
+  window.addEventListener("touchend", stopDrag);
+  window.addEventListener("touchcancel", stopDrag);
 
   els.copyYamlBtn?.addEventListener("click", () => {
     void copyText(els.input.value, els.copyYamlBtn);

site/styles.css

@@ -8,6 +8,7 @@
   --line: rgba(130, 110, 89, 0.22);
   --muted: #6d675f;
   --left-width: 50%;
+  --top-height: 50%;
   --copy-bg: #f8f1e8;
   --copy-border: #cbbca9;
   --copy-text: #2d241d;
@@ -254,7 +255,7 @@ body::before {
 }
 
 .divider {
-  width: 10px;
+  width: 8px;
   cursor: col-resize;
   border-left: 1px solid var(--line);
   border-right: 1px solid var(--line);
@@ -263,6 +264,8 @@ body::before {
     linear-gradient(180deg, rgba(64, 102, 255, 0.18), rgba(17, 200, 220, 0.18));
   position: relative;
   flex: 0 0 auto;
+  touch-action: none;
+  z-index: 8;
 }
 
 .divider::before {
@@ -280,6 +283,29 @@ body::before {
     3px 0 0 rgba(115, 121, 147, 0.55);
 }
 
+.divider::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  left: -6px;
+  right: -6px;
+}
+
+.divider:hover {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
+    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+body.is-resizing .panel-left,
+body.is-resizing .panel-right {
+  pointer-events: none;
+}
+
+body.is-resizing .divider {
+  pointer-events: auto;
+}
+
 .panel-head {
   position: relative;
   display: flex;
@@ -710,6 +736,14 @@ pre {
     width: 100%;
   }
 
+  .panel-left {
+    height: var(--top-height);
+  }
+
+  .panel-right {
+    height: calc(100% - var(--top-height));
+  }
+
   .panel {
     min-width: 0;
   }