audio-vis/raw/javascript/playerConfigHandler.js

class PlayerConfigHandler {
    async init() {
        await template.loadArray([
            'config/nav',
            'config/content',
            'config/visualitem'
        ]);
        this.last = 'base';
        $('.settings-icon').addEventListener('click', this.open.bind(this));
        $('modal-content').addDelegatedEventListener('click', '.config-nav .item', this.navHandler.bind(this));
    }

    open() {
        if (this.content === undefined) {
            let content = template.parseTemplate('config/nav', {});
            content += template.parseTemplate('config/content', {content: ""});
            this.content = content;
        }
        gui.modal.renderModal('Settings', this.content, "by VersusTuneZ");
        this.handleById();
        gui.modal.showModal();
    }

    navHandler(e, el) {
        this.last = el.dataset.id;
        this.handleById();
    }

    handleById() {
        let id = this.last;
        new VisualConfig(id === 'visual', id === 'base');
        let active = $('.config-nav .item.active'),
            current = $('.config-nav .item[data-id="' + id + '"]');
        if (active) {
            active.removeClass('active');
        }
        if (current) {
            current.addClass('active');
        }
    }
}

class VisualConfig {
    static visualTemplates = {};

    constructor(showVisual, renderBase) {
        this.content = $('modal-content .config-content');
        if (showVisual) {
            this.renderVisualConfig(visual.c);
        } else {
            if (renderBase) {
                this.renderBase();
            } else {
                this.renderVisuals();
            }
        }
    }

    renderVisuals() {
        let keys = Object.keys(visual.visuals),
            content = '<section class="visuals">';
        for (let i = 0; i < keys.length; i++) {
            content += template.parseTemplate('config/visualitem', {
                title: visual.visuals[keys[i]].name,
                id: keys[i],
                active: keys[i] === visual.c ? 'active' : ''
            })
        }
        content += '</div>';
        this.content.innerHTML = content;
    }

    async renderBase() {
        let data = await this.loadVisualConfig('base'),
            div = create('section');
        div.addClass('base');
        div.innerHTML = GUIHelper.fromJSON(data, pConf);
        this.content.innerHTML = div.outerHTML;
    }

    // the name loads the json and handle it!
    async renderVisualConfig(name) {
        let data = await this.loadVisualConfig(name, vConf),
            div = create('section');
        div.addClass('visual');
        div.innerHTML = GUIHelper.fromJSON(data, vConf);
        div.innerHTML += GUIHelper.createButton({
            action: "resetVConf",
            name: "Reset Visual Config"
        });
        div.innerHTML += GUIHelper.createButton({
            action: "makeModalTransparent",
            name: "toggle Modal Opacity"
        })
        this.content.innerHTML = div.outerHTML;
    }

    async loadVisualConfig(name) {
        let tem = VisualConfig.visualTemplates;
        if (!tem[name]) {
            //load config and save it
            tem[name] = await FetchHandler.loadFile('/out/gui/' + name + ".json", true);
        }
        return tem[name];
    }
}