29:null 2a:["$","title",null,{"children":"Text Scroller | Christopher Manning | Observable"}] 2f:T761,tests = { return [ ["cursor no selection", parseNumbers("1 2 3", 2, 2, 1), []], ["cursor ignore letters", parseNumbers("1 abc 2", 2, 2, 1), []], [ "cursor add", parseNumbers("1 2 3", 0, 0, 1), [{ newNumber: "2", number: "1", start: 0, end: 1 }] ], [ "cursor add with negative number", parseNumbers("-1 2 3", 0, 0, 1), [{ newNumber: "0", number: "-1", start: 0, end: 2 }] ], [ "cursor add custom step", parseNumbers("1.1 2 3", 0, 0, 0.1), [{ newNumber: "1.2", number: "1.1", start: 0, end: 3 }] ], [ "cursor middle add", parseNumbers("1 22 3", 3, 3, 1), [{ newNumber: "23", number: "22", start: 2, end: 4 }] ], [ "selection add", parseNumbers("1 2 3", 0, 1, 1), [{ newNumber: "2", number: "1", start: 0, end: 1 }] ], [ "selection add overselected", parseNumbers("1 2 3", 0, 2, 1), [{ newNumber: "2", number: "1", start: 0, end: 1 }] ], [ "selection multi add", parseNumbers("1 2 3", 0, 3, 1), [ { newNumber: "2", number: "1", start: 0, end: 1 }, { newNumber: "3", number: "2", start: 2, end: 3 } ] ], [ "selection multi add all", parseNumbers("1 2 3", 0, 5, 1), [ { newNumber: "2", number: "1", start: 0, end: 1 }, { newNumber: "3", number: "2", start: 2, end: 3 }, { newNumber: "4", number: "3", start: 4, end: 5 } ] ], [ "selection multi add with changed widths", parseNumbers("1 2 3", 0, 3, 10), [ { newNumber: "11", number: "1", start: 0, end: 1 }, { newNumber: "12", number: "2", start: 2, end: 3 } ] ] ].map((t) => { return [ t[0], JSON.stringify(t[1]) == JSON.stringify(t[2]), JSON.stringify(t[1]), JSON.stringify(t[2]) ]; }); }30:T800,parseNumbers = (text, selectionStart, selectionEnd, delta, options = {}) => { const { comma = false, formatting = n => { return n; }, constraints = n => { return true; } } = options; let chars = text.split(''); let regex = `[0-9${comma ? ',' : ''}\.-]`; // array of numbers locations to update: {start:Number, end:Number} let numbers = []; // get the numbers that the cursor is near by widening the search from the cursor location let [cursorStart, cursorEnd] = [selectionStart, selectionEnd]; let start = cursorStart; let end = cursorStart; let maxLength = 0; do { if (maxLength++ > 10_000) break; while (start > 0 && chars[start - 1].match(new RegExp(regex))) { start--; } while (end < chars.length && chars[end].match(new RegExp(regex))) { end++; } let number = text.substring(start, end); // ignore non numbers and ones that don't match the constraints if (number.match(new RegExp(regex + '+')) && constraints(number)) { // persist comma formatted numbers let isLocale = number.includes(','); if (isLocale) number = number.replace(',', ''); // calculate new value let result = Number(number) + delta; // fix floating point addition, use same precision as step let decimalParts = delta.toString().split('.'); if (decimalParts.length > 1) { result = result.toFixed(decimalParts[1].length); } // restore locale if needed if (isLocale) result = result.toLocaleString(); result = formatting(result.toString()); // if the new result doesn't pass constraints, revert the value // keep it in the numbers array so the text selection still selects it if (!constraints(result)) { result = number; } numbers.push({ newNumber: result, number: number, start: start, end: end }); } end++; start = end; } while (start > cursorStart && end < cursorEnd); return numbers; }31:T8c1,function TextScroller(t, options = {}) { const { comma = false, wheel = true, keydown = true, highlight = true, step = 1, formatting = (n) => { return n; }, constraints = (n) => { return true; } } = options; let action = (e) => { // only recognize up/down arrow and mousewheel if (e.which != 38 && e.which != 40 && e.type != "wheel") return; // compatability for Observable Inputs and html`` inputs if (!t.input) t.input = t.querySelector("input") || t.querySelector("textarea"); if (!t.input) t.input = t; // only works when focused if (t.input != document.activeElement) return; e.preventDefault(); // amount to change the value, hold alt/ctrl/shift to increase the delta // holding the shift key while scrolling makes deltaY -0 regardless of scroll direction let delta = e.which == 40 || e.deltaY < 0 ? -step : step; let deltaScale = 10; if (e.altKey) delta *= deltaScale; if (e.ctrlKey) delta *= deltaScale; if (e.shiftKey) delta *= deltaScale; let newValue = ""; let selection = { start: 0, end: 0 }; // sequentially reconstruct the value string to handle number width changes parseNumbers( t.input.value, t.input.selectionStart, t.input.selectionEnd, delta, options ).forEach((n, i, a) => { if (i == 0) selection.start = n.start; newValue += t.input.value.substring(i == 0 ? 0 : a[i - 1].end, n.start) + n.newNumber; if (i == a.length - 1) { selection.end = newValue.length; newValue += t.input.value.substring(n.end, t.input.value.length); } }); // noop if there are no changes if (newValue == "") return; t.input.value = newValue; // update cells that reference this view t.input.dispatchEvent(new CustomEvent("input")); t.dispatchEvent(new CustomEvent("input")); // snap the cursor to the number(s) selection if (highlight || selection.start != selection.end) { t.input.setSelectionRange(selection.start, selection.end); } }; if (wheel) t.addEventListener("wheel", action); if (keydown) t.addEventListener("keydown", action); return t; }32:[] 2d:{"id":"2e08ce28b72016a2","slug":"text-scroller","title":"Text Scroller","thumbnail":"aae22f2addf067c19f8bfd3e5bf33e137d738a4302490e497a7d705bde2fe0e1","access_level":"public","create_time":"$D2021-02-03T02:08:16.359Z","update_time":"$D2024-06-25T20:48:18.567Z","view_time":null,"first_public_time":"$D2021-02-03T04:23:31.900Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"0b7767cf62286989","login":"christophermanning","name":"Christopher Manning","avatar_url":"https://avatars-next.observableusercontent.com/05996dbe8b12a22c7c2cc6718ef99e6ac39f0c97e98e2ca7f5b75dd5e920c8d0","tier":"starter_2024"},"version":1318,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ab80266b6c16115","login":"christophermanning","name":"Christopher Manning","avatar_url":"https://avatars-next.observableusercontent.com/05996dbe8b12a22c7c2cc6718ef99e6ac39f0c97e98e2ca7f5b75dd5e920c8d0","tier":null}],"members":[{"type":"individual","id":"8ab80266b6c16115","login":"christophermanning","name":"Christopher Manning","avatar_url":"https://avatars-next.observableusercontent.com/05996dbe8b12a22c7c2cc6718ef99e6ac39f0c97e98e2ca7f5b75dd5e920c8d0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b71560d51610c266","slug":"utilities","title":"Utilities","owner":{"id":"0b7767cf62286989","login":"christophermanning","name":"Christopher Manning"}},"type":"notebook","body":{"title":"Text Scroller","cells":[{"id":0,"value":"md`# Text Scroller\n\nUse your mouse wheel, touchpad, or arrow keys to change the number under the cursor of a focused text input or textarea. Hold shift, alt, or ctrl to increase the amount the number is changed. Multiple numbers can also be selected.\n\n### Usage\n\n~~~js\nviewof t = TextScroller(Text())\nimport { TextScroller } from \"@christophermanning/text-scroller\"\nimport { Text } from \"@observablehq/inputs\"\n~~~\n\nThis can be used with text or textarea inputs from [Observable Inputs](https://observablehq.com/documentation/inputs/overview), [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs), or HTML.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof data = {\n let f = textScroller(\n Text({\n value: \"10 20 15 -35 40 -20\",\n description: \"Try selecting a number and scrolling.\"\n }),\n {\n constraints: (d) => {\n return d >= -50 && d <= 50;\n }\n }\n );\n return f;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"{\n const height = 100;\n let bw = 20;\n\n const context = DOM.context2d(width, height);\n\n data\n .split(' ')\n .filter(d => Number(d) || d == '0')\n .forEach((d, i) => {\n context.strokeRect(3 + i * bw + i * 23, height / 2, bw, -d);\n });\n\n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"md`### <textarea>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"viewof ta = {\n let randomValue = Array.from({ length: 10 }, (d) =>\n Array.from({ length: 7 }, (d) =>\n Math.floor(Math.random() * 100)\n .toString()\n .padEnd(3, 0)\n ).join(\" \")\n ).join(\"\\n\");\n\n let ta = Textarea({\n rows: 10,\n value: randomValue,\n description:\n \"Try selecting all the text, holding alt, and scrolling.
Constraints: positive numbers
Formatting: minimumIntegerDigits: 3\"\n });\n ta.querySelector(\"textarea\").classList.add(\"monospace\");\n\n let f = textScroller(ta, {\n // only positive numbers\n constraints: (n) => n >= 0,\n // number width of 3\n formatting: (n) => {\n return new Intl.NumberFormat(\"en\", { minimumIntegerDigits: 3 }).format(n);\n }\n });\n\n return f;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"{\n const height = 170;\n let bw = 20;\n\n const context = DOM.context2d(width, height);\n\n ta.split('\\n').map((dy, y) => {\n return dy\n .split(' ')\n .filter(d => Number(d) || d == '000')\n .map((dx, x) => {\n context.beginPath();\n context.strokeStyle = `hsl(${dx}, 100%, 50%)`;\n context.arc(bw + x * 50, bw + y * 15, 10 * (dx / 999), 0, 2 * Math.PI);\n context.stroke();\n });\n });\n\n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"ta","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"md`### Observable Inputs: Text and Textarea`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"viewof otext = textScroller(Text({ value: \"12 34 56 78\" }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"otext","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"viewof otextarea = textScroller(Textarea({ value: \"12 34 56 78\" }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"otextarea","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"md`### Inline\nUses [bind() from Observable Inputs](https://observablehq.com/@observablehq/synchronized-inputs)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"{\n let options = { constraints: n => n > 0 && n <= 10_000 };\n let input = () =>\n html``;\n\n return md`There are ${bind(\n textScroller(input(), options),\n viewof foxes\n )} quick brown foxes jumping over ${bind(\n textScroller(input(), options),\n viewof dogs\n )} lazy dogs.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"viewof foxes = {\n const element = html`

`;\n element.value = Math.floor(Math.random() * 50) + 2;\n element.oninput = () => {\n element.innerHTML = \"🦊\".repeat(Math.min(element.value, 10_000));\n };\n element.dispatchEvent(new Event(\"input\"));\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"viewof dogs = {\n const element = html`

`;\n element.value = Math.floor(Math.random() * 50) + 2;\n element.oninput = () => {\n element.innerHTML = \"🐶\".repeat(Math.min(element.value, 10_000));\n };\n element.dispatchEvent(new Event(\"input\"));\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"md`### HTML <input type=\"text\">`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"viewof htmlInput = textScroller(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"htmlInput","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"md`### Custom Options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"viewof tc = textScroller(\n Text({\n value: \"1 abc 42 4.5 1342 42 1,234\",\n description:\n \"Numbers with commas or decimals are parsed and non-numbers are ignored.
Comma: true\"\n }),\n { comma: true }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"textScroller(\n Text({\n value: \"5000\",\n description: \"Step: 0.1\"\n }),\n { step: 0.1 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"textScroller(\n Text({\n value: \"50\",\n description: \"Constraints: 0 >= value <= 100\"\n }),\n {\n constraints: (d) => {\n return d >= 0 && d <= 100;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"html`${\n tests.every((t) => t[1])\n ? \"

Tests Passing\"\n : \"

Tests Failing\"\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"md`### Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"// keeping the old function name here for backwards compatibility\nfunction textScroller(t, options = {}) {\n return TextScroller(t, options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"import { Text, Textarea, bind, Input, Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"