2b:null 2c:["$","title",null,{"children":"Spinner Inputs | Jasmine Otto | Observable"}] 31:T605,function cycling(prelude, choices, results) { // Twine-style 'cycling links', but considerably more humane (to read, anyway) // https://web.archive.org/web/20151117185450/http://furkleindustries.com/fictions/twine/twine2_resources/twine2_macros/ // wrapper dispatches events, c.f. https://beta.observablehq.com/@jashkenas/inputs let form = html`

${prelude} ` let widget = form.input // DOM.input('button') let branching = Array.isArray(results) let idx = 0 // TODO: is caching possible under topological sort? function onClick(e) { e && e.preventDefault() // choices.push(choices.shift()) // YUCK, mutating external state. // if (branching) results.push(results.shift()) idx = idx == choices.length-1 ? 0 : idx+1 refresh() form.dispatchEvent(new CustomEvent("input")) // consumed by Generators.input\1, as used by 'viewof' (TODO: link to actual cell) // https://beta.observablehq.com/@mbostock/introduction-to-generators // https://beta.observablehq.com/@mbostock/a-brief-introduction-to-viewof } function refresh() { widget.value = choices[idx] // display value form.value = [choices[idx], idx] // report value in an event form.output.value = branching ? results[idx] : results // another magic display value } refresh() widget.onclick = onClick // bind the effect return form }32:[] 2f:{"id":"97c6e7b86b06407c","slug":"spinner-inputs","title":"Spinner Inputs","thumbnail":"b89965cb584aa36893d8ae748f0683211695b1ee1e535584f13b5abffcc9632e","access_level":"public","create_time":"$D2018-06-18T02:14:25.737Z","update_time":"$D2019-01-28T03:41:00.112Z","view_time":null,"first_public_time":"$D2018-06-18T02:24:56.112Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"43e035ce64fad801","login":"jazztap","name":"Jasmine Otto","avatar_url":"https://avatars-next.observableusercontent.com/1d847b962089e3524d821a011682b5ec09925cb269ab3f15456fb6e38e574bcc","tier":"starter_2024"},"version":242,"publish_version":242,"role":null,"authored":false,"authors":[{"type":"individual","id":"91a3f7bf83a60ddd","login":"jazztap","name":"Jasmine Otto","avatar_url":"https://avatars-next.observableusercontent.com/1d847b962089e3524d821a011682b5ec09925cb269ab3f15456fb6e38e574bcc","tier":null}],"members":[{"type":"individual","id":"91a3f7bf83a60ddd","login":"jazztap","name":"Jasmine Otto","avatar_url":"https://avatars-next.observableusercontent.com/1d847b962089e3524d821a011682b5ec09925cb269ab3f15456fb6e38e574bcc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Spinner Inputs","cells":[{"id":0,"value":"md`## Spinner Inputs\n\n\\`import {cycling} from \"@jazztap/spinner-inputs\"\\`\n\nPort from Twine to ObservableHQ, with 'viewof' compatibility to expose that precious variable (and its index, d3 style).\n\nSadly the HTMLFormElement dislikes Markdown. Let me know if you get more than a one-liner to be pretty.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"viewof varname = cycling('I smell the ', ['red', 'blue'], [' roses',' violets'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"varname","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"md`\nPrimarily derived from the [input bazaar](https://beta.observablehq.com/@jashkenas/inputs#input), c.f. the magic event listener for \"input\" living in Generators.observe(). (Now if only I understood why \\`\\`\\`

\\`\\`\\` only wants to have one \\`\\`\\`\\`\\`\\`.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"md`#### Bonus`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"viewof bonus = fadein(1000, cycling('A nifty macro, ', ['but', 'and'],\n ['grab the fadein style definition too.',\n 'it preserves the HTMLFormElement!'] ))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"bonus","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"// https://stackoverflow.com/a/11681331\nfunction fadein(t, s) {\n // depends on `@keyframes fadein` in `style`\n let tmp = s.getAttribute('style') // TRY to not clobber the field\n s.setAttribute('style', tmp + `; animation: fadein ${t}ms`)\n return s\n}\n// fadein(1000, html`my style survived!`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"md`#### Also bonus`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"viewof also = multiselect(['alpha','omega'], [0,1], 'Greek')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"also","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"function multiselect(arr, def = [], title = '') {\n let choices = arr,\n sel = (i) => def.includes(i) ? 'selected' : '',\n form = html`\n\n`\n \n if (title) form.prepend(md`##### ${title}`)\n \n form.onchange = (e) => {\n e && e.preventDefault();\n form.value = Array.prototype.filter.call(\n form.input.options, i => i.selected).map(i => i.value);\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n form.onchange()\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"md`early scraps. more cacheable? e.g. if the cycling link may reappear (from nonexistence, not transparency)\n\\`\\`\\`js\n let texts = ['red', 'blue'] \n const widget = DOM.input('button')\n d3.select(widget)\n .attr('value', mutable survey)\n // .on('mouseover', () => {d3.select(this).style('border-bottom', '1px solid') })\n .on('click', (u,i,nodes) => {\n texts.push(texts.shift())\n mutable survey = texts[0]\n widget.value = texts[0] // d3.select(nodes[0]).attr('value', texts[0])\n })\n \n return widget\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"