class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
this.initializeEventListeners();
}
initializeEventListeners() {
// Back to top button
const backToTop = this.shadowRoot.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTop.classList.add('visible');
} else {
backToTop.classList.remove('visible');
}
});
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Newsletter form
const newsletterForm = this.shadowRoot.getElementById('newsletterForm');
if (newsletterForm) {
newsletterForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = newsletterForm.querySelector('input[type="email"]').value;
// In a real app, you would send this to your newsletter service
console.log('Newsletter subscription:', email);
alert('شكراً لاشتراكك! ستصلك أحدث عروضنا قريباً.');
newsletterForm.reset();
});
}
// Initialize feather icons in shadow DOM
setTimeout(() => {
const icons = this.shadowRoot.querySelectorAll('[data-feather]');
if (typeof feather !== 'undefined') {
feather.replace({}, this.shadowRoot);
}
}, 100);
}
}
customElements.define('custom-footer', CustomFooter);