dust/js/controls.js

import Rx, { Observable } from 'rxjs';

function Controls(node, options) {
    this.node = node;
    this.options = options;

    this.countCtrl = createCountControl();
    this.speedCtrl = createSpeedControl();
    this.radiusCtrl = createRadiusControl();
    this.rotationCtrl = createRotationControl();
    this.animatingCtrl = createAnimatingControl();

    this.updateOptions(options);
}

Controls.prototype.updateOptions = function({ animating, count, speed }) {
    this.animatingCtrl.innerHTML = (animating ? '◼ Stop' : '▶ Start');
}

Controls.prototype.mount = function(customNodes) {
    this.node.appendChild(this.countCtrl);
    this.node.appendChild(this.speedCtrl);
    this.node.appendChild(this.radiusCtrl);
    this.node.appendChild(this.rotationCtrl);
    this.node.appendChild(this.animatingCtrl);

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

const createCountControl = 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 createSpeedControl = 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 createRadiusControl = 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 createRotationControl = 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 createAnimatingControl = function() {
    const button = document.createElement('button');
    button.className = 'controls-button controls-bottom';

    return button;
}

export default Controls;