audio-vis/raw/javascript/eventHandler.js

class EventHandler {
    constructor() {
        this.events = {};
    }

    addEvent(name, cb) {
        this.events[name] = cb;
    }

    sendData(name, data) {
        worker.postMessage({
            cmd: name,
            data: data
        });
    }

    handleEvent(event) {
        let data = event.data;
        if (!data.cmd) {
            return;
        }

        if (this.events[data.cmd]) {
            this.events[data.cmd](data.data);
        }
    }
}

async function initHandler() {
    let body = $('body');
    $('.playlist.menu-icon').addEventListener('click', e => {
        player.playlist.renderPagination(player.playlist.page);
        gui.modal.showModal();
    });

    body.addDelegatedEventListener('click', '.playlist-item', (e, el) => {
        let number = el.dataset.index;
        player.playByID(parseInt(number));
        togglePlayButton('pause');
    });

    body.addDelegatedEventListener('click', '.controls button', (e, el) => {
        switch (el.id) {
            case 'previous':
                player.prevSong();
                break;
            case 'next':
                player.nextSong()
                break;
            case 'play':
                player.playStop();
                break;
            case 'shuffle':
                player.playlist.isShuffle = !player.playlist.isShuffle;
                toggleShuffle();
                break;
        }
        togglePlayButton(audioHandler.audioFile.paused ? 'play' : 'pause');
    });
    window.addEventListener('playSong', setActiveOnPlaylist);
    $('.upload-image').addEventListener('click', imageUploader.renderModal.bind(imageUploader));
    body.addDelegatedEventListener('click', '.readAll', e => {
        let playlist = player.playlist.list;
        for (let i = 0; i < playlist.length; i++) {
            playlist[i].getID3Tag(true);
        }
    })

    body.addDelegatedEventListener('input', '.input-range input[type="range"]', (e, el) => {
        let current = $('.current', el.parentNode);
        current.innerText = el.value;
    });

    body.addDelegatedEventListener('input', 'input[type="color"]', (e, el) => {
        let parent = el.parentNode;
        $('.colorBlob', parent).style.backgroundColor = el.value;
    })

    body.addDelegatedEventListener('click', '.visual-item', (e, el) => {
        visual.switch(el.dataset.id || 'wave');
        $('modal-content .visuals .active').removeClass('active');
        el.addClass('active');
    })

    body.addDelegatedEventListener('input', 'section.base input', (e, el) => {
        if (el.type === 'checkbox') {
            pConf.set(el.name, el.checked);
        } else {
            setValue(el.name, el.value, pConf, el.dataset.type);
        }
        pConf.save();
    })
    body.addDelegatedEventListener('input', 'section.visual input', (e, el) => {
        if (el.type === 'checkbox') {
            vConf.set(el.name, el.checked);
        } else {
            setValue(el.name, el.value, vConf, el.dataset.type);
        }
        vConf.save();
    })

    body.addDelegatedEventListener('click', '.button[data-action]', (e, el) => {
        switch (el.dataset.action) {
            case 'resetVConf':
                vConf.reset();
                setTimeout(e => {
                    playerConf.handleById();
                }, 30);
                break;
            case 'makeModalTransparent':
                $('#modal').toggleClass('lightMode')
                break;
        }
    })
}


function setValue(name, value, conf, type) {
    switch (type) {
        case 'float':
            value = parseFloat(value);
            break;
        case 'int':
            value = parseInt(value);
            break;
    }
    conf.set(name, value);
}

function setActiveOnPlaylist(e) {
    let item = $('.playlist-item[data-index="' + player.playlist.index + '"]'),
        active = $('.playlist-item.active');
    if (active) {
        active.removeClass('active');
    }
    if (item) {
        item.addClass('active');
    }
}

function toggleShuffle() {
    let active = player.playlist.isShuffle;
    $('#shuffle').toggleCheck('active', active);
    let status = active ? 'enabled' : 'disabled';
    NotificationHandler.createNotification("Shuffle: " + status, "info", 500);
}

function togglePlayButton(status) {
    let icons = $$('#play .icon');
    icons.forEach(el => {
        if (el.dataset.name === status) {
            el.removeClass('hide');
        } else {
            el.addClass('hide');
        }
    })
}