43:null 44:["$","title",null,{"children":"Test FULLSCREEN | Marc Thevenin | Observable"}] 4a:T54b,fullscreenable = function (container, {label = "⛶", exitLabel = "✕", zone = ".zone-graph", signal} = {}) { if (!container.requestFullscreen) return container; container.classList.add("fsbox"); const style = document.createElement("style"); style.textContent = ` .fsbox { position: relative; background: white; padding: 4px; box-sizing: border-box; display: flex; flex-direction: column; } .fsbox ${zone} { display: flex; gap: 12px; } .fsbox ${zone} > * { flex: 1 1 0; min-width: 0; } .fsbox .fs-button { position: absolute; top: 4px; right: 4px; z-index: 1; } .fsbox[data-fullscreen] { width: 100vw; height: 100vh; padding: 12px; } .fsbox[data-fullscreen] ${zone} { flex: 1 1 0; min-height: 0; overflow: auto; } `; const button = document.createElement("button"); button.type = "button"; button.className = "fs-button"; button.title = "Plein écran"; button.textContent = label; container.append(style, button); const isFull = () => document.fullscreenElement === container; button.addEventListener("click", () => isFull() ? document.exitFullscreen() : container.requestFullscreen() ); container.addEventListener("fullscreenchange", () => { container.toggleAttribute("data-fullscreen", isFull()); button.textContent = isFull() ? exitLabel : label; }, {signal}); return container; }4b:T14d1,fullscreen = { const ICON_ENTER = ` `; const ICON_EXIT = ` `; // Bandeau de 32px réservé en haut de la zone : le bouton y est à droite. // Si le contenu commence par

, il occupe ce bandeau, à gauche du bouton. const CSS = ` .map-fs-wrap { position: relative; } .map-fs-wrap .map-fs-zone { width: 100%; padding-top: 32px; box-sizing: border-box; } .map-fs-wrap .map-fs-zone .controls { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-top: -32px; padding-right: 40px; box-sizing: border-box; } .map-fs-wrap .map-fs-zone .controls form { margin: 0; } .map-fs-wrap .map-fs-button { position: absolute; top: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 0; border-radius: 0; color: #ff564e; cursor: pointer; } .map-fs-wrap .map-fs-button:hover { color: #e63e36; background: rgba(255,86,78,.08); } .map-fs-wrap .map-fs-button:focus-visible { outline: 2px solid #ff564e; outline-offset: 2px; } @media (max-width: 599px) { .map-fs-wrap:not(.is-full) .map-fs-button { display: none; } } .map-fs-wrap.is-full { --fs-pad: clamp(32px, 4vw, 48px); position: fixed; inset: 0; z-index: 2147483647; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0; background: white; color: initial; padding: var(--fs-pad); box-sizing: border-box; overflow: auto; scrollbar-gutter: stable; } .map-fs-wrap.is-full .map-fs-button { top: var(--fs-pad); right: var(--fs-pad); } `; const button = (title, icon) => { const b = htl.html``; b.innerHTML = icon; return b; }; // content : un nœud DOM (html`...`), idéalement

…inputs…

puis le graphique // id : identifiant unique du conteneur // Plein écran : le contenu est déplacé dans un overlay attaché à (hors de la cellule, // donc non déplacé quand la cellule se ré-exécute), puis passé en plein écran natif. // Repli si le plein écran natif est refusé : popover (top layer). Un espace réservé reste dans la cellule. return function fullscreen(content, id) { const key = `__fs_v9_${id}`; // incrémenter si vous modifiez ce code let box = window[key]; if (!box) { const enter = button("Plein écran", ICON_ENTER); const exit = button("Quitter le plein écran", ICON_EXIT); box = htl.html`

`; box.append(enter); const overlay = htl.html`

`; overlay.append(exit); const zone = box.querySelector(".map-fs-zone"); const ozone = overlay.querySelector(".map-fs-zone"); box._zone = () => (box._full ? ozone : zone); box._full = false; const set = (on) => { if (on === box._full) return; box._full = on; if (on) { zone.style.minHeight = `${zone.getBoundingClientRect().height}px`; ozone.replaceChildren(...zone.childNodes); document.body.append(overlay); const fallback = () => { if (!box._full) return; overlay.setAttribute("popover", "manual"); if (overlay.showPopover) overlay.showPopover(); }; if (overlay.requestFullscreen) overlay.requestFullscreen().catch(fallback); else fallback(); } else { zone.replaceChildren(...ozone.childNodes); zone.style.minHeight = ""; if (document.fullscreenElement === overlay) document.exitFullscreen().catch(() => {}); if (overlay.hasAttribute("popover")) { if (overlay.matches(":popover-open")) overlay.hidePopover(); overlay.removeAttribute("popover"); } overlay.remove(); } }; enter.addEventListener("click", () => set(true)); exit.addEventListener("click", () => set(false)); document.addEventListener("keydown", (e) => { if (e.key === "Escape") set(false); }); document.addEventListener("fullscreenchange", () => { if (box._full && !document.fullscreenElement && !overlay.hasAttribute("popover")) set(false); }); window[key] = box; } box._zone().replaceChildren(content); return box; }; }4c:[] 48:{"id":"97ba5f5d83b28c24","slug":"test-fullscreen","title":"Test FULLSCREEN","thumbnail":"a5ac9f82fdb9ce211bb9076199c1fb9fbe3bdd862563133d91f3144ca167f684","access_level":"public","create_time":"$D2024-12-24T06:47:50.310Z","update_time":"$D2026-10-09T11:42:53.256Z","view_time":null,"first_public_time":"$D2024-12-24T07:59:13.835Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)","following":false},"version":232,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)","following":false}],"members":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Test FULLSCREEN","cells":[{"id":0,"value":"# Test FULLSCREEN","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"size = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof contour = Inputs.toggle({label: \"Contour\", value: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"makePlot = function (rWidth, contour) {\n const col = rWidth >= 700 ? 3 : rWidth >= 400 ? 2 : 1;\n const keys = Array.from(d3.union(industries.map((d) => d.industry)));\n const index = new Map(keys.map((key, i) => [key, i]));\n const fx = (key) => index.get(key) % col;\n const fy = (key) => Math.floor(index.get(key) / col);\n return Plot.plot({\n width: rWidth,\n height: 0.5 * rWidth,\n marginLeft: 0.02 * rWidth,\n axis: null,\n y: {insetTop: 10},\n fx: {padding: 0.03},\n marks: [\n Plot.areaY(industries, Plot.normalizeY(\"extent\", {\n x: \"date\",\n y: \"unemployed\",\n fx: (d) => fx(d.industry),\n fy: (d) => fy(d.industry),\n fill: \"industry\",\n stroke: contour ? \"black\" : null,\n tip: true\n })),\n Plot.text(keys, {fx, fy, frameAnchor: \"top-left\", dx: 6, dy: 6}),\n Plot.frame()\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"viewof rWidth = {\n const div = html`

`;\n const ro = new ResizeObserver(entries => {\n const w = entries[0].contentRect.width;\n if (w > 0 && w !== div.value) {\n div.value = w;\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n });\n ro.observe(div);\n div.value = div.getBoundingClientRect().width || 800;\n invalidation.then(() => ro.disconnect());\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"box = {\n const controller = new AbortController();\n const {signal} = controller;\n invalidation.then(() => controller.abort());\n const container = html`

${viewof contour}

\n ${viewof rWidth}\n

`;\n const zone = container.querySelector(\".zone-graph\");\n const render = () => {\n zone.replaceChildren(makePlot(viewof rWidth.value, viewof contour.value));\n };\n render();\n viewof rWidth.addEventListener(\"input\", render, {signal});\n viewof contour.addEventListener(\"input\", render, {signal});\n return fullscreenable(container, {signal});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"industries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"viewof toggle = Inputs.toggle({label: \"k\", value: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"boxPlot2 = {\n const content = htl.html`

${viewof toggle}

\n ${viewof rWidth}\n ${plot2}\n

\n\n \n\n `;\n\n return fullscreen(content, \"boxPlot2\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"plot2 = {\n const w = rWidth;\n const col = w >= 700 ? 3 : w >= 400 ? 2 : 1;\n const keys = Array.from(d3.union(industries.map((d) => d.industry)));\n const index = new Map(keys.map((key, i) => [key, i]));\n const fx = (key) => index.get(key) % col;\n const fy = (key) => Math.floor(index.get(key) / col);\n return Plot.plot({\n width: w,\n height: 0.5 * w,\n marginLeft: 0.05 * w,\n axis: true,\n y: {insetTop: 10},\n fx: {padding: 0.03},\n marks: [\n Plot.areaY(industries, Plot.normalizeY(\"extent\", {\n x: \"date\",\n y: \"unemployed\",\n fx: (d) => fx(d.industry),\n fy: (d) => fy(d.industry),\n fill: \"industry\",\n tip: true\n })),\n Plot.text(keys, {fx, fy, frameAnchor: \"top-left\", dx: 6, dy: 6}),\n Plot.frame()\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 49:"$48:body"