31:[] 2f:{"title":"Testing visibility continuously","cells":[{"id":0,"value":"md`# Testing visibility continuously`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`\n_Jacob says:_ Let’s see if as we scroll down the page we can use the \\`visibility\\` promise\nto get our shape to change color...\n\n_Fil adds:_ We monitor the changes continuously so that we can pause each cell when it’s not visible, and start again when it comes back into view. This method is quite involved, I wonder if there is a simpler approach… maybe with [intersectionobserver](https://observablehq.com/@mbostock/hello-intersectionobserver)?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`\\`colors\\` _is a Map of the visibility status (true, false) of each cell._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"colors = new Map()","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`\\`mutable color\\` _changes each time a new color becomes the new main color._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"mutable color = \"pink\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`\\`visible\\` _contains the list of visible cells._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"visible = {\n color;\n return [...colors].filter(d => d[1]).map(d => d[0]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"async function* setColorOnVisibility(c, visibility) {\n do {\n colors.set(c, false);\n await visibility();\n colors.set(c, true);\n for (const e of colors) {\n if (e[1]) {\n if (mutable color !== e[0]) {\n mutable color = e[0];\n if (e[0] === c) yield c;\n }\n break;\n }\n }\n await Promises.delay(1000); // no need to hurry after a change\n } while (true);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"visible","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"setColorOnVisibility(\"blue\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"setColorOnVisibility(\"red\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"setColorOnVisibility(\"green\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"setColorOnVisibility(\"orange\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"setColorOnVisibility(\"yellow\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"visible","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"setColorOnVisibility(\"olive\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"setColorOnVisibility(\"teal\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"visible","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"setColorOnVisibility(\"navy\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"setColorOnVisibility(\"gray\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"setColorOnVisibility(\"crimson\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"setColorOnVisibility(\"sienna\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"setColorOnVisibility(\"chartreuse\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"setColorOnVisibility(\"steelblue\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"setColorOnVisibility(\"mediumorchid\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"visible","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"setColorOnVisibility(\"peachpuff\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"setColorOnVisibility(\"midnightblue\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"setColorOnVisibility(\"slategray\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"setColorOnVisibility(\"sandybrown\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"visible","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"setColorOnVisibility(\"tomato\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"setColorOnVisibility(\"seagreen\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"setColorOnVisibility(\"orangered\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"setColorOnVisibility(\"olivedrab\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"visible","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"setColorOnVisibility(\"firebrick\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"setColorOnVisibility(\"lavender\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"setColorOnVisibility(\"cadetblue\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"setColorOnVisibility(\"papayawhip\", visibility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"visible","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}