git.r.bdr.sh - rbdr/lissajous/blob - 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 }