hyperbook 0.90.0 → 0.91.0

package/dist/assets/directive-webide/client.js

@@ -16,7 +16,107 @@ hyperbook.webide = (function () {
     ]),
   );
 
+  function setupSplitter(elem, container, editorContainer, splitter) {
+    if (!container || !editorContainer || !splitter) return;
+
+    const minPanelSize = 120;
+
+    const getIsHorizontal = () =>
+      getComputedStyle(elem).flexDirection.startsWith("row");
+
+    const applySplitSize = (rawSize, isHorizontal) => {
+      const total = isHorizontal ? elem.clientWidth : elem.clientHeight;
+      const splitterSize = isHorizontal ? splitter.offsetWidth : splitter.offsetHeight;
+      const maxSize = Math.max(minPanelSize, total - splitterSize - minPanelSize);
+      const clamped = Math.max(minPanelSize, Math.min(rawSize, maxSize));
+      container.style.flex = `0 0 ${clamped}px`;
+      return clamped;
+    };
+
+    const applyStoredSplitSize = () => {
+      const isHorizontal = getIsHorizontal();
+      elem.classList.toggle("split-horizontal", isHorizontal);
+      elem.classList.toggle("split-vertical", !isHorizontal);
+      const key = isHorizontal ? "splitHorizontal" : "splitVertical";
+      const rawStored = Number(elem.dataset[key]);
+      if (!Number.isFinite(rawStored) || rawStored <= 0) {
+        container.style.flex = "";
+        return;
+      }
+      applySplitSize(rawStored, isHorizontal);
+    };
+
+    applyStoredSplitSize();
+
+    splitter.addEventListener("pointerdown", (event) => {
+      event.preventDefault();
+      splitter.setPointerCapture(event.pointerId);
+
+      const isHorizontal = getIsHorizontal();
+      const key = isHorizontal ? "splitHorizontal" : "splitVertical";
+      const startPointer = isHorizontal ? event.clientX : event.clientY;
+      const startSize = isHorizontal
+        ? container.getBoundingClientRect().width
+        : container.getBoundingClientRect().height;
+
+      elem.classList.add("resizing");
+
+      const onPointerMove = (moveEvent) => {
+        const pointer = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
+        const delta = pointer - startPointer;
+        const size = applySplitSize(startSize + delta, isHorizontal);
+        elem.dataset[key] = String(Math.round(size));
+      };
+
+      const onPointerUp = () => {
+        elem.classList.remove("resizing");
+        splitter.removeEventListener("pointermove", onPointerMove);
+        splitter.removeEventListener("pointerup", onPointerUp);
+        splitter.removeEventListener("pointercancel", onPointerUp);
+      };
+
+      splitter.addEventListener("pointermove", onPointerMove);
+      splitter.addEventListener("pointerup", onPointerUp);
+      splitter.addEventListener("pointercancel", onPointerUp);
+    });
+
+    window.addEventListener("resize", applyStoredSplitSize);
+  }
+
+  const updateFullscreenButtonState = (elem, button) => {
+    if (!elem || !button) return;
+    const isFullscreen = document.fullscreenElement === elem;
+    const label = hyperbook.i18n.get("ide-fullscreen-enter");
+    button.textContent = "⛶";
+    button.title = label;
+    button.setAttribute("aria-label", label);
+    button.classList.toggle("active", isFullscreen);
+  };
+
+  const toggleFullscreen = async (elem) => {
+    if (!elem) return;
+    if (document.fullscreenElement === elem) {
+      await document.exitFullscreen();
+      return;
+    }
+    await elem.requestFullscreen();
+  };
+
+  const syncFullscreenButtons = () => {
+    const elems = document.querySelectorAll(".directive-webide");
+    elems.forEach((elem) => {
+      const fullscreen = elem.querySelector("button.fullscreen");
+      updateFullscreenButtonState(elem, fullscreen);
+    });
+  };
+
   function initElement(elem) {
+    if (elem.getAttribute("data-webide-initialized") === "true") return;
+    elem.setAttribute("data-webide-initialized", "true");
+
+    const container = elem.querySelector(".container");
+    const editorContainer = elem.querySelector(".editor-container");
+    const splitter = elem.querySelector(".splitter");
     const title = elem.getElementsByClassName("container-title")[0];
     /** @type {HTMLTextAreaElement | null} */
     const editorHTML = elem.querySelector(".editor.html");
@@ -38,6 +138,19 @@ hyperbook.webide = (function () {
     const resetEl = elem.querySelector("button.reset");
     /** @type {HTMLButtonElement} */
     const downloadEl = elem.querySelector("button.download");
+    /** @type {HTMLButtonElement} */
+    const fullscreenEl = elem.querySelector("button.fullscreen");
+
+    setupSplitter(elem, container, editorContainer, splitter);
+
+    fullscreenEl?.addEventListener("click", async () => {
+      try {
+        await toggleFullscreen(elem);
+      } catch (error) {
+        console.error(error.message);
+      }
+    });
+    updateFullscreenButtonState(elem, fullscreenEl);
 
     resetEl?.addEventListener("click", () => {
       if (window.confirm(hyperbook.i18n.get("webide-reset-prompt"))) {
@@ -166,6 +279,7 @@ hyperbook.webide = (function () {
   document.addEventListener("DOMContentLoaded", () => {
     init(document);
   });
+  document.addEventListener("fullscreenchange", syncFullscreenButtons);
 
   // Observe for new elements added to the DOM
   const observer = new MutationObserver((mutations) => {

package/dist/assets/directive-webide/style.css

@@ -5,6 +5,7 @@
   flex-direction: column;
   overflow: hidden;
   gap: 8px;
+  height: var(--webide-height, calc(100dvh - 80px));
 }
 
 code-input {
@@ -13,9 +14,12 @@ code-input {
 
 .directive-webide .container {
   width: 100%;
+  min-height: 120px;
+  min-width: 120px;
   border: 1px solid var(--color-spacer);
   border-radius: 8px;
   overflow: hidden;
+  flex: 1 1 0;
 }
 
 .directive-webide .container-title {
@@ -47,7 +51,42 @@ code-input {
   width: 100%;
   display: flex;
   flex-direction: column;
-  height: 400px;
+  min-height: 120px;
+  min-width: 120px;
+  flex: 1 1 0;
+}
+
+.directive-webide .splitter {
+  background: var(--color-spacer);
+  border-radius: 999px;
+  flex-shrink: 0;
+  touch-action: none;
+  opacity: 0.45;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.directive-webide .splitter:hover {
+  opacity: 0.65;
+}
+
+.directive-webide.split-vertical .splitter {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.directive-webide.split-horizontal .splitter {
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.directive-webide.resizing {
+  user-select: none;
+}
+
+.directive-webide.resizing .splitter {
+  opacity: 0.75;
 }
 
 .directive-webide .editor {
@@ -67,6 +106,7 @@ code-input {
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  overflow: hidden;
 }
 
 .directive-webide .buttons.bottom {
@@ -91,10 +131,17 @@ code-input {
   opacity: 0.6;
 }
 
-.directive-webide .buttons:last-child {
+.directive-webide .buttons button:last-child {
   border-right: none;
 }
 
+.directive-webide button.fullscreen {
+  flex: 0 0 auto;
+  min-width: 42px;
+  width: 42px;
+  padding: 8px 0;
+}
+
 .directive-webide button:hover {
   background-color: var(--color-spacer);
 }
@@ -106,10 +153,21 @@ code-input {
   background-color: white;
 }
 
+.directive-webide:fullscreen {
+  width: 100vw;
+  height: 100dvh !important;
+  padding: 12px;
+  box-sizing: border-box;
+  background-color: var(--color-background, var(--color--background, #fff));
+}
+
+.directive-webide:fullscreen::backdrop {
+  background-color: var(--color-background, var(--color--background, #fff));
+}
+
 @media screen and (min-width: 1024px) {
   .directive-webide:not(.standalone) {
     flex-direction: row;
-    height: calc(100dvh - 128px);
     .container {
       flex: 1;
       height: 100% !important;