Add a few comments

[rbdr/lissajous] / lib / factories / ui.js

diff --git a/lib/factories/ui.js b/lib/factories/ui.js
index 27ff6eb96b76acecc26b65f951bf0043ea4d1091..167c618a0ffe96dbb86a31491ea9ac08c1031410 100644 (file)
--- a/lib/factories/ui.js
+++ b/lib/factories/ui.js
@@ -1,25 +1,77 @@
+/**
+  * This file is a factory for DOM UI elements.
+  */
+
+/**
+  * Returns a settings container that includes a section and a heading.
+  */

 export function settingsContainer({id, label, level=2}) {
 
 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;
 };
 
   container.id = id;
   container.innerHTML = `<h${level}>${label}</h${level}>`;
   return container;
 };
 

-export function slider({min, max, step, get, set, label = '', className}) {
+/**
+  * Returns a slider that includes a label, and can optionally be set to
+  * "shift" to a different step. (eg. we use this for π mode, where frequency
+  * and amplitude are mapped to π/8 increments.
+  */
+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');
   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');
   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();
 
   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);
   slider.addEventListener('input', () => set(slider.value));
 
   sliderContainer.appendChild(labelElement);