36:["$","title",null,{"children":"History of an input, viewof | chonghorizons | Observable"}] 3e:T779,function numberBoxWithHistoryV2() { const wrapper = html`

`; const input = html``; const undoButton = html``; const redoButton = html``; const state = { history: [], value: 0, undo: undoButton, redo: redoButton }; let curIndex = -1; const addToHistory = debounce(e => { if (curIndex !== state.history.length - 1) { state.history = state.history.slice(0, curIndex); } state.history.push(e.target.valueAsNumber); curIndex++; state.value = e.target.valueAsNumber; wrapper.value = state; wrapper.dispatchEvent(new CustomEvent("input")); }, 1000); input.addEventListener('input', addToHistory); undoButton.addEventListener('click', undo); redoButton.addEventListener('click', redo); function undo() { if (curIndex) curIndex--; state.value = state.history[curIndex]; input.value = state.value; wrapper.value = state; wrapper.dispatchEvent(new CustomEvent("input")); } function redo() { if (curIndex < state.history.length - 1) curIndex++; state.value = state.history[curIndex]; input.value = state.value; wrapper.value = state; wrapper.dispatchEvent(new CustomEvent("input")); } // from David Walsh https://davidwalsh.name/javascript-debounce-function function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } wrapper.appendChild(input); wrapper.appendChild(undoButton); wrapper.appendChild(redoButton); wrapper.value = state; return wrapper; }3f:Ta83,function input3(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); form._history = []; if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } // Begin changes for history if (!isNaN(value)) { form._history.push(value); } console.log("history try4 w/ @Severo help with input3"); console.log(form._history); // End changes for history form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); form._configForSettableInput = { getValue, display, format }; // <- Only difference with original code // input2 @severo return form; }40:[] 3a:{"id":"c273293384fed73c","slug":"history-of-an-input-viewof/2","title":"History of an input, viewof","thumbnail":"a9e85682d697ea85fdce1ca02c47dc173dbbc59839170d4b4018d6c8f4760526","access_level":"public","create_time":"$D2021-02-04T04:04:07.267Z","update_time":"$D2021-02-05T20:56:44.583Z","view_time":null,"first_public_time":"$D2021-02-04T04:08:37.391Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"15d587e66f4266d3","login":"chonghorizons","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f00abac9e09c9bd8b8f4d7fa69299ac7ba47eef711449bf2d55b1b52d740ac","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":373,"publish_version":373,"role":null,"authored":false,"authors":[{"type":"individual","id":"f44fea89e21f8c13","login":"chonghorizons","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f00abac9e09c9bd8b8f4d7fa69299ac7ba47eef711449bf2d55b1b52d740ac","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f44fea89e21f8c13","login":"chonghorizons","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f00abac9e09c9bd8b8f4d7fa69299ac7ba47eef711449bf2d55b1b52d740ac","tier":null,"role":"editor"}],"comments":[{"id":"8ae4a8d860a1c4ca","reply_to_id":null,"content":"@chrispahm\n\nI copied your work over to here. I like how it comes with the buttons. However, I couldn't easily figure out how to set the value programmatically.","create_time":"$D2021-02-05T19:29:02.169Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"f44fea89e21f8c13","login":"chonghorizons","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f00abac9e09c9bd8b8f4d7fa69299ac7ba47eef711449bf2d55b1b52d740ac","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"History of an input, viewof","cells":[{"id":337,"value":"md`# History of an input, viewof`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"{\n let inner=md`---\n#### try it first\n\n1. Enter some numbers.\n2. Enter more numbers.\n3. Watch teaser.history grow\n4. Click undo/redo to move through the history\n`\n return html`

\n${inner}\n\n

`\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":" viewof teaser = numberBoxWithHistoryV2()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"Table(teaser.history.map(d => ({History: d})), \n {\n align: { History: \"left\"}\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"teaser.history","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"html`

End Try it first

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md` ---\n## How to Use it and what is it?\n_{Version: 1.1}\n\nGOAL: Get the history of an input. Could also be viewed as an \"undo\" for a form element.\n\nTESTED: Works. Enter 1 in the box. Then hit \"random 3 times\" or enter some random values. See the history chancge. Then hit go back 3 times. You'll see the numbers go back and get back to 1.\n\nMETHOD: Everytime the value is set, the history is updated.\n\nTODO:\n- [x] Stick the history inside the scope/environment of the element itself.\n- [x] Also allow numberBox._history() to allow access to the history.\n- [x] make it importable\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`---\n### Version 1\nThanks to @severo, see https://talk.observablehq.com/t/how-can-i-track-the-history-of-a-view/4568/2\n\n* advantages: works with .setValue like https://observablehq.com/@severo/inputs-setter (see the random button for an example)\n\n* limitations: as an entry box, it logs every keystroke as a separate history.\n * workaround: add a submit button to fire the dispatch event. Or just deal with it and people have to hit undo several times to get back to their last input, keystroke by keystroke. Or implement the debounce of v2.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`#### watching the value of the numberbox and the history` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"n_v1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"(viewof n_v1._history)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`#### Example with extra buttons buttons` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"{\n const form = html``;\n form.random.onclick = () => {\n console.log(viewof n_v1._history);\n viewof n_v1.setValue(Math.random()*1000);\n console.log('success?');\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof n_v1 = numberBoxWithHistoryV1()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"{\n const form = html``;\n form.goback.onclick = () => {\n console.log(\"go back\");\n console.log(viewof n_v1._history);\n let lastValue = viewof n_v1._history.pop(); // (the current value)\n let b = viewof n_v1._history.pop(); // pop twice to get previous value\n console.log(viewof n_v1._history)\n console.log(`b is ${b}`);\n viewof n_v1.setValue(b);\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"{\n const form = html``;\n form.clearHistory.onclick = () => {\n viewof n_v1._history=[];\n viewof n_v1.setValue(n_v1)\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"md`#### To use version1, do this following:\n\n\\`\\`\\`js\n import { numberBoxWithHistoryV1 } from \"@chonghorizons/history-of-an-input-viewof/2\"\n\\`\\`\\`\n\nand then \n\n\\`\\`\\`js\n viewof mybox_v1 = numberBoxWithHistoryV1()\n\\`\\`\\`\n\naccess the history with \n\\`\\`\\`js\n mybox_v1._history\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`\n---\n\n### Version 2\nThanks to @chrispahm, see https://talk.observablehq.com/t/how-can-i-track-the-history-of-a-view/4568/2\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`#### Example with builtin(!) buttons` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":" viewof mybox_v2 = numberBoxWithHistoryV2()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"mybox_v2.history","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"{\n const form = html``;\n form.random.onclick = () => {\n console.log(mybox_v2.history);\n viewof mybox_v2.value = Math.random()*1000; // doesn't work\n console.log(mybox_v2.value);\n mybox_v2.value = Math.random()*1000; // changes the value, but doesn't fire a dispatch (reactivity) and doesn't update the history. Need to write a setter.\n console.log(mybox_v2.value);\n };\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`#### To use version2, do this following:\n\n\\`\\`\\`js\n import { numberBoxWithHistoryV2 } from \"@chonghorizons/history-of-an-input-viewof/2\"\n\\`\\`\\`\n\nand then, in another cell,\n\n\\`\\`\\`js\n viewof mybox_v2 = numberBoxWithHistoryV2()\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`### How it was done: \n* Feb, 2021: I modified input2 from \"@severo/inputs-setter\" (renamed to input3), and added this javascript\n* Feb 5, 2021: @severo changed it to move the history into the element itself. I merged into this document. \n\n\\`\\`\\`js\n // Begin changes for history\n if (!isNaN(value)) {\n form._history.push(value);\n }\n console.log(\"history try4 w/ @Severo help with input3\");\n console.log(form._history);\n // End changes for history\n\\`\\`\\`\n\n\n* Feb 5, 2022: added a version 2 that uses @chrisparm's debounce and methods of incorporating. v2 doesn't allow the use of \\`.setValue()\\` method.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### Questions\n\n- When entering a 3 digit number (like 357), it shows \"3\", then \"35\", then \"357\". This can be alleviated with a submit button.\n- For an input like a slider, that continuously updates as we are dragging. We might just want the history of the mouseup event. I'm not sure how I would attempt to do that, except by making some custom input controls\n\nv2 fixes this with using debounce().\nv1 leaves it as is.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`# Requires and imports`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// import {number} from \"@severo/inputs-setter\"\n\n// I copied the input2 and originalNumber from \"@severo/inputs-setter\" and modified them.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function numberBoxWithHistoryV1(...args) {\n return addSetter(number(...args));\n}\n\n// copied from \"@severo/inputs-setter\"\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"import {number} with { input3 as input } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import {addSetter} from \"@severo/inputs-setter\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3format = require(\"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"import {Table} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 35:null