@lystech/sections 0.6.0 → 0.8.0

package/dist/morceaux/ApercuMobile-RzxSOXyF.js

@@ -0,0 +1,63 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { useRef as p, useState as E, useEffect as s } from "react";
+import { F as m, E as u } from "./constantes-BwBWlNYy.js";
+const v = 390;
+function A({
+  brouillons: r,
+  surFermer: c
+}) {
+  const o = p(null), [f, d] = E(0), [l, g] = E(() => Math.min(844, window.innerHeight - 140)), y = (() => {
+    const e = new URL(window.location.href);
+    return e.hash = "", e.searchParams.set(m, "1"), e.toString();
+  })(), w = p(r);
+  return w.current = r, s(() => {
+    const e = (t) => {
+      const n = o.current?.contentWindow;
+      !n || t.source !== n || t.origin !== window.location.origin || t.data?.lystech === "apercu-pret" && n.postMessage({ lystech: "apercu", blocs: w.current }, window.location.origin);
+    };
+    return window.addEventListener("message", e), () => window.removeEventListener("message", e);
+  }, []), s(() => {
+    o.current?.contentWindow?.postMessage({ lystech: "apercu", blocs: r }, window.location.origin);
+  }, [r]), s(() => {
+    const e = (n) => {
+      const h = o.current?.contentWindow;
+      try {
+        h?.dispatchEvent(new h.CustomEvent(u, { detail: n.detail }));
+      } catch {
+        d((L) => L + 1);
+      }
+    }, t = () => g(Math.min(844, window.innerHeight - 140));
+    return window.addEventListener(u, e), window.addEventListener("resize", t), () => {
+      window.removeEventListener(u, e), window.removeEventListener("resize", t);
+    };
+  }, []), s(() => {
+    const e = (t) => {
+      t.key === "Escape" && c();
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [c]), /* @__PURE__ */ a("div", { className: "apercu", role: "dialog", "aria-label": "Aperçu sur téléphone", children: [
+    /* @__PURE__ */ a("div", { className: "apercu__barre", children: [
+      /* @__PURE__ */ a("span", { children: [
+        "Aperçu téléphone · ",
+        v,
+        " px — ce que voient vos visiteurs"
+      ] }),
+      /* @__PURE__ */ i("button", { type: "button", className: "bouton bouton--discret", onClick: () => d((e) => e + 1), children: "Recharger" }),
+      /* @__PURE__ */ i("button", { type: "button", className: "bouton bouton--principal", onClick: c, autoFocus: !0, children: "Retour au bureau" })
+    ] }),
+    /* @__PURE__ */ i("div", { className: "apercu__tel", style: { height: l + 24 }, children: /* @__PURE__ */ i(
+      "iframe",
+      {
+        ref: o,
+        name: m,
+        title: "La page, sur un téléphone",
+        src: y,
+        style: { width: v, height: l }
+      },
+      f
+    ) })
+  ] });
+}
+export {
+  A as default
+};