change link and color table
This commit is contained in:
+146
-123
@@ -1,184 +1,207 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Gestione del popup per le foto
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Funzione per caricare il contenuto del popup
|
||||
async function loadPopupContent(iddatadb) {
|
||||
const popupContent = document.getElementById('popupContent');
|
||||
const popupContent = document.getElementById("popupContent");
|
||||
if (!popupContent) {
|
||||
console.error("Elemento popupContent non trovato");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`photos_popup.php?iddatadb=${iddatadb}`);
|
||||
console.log("Caricamento contenuto per iddatadb:", iddatadb);
|
||||
const response = await fetch(
|
||||
`photos_popup.php?iddatadb=${iddatadb}`,
|
||||
);
|
||||
if (!response.ok)
|
||||
throw new Error("Errore nella risposta del server");
|
||||
popupContent.innerHTML = await response.text();
|
||||
|
||||
// Dopo aver caricato il contenuto, associa gli event listener
|
||||
attachPhotoEventListeners(iddatadb);
|
||||
} catch (error) {
|
||||
popupContent.innerHTML = `<p>Errore durante il caricamento: ${error.message}</p>`;
|
||||
console.error("Errore in loadPopupContent:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Funzione per attaccare gli event listener al contenuto del popup
|
||||
function attachPhotoEventListeners(iddatadb) {
|
||||
const dropArea = document.getElementById('dropArea');
|
||||
const photoInput = document.getElementById('photoInput');
|
||||
const dropArea = document.getElementById("dropArea");
|
||||
const photoInput = document.getElementById("photoInput");
|
||||
const photosModal = document.getElementById("photosModal");
|
||||
|
||||
if (!dropArea || !photoInput) {
|
||||
console.error('Elementi dropArea o photoInput non trovati nel DOM');
|
||||
if (!dropArea || !photoInput || !photosModal) {
|
||||
console.error("Elementi mancanti:", {
|
||||
dropArea,
|
||||
photoInput,
|
||||
photosModal,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Associando event listener per drag-and-drop');
|
||||
console.log("Event listener associati per iddatadb:", iddatadb);
|
||||
|
||||
// Gestione drag-and-drop
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
const preventDefaults = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, () => {
|
||||
console.log('Drag enter/over');
|
||||
dropArea.classList.add('highlight');
|
||||
}, false);
|
||||
["dragenter", "dragover"].forEach((eventName) => {
|
||||
dropArea.addEventListener(
|
||||
eventName,
|
||||
() => dropArea.classList.add("highlight"),
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, () => {
|
||||
console.log('Drag leave/drop');
|
||||
dropArea.classList.remove('highlight');
|
||||
}, false);
|
||||
["dragleave", "drop"].forEach((eventName) => {
|
||||
dropArea.addEventListener(
|
||||
eventName,
|
||||
() => dropArea.classList.remove("highlight"),
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
dropArea.addEventListener('drop', (e) => {
|
||||
console.log('File droppato');
|
||||
const files = e.dataTransfer.files;
|
||||
handleFiles(files, iddatadb);
|
||||
}, false);
|
||||
dropArea.addEventListener(
|
||||
"drop",
|
||||
(e) => {
|
||||
const files = e.dataTransfer.files;
|
||||
handleFiles(files, iddatadb);
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
dropArea.addEventListener('click', () => {
|
||||
console.log('Click su dropArea');
|
||||
photoInput.click();
|
||||
}, false);
|
||||
dropArea.addEventListener("click", () => photoInput.click(), false);
|
||||
|
||||
photoInput.addEventListener('change', () => {
|
||||
console.log('File selezionato tramite input');
|
||||
handleFiles(photoInput.files, iddatadb);
|
||||
}, false);
|
||||
photoInput.addEventListener(
|
||||
"change",
|
||||
() => handleFiles(photoInput.files, iddatadb),
|
||||
false,
|
||||
);
|
||||
|
||||
// Gestione della rimozione delle foto
|
||||
const deleteButtons = document.querySelectorAll('.delete-photo-btn');
|
||||
deleteButtons.forEach(button => {
|
||||
button.addEventListener('click', async function() {
|
||||
const photoId = this.getAttribute('data-photo-id');
|
||||
if (confirm('Sei sicuro di voler eliminare questa foto?')) {
|
||||
// Gestione rimozione foto
|
||||
document.querySelectorAll(".delete-photo-btn").forEach((button) => {
|
||||
button.addEventListener("click", async function () {
|
||||
const photoId = this.getAttribute("data-photo-id");
|
||||
if (confirm("Sei sicuro di voler eliminare questa foto?")) {
|
||||
try {
|
||||
const response = await fetch('delete_photo.php', {
|
||||
method: 'POST',
|
||||
const response = await fetch("delete_photo.php", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
"Content-Type":
|
||||
"application/x-www-form-urlencoded",
|
||||
},
|
||||
body: `photo_id=${photoId}`
|
||||
body: `photo_id=${photoId}`,
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
// Ricarica il contenuto del popup
|
||||
loadPopupContent(iddatadb);
|
||||
} else {
|
||||
alert('Errore durante l\'eliminazione: ' + result.message);
|
||||
alert(
|
||||
"Errore durante l'eliminazione: " +
|
||||
result.message,
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Errore durante l\'eliminazione: ' + error.message);
|
||||
alert(
|
||||
"Errore durante l'eliminazione: " + error.message,
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Gestione del click sulle immagini per ingrandirle
|
||||
document.querySelectorAll('.thumbnail').forEach(img => {
|
||||
img.addEventListener('click', function() {
|
||||
const modal = document.getElementById('imageModal');
|
||||
const enlargedImage = document.getElementById('enlargedImage');
|
||||
// Gestione ingrandimento immagini
|
||||
document.querySelectorAll(".thumbnail").forEach((img) => {
|
||||
img.addEventListener("click", function () {
|
||||
const enlargedImage = document.getElementById("enlargedImage");
|
||||
enlargedImage.src = this.src;
|
||||
modal.style.display = 'block';
|
||||
document.getElementById("imageModal").style.display = "block";
|
||||
});
|
||||
});
|
||||
|
||||
// Gestione della chiusura del modal immagine
|
||||
const imageModal = document.getElementById('imageModal');
|
||||
const imageCloseBtn = document.querySelector('.image-modal-close');
|
||||
// Gestione chiusura modale immagine
|
||||
const imageCloseBtn = document.querySelector(".image-modal-close");
|
||||
if (imageCloseBtn) {
|
||||
imageCloseBtn.addEventListener('click', function() {
|
||||
imageModal.style.display = 'none';
|
||||
imageCloseBtn.addEventListener("click", () => {
|
||||
document.getElementById("imageModal").style.display = "none";
|
||||
});
|
||||
}
|
||||
if (imageModal) {
|
||||
imageModal.addEventListener('click', function(event) {
|
||||
if (event.target === imageModal) {
|
||||
imageModal.style.display = 'none';
|
||||
document
|
||||
.getElementById("imageModal")
|
||||
.addEventListener("click", function (event) {
|
||||
if (event.target === this) {
|
||||
this.style.display = "none";
|
||||
}
|
||||
});
|
||||
_
|
||||
}
|
||||
|
||||
async function handleFiles(files, iddatadb) {
|
||||
for (const file of files) {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
alert('Per favore, carica solo immagini!');
|
||||
continue;
|
||||
}
|
||||
|
||||
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) {
|
||||
// Ricarica il contenuto del popup
|
||||
loadPopupContent(iddatadb);
|
||||
} else {
|
||||
alert('Errore durante il caricamento: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Errore durante il caricamento: ' + error.message);
|
||||
// Funzione per gestire il caricamento dei file
|
||||
async function handleFiles(files, iddatadb) {
|
||||
for (const file of files) {
|
||||
if (!file.type.startsWith("image/")) {
|
||||
alert("Per favore, carica solo immagini!");
|
||||
continue;
|
||||
}
|
||||
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) {
|
||||
loadPopupContent(iddatadb);
|
||||
} else {
|
||||
alert("Errore durante il caricamento: " + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert("Errore durante il caricamento: " + error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gestione del popup per le foto
|
||||
const photosButtons = document.querySelectorAll('.photos-btn');
|
||||
const photosModal = document.getElementById('photosModal');
|
||||
const closeBtn = document.querySelector('.close-btn');
|
||||
// Gestione del pulsante Photos
|
||||
const photosButtons = document.querySelectorAll(".photos-btn");
|
||||
const photosModal = document.getElementById("photosModal");
|
||||
const closeBtn = document.querySelector(".close-btn");
|
||||
|
||||
photosButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const iddatadb = this.getAttribute('data-iddatadb');
|
||||
if (photosButtons.length && photosModal && closeBtn) {
|
||||
photosButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
console.log(
|
||||
"Pulsante Photos cliccato per iddatadb:",
|
||||
this.getAttribute("data-iddatadb"),
|
||||
);
|
||||
const iddatadb = this.getAttribute("data-iddatadb");
|
||||
loadPopupContent(iddatadb);
|
||||
photosModal.style.display = 'block';
|
||||
document.querySelector('.overlay').style.display = 'none'; // Nascondi overlay
|
||||
photosModal.style.display = "block";
|
||||
document.querySelector(".overlay").style.display = "none";
|
||||
});
|
||||
});
|
||||
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', function() {
|
||||
photosModal.style.display = 'none';
|
||||
document.querySelector('.overlay').style.display = 'none'; // Assicurati che l'overlay sia nascosto
|
||||
// Forza la riattivazione della pagina sottostante
|
||||
document.body.style.pointerEvents = 'auto';
|
||||
});
|
||||
}
|
||||
closeBtn.addEventListener("click", function () {
|
||||
photosModal.style.display = "none";
|
||||
document.querySelector(".overlay").style.display = "none";
|
||||
document.body.style.pointerEvents = "auto";
|
||||
});
|
||||
|
||||
if (photosModal) {
|
||||
window.addEventListener('click', function(event) {
|
||||
if (event.target === photosModal) {
|
||||
photosModal.style.display = 'none';
|
||||
document.querySelector('.overlay').style.display = 'none'; // Nascondi overlay
|
||||
document.body.style.pointerEvents = 'auto'; // Riattiva la pagina
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
window.addEventListener("click", function (event) {
|
||||
if (event.target === photosModal) {
|
||||
photosModal.style.display = "none";
|
||||
document.querySelector(".overlay").style.display = "none";
|
||||
document.body.style.pointerEvents = "auto";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error("Elementi mancanti:", {
|
||||
photosButtons,
|
||||
photosModal,
|
||||
closeBtn,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user