Width View
The usual width from the Observable standard library can only be used reactively. This notebook shows how to make a non-reactive version. Feel free to import it into your own notebook: import {viewof width} from '@jrus/widthview' Or just copy/paste whatever bit of the code you need.
Code
viewof width = { const view = html`<span class="observablehq--inspect"><span class="observablehq--number">`; const resized = function resized() { const w = document.body.clientWidth; if (w !== view.value) { view.firstChild.textContent = view.value = w; view.dispatchEvent(new CustomEvent("input")); } } window.addEventListener('resize', resized); invalidation.then(() => window.removeEventListener('resize', resized)); return resized(), view; }
Basic usage
viewof width.value // not reactive
width
A bit trickier If we like, we can make a promise based on listening to changes to the width view, and then await it.
resized = () => new Promise(resolve => viewof width.addEventListener( 'input', () => resolve(viewof width.value), {once: true}));
{ yield viewof width.value; while (true) yield await resized(); }
Generator We can accomplish something similar without making a separate view, using the nifty Generators.observe:
widthObserver = () => Generators.observe(callback => { let currentWidth, previousWidth; const resized = () => { if ((currentWidth = document.body.clientWidth) !== previousWidth) callback(previousWidth = currentWidth); }; resized(), window.addEventListener('resize', resized); return () => window.removeEventListener('resize', resized); })
widthObserver()
{ for (const w of widthObserver()) { yield w; } }
We can also make a View from our generator:
viewof widthView = { const view = html`<span class="observablehq--inspect"><span class="observablehq--number">`; (async function (){ for await (const w of widthObserver()) { view.firstChild.textContent = view.value = w; view.dispatchEvent(new CustomEvent("input")); } })(); return view; }