129 lines
3.3 KiB
JavaScript
129 lines
3.3 KiB
JavaScript
initApp();
|
|
|
|
function initApp() {
|
|
// Initialize the app
|
|
initDropZone();
|
|
initInputValidation();
|
|
initClipboardPaste();
|
|
initBackToTop();
|
|
setConfigForm();
|
|
restoreConfigForm();
|
|
}
|
|
|
|
|
|
function initDropZone() {
|
|
const dropZone = ui.groups.dropZone;
|
|
const fileInput = ui.inputs.file;
|
|
const compressingGuard = (handler) => (e) => {
|
|
// Prevent adding more to compression queue when isCompressing.
|
|
if (state.isCompressing) return;
|
|
handler(e);
|
|
};
|
|
|
|
dropZone.addEventListener("click", compressingGuard(() => fileInput.click()));
|
|
|
|
fileInput.addEventListener("change", compressingGuard((e) => {
|
|
if (fileInput.files?.length) {
|
|
compressImage(e);
|
|
fileInput.value = "";
|
|
}
|
|
}));
|
|
|
|
const toggleDragging = (add) => dropZone.classList.toggle("drop-zone--is-dragging", add);
|
|
|
|
dropZone.addEventListener("dragenter", compressingGuard((e) => {
|
|
e.preventDefault();
|
|
toggleDragging(true);
|
|
}));
|
|
|
|
dropZone.addEventListener("dragover", compressingGuard((e) => {
|
|
e.preventDefault();
|
|
toggleDragging(true);
|
|
}));
|
|
|
|
dropZone.addEventListener("dragleave", compressingGuard((e) => {
|
|
e.preventDefault();
|
|
toggleDragging(false);
|
|
}));
|
|
|
|
dropZone.addEventListener("drop", compressingGuard((e) => {
|
|
e.preventDefault();
|
|
toggleDragging(false);
|
|
if (e.dataTransfer.files?.length) {
|
|
fileInput.files = e.dataTransfer.files;
|
|
compressImage({ target: fileInput }, true);
|
|
fileInput.value = "";
|
|
}
|
|
}));
|
|
}
|
|
|
|
function initInputValidation() {
|
|
ui.inputs.quality.addEventListener("change", () => {
|
|
setQuality(ui.inputs.quality.value);
|
|
});
|
|
|
|
ui.inputs.limitDimensions.addEventListener("change", (e) => {
|
|
setLimitDimensions(ui.inputs.limitDimensions.value);
|
|
});
|
|
|
|
ui.inputs.limitWeight.addEventListener("change", (e) => {
|
|
setWeight(ui.inputs.limitWeight.value, ui.inputs.limitWeightUnit.value);
|
|
});
|
|
|
|
ui.inputs.limitWeightUnit.addEventListener("change", (e) => {
|
|
setWeightUnit(e.target.value);
|
|
});
|
|
}
|
|
|
|
function initClipboardPaste() {
|
|
document.addEventListener("paste", handlePasteImage);
|
|
}
|
|
|
|
function initBackToTop() {
|
|
ui.actions.backToTop.addEventListener("click", function () {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
});
|
|
}
|
|
|
|
function setConfigForm() {
|
|
// Default values of form fields, or for restoring local storage values.
|
|
setQuality(config.form.quality.value);
|
|
setLimitDimensions(config.form.limitDimensions.value);
|
|
setWeightUnit(config.form.limitWeightUnit.value);
|
|
setWeight(config.form.limitWeight.value, config.form.limitWeightUnit.value);
|
|
setCompressMethod(config.form.compressMethod.value);
|
|
setDimensionMethod(config.form.dimensionMethod.value);
|
|
setConvertMethod(config.form.convertMethod.value);
|
|
}
|
|
|
|
function handlePasteImage(e) {
|
|
if (!e.clipboardData || state.isCompressing) return;
|
|
|
|
const items = e.clipboardData.items;
|
|
const files = [];
|
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
const item = items[i];
|
|
|
|
if (item.kind === "file" && item.type.startsWith("image/")) {
|
|
files.push(item.getAsFile());
|
|
}
|
|
}
|
|
|
|
if (files.length) {
|
|
compressImage({ target: { files } });
|
|
}
|
|
}
|
|
|
|
function abort(event) {
|
|
// Cancel on-going compression.
|
|
event.stopPropagation();
|
|
if (!state.controller) return;
|
|
resetCompressionState(false, true);
|
|
state.controller.abort(new Error("Image compression cancelled"));
|
|
}
|
|
|