Last active
January 20, 2026 17:45
-
-
Save decatur/2bf4bcbdd74483dd10da4740751932b7 to your computer and use it in GitHub Desktop.
DOM and Javascript accelerator widget
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <body> | |
| <h1>Accelerator</h1> | |
| <div> | |
| <input id="ACCELERATOR" type="range" id="volume" name="volume" min="-10" max="10" /> | |
| <input type="datetime-local" id="TIME"/> | |
| </div> | |
| </body> | |
| <script> | |
| function accelerator(accelerator_elem, callback, onchange) { | |
| const delay = 100; | |
| let x = 0; | |
| let v = 0; | |
| let dt = 1; | |
| accelerator_elem.value = 0; | |
| let id; | |
| accelerator_elem.onchange = () => { v=0; accelerator_elem.value = 0; onchange(x); }; | |
| accelerator_elem.onmousedown = () => { | |
| const id = setInterval(() => { | |
| console.log(v); | |
| // This is newtonian acceleration | |
| v += 10*accelerator_elem.value*dt; | |
| x += v*dt; | |
| callback(x); | |
| }, delay); | |
| accelerator_elem.onmouseup = () => clearInterval(id); | |
| } | |
| } | |
| const time_elem = document.getElementById("TIME"); | |
| let now = Date.now(); | |
| let time = new Date(); | |
| function update_time(x) { time.setTime(now + 10*1000*x); } | |
| accelerator(document.getElementById("ACCELERATOR"), (x) => { | |
| // console.log(x); | |
| update_time(x); | |
| time_elem.value = time.toISOString().replace('Z',''); | |
| }, | |
| (x) => { update_time(x); alert(time.toISOString()); } | |
| ); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let key; | |
| const searchElement = document.getElementById('FILTER'); | |
| searchElement.ondblclick = (evt) => { | |
| console.log(evt); | |
| const selObj = window.getSelection(); | |
| key = selObj.toString(); | |
| let dialog = document.getElementById(key.toUpperCase()); | |
| if (dialog) { | |
| dialog.showModal(); | |
| let searchParams = new URLSearchParams(searchElement.value); | |
| const set = new Set(); | |
| for (let value of searchParams.getAll(key)) { | |
| for (let v of value.split(',')) { | |
| set.add(v.trim()); | |
| } | |
| } | |
| for (let opt of dialog.firstElementChild.options) { | |
| opt.selected = set.has(opt.textContent) | |
| } | |
| dialog.onclose = () => closeHandler(dialog); | |
| } | |
| } | |
| function closeHandler(dialog) { | |
| let searchParams = new URLSearchParams(searchElement.value); | |
| let a = []; | |
| for (let opt of dialog.firstElementChild.options) { | |
| console.log(opt) | |
| if (opt.selected) { | |
| a.push(opt.textContent); | |
| } | |
| } | |
| if (a.length == 0) searchParams.set(key, '*'); | |
| else searchParams.set(key, a.join(',')); | |
| let b = []; | |
| for (const [key, value] of searchParams.entries()) { | |
| b.push(`${key}=${value}`); | |
| } | |
| searchElement.value = b.join('&') | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment