Update mobile CSS

[rbdr/lissajous] / lib / systems / frequency_adjuster.js

import { System } from '@serpentity/serpentity';
import Frequent from '../nodes/frequent';
import { settingsContainer, slider } from '../factories/ui';

const internals = {
  symbols: {
    a: '𝛼',
    b: '𝛽',
    c: '𝜁'
  }
};

export default class FrequencyAdjuster extends System {

  constructor(container) {

    super();
    this.container = container;
  }

  added(engine){

    this.nodes = engine.getNodes(Frequent);
    this.adjusterContainer = settingsContainer({
      id: 'frequency-adjuster',
      label: 'Frequency'
    })

    let i = 0;
    for (const node of this.nodes) {
      const nodeElement = settingsContainer({
        id: `frequency-adjuster-${i}`,
        label: `ɣ${i + 1}`,
        level: 3
      });

      ['a', 'b', 'c'].forEach(key => {
        nodeElement.appendChild(slider({
          id: `frequency-adjuster-${i}-slider-${key}`,
          min: '0',
          max: (2 * Math.PI).toString(),
          step: '0.05',
          shiftStep: (Math.PI / 8).toString(),
          label: internals.symbols[key],
          className: `frequency`,
          get: () => node.frequency[key].toString(),
          set: (value) => (node.frequency[key] = parseFloat(value))
        }));
      });

      this.adjusterContainer.appendChild(nodeElement);
      ++i;
    }

    this.container.appendChild(this.adjusterContainer);
  }

  removed(){

    this.container.removeChild(this.adjusterContainer);
    delete this.adjusterContainer;
    delete this.nodes;
  }

  update(){}
};