diff options
Diffstat (limited to 'app/dom.js')
| -rw-r--r-- | app/dom.js | 29 |
1 files changed, 14 insertions, 15 deletions
@@ -80,7 +80,7 @@ export class Dom { if (text) button.textContent = text; for (const [k, v] of Object.entries(o.attributes)) button.setAttribute(k, v); if (o.children) button.append(...o.children); - if (onClick) button.addEventListener("click", onClick); + if (onClick) button.addEventListener("pointerdown", onClick); return button; } @@ -192,13 +192,15 @@ export class Dom { /** * Create a `<select>` + * @param {string|undefined} selected * @param {DomOptions} o * @param { (e: Event) => void } onChange * @returns {HTMLSelectElement} */ - static select(onChange, o = new DomOptions()) { + static select(selected = undefined, onChange, o = new DomOptions()) { const select = document.createElement("select"); Object.assign(select.style, o.styles); + if (selected !== undefined) select.value = selected; if (o.id) select.id = o.id; for (const cls of o.classes) select.classList.add(cls); for (const [k, v] of Object.entries(o.attributes)) select.setAttribute(k, v); @@ -373,8 +375,8 @@ export class Dom { // Update active range position const updateActiveRange = () => { - const minVal = parseInt(minSlider.value); - const maxVal = parseInt(maxSlider.value); + const minVal = parseInt(minSlider.value, 10); + const maxVal = parseInt(maxSlider.value, 10); const minPercent = ((minVal - min) / (max - min)) * 100; const maxPercent = ((maxVal - min) / (max - min)) * 100; @@ -388,41 +390,38 @@ export class Dom { // Event listeners minSlider.addEventListener("input", () => { - const minVal = parseInt(minSlider.value); - const maxVal = parseInt(maxSlider.value); + const minVal = parseInt(minSlider.value, 10); + const maxVal = parseInt(maxSlider.value, 10); if (minVal > maxVal) { minSlider.value = maxVal.toString(); } updateActiveRange(); - onChange(parseInt(minSlider.value), parseInt(maxSlider.value)); + onChange(parseInt(minSlider.value, 10), parseInt(maxSlider.value, 10)); }); maxSlider.addEventListener("input", () => { - const minVal = parseInt(minSlider.value); - const maxVal = parseInt(maxSlider.value); + const minVal = parseInt(minSlider.value, 10); + const maxVal = parseInt(maxSlider.value, 10); if (maxVal < minVal) { maxSlider.value = minVal.toString(); } updateActiveRange(); - onChange(parseInt(minSlider.value), parseInt(maxSlider.value)); + onChange(parseInt(minSlider.value, 10), parseInt(maxSlider.value, 10)); }); // Initial update updateActiveRange(); // Assemble track - track.appendChild(activeRange); - track.appendChild(minSlider); - track.appendChild(maxSlider); + track.append(activeRange, minSlider, maxSlider); trackContainer.appendChild(track); // Assemble container - container.appendChild(valueDisplay); - container.appendChild(trackContainer); + container.append(valueDisplay, trackContainer); if (options.children) container.append(...options.children); |