@potch/html-bin 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@potch/html-bin",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "",
   "main": "src/index.js",
   "type": "module",

package/src/index.js

@@ -134,7 +134,7 @@ Returns object with the following fields:
 export const createBin = ({
   container,
   sources: rawSources,
-  split,
+  split = 0.5,
   initialTab = "js",
   splitMode = true,
   width,
@@ -145,7 +145,7 @@ export const createBin = ({
     document.head.append(injectedStyles);
   }
 
-  const editorSplit = signal(parseFloat(split) || 0.5);
+  const editorSplit = signal(parseFloat(split));
 
   const teardownFns = [];
   const stopCapturingEffects = onEffect((fn) => teardownFns.push(fn));
@@ -164,6 +164,8 @@ export const createBin = ({
     }
   });
 
+  const isFullScreen = signal(false);
+
   const isMiniMode = computed(() => {
     const w = actualWidth.value;
     return !splitMode || w <= 700;
@@ -337,7 +339,8 @@ export const createBin = ({
         () =>
           "bin" +
           maybe(isMiniMode.value, " bin--mini-mode") +
-          maybe(resizing.value, " bin--resizing")
+          maybe(resizing.value, " bin--resizing") +
+          maybe(isFullScreen.value, " bin--fullscreen")
       ),
     },
     _(
@@ -360,6 +363,21 @@ export const createBin = ({
       _(
         "div",
         { className: "bin__menu" },
+        _(
+          "button",
+          {
+            className: "bin__preview__expand bin__iconbutton",
+            title: "show the code tabs",
+            "aria-label": "show the code tabs",
+            style: computed(() => ({
+              display: splitOverride.value === 0 ? "block" : "none",
+            })),
+            onclick: () => {
+              splitOverride.value = null;
+            },
+          },
+          "⏭️"
+        ),
         _(
           "div",
           { className: "bin__tab bin__preview_tab bin__tab--active" },
@@ -375,26 +393,21 @@ export const createBin = ({
             "🔁"
           )
         ),
-        _("button", {
-          className: "bin__preview__expand bin__iconbutton",
-          title: computed(() =>
-            splitOverride.value === 0
-              ? "show the code tabs"
-              : "show only the preview"
-          ),
-          "aria-label": computed(() =>
-            splitOverride.value === 0
-              ? "show the code tabs"
-              : "show only the preview"
-          ),
-          innerText: computed(() => (splitOverride.value === 0 ? "⏭️" : "↔️")),
-          style: computed(() => ({
-            order: splitOverride.value === 0 ? -1 : "unset",
-          })),
-          onclick: () => {
-            splitOverride.value = splitOverride.value === 0 ? null : 0;
+        _(
+          "button",
+          {
+            className: "bin__preview__expand bin__iconbutton",
+            title: "show only the preview",
+            "aria-label": "show only the preview",
+            style: computed(() => ({
+              display: splitOverride.value === 0 ? "none" : "block",
+            })),
+            onclick: () => {
+              splitOverride.value = 0;
+            },
           },
-        })
+          "↔️"
+        )
       ),
       editorPanes.js,
       editorPanes.css,
@@ -410,7 +423,14 @@ export const createBin = ({
         src: previewURL,
       }),
       _("div", { className: "bin__controls" })
-    )
+    ),
+    _("button", {
+      className: "bin__fullscreen bin__iconbutton",
+      title: "toggle fullscreen mode",
+      "aria-label": "toggle fullscreen mode",
+      innerText: computed(() => (isFullScreen.value ? "↖️" : "↘️")),
+      onclick: () => (isFullScreen.value = !isFullScreen.value),
+    })
   );
 
   if (width) binEl.style.setProperty("--bin-width", width);
@@ -453,10 +473,9 @@ export const createBin = ({
 
   // set the split in CSS, factoring in expanded panes
   effect(() => {
-    binEl.style.setProperty(
-      "--resizer-split",
-      splitOverride.value !== null ? splitOverride.value : editorSplit.value
-    );
+    const o = splitOverride.value;
+    const s = editorSplit.value;
+    binEl.style.setProperty("--resizer-split", o !== null ? o : s);
   });
 
   // editor tabs
@@ -490,7 +509,6 @@ export const createBin = ({
 
   // destroy / teardown
   stopCapturingEffects();
-  console.log(teardownFns);
 
   const teardown = () => {
     while (teardownFns.length) {

package/src/style.css

@@ -33,6 +33,15 @@
   --code-comment: #a3b0d9;
 }
 
+.bin--fullscreen {
+  --bin-width: 100svw !important;
+  --bin-height: 100svh !important;
+  position: fixed;
+  inset: 0;
+  height: 100svh;
+  max-height: 100svh;
+}
+
 .bin__widget {
   position: absolute;
   width: 100%;
@@ -102,7 +111,15 @@
   margin-inline: 0.5rem;
 }
 
+.bin__fullscreen {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+  padding: 0.25rem;
+}
+
 .bin__resizer {
+  user-select: none;
   grid-area: resizer;
   cursor: ew-resize;
   position: relative;