X-Git-Url: https://git.r.bdr.sh/rbdr/lissajous/blobdiff_plain/362f91160b243453578633e3f9af67ce40179d8c..1924acb2eccaa6bdf58f9b90b10b1236c74bb07a:/lib/factories/ui.js?ds=sidebyside

diff --git a/lib/factories/ui.js b/lib/factories/ui.js
index 27ff6eb..cc34579 100644
--- a/lib/factories/ui.js
+++ b/lib/factories/ui.js
@@ -1,25 +1,65 @@
 export function settingsContainer({id, label, level=2}) {
 
-  const container = document.createElement('div');
+  const container = document.createElement('section');
   container.id = id;
   container.innerHTML = `<h${level}>${label}</h${level}>`;
   return container;
 };
 
-export function slider({min, max, step, get, set, label = '', className}) {
+export function slider({
+  id,
+  min,
+  max,
+  step,
+  shiftStep,
+  get,
+  set,
+  label = '',
+  className
+}) {
 
-  const sliderContainer = document.createElement('div');
+  const sliderContainer = document.createElement('section');
   sliderContainer.classList.add('slider');
   sliderContainer.classList.add(className);
   const labelElement = document.createElement('label');
+  labelElement.setAttribute('for', id);
   labelElement.innerHTML = label;
   const slider = document.createElement('input');
+  slider.id = id;
   slider.type = 'range';
   slider.min = min;
   slider.max = max;
   slider.step = step;
   slider.value = get().toString();
 
+  if (shiftStep) {
+    document.addEventListener('keydown', function(event) {
+      if (event.shiftKey) {
+        slider.classList.add('shifted');
+        slider.step = shiftStep;
+      }
+    });
+
+    document.addEventListener('keyup', function(event) {
+      if (event.key === 'Shift') {
+        slider.classList.remove('shifted');
+        slider.step = step;
+      }
+    });
+
+    document.addEventListener('touchstart', function(event) {
+      if (event.touches.length == 3) {
+        if (slider.classList.contains('shifted')) {
+          slider.classList.remove('shifted');
+          slider.step = step;
+        } else {
+          slider.classList.add('shifted');
+          slider.step = shiftStep;
+        }
+      }
+    });
+  }
+
   slider.addEventListener('input', () => set(slider.value));
 
   sliderContainer.appendChild(labelElement);