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
  51   slider.addEventListener('input', () => set(slider.value));
  52
  53   sliderContainer.appendChild(labelElement);
  54   sliderContainer.appendChild(slider);
  55   return sliderContainer;
  56 }