102 lines
3.3 KiB
JavaScript
102 lines
3.3 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
const dropzone = document.getElementById("dropzone");
|
|
const photoInput = document.getElementById("photoInput");
|
|
const preview = document.getElementById("preview");
|
|
const previewImg = document.getElementById("previewImg");
|
|
const previewName = document.getElementById("previewName");
|
|
const submitBtn = document.getElementById("submitBtn");
|
|
|
|
if (!dropzone || !photoInput) return;
|
|
|
|
const maxFiles = parseInt(photoInput.dataset.max || "100", 10);
|
|
|
|
dropzone.addEventListener("click", (e) => {
|
|
if (e.target.closest("button")) return;
|
|
photoInput.click();
|
|
});
|
|
|
|
["dragenter", "dragover"].forEach((event) => {
|
|
dropzone.addEventListener(event, (e) => {
|
|
e.preventDefault();
|
|
dropzone.classList.add("dropzone--active");
|
|
});
|
|
});
|
|
|
|
["dragleave", "drop"].forEach((event) => {
|
|
dropzone.addEventListener(event, (e) => {
|
|
e.preventDefault();
|
|
dropzone.classList.remove("dropzone--active");
|
|
});
|
|
});
|
|
|
|
dropzone.addEventListener("drop", (e) => {
|
|
e.preventDefault();
|
|
assignFiles(e.dataTransfer.files);
|
|
});
|
|
|
|
photoInput.addEventListener("change", () => {
|
|
if (photoInput.files.length > 0) {
|
|
showPreview(photoInput.files);
|
|
}
|
|
});
|
|
|
|
function assignFiles(fileList) {
|
|
const dt = new DataTransfer();
|
|
const limit = Math.min(fileList.length, maxFiles);
|
|
for (let i = 0; i < limit; i++) {
|
|
if (fileList[i].type.startsWith("image/")) {
|
|
dt.items.add(fileList[i]);
|
|
}
|
|
}
|
|
photoInput.files = dt.files;
|
|
showPreview(photoInput.files);
|
|
}
|
|
|
|
function showPreview(files) {
|
|
if (!files || files.length === 0) return;
|
|
|
|
const first = files[0];
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
previewImg.src = e.target.result;
|
|
previewName.textContent =
|
|
files.length === 1
|
|
? first.name
|
|
: `${files.length} файлов (первый: ${first.name})`;
|
|
preview.hidden = false;
|
|
submitBtn.disabled = false;
|
|
};
|
|
reader.readAsDataURL(first);
|
|
}
|
|
|
|
document.querySelectorAll(".copy-btn").forEach((btn) => {
|
|
btn.addEventListener("click", async (e) => {
|
|
e.stopPropagation();
|
|
const url = btn.dataset.url;
|
|
try {
|
|
await navigator.clipboard.writeText(url);
|
|
showToast("Ссылка скопирована!");
|
|
} catch {
|
|
const input = document.createElement("input");
|
|
input.value = url;
|
|
document.body.appendChild(input);
|
|
input.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(input);
|
|
showToast("Ссылка скопирована!");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
function showToast(message) {
|
|
const existing = document.querySelector(".toast");
|
|
if (existing) existing.remove();
|
|
|
|
const toast = document.createElement("div");
|
|
toast.className = "toast";
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 2500);
|
|
}
|