]> git.r.bdr.sh - rbdr/lissajous/blob - lib/factories/ui.js
cc34579f55ba06d6089c9129d2d1df7a89eac8c0
[rbdr/lissajous] / lib / factories / ui.js
1 export function settingsContainer({id, label, level=2}) {
2
3 const container = document.createElement('section');
4 container.id = id;
5 container.innerHTML = `<h${level}>${label}</h${level}>`;
6 return container;
7 };
8
9 export function slider({
10 id,
11 min,
12 max,
13 step,
14 shiftStep,
15 get,
16 set,
17 label = '',
18 className
19 }) {
20
21 const sliderContainer = document.createElement('section');
22 sliderContainer.classList.add('slider');
23 sliderContainer.classList.add(className);
24 const labelElement = document.createElement('label');
25 labelElement.setAttribute('for', id);
26 labelElement.innerHTML = label;
27 const slider = document.createElement('input');
28 slider.id = id;
29 slider.type = 'range';
30 slider.min = min;
31 slider.max = max;
32 slider.step = step;
33 slider.value = get().toString();
34
35 if (shiftStep) {
36 document.addEventListener('keydown', function(event) {
37 if (event.shiftKey) {
38 slider.classList.add('shifted');
39 slider.step = shiftStep;
40 }
41 });
42
43 document.addEventListener('keyup', function(event) {
44 if (event.key === 'Shift') {
45 slider.classList.remove('shifted');
46 slider.step = step;
47 }
48 });
49
50 document.addEventListener('touchstart', function(event) {
51 if (event.touches.length == 3) {
52 if (slider.classList.contains('shifted')) {
53 slider.classList.remove('shifted');
54 slider.step = step;
55 } else {
56 slider.classList.add('shifted');
57 slider.step = shiftStep;
58 }
59 }
60 });
61 }
62
63 slider.addEventListener('input', () => set(slider.value));
64
65 sliderContainer.appendChild(labelElement);
66 sliderContainer.appendChild(slider);
67 return sliderContainer;
68 }