78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
|
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();
|