Published
Edited
Jul 9, 2018
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof hiderTestBtn = checkbox({options:['Hide the ugly div below'],})
Insert cell
hiderTestHider = hider(hiderTestBtn)
Insert cell
hiderTestHider(
html`<div style="background-color:yellow; text-align:center; font-size:200px; color:red;">WHOOOO<br><div>`
)
Insert cell
Insert cell
viewof hiderTestCheckbox = checkbox({
description: 'Only a certain combination will show the hidden message',
options:['Ted','Cruz', 'is', 'is not', 'the Zodiac Killer'].map((v,i)=>({label:v,value:i+1}))
})
Insert cell
hiderTestHiderCbox = hider(hiderTestCheckbox, (opts) => {
let required = ['1','2','3','5'];
return !((opts.length === required.length) && opts.reduce( (a,v) => (a && required.includes(v)), true))
})
Insert cell
Insert cell
Insert cell
hider = (gen, tester) => {
console.log('!!',gen, tester, (tester) ? tester(gen):'');
let result = (tester) ? tester(gen) : gen;
if(result) {
return (div) => {
if(!div.style)
div = html`<div>${div}</div>`
div.style.display = 'none';
div.dispatchEvent( new CustomEvent('update'));
return div;
}
}
return (div)=>div;
}
Insert cell
Insert cell
Insert cell

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.
Learn more