/**
* Motayeb Theme - Main JavaScript
* مدیریت تعاملات، حالت تاریک، اسکرول و انیمیشنها
*/
document.addEventListener('DOMContentLoaded', function () {
const html = document.documentElement;
const body = document.body;
const header = document.getElementById('header');
// ==========================================
// ۱. مدیریت حالت تاریک (Dark Mode)
// ==========================================
function initDarkMode() {
// بررسی تنظیمات ذخیره شده یا تنظیمات سیستم عامل
const savedTheme = localStorage.getItem('motayeb-theme');
if (savedTheme === 'dark') {
html.classList.add('dark');
}
// اتصال رویداد به دکمه تغییر تم
const darkBtn = header ? header.querySelector('button[aria-label="حالت تاریک"]') : null;
if (darkBtn) {
darkBtn.addEventListener('click', function () {
html.classList.toggle('dark');
const isDark = html.classList.contains('dark');
localStorage.setItem('motayeb-theme', isDark ? 'dark' : 'light');
});
}
}
// ==========================================
// ۲. سایه هدر هنگام اسکرول
// ==========================================
function initHeaderScroll() {
if (!header) return;
window.addEventListener('scroll', function () {
if (window.scrollY > 50) {
header.classList.add('shadow-lg');
} else {
header.classList.remove('shadow-lg');
}
}, { passive: true });
}
// ==========================================
// ۳. مدیریت پنل جستجو
// ==========================================
function initSearchOverlay() {
const overlay = document.getElementById('search-overlay');
if (!overlay) return;
const input = overlay.querySelector('.search-field');
const openBtns = document.querySelectorAll('[aria-label="جستجو"]');
// باز کردن
openBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
overlay.classList.remove('hidden');
body.style.overflow = 'hidden'; // قفل اسکرول
setTimeout(function () { if (input) input.focus(); }, 150);
});
});
// بستن با کلیک روی بکدراپ
overlay.addEventListener('click', function (e) {
if (e.target === overlay) {
closeSearch();
}
});
}
function closeSearch() {
const overlay = document.getElementById('search-overlay');
if (overlay) {
overlay.classList.add('hidden');
body.style.overflow = ''; // آزاد کردن اسکرول
}
}
// ==========================================
// ۴. مدیریت منوی موبایل
// ==========================================
function initMobileMenu() {
const menu = document.getElementById('mobile-menu');
if (!menu) return;
// پیدا کردن دکمه همبرگرری
const openBtn = header ? header.querySelector('button[aria-label="منوی موبایل"]') : null;
// پیدا کردن دکمه ضربدر داخل منو و بکدراپ
const closeBtn = menu.querySelector('button');
const backdrop = menu.querySelector('.absolute.inset-0');
if (openBtn) {
openBtn.addEventListener('click', function () {
menu.classList.remove('hidden');
body.style.overflow = 'hidden';
});
}
if (closeBtn) {
closeBtn.addEventListener('click', closeMobileMenu);
}
if (backdrop) {
backdrop.addEventListener('click', closeMobileMenu);
}
}
function closeMobileMenu() {
const menu = document.getElementById('mobile-menu');
if (menu) {
menu.classList.add('hidden');
body.style.overflow = '';
}
}
// ==========================================
// ۵. میانبرهای کیبورد
// ==========================================
function initKeyboardShortcuts() {
document.addEventListener('keydown', function (e) {
// بستن با Escape
if (e.key === 'Escape') {
closeSearch();
closeMobileMenu();
}
// باز کردن جستجو با Ctrl+K
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
const overlay = document.getElementById('search-overlay');
if (overlay) {
overlay.classList.toggle('hidden');
if (!overlay.classList.contains('hidden')) {
body.style.overflow = 'hidden';
setTimeout(function () {
const input = overlay.querySelector('.search-field');
if (input) input.focus();
}, 150);
} else {
body.style.overflow = '';
}
}
}
});
}
// ==========================================
// ۶. اسکرول نرم برای لینکهای #
// ==========================================
function initSmoothScroll() {
document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach(function (anchor) {
anchor.addEventListener('click', function (e) {
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
e.preventDefault();
closeMobileMenu(); // بستن منو اگر باز بود
const headerHeight = header ? header.offsetHeight : 0;
const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
const offsetPosition = elementPosition - headerHeight - 20;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
}
// ==========================================
// ۷. انیمیشن هنگام اسکرول (Scroll Reveal)
// ==========================================
function initScrollAnimations() {
const elements = document.querySelectorAll('.animate-slide-up, .animate-fade-in');
if (elements.length === 0) return;
// مخفی کردن اولیه
elements.forEach(function (el) {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'opacity 0.7s cubic-bezier(0.5, 0, 0, 1), transform 0.7s cubic-bezier(0.5, 0, 0, 1)';
});
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
observer.unobserve(entry.target); // توقف مشاهده پس از اجرا
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -40px 0px'
});
elements.forEach(function (el) {
observer.observe(el);
});
}
// ==========================================
// ۸. سیستم توست (برای استفاده در ووکامرس بعداً)
// ==========================================
window.motayebToast = function (message, type) {
type = type || 'success';
// حذف توست قبلی اگر وجود داشت
const existingToast = document.querySelector('.motayeb-toast-notification');
if (existingToast) existingToast.remove();
var toast = document.createElement('div');
toast.className = 'motayeb-toast-notification fixed top-24 left-1/2 -translate-x-1/2 z-[100] px-6 py-3 rounded-2xl shadow-2xl text-sm font-semibold text-white flex items-center gap-2 transition-all duration-300';
// تنظیم رنگ و آیکون
if (type === 'success') {
toast.style.backgroundColor = '#2D5F3F';
toast.innerHTML = ' ' + message;
} else if (type === 'error') {
toast.style.backgroundColor = '#dc2626';
toast.innerHTML = ' ' + message;
} else {
toast.style.backgroundColor = '#8B5A3C';
toast.innerHTML = ' ' + message;
}
// حالت اولیه (مخفی بالای صفحه)
toast.style.opacity = '0';
toast.style.transform = 'translate(-50%, -20px)';
body.appendChild(toast);
// انیمیشن ورود
requestAnimationFrame(function () {
toast.style.opacity = '1';
toast.style.transform = 'translate(-50%, 0)';
});
// حذف خودکار
setTimeout(function () {
toast.style.opacity = '0';
toast.style.transform = 'translate(-50%, -20px)';
setTimeout(function () { toast.remove(); }, 300);
}, 3000);
};
// ==========================================
// اجرای تمام توابع
// ==========================================
initDarkMode();
initHeaderScroll();
initSearchOverlay();
initMobileMenu();
initKeyboardShortcuts();
initSmoothScroll();
initScrollAnimations();
// ==========================================
// ۹. تعویض عکس در صفحه محصول
// ==========================================
window.changeProductImage = function (btn, imgUrl) {
// تغییر عکس اصلی
const mainImg = document.getElementById('main-product-image');
if (mainImg) {
mainImg.src = imgUrl;
mainImg.setAttribute('data-large_image', imgUrl);
}
// تغییر کلاس فعال تامبنیلها
document.querySelectorAll('.gallery-thumb').forEach(function (thumb) {
thumb.classList.remove('active');
thumb.style.borderColor = '';
});
btn.classList.add('active');
};
// ==========================================
// ۱۰. ستارههای امتیازدهی سفارشی
// ==========================================
const starsContainer = document.getElementById('custom-star-rating');
const ratingInput = document.getElementById('rating');
if (starsContainer && ratingInput) {
const stars = starsContainer.querySelectorAll('.star');
stars.forEach(star => {
star.addEventListener('mouseenter', function() {
const val = this.dataset.value;
stars.forEach(s => {
s.style.color = s.dataset.value <= val ? '#D4A574' : '';
});
});
star.addEventListener('click', function() {
ratingInput.value = this.dataset.value;
stars.forEach(s => s.classList.remove('active'));
this.classList.add('active');
// رنگ دادن به همه ستارههای تا اون عدد
const val = this.dataset.value;
stars.forEach(s => {
if(s.dataset.value <= val) s.classList.add('active');
});
});
});
starsContainer.addEventListener('mouseleave', function() {
const currentVal = ratingInput.value;
stars.forEach(s => {
s.style.color = s.dataset.value <= currentVal ? '#D4A574' : '';
});
});
}
});