2a:null 2b:["$","title",null,{"children":"Non-Linear Time Interval Input Form | Friedrich Hartmann | Observable"}] 30:T1048,function timeIntervalForm(ms) { let significantIndexInterval = 2; //const range = [100, 2419200000]; const rLog = range.map(r => Math.log(r)); const timeunits = [ { key: 'ms', name: 'ms', toNext: 1000, width: 3 }, { key: 's', name: 's', toNext: 60 }, { key: 'm', name: 'm', toNext: 60 }, { key: 'h', name: 'h', toNext: 24 }, { key: 'd', name: 'days', toNext: 7 }, { key: 'w', name: 'weeks', toNext: 52 } ]; let toMs = 1; let lastRange; timeunits.forEach((v, i) => { timeunits[i].toMs = toMs; toMs *= v.toNext; }); function setTimeComponents(form, ms) { timeunits.forEach(({ key, toMs, toNext }) => { form.elements[key].value = Math.floor(ms / toMs) % toNext; }); } function getTimeComponents(form) { let ms = 0; timeunits.forEach( ({ key, toMs }) => (ms += form.elements[key].valueAsNumber * toMs) ); return ms; } function setNonLinear(form, ms) { form.elements['nonlinear'].value = (Math.log(ms) - rLog[0]) / (rLog[1] - rLog[0]); } function getNonLinear(form) { let v = form.elements['nonlinear'].valueAsNumber; return Math.exp(v * (rLog[1] - rLog[0]) + rLog[0]); } function getSignificanceIndexRange(ms) { let leastSignificantIndex = 0; let mostSignificantIndex; [...timeunits].reverse().some(({ toMs }, i, arr) => { mostSignificantIndex = arr.length - i - 1; return Math.floor(ms / toMs); }); // clamp magnitude range on lower end if (mostSignificantIndex >= significantIndexInterval) { leastSignificantIndex = mostSignificantIndex - significantIndexInterval + 1; } return [leastSignificantIndex, mostSignificantIndex]; } function hideNonActiveUnits(form, range) { timeunits.forEach(({ key }, i, arr) => { if (i < range[0] || i > range[1]) { form.elements[key].style.opacity = 0.2; form.querySelector("label[for=" + key + "]").style.opacity = 0.2; } else { form.elements[key].style.opacity = 1; form.querySelector("label[for=" + key + "]").style.opacity = 1; } }); } function validateInput(input) { // allow precision only for given magnitude range from highest significant unit let [least, most] = getSignificanceIndexRange(input); let factor = timeunits[least].toMs; input = Math.round(input / factor) * factor; input = Math.floor(Math.max(range[0], input)); return input; } function updateForm(form, ms) { form.elements['inms'].value = ms; setNonLinear(form, ms); setTimeComponents(form, ms); let range = getSignificanceIndexRange(ms); hideNonActiveUnits(form, range); lastRange = range; } let form = ``; form = html`${form}`; const container = html`

${form}`; container.value = validateInput(ms); updateForm(form, container.value); form.addEventListener("submit", event => event.preventDefault()); form.addEventListener("change", () => container.dispatchEvent(new CustomEvent("input")) ); form.addEventListener("input", evt => { const target = evt.target; if (timeunits.map(({ key }) => key).includes(target.name)) { // extend lower range on manual input let changeIndex = timeunits.findIndex(v => v.key == target.name); if (changeIndex < lastRange[0]) significantIndexInterval = lastRange[1] - changeIndex + 1; container.value = validateInput(getTimeComponents(form)); } else if (target.name == "nonlinear") { container.value = validateInput(getNonLinear(form)); } updateForm(form, container.value); }); return container; }31:[] 2e:{"id":"c5ccea454cbebe10","slug":"time-interval-input-form","title":"Non-Linear Time Interval Input Form","thumbnail":"158313675f14b7ddae08a2254134d44a00b6b99a14edb33f374bdf3dd53bc87e","access_level":"public","create_time":"$D2020-09-02T20:36:50.549Z","update_time":"$D2020-09-03T20:23:55.871Z","view_time":null,"first_public_time":"$D2020-09-03T07:57:33.393Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"73791a98eb1d1aba","login":"mxfh","name":"Friedrich Hartmann","avatar_url":"https://avatars-next.observableusercontent.com/818cb024720e209d4fdfb80fe502f8b526a56228002909307ede85d6a28077f0","tier":"starter_2024"},"version":294,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"847f32641b425b1b","login":"mxfh","name":"Friedrich Hartmann","avatar_url":"https://avatars-next.observableusercontent.com/818cb024720e209d4fdfb80fe502f8b526a56228002909307ede85d6a28077f0","tier":null}],"members":[{"type":"individual","id":"847f32641b425b1b","login":"mxfh","name":"Friedrich Hartmann","avatar_url":"https://avatars-next.observableusercontent.com/818cb024720e209d4fdfb80fe502f8b526a56228002909307ede85d6a28077f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Non-Linear Time Interval Input Form","cells":[{"id":0,"value":"md`# Non-Linear Time Interval Input Form\n\nAllows for both, a fast selection of magnitude range through a non-linear slider and fine tuning by changing it's unit components\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"milliseconds","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof milliseconds = timeIntervalForm(10000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"range = [10000, 2419200000]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"