30:T44f,stickyView = (child, { left = 0, right = 0, offset = 0 } = {}) => { ({ prompt: "Can we make a movable sticky square, that responds to drag, by unsticking and resticking itself", time: 1725222636096 }); const dragger = html``; const element = view`

${dragger}

${["...", child]}

`; const container = view`

${[ "...", element ]}`; makeSticky(container, element, { offset }); makeMovable(dragger, element); return container; }31:[] 2e:{"title":"Draggable Sticky view","cells":[{"id":0,"value":"# Draggable Sticky view\n\nCreate complex UIs that are always in view and that can be adjusted when needed.\n\nAdapted from [@mootari/sticky-positioning](https://observablehq.com/@mootari/sticky-positioning)\n","pinned":false,"hidden":false,"mode":"md"},{"id":2518,"value":"viewof value = stickyView(\n view`

\n ${[\"text\", Inputs.textarea({ value: \"text\" })]}\n ${[\"number\", Inputs.range()]}\n

`,\n { offset: 10, left: width * 0.66, right: 25 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2593,"value":"Like other composable views, the `stickyView` exposes its child's value in a back-writable way","pinned":false,"hidden":false,"mode":"md"},{"id":2529,"value":"value","pinned":false,"hidden":false,"mode":"ojs"},{"id":2364,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2439,"value":"function makeSticky(context, element, { offset = 0 } = {}) {\n element.style.position = \"absolute\";\n return observeViewport((top) => {\n const rc = context.getBoundingClientRect();\n const rs = element.getBoundingClientRect();\n console.log(\"stickying\", offset);\n element.style.top = `${top - rc.top + offset}px`;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2440,"value":"function observeViewport(callback) {\n console.log(\"creating observeViewport\");\n let lastTop = -1,\n raf;\n const observer = new IntersectionObserver(([e]) => {\n if (Math.abs(lastTop - e.intersectionRect.top) > 2) {\n console.log(lastTop, e.intersectionRect.top);\n lastTop = e.intersectionRect.top;\n callback(e.intersectionRect.top);\n }\n observer.unobserve(target);\n raf = requestAnimationFrame(observe);\n });\n const target = document.documentElement;\n const observe = () => observer.observe(target);\n observe();\n\n // Disconnect callback.\n return () => {\n console.log(\"disconnect\");\n cancelAnimationFrame(raf);\n observer.disconnect();\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2385,"value":"function makeMovable(handle, el) {\n handle.onpointerdown = (e) => {\n let offsetX = e.clientX - el.offsetLeft;\n event.preventDefault();\n\n function move(event) {\n el.style.left = `${clamp(0, width - 20, event.clientX - offsetX)}px`;\n event.preventDefault();\n }\n\n function stopDrag() {\n el.style.cursor = \"grab\";\n document.removeEventListener(\"pointermove\", move);\n document.removeEventListener(\"pointerup\", stopDrag);\n }\n\n document.addEventListener(\"pointermove\", move);\n document.addEventListener(\"pointerup\", stopDrag);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2441,"value":"function clamp(a, b, v) {\n return v < a ? a : v > b ? b : v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2314,"value":"import { makeSticky as makeStickyRaw } from \"@mootari/sticky-positioning\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2311,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2597,"value":"

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}