dust/js/controls.js

import Rx, { Observable } from 'rxjs';

function Controls(node, { speed, otherstuff }) {
    this.node = node;
}

Controls.prototype.mount = function(customNodes) {
    const countCtrl = renderCountControl();
    const speedCtrl = renderSpeedControl();
    const radiusCtrl = renderRadiusControl();
    const rotationCtrl = renderRotationControl();
    const startStopCtrl = renderStartStopControl();

    this.node.appendChild(countCtrl);
    this.node.appendChild(speedCtrl);
    this.node.appendChild(radiusCtrl);
    this.node.appendChild(rotationCtrl);
    this.node.appendChild(startStopCtrl);

    return Rx.Observable.merge(
        Rx.Observable.fromEvent(countCtrl, 'change')
            .map(evt => ({ key: 'count', value: evt.target.value * 1 })),
        Rx.Observable.fromEvent(speedCtrl, 'change')
            .map(evt => ({ key: 'speed', value: evt.target.value * 1 })),
        Rx.Observable.fromEvent(radiusCtrl, 'change')
            .map(evt => ({ key: 'radius', value: evt.target.checked })),
        Rx.Observable.fromEvent(rotationCtrl, 'change')
            .map(evt => ({ key: 'rotation', value: evt.target.checked })),
        Rx.Observable.fromEvent(startStopCtrl, 'click')
            .map(evt => ({ key: 'startstop', value: null })),
    );
}

const renderCountControl = function() {
    const label = document.createElement('label');
    label.className = 'controls-label';

    const text = document.createElement('span');
    text.innerHTML = 'Number of particles';
    text.className = 'controls-label-text';

    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = 1;
    slider.max = 10;
    slider.className = 'controls-slider';

    label.appendChild(text);
    label.appendChild(slider);

    return label;
}

const renderSpeedControl = function() {
    const label = document.createElement('label');
    label.className = 'controls-label';

    const text = document.createElement('span');
    text.innerHTML = 'Animation speed';
    text.className = 'controls-label-text';

    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = 1;
    slider.max = 10;
    slider.className = 'controls-slider';

    label.appendChild(text);
    label.appendChild(slider);

    return label;
}

const renderRadiusControl = function() {
    const label = document.createElement('label');
    label.className = 'controls-label';

    const text = document.createElement('span');
    text.innerHTML = 'Random radii';
    text.className = 'controls-label-text';

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.className = 'controls-label-checkbox';

    label.appendChild(checkbox);
    label.appendChild(text);

    return label;
}

const renderRotationControl = function() {
    const label = document.createElement('label');
    label.className = 'controls-label';

    const text = document.createElement('span');
    text.innerHTML = 'Random rotation';
    text.className = 'controls-label-text';

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.className = 'controls-label-checkbox';

    label.appendChild(checkbox);
    label.appendChild(text);

    return label;
}

const renderStartStopControl = function() {
    const button = document.createElement('button');
    button.className = 'controls-button controls-bottom';
    button.innerHTML = '▶ Start';

    // button.innerHTML = '◼ Stop';

    return button;
}

export default Controls;