hmn/public/js/image_selector.js

101 lines
2.8 KiB
JavaScript
Raw Permalink Normal View History

2021-12-29 14:38:23 +00:00
function ImageSelector(form, maxFileSize, container, defaultImageUrl) {
2021-11-25 03:59:51 +00:00
this.form = form;
this.maxFileSize = maxFileSize;
this.fileInput = container.querySelector(".image_input");
this.removeImageInput = container.querySelector(".remove_input");
this.imageEl = container.querySelector("img");
this.resetLink = container.querySelector(".reset");
this.removeLink = container.querySelector(".remove");
this.originalImageUrl = this.imageEl.getAttribute("data-original");
this.currentImageUrl = this.originalImageUrl;
2021-12-29 14:38:23 +00:00
this.defaultImageUrl = defaultImageUrl || "";
2021-11-25 03:59:51 +00:00
this.fileInput.value = "";
this.removeImageInput.value = "";
this.setImageUrl(this.originalImageUrl);
this.updateButtons();
this.fileInput.addEventListener("change", function(ev) {
if (this.fileInput.files.length > 0) {
this.handleNewImageFile(this.fileInput.files[0]);
}
}.bind(this));
this.resetLink.addEventListener("click", function(ev) {
this.resetImage();
}.bind(this));
if (this.removeLink) {
this.removeLink.addEventListener("click", function(ev) {
this.removeImage();
}.bind(this));
}
}
ImageSelector.prototype.handleNewImageFile = function(file) {
if (file) {
this.updateSizeLimit(file.size);
this.removeImageInput.value = "";
this.setImageUrl(URL.createObjectURL(file));
this.updateButtons();
}
};
ImageSelector.prototype.removeImage = function() {
this.updateSizeLimit(0);
this.fileInput.value = "";
this.removeImageInput.value = "true";
2021-12-29 14:38:23 +00:00
this.setImageUrl(this.defaultImageUrl);
2021-11-25 03:59:51 +00:00
this.updateButtons();
};
ImageSelector.prototype.resetImage = function() {
this.updateSizeLimit(0);
this.fileInput.value = "";
this.removeImageInput.value = "";
this.setImageUrl(this.originalImageUrl);
this.updateButtons();
};
ImageSelector.prototype.updateSizeLimit = function(size) {
this.fileTooBig = size > this.maxFileSize;
if (this.fileTooBig) {
this.setError("File too big. Max filesize is " + this.maxFileSize + " bytes.");
} else {
this.setError("");
}
};
ImageSelector.prototype.setError = function(error) {
this.fileInput.setCustomValidity(error);
this.fileInput.reportValidity();
}
ImageSelector.prototype.setImageUrl = function(url) {
this.currentImageUrl = url;
this.imageEl.src = url;
if (url.length > 0) {
this.imageEl.style.display = "block";
} else {
this.imageEl.style.display = "none";
}
};
ImageSelector.prototype.updateButtons = function() {
2021-12-29 14:38:23 +00:00
if ((this.originalImageUrl.length > 0 && this.originalImageUrl != this.defaultImageUrl)
&& this.currentImageUrl != this.originalImageUrl) {
2021-11-25 03:59:51 +00:00
this.resetLink.style.display = "inline-block";
} else {
this.resetLink.style.display = "none";
}
2021-12-29 14:38:23 +00:00
if (!this.fileInput.required && this.currentImageUrl != this.defaultImageUrl) {
2021-11-25 03:59:51 +00:00
this.removeLink.style.display = "inline-block";
} else {
this.removeLink.style.display = "none";
}
};