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:{"title":"Little things","cells":[{"id":0,"value":"md`# Little things`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":262,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`### [1] Toggle input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`viewof bool = toggle({ title^String, off_title^String, value^Boolean })`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"viewof binary = toggle({ title_off: 'Off title', title: 'On title', value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"binary","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`### [2] Wrap an SVG element with a download button`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`div_el = wrap_svg_downloadable(el^{SVGSVGElement}, filename^String = \"download.svg\")`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":258,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`### [3] Boolean grid input`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":103,"value":"viewof bool_grid = bgrid(10, 5, { value:true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`### [4] Map data from a single-use input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`viewof data^Y = mapinputdata(el^{viewof X}, fn^{X -> Y})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"viewof b_mapped = mapinputdata(toggle(), b => b ? 'Yes' : 'No')","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"b_mapped","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":213,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### Implementation details`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":38,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"_ = require('lodash@4.17.5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}