class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.render();
this.initEventListeners();
}
render() {
this.shadowRoot.innerHTML = `
`;
}
initEventListeners() {
const backToTopBtn = this.shadowRoot.querySelector('.back-to-top');
const socialLinks = this.shadowRoot.querySelectorAll('.social-link');
// Bouton retour en haut
backToTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Animation des liens sociaux
socialLinks.forEach(link => {
link.addEventListener('mouseenter', () => {
const icon = link.querySelector('i');
if (icon) {
// Animation subtile de l'icône
icon.style.transform = 'scale(1.2)';
icon.style.transition = 'transform 0.3s ease';
}
});
link.addEventListener('mouseleave', () => {
const icon = link.querySelector('i');
if (icon) {
icon.style.transform = 'scale(1)';
}
});
});
// Mettre à jour les icônes Feather
if (typeof feather !== 'undefined') {
feather.replace();
}
// Observer les changements pour mettre à jour les icônes
const observer = new MutationObserver(() => {
if (typeof feather !== 'undefined') {
feather.replace();
}
});
observer.observe(this.shadowRoot, {
childList: true,
subtree: true
});
}
}
customElements.define('custom-footer', CustomFooter);