audio-vis/raw/javascript/imageUploader.js

class ImageUploader {
    async init() {
        this.image = pConf.get("bgURL", "");
        this.color = pConf.get("bgColour", "#000000");
        this.alpha = pConf.get("alphaValue", 0.5);
        this.getRealImage();
        this.applyValues();
        $('#modal').addDelegatedEventListener('change', '#image-upload input:not([type="color"])', this.changeHandler.bind(this));
        $('#modal').addDelegatedEventListener('input', '#image-upload input#color', this.changeHandler.bind(this));
    }

    async renderModal() {
        await template.loadTemplate("image");
        gui.modal.resetModal();
        gui.modal.renderModal("Background-Image",
            template.parseTemplate("image", {
                value: this.image,
                bgValue: this.color,
                alphaValue: this.alpha
            }), "");
        gui.modal.showModal();
    }

    changeHandler(e, el) {
        if (el.id === 'color') {
            this.color = el.value;
        } else if (el.id === "alphaValue") {
            this.alpha = el.value;
        } else {
            pConf.set('bgMode', el.id);
            if (el.id === 'image') {
                el.files[0].toBase64((e, b) => {
                    if (b) {
                        alert("Error converting image!");
                        return;
                    }
                    pConf.set('bgURL', e.currentTarget.result);
                    pConf.save();
                })
                this.image = URL.createObjectURL(el.files[0]);
            } else {
                this.image = el.value;
                pConf.set('bgURL', this.image);
            }
        }
        pConf.set('bgColour', this.color);
        pConf.set('alphaValue', this.alpha);
        this.applyValues();
        pConf.save();
    }

    applyValues() {
        let body = $('body');
        body.style.backgroundImage = 'url(' + this.image + ')';
        body.style.backgroundColor = this.color;
        let blob = $('#colorBlob');
        if (blob) {
            blob.style.backgroundColor = this.color;
        }
    }

    getRealImage() {
        let mode = pConf.get('bgMode'),
            value = pConf.get("bgURL", "");
        if (mode === 'image') {
            if (value !== '' && value.startsWith('data:image')) {
                let split = value.split(";"),
                    type = split.shift(),
                    message = split.join(";").replace("base64,", "");
                this.image = URL.createObjectURL(b64toBlob(message, type));
            }
        } else {
            this.image = value;
        }
    }
}

const imageUploader = new ImageUploader();