2c:null 2d:["$","title",null,{"children":"Scroll Input | Paul Murray | Observable"}] 32:T820,function ScrollInput( data = d3.range(150), { height = `200px`, width = `100px`, type = "number" } = {} ) { const padding_box = html`

`; const child_style = ` font-family: monospace; display: grid; place-items: center; scroll-snap-align: center; `; const children = data.map( (d) => html`

${d}

` ); const parent_style = ` height: 100%; overflow: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; `; const pad = () => html`

`; const scroll_box = html`

${pad()}${children}${pad()}

`; const overlay_style = ` pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; border: 1px solid black; `; const overlay = html`

`; const wrapper_style = `position: relative; height: ${height}; width: ${width}`; const wrapper = html``; let value; scroll_box.onscroll = (event) => { event.stopPropagation(); event.preventDefault(); const rect = scroll_box.getBoundingClientRect(); const { x, y, width, height } = rect; const middle = { x: x + width / 2, y: y + height / 2 }; const elem = document.elementFromPoint(middle.x, middle.y); value = elem.dataset?.value; wrapper.dispatchEvent(new CustomEvent("input")); }; Object.defineProperty(wrapper, "value", { get() { return value; }, set(v) { value = v; const child = scroll_box.querySelector(`div[data-value="${v}"]`); const child_height = child.getBoundingClientRect().height; const parent_height = scroll_box.getBoundingClientRect().height; scroll_box.scrollTo({ behavior: `instant`, top: child.offsetTop + child_height / 2 - parent_height / 2, left: 0 }); } }); return wrapper; }33:T8b0,x11colors = [ "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen" ]34:[] 30:{"id":"f2e8b75a55322cac","slug":"scroll-input","title":"Scroll Input","thumbnail":"41db533154930e9ec1e9de224c13b3bdbbf6b1f2c4cf63778e04fd4cc6036937","access_level":"public","create_time":"$D2022-05-30T16:21:25.366Z","update_time":"$D2022-05-30T17:27:58.290Z","view_time":null,"first_public_time":"$D2022-05-30T17:19:03.867Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"77ca23d94884ea46","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":"starter_2024"},"version":368,"publish_version":368,"role":null,"authored":false,"authors":[{"type":"individual","id":"88a33f32468b0503","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":null}],"members":[{"type":"individual","id":"88a33f32468b0503","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scroll Input","cells":[{"id":0,"value":"# Scroll Input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"A scrolly input, similar to a simple [iOS Picker](https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"## With Numbers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"data = d3.range(200).map((d) => 123 + d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"viewof scrolly_number = ScrollInput(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"The value is: ${scrolly_number}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"With bound inputs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"Inputs.bind(htl.html``, viewof scrolly_number)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"Inputs.bind(Inputs.range(d3.extent(data), { step: 1 }), viewof scrolly_number)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"## With Strings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"viewof scrolly_strings = ScrollInput(x11colors, { width: `30ch` })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"With bound inputs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"Inputs.bind(\n Inputs.select(x11colors, {\n format: (d) => d.toString(),\n keyof: (d) => d,\n valueof: (d) => d\n }),\n viewof scrolly_strings\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"Inputs.bind(htl.html``, viewof scrolly_strings)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"