2b:null 2c:["$","title",null,{"children":"Little things | Kelley van Evert | Observable"}] 31:T533,function toggle (params = {}) { const { value, title, title_off, direct } = _.defaults(params, { title: '', title_off: params.title_off || params.title || '', value: false, direct: false, }); const root = (html`

${toggle_svg.outerHTML} ${value ? title : title_off}

`); root.value = value; const titlespan = root.querySelector('span.title'); const slide = d3.select(root.querySelector('g.slide')) .attr('transform', `translate(${root.value ? 0 : -32} 0)`); root.querySelector('a').onclick = function (e) { e.preventDefault(); root.value = !root.value; slide.interrupt().transition().duration(150) .attr('transform', `translate(${root.value ? 0 : -32} 0)`) .on('end', () => { if (!direct) { root.dispatchEvent(new CustomEvent('input')); titlespan.innerHTML = root.value ? title : title_off; } }); if (direct) { setTimeout(() => { root.dispatchEvent(new CustomEvent('input')); titlespan.innerHTML = root.value ? title : title_off; }, 1) } return false; } return root; }32:T72f,function bgrid (ncols, nrows, params) { const { cellsize, swipe, title, value, offset_even_rows } = _.defaults(params, { cellsize: 20, swipe: true, title: 'Boolean grid', value: false, offset_even_rows: 0, }); const grid = _.isBoolean(value) ? _.range(nrows).map(y => _.range(ncols).map(x => value)) : _.cloneDeep(value) const data = _.range(nrows*ncols).map(i => { const x = i % ncols; const y = Math.floor(i / ncols); return { x, y }; }); const svg = d3.select(DOM.svg(20*(ncols+offset_even_rows) + 2, 20*nrows + 2)); const g = svg.append('g').style('cursor', 'pointer') g.append('rect').attr('x', 1).attr('y', 1) .attr('width', 20*(ncols+offset_even_rows) + 2).attr('height', 20*nrows + 2) .attr('fill', '#fff').attr('stroke', 'none') g.selectAll('rect.cell').data(data) .enter().append('rect').attr('class', 'cell') .attr('width', cellsize-4) .attr('height', cellsize-4) .attr('x', d => (d.x + (1-(d.y%2))*offset_even_rows)*cellsize + 2+1) .attr('y', d => (d.y)*cellsize + 2+1) .attr('fill', d => grid[d.y][d.x] ? '#222' : '#fff') .attr('stroke', '#000') .each(function (d) { d.rect = this }) var px = null; var py = null; g.call(d3.drag().on(swipe ? 'start drag' : 'start', function () { const y = Math.floor((d3.event.y-1) / cellsize); const x = Math.floor((d3.event.x-1) / cellsize - (1-(y%2))*offset_even_rows); if (!(d3.event.type == 'drag' && px == x && py == y) && x >= 0 && y >= 0 && x < ncols && y < nrows) { const val = grid[y][x] = !grid[y][x]; d3.select(data[y*ncols + x].rect).attr('fill', val ? '#222' : '#fff'); px = x; py = y; svg.node().dispatchEvent(new CustomEvent('input')); } })) svg.node().value = grid; return svg.node(); }33:T47a,download_icon = html``34:Taf0,toggle_off = html``35:T3519,toggle_on = html``36:T137b,toggle_svg = html``37:[] 2f:{"id":"871535ab84947bb2","slug":"little-things","title":"Little things","thumbnail":"ca96515f96bf39365fe30ca59b34ca21579962f29293ba8f6a1fff1cefc9a347","access_level":"public","create_time":"$D2018-03-22T21:21:03.885Z","update_time":"$D2018-10-27T11:46:21.974Z","view_time":null,"first_public_time":"$D2018-03-22T21:31:07.840Z","fork":false,"stars":39,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":370,"publish_version":370,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"Little things","cells":[{"id":0,"value":"md`# Little things`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"md`**Update: I now also have some of these inputs with a playful \"bulging\" effect, see https://beta.observablehq.com/@kelleyvanevert/pretty-anime-js-sliders.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`### [1] Toggle input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`viewof bool = toggle({ title^String, off_title^String, value^Boolean })`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof binary = toggle({ title_off: 'Off title', title: 'On title', value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"binary","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`### [2] Wrap an SVG element with a download button`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`div_el = wrap_svg_downloadable(el^{SVGSVGElement}, filename^String = \"download.svg\")`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"function wrap_svg_downloadable (svgnode, filename = 'download.svg') {\n\n const root = html`

\n ${svgnode}\n ${download_icon.outerHTML}\n

`\n\n const downloadButton = root.querySelector('a.download');\n downloadButton.onclick = function (e) {\n var url = downloadButton.href = URL.createObjectURL(serialize(svgnode));\n setTimeout(function() { URL.revokeObjectURL(url); }, 50);\n }\n \n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`### [3] Boolean grid input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`

viewof bool_grid = bgrid(ncols^Int, nrows^Int, { title^String, value^{Boolean | Array(Array(Boolean))}, swipe^Boolean, cellsize^Int, offset_odd_rows^[0..1] })

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"viewof bool_grid = bgrid(10, 5, { value:true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"html`

${bool_grid.map(row => row.map(b => b ? 'X' : '.').join('')).join('\\n')}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`### [4] Map data from a single-use input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`viewof data^Y = mapinputdata(el^{viewof X}, fn^{X -> Y})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"viewof b_mapped = mapinputdata(toggle(), b => b ? 'Yes' : 'No')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"b_mapped","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"function mapinputdata (el, fn) {\n const root = html`

${el}

`;\n \n el.addEventListener('input', () => {\n root.value = fn(el.value);\n root.dispatchEvent(new CustomEvent('input'));\n }, false);\n \n root.value = fn(el.value);\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`### Implementation details`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"_ = require('lodash@4.17.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"