audio-vis/raw/javascript/gui.js

class GUI {
    async init() {
        this.data = {};
        this.modal = new Modal();
        // load first vis window!
        await this.loadForVis();
        await template.loadArray([
            'playlist-item',
            'playlist',
            'playlist-footer'
        ]);
        this.initDropZone();
    }

    async loadForVis() {
        let c = visual.c,
            d = this.data[c];
        if (d == null) {
            this.data[c] = await fetch("out/gui/" + c + ".json").then((r) => r.json());
        }
    }

    renderModal(content, title) {
        let modal = $('#modal'),
            p = modal.parentNode,
            h = $('header .headline', modal),
            con = $('modal-content', modal);
        h.innerHTML = title;
        con.innerHTML = content;
        p.classList.remove('hide');
    }

    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) {
                        player.playlist.changeFiles(e, e.dataTransfer);
                    } else {
                        alert("Sorry you need to upload files!");
                    }
                }
            });
        });
    };
}

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

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

    renderModal(title, content, footer) {
        this.currentModal = title;
        this.renderHeader(title);
        this.renderContent(content);
        this.renderFooter(footer);
        this.showModal();
    }

    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', this.modal);
        con.innerHTML = footer;
    }

    closeModal() {
        this.parent.addClass("hide")
    }

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

    showModal() {
        this.parent.removeClass("hide")
    }
}