@potch/html-bin 2.1.2 → 2.2.1

package/package.json

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

package/src/index.js

@@ -115,12 +115,16 @@ const createEditors = (sources, parents, updateFactory) => {
 create a bin component.
 Options:
   - `container` (optional Element): will automatically append the bin if provided
+  - `extraClasses`: a string of extra CSS classes to append to the bin element
   - `sources`: object with optional `{ js, css, html }` strings of source to put
-             in the corresponding editors
+               in the corresponding editors
   - `split`: number from [0, 1] specifying the ratio between the editor and
-           preview panes
+             preview panes. default is `0.5`.
+  - `splitMode`: (default `true`) whether to have the preview in split screen
+                 with code tabs.
   - `width`: CSS string to override default `--bin-width` value
   - `height`: CSS string to override default `--bin-height` value
+
 Returns object with the following fields:
   - `el`: Element of the outermost HTML element of the bin
   - `editors`: contains `{ js, css, html }` properties with the CodeMirror
@@ -133,6 +137,7 @@ Returns object with the following fields:
 */
 export const createBin = ({
   container,
+  extraClasses = "",
   sources: rawSources,
   split = 0.5,
   initialTab = "js",
@@ -164,6 +169,8 @@ export const createBin = ({
     }
   });
 
+  const isFullScreen = signal(false);
+
   const isMiniMode = computed(() => {
     const w = actualWidth.value;
     return !splitMode || w <= 700;
@@ -335,9 +342,11 @@ export const createBin = ({
     {
       className: computed(
         () =>
-          "bin" +
+          "bin " +
+          extraClasses +
           maybe(isMiniMode.value, " bin--mini-mode") +
-          maybe(resizing.value, " bin--resizing")
+          maybe(resizing.value, " bin--resizing") +
+          maybe(isFullScreen.value, " bin--fullscreen")
       ),
     },
     _(
@@ -360,6 +369,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 +399,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 +429,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);

package/src/style.css

@@ -24,6 +24,8 @@
   container-type: inline-size;
   container-name: bin;
 
+  line-height: 1;
+
   --bg: #aaa;
   --resizer-split: 0.5;
   --margin: 2px;
@@ -33,6 +35,16 @@
   --code-comment: #a3b0d9;
 }
 
+.bin--fullscreen {
+  --bin-width: 100svw !important;
+  --bin-height: 100svh !important;
+  position: fixed;
+  inset: 0;
+  height: 100svh;
+  max-height: 100svh;
+  z-index: 99;
+}
+
 .bin__widget {
   position: absolute;
   width: 100%;
@@ -102,6 +114,13 @@
   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;