307 lines
9.0 KiB
JavaScript
307 lines
9.0 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
// DOM Elements
|
|
const menuToggle = document.querySelector('.menu-toggle');
|
|
const mobileMenu = document.querySelector('.mobile-menu');
|
|
const mobileMenuClose = document.querySelector('.mobile-menu-close');
|
|
const mobileNavItems = document.querySelectorAll('.mobile-nav-item button');
|
|
|
|
const searchToggle = document.querySelector('.search-toggle');
|
|
const searchOverlay = document.querySelector('.search-overlay');
|
|
const searchClose = document.querySelector('.search-close');
|
|
const searchInput = document.getElementById('search-input');
|
|
|
|
const cartToggle = document.querySelector('.cart-toggle');
|
|
const cartDrawer = document.querySelector('.cart-drawer');
|
|
const cartDrawerClose = document.querySelector('.cart-drawer-close');
|
|
const cartOverlay = document.querySelector('.cart-overlay');
|
|
|
|
const heroSlides = document.querySelectorAll('.hero-slide');
|
|
const heroNavBtns = document.querySelectorAll('.hero-nav-btn');
|
|
|
|
// Mobile Menu
|
|
function openMobileMenu() {
|
|
mobileMenu.classList.add('active');
|
|
mobileMenu.setAttribute('aria-hidden', 'false');
|
|
menuToggle.setAttribute('aria-expanded', 'true');
|
|
document.body.classList.add('menu-open');
|
|
}
|
|
|
|
function closeMobileMenu() {
|
|
mobileMenu.classList.remove('active');
|
|
mobileMenu.setAttribute('aria-hidden', 'true');
|
|
menuToggle.setAttribute('aria-expanded', 'false');
|
|
document.body.classList.remove('menu-open');
|
|
}
|
|
|
|
if (menuToggle && mobileMenu) {
|
|
menuToggle.addEventListener('click', openMobileMenu);
|
|
mobileMenuClose.addEventListener('click', closeMobileMenu);
|
|
|
|
// Close on escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {
|
|
closeMobileMenu();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Mobile Nav Accordion
|
|
mobileNavItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
const parent = this.closest('.mobile-nav-item');
|
|
const isOpen = parent.classList.contains('open');
|
|
|
|
// Close all
|
|
document.querySelectorAll('.mobile-nav-item.open').forEach(openItem => {
|
|
openItem.classList.remove('open');
|
|
openItem.querySelector('button').setAttribute('aria-expanded', 'false');
|
|
});
|
|
|
|
// Toggle current
|
|
if (!isOpen) {
|
|
parent.classList.add('open');
|
|
this.setAttribute('aria-expanded', 'true');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Search
|
|
function openSearch() {
|
|
searchOverlay.classList.add('active');
|
|
searchOverlay.setAttribute('aria-hidden', 'false');
|
|
document.body.classList.add('search-open');
|
|
setTimeout(() => searchInput.focus(), 100);
|
|
}
|
|
|
|
function closeSearch() {
|
|
searchOverlay.classList.remove('active');
|
|
searchOverlay.setAttribute('aria-hidden', 'true');
|
|
document.body.classList.remove('search-open');
|
|
searchInput.value = '';
|
|
}
|
|
|
|
if (searchToggle && searchOverlay) {
|
|
searchToggle.addEventListener('click', openSearch);
|
|
searchClose.addEventListener('click', closeSearch);
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && searchOverlay.classList.contains('active')) {
|
|
closeSearch();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Cart Drawer
|
|
function openCart() {
|
|
cartDrawer.classList.add('active');
|
|
cartDrawer.setAttribute('aria-hidden', 'false');
|
|
cartOverlay.classList.add('active');
|
|
document.body.classList.add('cart-open');
|
|
}
|
|
|
|
function closeCart() {
|
|
cartDrawer.classList.remove('active');
|
|
cartDrawer.setAttribute('aria-hidden', 'true');
|
|
cartOverlay.classList.remove('active');
|
|
document.body.classList.remove('cart-open');
|
|
}
|
|
|
|
if (cartToggle && cartDrawer) {
|
|
cartToggle.addEventListener('click', openCart);
|
|
cartDrawerClose.addEventListener('click', closeCart);
|
|
cartOverlay.addEventListener('click', closeCart);
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && cartDrawer.classList.contains('active')) {
|
|
closeCart();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Hero Slider
|
|
let currentSlide = 0;
|
|
let slideInterval;
|
|
|
|
function showSlide(index) {
|
|
heroSlides.forEach((slide, i) => {
|
|
slide.classList.toggle('active', i === index);
|
|
});
|
|
heroNavBtns.forEach((btn, i) => {
|
|
btn.classList.toggle('active', i === index);
|
|
});
|
|
currentSlide = index;
|
|
}
|
|
|
|
function nextSlide() {
|
|
const next = (currentSlide + 1) % heroSlides.length;
|
|
showSlide(next);
|
|
}
|
|
|
|
function startSlider() {
|
|
slideInterval = setInterval(nextSlide, 5000);
|
|
}
|
|
|
|
function stopSlider() {
|
|
clearInterval(slideInterval);
|
|
}
|
|
|
|
if (heroSlides.length > 1 && heroNavBtns.length > 0) {
|
|
heroNavBtns.forEach((btn, index) => {
|
|
btn.addEventListener('click', () => {
|
|
stopSlider();
|
|
showSlide(index);
|
|
startSlider();
|
|
});
|
|
});
|
|
|
|
// Check for reduced motion preference
|
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
if (!prefersReducedMotion.matches) {
|
|
startSlider();
|
|
}
|
|
|
|
prefersReducedMotion.addEventListener('change', () => {
|
|
if (prefersReducedMotion.matches) {
|
|
stopSlider();
|
|
} else {
|
|
startSlider();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Scroll Animations
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const animateOnScroll = (entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
};
|
|
|
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
|
|
if (!prefersReducedMotion.matches) {
|
|
const observer = new IntersectionObserver(animateOnScroll, observerOptions);
|
|
|
|
// Add animation classes
|
|
const animatedElements = document.querySelectorAll(
|
|
'.product-card, .category-card, .collection-card, .feature'
|
|
);
|
|
|
|
animatedElements.forEach((el, index) => {
|
|
el.style.opacity = '0';
|
|
el.style.transform = 'translateY(20px)';
|
|
el.style.transition = `opacity 0.6s ease ${index * 0.05}s, transform 0.6s ease ${index * 0.05}s`;
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Add visible class styles
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.product-card.visible,
|
|
.category-card.visible,
|
|
.collection-card.visible,
|
|
.feature.visible {
|
|
opacity: 1 !important;
|
|
transform: translateY(0) !important;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// Quick Add to Cart
|
|
const quickAddButtons = document.querySelectorAll('.product-quick-add');
|
|
|
|
quickAddButtons.forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
// Visual feedback
|
|
const originalHTML = btn.innerHTML;
|
|
btn.innerHTML = `
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
`;
|
|
btn.style.background = 'var(--color-text)';
|
|
btn.style.borderColor = 'var(--color-text)';
|
|
btn.style.color = 'var(--color-white)';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = originalHTML;
|
|
btn.style.background = '';
|
|
btn.style.borderColor = '';
|
|
btn.style.color = '';
|
|
}, 1500);
|
|
|
|
// Update cart count
|
|
const cartCount = document.querySelector('.cart-count');
|
|
if (cartCount) {
|
|
const current = parseInt(cartCount.textContent) || 0;
|
|
cartCount.textContent = current + 1;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Newsletter Form
|
|
const newsletterForm = document.querySelector('.newsletter-form');
|
|
|
|
if (newsletterForm) {
|
|
newsletterForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
|
|
const email = newsletterForm.querySelector('input[type="email"]');
|
|
const btn = newsletterForm.querySelector('button');
|
|
const originalText = btn.textContent;
|
|
|
|
btn.textContent = 'נרשמת בהצלחה!';
|
|
btn.disabled = true;
|
|
email.value = '';
|
|
|
|
setTimeout(() => {
|
|
btn.textContent = originalText;
|
|
btn.disabled = false;
|
|
}, 3000);
|
|
});
|
|
}
|
|
|
|
// Dropdown keyboard navigation
|
|
const dropdownItems = document.querySelectorAll('.nav-item.has-dropdown');
|
|
|
|
dropdownItems.forEach(item => {
|
|
const link = item.querySelector('.nav-link');
|
|
const dropdown = item.querySelector('.dropdown-menu');
|
|
|
|
link.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
dropdown.style.opacity = '1';
|
|
dropdown.style.visibility = 'visible';
|
|
dropdown.style.transform = 'translateY(0)';
|
|
|
|
const firstLink = dropdown.querySelector('a');
|
|
if (firstLink) firstLink.focus();
|
|
}
|
|
});
|
|
|
|
dropdown.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
dropdown.style.opacity = '';
|
|
dropdown.style.visibility = '';
|
|
dropdown.style.transform = '';
|
|
link.focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
})();
|