113 lines
3.6 KiB
JavaScript
113 lines
3.6 KiB
JavaScript
// Funzione goBack
|
|
window.goBack = function () {
|
|
console.log("goBack");
|
|
history.back();
|
|
};
|
|
|
|
// Funzione per aggiungere tabindex ai bottoni
|
|
function addTabindexToButtons() {
|
|
document.querySelectorAll('button.custom-plus-button').forEach(btn => {
|
|
if (!btn.hasAttribute('tabindex')) {
|
|
btn.setAttribute('tabindex', '0');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Funzione per monitorare bottom-sheet-container e gestire la navbar
|
|
function monitorBottomSheetClass(mutations) {
|
|
const bottomSheet = document.querySelector(".bottom-sheet-container");
|
|
const navbar = document.querySelector(".animated-navbar");
|
|
|
|
if (!bottomSheet || !navbar) return;
|
|
|
|
mutations.forEach(function (mutation) {
|
|
if (mutation.type === 'attributes' && mutation.attributeName === 'class' && mutation.target === bottomSheet) {
|
|
if (bottomSheet.classList.contains("show")) {
|
|
navbar.classList.remove("show-nav");
|
|
navbar.classList.add("hide-nav");
|
|
console.log("Navbar nascosta (hide-nav)");
|
|
} else {
|
|
navbar.classList.remove("hide-nav");
|
|
navbar.classList.add("show-nav");
|
|
console.log("Navbar mostrata (show-nav)");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Esegui la funzione tabindex inizialmente
|
|
addTabindexToButtons();
|
|
|
|
// Observer combinato per tutte le funzionalità
|
|
const observer = new MutationObserver((mutations) => {
|
|
// Aggiungi tabindex ai nuovi bottoni
|
|
addTabindexToButtons();
|
|
|
|
// Monitora bottom-sheet-container
|
|
monitorBottomSheetClass(mutations);
|
|
});
|
|
|
|
// Osserva sia i cambiamenti nel DOM che gli attributi
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true,
|
|
attributes: true,
|
|
attributeFilter: ['class']
|
|
});
|
|
|
|
// Sync iniziale per la navbar (nel caso la pagina parte già con .show)
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const bottomSheet = document.querySelector(".bottom-sheet-container");
|
|
const navbar = document.querySelector(".animated-navbar");
|
|
|
|
if (bottomSheet && navbar) {
|
|
if (bottomSheet.classList.contains("show")) {
|
|
navbar.classList.remove("show-nav");
|
|
navbar.classList.add("hide-nav");
|
|
} else {
|
|
navbar.classList.remove("hide-nav");
|
|
navbar.classList.add("show-nav");
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
(function () {
|
|
// Ascoltiamo l'evento 'mousedown' su tutto il documento
|
|
document.addEventListener('mousedown', function (event) {
|
|
|
|
// Cerca se l'elemento cliccato (o un suo genitore) ha la classe .ripple-container
|
|
const target = event.target.closest('.ripple-container');
|
|
|
|
if (target) {
|
|
createRipple(event, target);
|
|
}
|
|
});
|
|
|
|
function createRipple(event, element) {
|
|
const circle = document.createElement("span");
|
|
const diameter = Math.max(element.clientWidth, element.clientHeight);
|
|
const radius = diameter / 2;
|
|
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
circle.style.width = circle.style.height = `${diameter}px`;
|
|
circle.style.left = `${event.clientX - rect.left - radius}px`;
|
|
circle.style.top = `${event.clientY - rect.top - radius}px`;
|
|
circle.classList.add("ripple");
|
|
|
|
// Rimuovi l'elemento dal DOM alla fine dell'animazione per non intasare la memoria
|
|
const ripple = element.getElementsByClassName("ripple")[0];
|
|
if (ripple) {
|
|
ripple.remove();
|
|
}
|
|
|
|
element.appendChild(circle);
|
|
|
|
// Pulizia automatica dopo 600ms (durata animazione CSS)
|
|
setTimeout(() => {
|
|
circle.remove();
|
|
}, 600);
|
|
}
|
|
})();
|