class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Initialize newsletter form
this.initializeNewsletterForm();
// Initialize back to top button
this.initializeBackToTop();
}
initializeNewsletterForm() {
const form = this.shadowRoot.getElementById('newsletterForm');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
const input = form.querySelector('input[type="email"]');
const email = input.value.trim();
if (email && this.validateEmail(email)) {
// In a real app, this would send to your backend
console.log('Newsletter subscription:', email);
// Show success message
alert('Merci de vous être abonné à notre newsletter !');
// Reset form
form.reset();
} else {
alert('Veuillez saisir une adresse e-mail valide.');
}
});
}
}
validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
initializeBackToTop() {
const backToTop = this.shadowRoot.getElementById('backToTop');
if (backToTop) {
// Show/hide button based on scroll position
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTop.classList.add('visible');
} else {
backToTop.classList.remove('visible');
}
});
// Smooth scroll to top
backToTop.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}
}
}
customElements.define('custom-footer', CustomFooter);