]>
git.r.bdr.sh - rbdr/lissajous/blob - lib/factories/ui.js
167c618a0ffe96dbb86a31491ea9ac08c1031410
2 * This file is a factory for DOM UI elements.
6 * Returns a settings container that includes a section and a heading.
8 export function settingsContainer({id
, label
, level
=2}) {
10 const container
= document
.createElement('section');
12 container
.innerHTML
= `<h${level}>${label}</h${level}>`;
17 * Returns a slider that includes a label, and can optionally be set to
18 * "shift" to a different step. (eg. we use this for π mode, where frequency
19 * and amplitude are mapped to π/8 increments.
21 export function slider({
33 const sliderContainer
= document
.createElement('section');
34 sliderContainer
.classList
.add('slider');
35 sliderContainer
.classList
.add(className
);
36 const labelElement
= document
.createElement('label');
37 labelElement
.setAttribute('for', id
);
38 labelElement
.innerHTML
= label
;
39 const slider
= document
.createElement('input');
41 slider
.type
= 'range';
45 slider
.value
= get().toString();
48 document
.addEventListener('keydown', function(event
) {
50 slider
.classList
.add('shifted');
51 slider
.step
= shiftStep
;
55 document
.addEventListener('keyup', function(event
) {
56 if (event
.key
=== 'Shift') {
57 slider
.classList
.remove('shifted');
62 document
.addEventListener('touchstart', function(event
) {
63 if (event
.touches
.length
== 3) {
64 if (slider
.classList
.contains('shifted')) {
65 slider
.classList
.remove('shifted');
68 slider
.classList
.add('shifted');
69 slider
.step
= shiftStep
;
75 slider
.addEventListener('input', () => set(slider
.value
));
77 sliderContainer
.appendChild(labelElement
);
78 sliderContainer
.appendChild(slider
);
79 return sliderContainer
;