audio-vis/raw/javascript/gui.js

class GUI {
    async init() {
        this.data = {};
        this.modal = new Modal();
        // load first vis window!
        await template.loadArray([
            'playlist-item',
            'playlist',
            'playlist-footer',
            'audio-information',
            'inputs/color',
            'inputs/input',
            'inputs/slider',
            'inputs/switch',
            'inputs/select',
            'inputs/option',
            'help',
        ]);
        this.initDropZone();
    }

    openHelp() {
        gui.modal.renderModal("Help", template.parseTemplate('help', {}));
        gui.modal.showModal();
    }

    initDropZone() {
        let items = 'drag dragstart dragend dragover dragenter dragleave drop'.split(' ');
        items.forEach(el => {
            window.addEventListener(el, async e => {
                e.preventDefault();
                e.stopPropagation();
                if (e.type === 'drop') {
                    if (e.dataTransfer.files.length > 0) {
                        e.dataTransfer.id = 'upload-dir';
                        player.playlist.changeFiles(e, e.dataTransfer);
                    } else {
                        alert("Sorry you need to upload files!");
                    }
                }
            });
        });
    };
}

// create config Inputs from JSON
//@todo add support for gui grouping!
class GUIHelper {
    static fromJSON(json, conf) {
        let data = [];
        for (let item of json) {
            switch (item.type) {
                case 'slider':
                    data.push(GUIHelper.createSliders(item, conf));
                    break;
                case 'color':
                    data.push(GUIHelper.createColorPicker(item, conf));
                    break;
                case 'checkbox':
                    data.push(GUIHelper.createCheckbox(item, conf));
                    break;
                case 'input':
                    data.push(GUIHelper.createInputField(item, conf));
                    break;
                case 'select':
                    data.push(GUIHelper.createSelect(item, conf));
                    break;
                case 'button':
                    data.push(GUIHelper.createButton(item, conf));
                    break;
                default:
                    console.error(`Unknown Type: ${item.type}`);
            }
        }
        return data.join(" ");
    }

    static createSliders(data, conf) {
        let content = "";
        if (typeof data.name === "object") {
            for (let i = 0; i < data.name.length; i++) {
                let newData = {};
                Object.assign(newData, data);
                newData.showName = GUIHelper.richShowName(data, data.name[i].firstUpper());
                newData.name = GUIHelper.richName(data, data.props[i]);
                content += GUIHelper.createSlider(newData, conf);
            }
        } else {
            content = GUIHelper.createSlider(data, conf);
        }
        return content;
    }

    static createSlider(data, conf) {
        let newData = {};
        Object.assign(newData, data);
        newData.value = conf.get(newData.name, newData.value);
        return template.parseTemplate('inputs/slider', newData)
    }

    static createColorPicker(data, conf) {
        let newData = {};
        Object.assign(newData, data);
        newData.value = conf.get(newData.name, newData.value);
        return template.parseTemplate('inputs/color', newData)
    }

    static createCheckbox(data, conf) {
        let newData = {};
        Object.assign(newData, data);
        newData.value = conf.get(newData.name, newData.value) ? 'checked' : '';
        return template.parseTemplate('inputs/switch', newData)
    }

    static createInputField(data, conf) {
        let newData = {};
        Object.assign(newData, data);
        newData.value = conf.get(newData.name, newData.value);
        return template.parseTemplate('inputs/input', newData)
    }

    static createSelect(data, conf) {
        let newData = {};
        Object.assign(newData, data);
        newData.value = conf.get(newData.name, newData.value);
        let options = '';
        for (let i = 0; i < newData.options.length; i++) {
            options += template.parseTemplate('inputs/option', {
                value: newData.options[i]
            })
        }
        newData.options = options;
        newData.event = 'visualConf';
        newData.conf = conf.type;
        return template.parseTemplate('inputs/select', newData)
    }

    static richName(data, name) {
        if (data.group !== "") {
            return data.group + "-" + name
        }
        return name;
    }

    static richShowName(data, name) {
        if (data.group !== "") {
            return data.group.firstUpper() + ' ' + name
        }
        return name;
    }

    static createButton(item, conf) {
        return `<div class='button spaced' data-action="${item.action}">${item.name}</div>`
    }
}

class Modal {
    constructor() {
        let self = this;
        self.currentModal = '';
        self.modal = $('#modal');
        self.open = false;
        self.parent = self.modal.parentNode;
        self.modal.addDelegatedEventListener('click', 'header .close', this.closeModal.bind(this));
    }

    resetModal() {
        this.renderModal('', '', '');
    }

    renderModal(title, content, footer) {
        $('#modal').removeClass('lightMode')
        this.currentModal = title;
        this.renderHeader(title);
        this.renderContent(content);
        this.renderFooter(footer);
    }

    renderHeader(header) {
        let h = $('header .headline', this.modal);
        h.innerHTML = header;
    }

    renderContent(content) {
        let con = $('modal-content', this.modal);
        con.innerHTML = content;
    }

    renderFooter(footer) {
        let con = $('modal-footer .inner', this.modal);
        con.innerHTML = footer || "by VersusTuneZ";
    }

    closeModal() {
        this.parent.addClass("hide")
        this.open = false;
    }

    isCurrent(title) {
        return title === this.currentModal;
    }

    showModal() {
        this.parent.removeClass("hide")
        this.open = true;
    }
}