Add a few comments

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

diff --git a/lib/factories/ui.js b/lib/factories/ui.js
index c220f67b208e8a23d3d2f6e6b2587e7bb81782f5..167c618a0ffe96dbb86a31491ea9ac08c1031410 100644 (file)
--- a/lib/factories/ui.js
+++ b/lib/factories/ui.js
@@ -1,3 +1,10 @@
+/**
+  * 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}) {
 
   const container = document.createElement('section');
@@ -6,6 +13,11 @@ export function settingsContainer({id, label, level=2}) {
   return container;
 };
 
+/**
+  * 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,
@@ -46,6 +58,18 @@ export function slider({
         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));