196 lines
5.6 KiB
JavaScript
196 lines
5.6 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
// Navigation scroll effect
|
|
const nav = document.querySelector('.nav');
|
|
|
|
function handleNavScroll() {
|
|
if (window.scrollY > 50) {
|
|
nav.classList.add('nav--scrolled');
|
|
} else {
|
|
nav.classList.remove('nav--scrolled');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', handleNavScroll, { passive: true });
|
|
handleNavScroll();
|
|
|
|
// Mobile menu toggle
|
|
const navToggle = document.querySelector('.nav__toggle');
|
|
const navMenu = document.querySelector('.nav__menu');
|
|
|
|
if (navToggle && navMenu) {
|
|
navToggle.addEventListener('click', function() {
|
|
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
|
this.setAttribute('aria-expanded', !isExpanded);
|
|
navMenu.classList.toggle('nav__menu--open');
|
|
});
|
|
|
|
navMenu.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
navToggle.setAttribute('aria-expanded', 'false');
|
|
navMenu.classList.remove('nav__menu--open');
|
|
});
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && navMenu.classList.contains('nav__menu--open')) {
|
|
navToggle.setAttribute('aria-expanded', 'false');
|
|
navMenu.classList.remove('nav__menu--open');
|
|
navToggle.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Scroll reveal animation
|
|
const revealElements = document.querySelectorAll('.reveal');
|
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
|
|
if (prefersReducedMotion.matches) {
|
|
revealElements.forEach(el => {
|
|
el.classList.add('reveal--visible');
|
|
});
|
|
} else if ('IntersectionObserver' in window) {
|
|
const revealObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('reveal--visible');
|
|
revealObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -40px 0px'
|
|
}
|
|
);
|
|
|
|
revealElements.forEach(el => {
|
|
revealObserver.observe(el);
|
|
});
|
|
} else {
|
|
revealElements.forEach(el => {
|
|
el.classList.add('reveal--visible');
|
|
});
|
|
}
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
const targetId = this.getAttribute('href');
|
|
|
|
if (targetId === '#') return;
|
|
|
|
const target = document.querySelector(targetId);
|
|
|
|
if (target) {
|
|
e.preventDefault();
|
|
target.scrollIntoView({
|
|
behavior: prefersReducedMotion.matches ? 'auto' : 'smooth',
|
|
block: 'start'
|
|
});
|
|
|
|
target.setAttribute('tabindex', '-1');
|
|
target.focus({ preventScroll: true });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Form validation and submission handling
|
|
const bookingForm = document.querySelector('.booking__form');
|
|
|
|
if (bookingForm) {
|
|
const fields = bookingForm.querySelectorAll('input[required], select[required]');
|
|
|
|
// Real-time validation
|
|
fields.forEach(field => {
|
|
field.addEventListener('blur', function() {
|
|
validateField(this);
|
|
});
|
|
|
|
field.addEventListener('input', function() {
|
|
if (this.classList.contains('error')) {
|
|
validateField(this);
|
|
}
|
|
});
|
|
});
|
|
|
|
function validateField(field) {
|
|
const errorEl = field.parentElement.querySelector('.form-error');
|
|
let message = '';
|
|
|
|
if (!field.value.trim()) {
|
|
message = 'שדה חובה';
|
|
} else if (field.type === 'tel' && !/^[0-9\-\s]{9,14}$/.test(field.value.replace(/\s/g, ''))) {
|
|
message = 'מספר טלפון לא תקין';
|
|
} else if (field.type === 'date') {
|
|
const selectedDate = new Date(field.value);
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
if (selectedDate < today) {
|
|
message = 'יש לבחור תאריך עתידי';
|
|
}
|
|
}
|
|
|
|
if (message) {
|
|
field.classList.add('error');
|
|
if (errorEl) errorEl.textContent = message;
|
|
return false;
|
|
} else {
|
|
field.classList.remove('error');
|
|
if (errorEl) errorEl.textContent = '';
|
|
return true;
|
|
}
|
|
}
|
|
|
|
bookingForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
let isValid = true;
|
|
fields.forEach(field => {
|
|
if (!validateField(field)) {
|
|
isValid = false;
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
const firstError = bookingForm.querySelector('.error');
|
|
if (firstError) firstError.focus();
|
|
return;
|
|
}
|
|
|
|
const submitButton = this.querySelector('.form-submit');
|
|
const originalText = submitButton.textContent;
|
|
|
|
submitButton.textContent = 'שולח...';
|
|
submitButton.disabled = true;
|
|
|
|
// Simulate form submission
|
|
setTimeout(() => {
|
|
submitButton.textContent = 'נשלח בהצלחה ✓';
|
|
submitButton.style.background = 'hsl(145, 45%, 40%)';
|
|
|
|
this.reset();
|
|
|
|
setTimeout(() => {
|
|
submitButton.textContent = originalText;
|
|
submitButton.style.background = '';
|
|
submitButton.disabled = false;
|
|
}, 3000);
|
|
}, 1200);
|
|
});
|
|
|
|
// Set minimum date to today
|
|
const dateInput = document.getElementById('date');
|
|
if (dateInput) {
|
|
const today = new Date();
|
|
const yyyy = today.getFullYear();
|
|
const mm = String(today.getMonth() + 1).padStart(2, '0');
|
|
const dd = String(today.getDate()).padStart(2, '0');
|
|
dateInput.setAttribute('min', `${yyyy}-${mm}-${dd}`);
|
|
}
|
|
}
|
|
|
|
})();
|