31: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; }32:[] 2f:{"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"},{"id":117,"value":"milliseconds","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"viewof milliseconds = timeIntervalForm(10000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"range = [10000, 2419200000]","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}