audio-vis/js/gui.js

function $(sel, s) {
    return $$(sel, s)[0];
}

function $$(sel, s) {
    s = s || document;
    return s.querySelectorAll(sel);
}

Node.prototype.addDelegatedEventListener = function (type, aim, cb) {
    this.addEventListener(type, (event) => {
        let target = event.target;
        if (target.matches(aim)) {
            cb(event, target);
        } else {
            let parent = target.closest(aim);
            if (parent) {
                cb(event, parent);
            }
        }
    })
};

function create(name, content) {
    let d = document.createElement(name);
    if (content) {
        d.innerHTML = content;
    }
    return d;
}

function append(to, array) {
    for (let item in array) {
        to.appendChild(array[item]);
    }
}

function generateRotationSliders() {
    let group = $('#rotate');
    generateSlider(["X", "Y", "Z", "X-Inc", "Y-Inc", "Z-Inc"], 0, 360, 0, group, "rotate");
    generateCheckBox(["by Beat"], true, group, "rotate");
}

function generateTranslateSliders() {
    let group = $('#translate');
    generateSlider(["X", "Y", "Z"], -1, 1, 1, group, "translate");
}

function generateColorSliders() {
    let group = $('#color');
    generateSlider(["R", "G", "B"], 0, 255, 125, group, "color");
    generateCheckBox(["by Beat"], true, group, "color");
}

function generateWorldSliders() {
    let group = $('#world');
    generateSlider(["LightPos-X", "LightPos-Y", "LightPos-Z"], -1, 1, 1, group, "light");
    generateSlider(["LightAngle"], 0, 360, 90, group, "light");
}

function generateDrawSliders() {
    let group = $('#draw'),
        g = "drawMode"
    generateSlider(["DrawMode"], 0, 6, 0, group, g);
    generateSlider(["Form"], 0, 3, 0, group, g);
    generateSlider(["Radius"], 20, 1500, 500, group, g);
    generateSlider(["Total"], 0, 200, 50, group, g);
    generateSlider(["PointSize"], 1, 10, 2, group, g, .2);
    generateSlider(["Smoothing"], 0, 1, 0.8, group, g, .05);
    generateSlider(["Steps"], 512, analyser.fftSize / 2, 512, group, g, 256);
    generateCheckBox(["Dirty"], false, group, g)
}

function setRotations(changedEl) {
    let group = $('#rotate');
    let items = ["#X", "#Y", "#Z"];
    for (let i in items) {
        let el = $(items[i], group);
        if (el === changedEl) {
            sphereObject.rotationRaw[i] = getValue(el)
        }
    }
    items = ["#X-Inc", "#Y-Inc", "#Z-Inc"];
    for (let i in items) {
        let el = $(items[i], group);
        if (el === changedEl) {
            sphereObject.rotateInc[i] = getValue(el) / 360;
        }
    }

    sphereObject.rotateByBeat = $('#rotateby-Beat', group).checked;
}

function setColors() {
    let group = $('#color');
    sphereObject.color.r = getValue($('#R', group)) / 255;
    sphereObject.color.g = getValue($('#G', group)) / 255;
    sphereObject.color.b = getValue($('#B', group)) / 255;

    sphereObject.colorByBeat = $('#colorby-Beat', group).checked;
}

function setWorld() {
    let group = $('#world');
    sphereObject.lightPos[0] = getValue($('#LightPos-X', group)) * 0.2;
    sphereObject.lightPos[1] = getValue($('#LightPos-Y', group)) * 0.2;
    sphereObject.lightPos[2] = getValue($('#LightPos-Z', group)) * 0.2;

    lightAngle = getValue($('#LightAngle', group))
}

function setDraw() {
    let group = $('#draw');
    sphereObject.drawMode = getValue($('#DrawMode', group));
    sphereObject.sphereMode = getValue($('#Form', group));
    sphereObject.radius = getValue($('#Radius', group));
    sphereObject.total = getValue($('#Total', group));
    sphereObject.pointSize = getValue($('#PointSize', group));
    sphereObject.steps = getValue($('#Steps', group));
    sphereObject.dirtyMode = $('#drawModeDirty', group).checked;
    analyser.smoothingTimeConstant = getValue($('#Smoothing', group));
}

function setTranslate() {
    let group = $('#translate');
    let items = ["#X", "#Y", "#Z"];
    for (let i in items) {
        sphereObject.translate[i] = getValue($(items[i], group))
    }
}

function generateSlider(fromList, min, max, value, appendTo, group, stepSize) {
    for (let i = 0; i < fromList.length; i++) {
        let label = create("label", fromList[i]);
        let reset = create("button", "d");
        let range = create("input");
        range.type = "range";
        range.min = min;
        range.max = max;
        range.value = value;
        range.id = fromList[i];
        range.step = max === 1 ? .01 : (stepSize || 1);
        range.dataset.group = group;
        range.dataset.value = value;
        let item = create("group-input");
        append(item, [label, range, reset])
        appendTo.appendChild(item);
    }
}

function generateCheckBox(fromList, defaultValue, appendTo, group) {
    for (let i = 0; i < fromList.length; i++) {
        let label = create("label", fromList[i])
        let checkbox = create("input");
        checkbox.type = "checkbox";
        checkbox.checked = defaultValue === true;
        checkbox.dataset.group = group;
        checkbox.id = group + fromList[i].split(" ").join("-");
        let item = create("group-input");
        append(item, [label, createSwitch(checkbox)])
        appendTo.appendChild(item);
    }
}

function createSwitch(checkbox) {
    let swi = create("switch");
    let label = create("label");
    label.setAttribute("for", checkbox.id);
    append(swi, [checkbox, label]);
    return swi;
}

function changeHandler(el) {
    let d = el.dataset.group;
    if (d === "rotate") {
        setRotations(el);
    } else if (d === "translate") {
        setTranslate();
    } else if (d === "color") {
        setColors();
    } else if (d === "light") {
        setWorld();
    } else if (d === "drawMode") {
        setDraw();
    }
}

document.body.addDelegatedEventListener('input', 'group-input input', (ev, el) => {
    changeHandler(el);
})

document.body.addDelegatedEventListener('click', 'group-input button', (ev, el) => {
    let input = $('input', el.parentNode);
    input.value = input.dataset.value;
    changeHandler(input);
});

function getValue(slider) {
    try {
        return parseFloat(slider.value);
    } catch (e) {
        return 0;
    }
}

$('.settings-icon').addEventListener('click', function () {
    $('.off-can').classList.toggle("closed");
})