added collage, fixed parts marker color, added ri number
This commit is contained in:
+204
-48
@@ -187,6 +187,54 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
}
|
||||
|
||||
// Funzione per gestire il caricamento dei file
|
||||
async function handleFiles(files, iddatadb) {
|
||||
const loader = document.getElementById("loader");
|
||||
if (!loader) {
|
||||
console.error("Elemento loader non trovato");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!files || files.length === 0) {
|
||||
console.warn("Nessun file da caricare");
|
||||
return;
|
||||
}
|
||||
|
||||
for (const file of files) {
|
||||
if (!file.type.startsWith("image/")) {
|
||||
alert("Per favore, carica solo immagini!");
|
||||
continue;
|
||||
}
|
||||
|
||||
console.log("Inizio upload del file:", file.name);
|
||||
loader.style.display = "flex";
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("photo", file);
|
||||
formData.append("iddatadb", iddatadb);
|
||||
try {
|
||||
const response = await fetch("upload_photo.php", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
console.log(
|
||||
"Upload completato con successo, ricarico popup",
|
||||
);
|
||||
loadPopupContent(iddatadb);
|
||||
} else {
|
||||
alert("Errore durante il caricamento: " + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert("Errore durante il caricamento: " + error.message);
|
||||
} finally {
|
||||
console.log("Nascondo loader dopo upload");
|
||||
loader.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Funzione per attaccare gli event listener al contenuto del popup
|
||||
function attachPhotoEventListeners(iddatadb) {
|
||||
const dropArea = document.getElementById("dropArea");
|
||||
@@ -332,6 +380,162 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
// Inizializza la gestione della webcam
|
||||
setupWebcam(iddatadb);
|
||||
|
||||
// Gestione bottone Crea Collage
|
||||
const createCollageBtn = document.getElementById("createCollageBtn");
|
||||
if (createCollageBtn) {
|
||||
createCollageBtn.addEventListener("click", () => {
|
||||
console.log("Apertura modale collage");
|
||||
document.getElementById("collageModal").style.display = "block";
|
||||
initCollageCanvas();
|
||||
});
|
||||
}
|
||||
|
||||
// Chiusura modale collage
|
||||
const closeCollageBtn = document.querySelector(".close-collage");
|
||||
if (closeCollageBtn) {
|
||||
closeCollageBtn.addEventListener("click", () => {
|
||||
console.log("Chiusura modale collage");
|
||||
document.getElementById("collageModal").style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
// Inizializza canvas con Fabric.js
|
||||
let canvas;
|
||||
function initCollageCanvas() {
|
||||
if (typeof fabric === "undefined") {
|
||||
console.error("Fabric.js non è caricato!");
|
||||
alert(
|
||||
"Errore: Fabric.js non è disponibile. Controlla la connessione al CDN.",
|
||||
);
|
||||
return;
|
||||
}
|
||||
canvas = new fabric.Canvas("collageCanvas", {
|
||||
backgroundColor: "#fff",
|
||||
selection: true,
|
||||
});
|
||||
// Abilita ridimensionamento e trascinamento
|
||||
canvas.on("object:modified", () => canvas.renderAll());
|
||||
}
|
||||
|
||||
// Aggiungi foto selezionate al canvas
|
||||
const addToCanvasBtn = document.getElementById("addToCanvasBtn");
|
||||
if (addToCanvasBtn) {
|
||||
addToCanvasBtn.addEventListener("click", () => {
|
||||
const checkboxes = document.querySelectorAll(
|
||||
".photo-checkbox:checked",
|
||||
);
|
||||
if (checkboxes.length === 0) {
|
||||
alert("Seleziona almeno una foto!");
|
||||
return;
|
||||
}
|
||||
checkboxes.forEach((cb) => {
|
||||
const imgPath = cb.getAttribute("data-path");
|
||||
fabric.Image.fromURL(imgPath, (img) => {
|
||||
img.set({
|
||||
left: Math.random() * 600, // Posizione random iniziale
|
||||
top: Math.random() * 400,
|
||||
scaleX: 0.5, // Scala iniziale
|
||||
scaleY: 0.5,
|
||||
hasControls: true, // Abilita resize/rotate
|
||||
hasBorders: true,
|
||||
});
|
||||
canvas.add(img);
|
||||
canvas.renderAll();
|
||||
});
|
||||
});
|
||||
// Deseleziona checkbox dopo aggiunta
|
||||
checkboxes.forEach((cb) => (cb.checked = false));
|
||||
});
|
||||
}
|
||||
|
||||
// Salva collage
|
||||
const saveCollageBtn = document.getElementById("saveCollageBtn");
|
||||
if (saveCollageBtn) {
|
||||
saveCollageBtn.addEventListener("click", async () => {
|
||||
if (canvas.getObjects().length === 0) {
|
||||
alert("Il canvas è vuoto! Aggiungi almeno una foto.");
|
||||
return;
|
||||
}
|
||||
const dataURL = canvas.toDataURL({
|
||||
format: "jpeg",
|
||||
quality: 0.8,
|
||||
});
|
||||
const blob = await (await fetch(dataURL)).blob();
|
||||
const file = new File([blob], `collage_${Date.now()}.jpg`, {
|
||||
type: "image/jpeg",
|
||||
});
|
||||
|
||||
// Upload come nuova foto
|
||||
await handleFiles([file], iddatadb);
|
||||
// Chiudi modale e ricarica popup
|
||||
document.getElementById("collageModal").style.display = "none";
|
||||
loadPopupContent(iddatadb);
|
||||
});
|
||||
}
|
||||
|
||||
// Pulisci canvas
|
||||
const clearCanvasBtn = document.getElementById("clearCanvasBtn");
|
||||
if (clearCanvasBtn) {
|
||||
clearCanvasBtn.addEventListener("click", () => {
|
||||
canvas.clear();
|
||||
canvas.setBackgroundColor("#fff");
|
||||
canvas.renderAll();
|
||||
});
|
||||
}
|
||||
|
||||
// Gestione livelli delle immagini
|
||||
const bringToFrontBtn = document.getElementById("bringToFrontBtn");
|
||||
if (bringToFrontBtn) {
|
||||
bringToFrontBtn.addEventListener("click", () => {
|
||||
const activeObject = canvas.getActiveObject();
|
||||
if (activeObject) {
|
||||
canvas.bringToFront(activeObject);
|
||||
canvas.renderAll();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const sendToBackBtn = document.getElementById("sendToBackBtn");
|
||||
if (sendToBackBtn) {
|
||||
sendToBackBtn.addEventListener("click", () => {
|
||||
const activeObject = canvas.getActiveObject();
|
||||
if (activeObject) {
|
||||
canvas.sendToBack(activeObject);
|
||||
canvas.renderAll();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const bringForwardBtn = document.getElementById("bringForwardBtn");
|
||||
if (bringForwardBtn) {
|
||||
bringForwardBtn.addEventListener("click", () => {
|
||||
const activeObject = canvas.getActiveObject();
|
||||
if (activeObject) {
|
||||
canvas.bringForward(activeObject);
|
||||
canvas.renderAll();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const sendBackwardBtn = document.getElementById("sendBackwardBtn");
|
||||
if (sendBackwardBtn) {
|
||||
sendBackwardBtn.addEventListener("click", () => {
|
||||
const activeObject = canvas.getActiveObject();
|
||||
if (activeObject) {
|
||||
canvas.sendBackwards(activeObject);
|
||||
canvas.renderAll();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Assicurati che il loader sia nascosto all'apertura del popup
|
||||
const loader = document.getElementById("loader");
|
||||
if (loader) {
|
||||
@@ -340,54 +544,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
}
|
||||
|
||||
// Funzione per gestire il caricamento dei file
|
||||
async function handleFiles(files, iddatadb) {
|
||||
const loader = document.getElementById("loader");
|
||||
if (!loader) {
|
||||
console.error("Elemento loader non trovato");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!files || files.length === 0) {
|
||||
console.warn("Nessun file da caricare");
|
||||
return;
|
||||
}
|
||||
|
||||
for (const file of files) {
|
||||
if (!file.type.startsWith("image/")) {
|
||||
alert("Per favore, carica solo immagini!");
|
||||
continue;
|
||||
}
|
||||
|
||||
console.log("Inizio upload del file:", file.name);
|
||||
loader.style.display = "flex";
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("photo", file);
|
||||
formData.append("iddatadb", iddatadb);
|
||||
try {
|
||||
const response = await fetch("upload_photo.php", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
console.log(
|
||||
"Upload completato con successo, ricarico popup",
|
||||
);
|
||||
loadPopupContent(iddatadb);
|
||||
} else {
|
||||
alert("Errore durante il caricamento: " + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert("Errore durante il caricamento: " + error.message);
|
||||
} finally {
|
||||
console.log("Nascondo loader dopo upload");
|
||||
loader.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gestione del pulsante Photos
|
||||
const photosButtons = document.querySelectorAll(".photos-btn");
|
||||
const photosModal = document.getElementById("photosModal");
|
||||
|
||||
Reference in New Issue
Block a user