Published
Edited
Mar 31, 2019
1 fork
Importers
7 stars
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;
}
viewof width.value // not reactive
width
resized = () => new Promise(resolve =>
viewof width.addEventListener(
'input', () => resolve(viewof width.value), {once: true}));
{
yield viewof width.value;
while (true) yield await resized();
}
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;
}
}
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;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
