30:Ta77,md`# Inputs + setter --- 2021/02/04: **new [Observable Inputs](https://observablehq.com/@observablehq/inputs) are [settable](https://observablehq.com/@observablehq/synchronized-inputs) 🎉**. I you use them, you don't need this notebook! This notebook is only useful for [legacy inputs](https://observablehq.com/@jashkenas/inputs). As a consequence, this notebook is now _unmaintained_. --- > Change the [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs) value programmatically. I use the famous [Inputs](https://observablehq.com/@jashkenas/inputs) notebook by Jeremy Ashkenas all the time. But when I need to synchronize these inputs with a state, I have to repeat the same fragile tweaks in order to change their value programatically. In this notebook, I add a _new method called \`setValue\`_ that allows to change the value of an input programmatically. ${await FileAttachment("halloween-cat.png") .image() .then(i => (i.style.setProperty('width', '400px'), i))} \`setValue\` takes the new value, updates the input internal state and display, and dispatches an 'input' event. Use it on the input (\`viewof a\`), not on the value itself (\`a\`): ~~~js viewof a = slider() viewof a.setValue(0.6) ~~~ The list of inputs: * [\`slider\`](#sliderDemo) * [\`button\`](#buttonDemo) * [\`select\`](#selectDemo) * [\`color\`](#colorDemo) * [\`coordinates\`](#coordinatesDemo) * [\`worldMapCoordinates\`](#worldMapCoordinatesDemo) * [\`usaMapCoordinates\`](#usaMapCoordinatesDemo) * [\`date\`](#dateDemo) * [\`time\`](#timeDemo) * [\`file\`](#fileDemo) * [\`text\`](#textDemo) * [\`textarea\`](#textareaDemo) * [\`radio\`](#radioDemo) * [\`checkbox\`](#checkboxDemo) * [\`number\`](#numberDemo) * [\`password\`](#passwordDemo) \`setValue\` has not been implemented for: * [\`autoSelect\`](#autoSelectDemo) * [\`file\`](#fileDemo) Some details: - an 'input' event is dispatched when the new value is set, so beware the loops if various inputs are listening to each other. Alternately, set the \`dispatch\` option to false: ~~~js viewof a.setValue(0.6, {dispatch: false}) ~~~ [TODO] The default should be the reverse: don't dispatch anything when setting a new value. > I don’t think it’s appropriate to dispatch an input event whenever the value is assigned — native inputs don’t behave that way, so neither do Observable Inputs. > _https://github.com/observablehq/inputs/issues/73#issuecomment-774724846_ - the new value is set inconditionnally, even if it's equal to the old value. - I tried to modify as few code as possible, in order to make it easier to keep up-to-date with upstream. `31:Ta24,function originalWorldMapCoordinates(config = {}) { const { value = [], title, description, width = 400 } = Array.isArray(config) ? { value: config } : config; const height = Math.round((210 / 400) * width); let [lon, lat] = value; lon = lon != null ? lon : null; lat = lat != null ? lat : null; const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "10px 0 3px"; const projection = d3geo .geoNaturalEarth1() .precision(0.1) .fitSize([width, height], { type: "Sphere" }); const path = d3geo.geoPath(projection, context).pointRadius(2.5); formEl.append(canvas); function draw() { context.fillStyle = "#fff"; context.fillRect(0, 0, width, height); context.beginPath(); path(graticule); context.lineWidth = 0.35; context.strokeStyle = `#ddd`; context.stroke(); context.beginPath(); path(land); context.fillStyle = `#f4f4f4`; context.fill(); context.beginPath(); path(countries); context.strokeStyle = `#aaa`; context.stroke(); if (lon != null && lat != null) { const pointPath = { type: "MultiPoint", coordinates: [[lon, lat]] }; context.beginPath(); path(pointPath); context.fillStyle = `#f00`; context.fill(); } } canvas.onclick = function(ev) { const { offsetX, offsetY } = ev; var coords = projection.invert([offsetX, offsetY]); // // start - difference with original code setLonLat(+coords[0].toFixed(2), +coords[1].toFixed(2)); // // end - difference with original code canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; draw(); const form = input({ type: "worldMapCoordinates", title, description, display: v => html`

Longitude: ${ lon != null ? lon.toFixed(2) : "" } Latitude: ${ lat != null ? lat.toFixed(2) : "" }

`, getValue: () => [lon != null ? lon : null, lat != null ? lat : null], form: formEl }); // // start - difference with original code function setLonLat(newLon, newLat) { lon = newLon; lat = newLat; draw(); } form.setLonLat = setLonLat; // // end - difference with original code return form; }32:Ta1f,function originalUsaMapCoordinates(config = {}) { const { value = [], title, description, width = 400 } = Array.isArray(config) ? { value: config } : config; const scale = width / 960; const height = scale * 600; let [lon, lat] = value; lon = lon != null ? lon : null; lat = lat != null ? lat : null; const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "5px 0 20px"; const projection = d3geo .geoAlbersUsa() .scale(1280) .translate([480, 300]); const path = d3geo .geoPath() .context(context) .pointRadius(2.5 / scale); formEl.append(canvas); function draw() { context.clearRect(0, 0, width, height); context.save(); context.scale(scale, scale); context.lineWidth = 0.35 / scale; context.beginPath(); path(nation); context.fillStyle = `#f4f4f4`; context.fill(); context.beginPath(); path(states); context.strokeStyle = `#aaa`; context.stroke(); if (lon != null && lat != null) { const pointPath = { type: "MultiPoint", coordinates: [projection([lon, lat])] }; context.beginPath(); path(pointPath); context.fillStyle = `#f00`; context.fill(); } context.restore(); } canvas.onclick = function(ev) { const { offsetX, offsetY } = ev; var coords = projection.invert([offsetX / scale, offsetY / scale]); // // start - difference with original code setLonLat(+coords[0].toFixed(2), +coords[1].toFixed(2)); // // end - difference with original code canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; draw(); const form = input({ type: "worldMapCoordinates", title, description, display: v => html`

Longitude: ${ lon != null ? lon : "" } Latitude: ${ lat != null ? lat : "" }

`, getValue: () => [lon != null ? lon : null, lat != null ? lat : null], form: formEl }); // // start - difference with original code function setLonLat(newLon, newLat) { lon = newLon; lat = newLat; draw(); } form.setLonLat = setLonLat; // // end - difference with original code return form; }33:T62b,function addSetter(form, config = {}) { if (!form._configForSettableInput) { // We cannot do anything - don't add the setValue method return form; } const { getValue, display, format } = form._configForSettableInput; const setter = config.setter || function(form, newValue) { // Note that I first tried `form.input.setAttribute('value', newValue);` // but as stated in the doc (MDN/), // > When specified in the HTML, this is the initial value // Thus, I don't touch the HTML 'value' attribute (it will keep the initial value) // and I modify the value *property* form.input.value = newValue; }; function onNewValue() { // Exact copy from original 'input' code // This must be kept synchronized if original code is updated 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; } } form.value = value; } form.setValue = function(newValue, { dispatch = true } = {}) { setter(form, newValue); onNewValue(); // As setting the value property doesn't dispatch an event, I do it with a custom event if (dispatch) { form.dispatchEvent(new CustomEvent("input", { bubbles: true })); } }; return form; }34:T970,function input2(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); 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; } } 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 return form; }35:[{"id":"823440d2e8238e54b0ed26ff31e86f1ed7c09b44db08d0a47359f3ea1e7514b44e2a249e9c41632e4717156b8739347f7ff8b0fe8ff01d49bebbe0a00aceeef8","href":"https://static.observableusercontent.com/files/823440d2e8238e54b0ed26ff31e86f1ed7c09b44db08d0a47359f3ea1e7514b44e2a249e9c41632e4717156b8739347f7ff8b0fe8ff01d49bebbe0a00aceeef8","name":"halloween-cat.png","type":"image/png","lastModified":1606047191782.466,"size":36360}] 2e:{"title":"Inputs + setter","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"sliderDemo = md`---\n## Sliders\n\n~~~js\nimport {slider} from \"@severo/inputs-setter\"\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"viewof a = slider()","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"a","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"Object.assign(html`