1026 lines
27 KiB
JavaScript
1026 lines
27 KiB
JavaScript
const SERVICES = [
|
||
{
|
||
title: "انتخاب مدل مشاوره",
|
||
pets: ["سگ", "گربه", "پرنده", "جوندگان کوچک", "سایر"],
|
||
optionsByPet: null,
|
||
defaultOptions: ["بسته مشاوره فوری تلفنی+متنی", "بسته مشاوره متنی"],
|
||
buttonText: "دریافت مشاوره",
|
||
servicePlaceholder: {
|
||
text: " مدل مشاوره رو تعیین کنید ",
|
||
icon: `
|
||
<svg width="24" height="24">
|
||
<use href="./assets/icons.svg#selectbox-icons"></use>
|
||
</svg>
|
||
`,
|
||
},
|
||
buttonIcon: {
|
||
type: "svg",
|
||
svg: ` <svg width="24" height="24">
|
||
<use href="./assets/icons.svg#moshavere"></use>
|
||
</svg>`,
|
||
},
|
||
},
|
||
{
|
||
title: "انتخاب شهر",
|
||
pets: ["سگ", "گربه", "پرنده", "جوندگان کوچک", "سایر"],
|
||
optionsByPet: null,
|
||
defaultOptions: ["تهران", "شیراز", "تبریز", "مشهد", "اصفهان", "اهواز"],
|
||
servicePlaceholder: {
|
||
text: " شهرخودتون رو انتخاب کنید ",
|
||
icon: `
|
||
<svg width="20" height="20">
|
||
<use href="./assets/icons.svg#location-icons"></use>
|
||
</svg>
|
||
`,
|
||
},
|
||
buttonText: " رزرو وقت",
|
||
buttonIcon: {
|
||
type: "svg",
|
||
svg: `<svg width="20" height="20">
|
||
<use href="./assets/icons.svg#rezerv"></use>
|
||
</svg>`,
|
||
},
|
||
},
|
||
{
|
||
title: "انتخاب نوع برنامه",
|
||
pets: ["سگ", "گربه", "پرنده"],
|
||
optionsByPet: {
|
||
سگ: ["برنامه غذایی اختصاصی 1 ماهه سگ"],
|
||
گربه: ["برنامه غذایی اختصاصی 1 ماهه گربه"],
|
||
پرنده: ["برنامه غذایی آماده پرندگان"],
|
||
},
|
||
defaultOptions: [
|
||
"برنامه غذایی اختصاصی 1 ماهه سگ",
|
||
"برنامه غذایی اختصاصی 1 ماهه گربه",
|
||
"برنامه غذایی آماده پرندگان",
|
||
],
|
||
servicePlaceholder: {
|
||
text: " نوع برنامه رو انتخاب کنید ",
|
||
icon: `
|
||
<svg width="24" height="24">
|
||
<use href="./assets/icons.svg#barname-icons"></use>
|
||
</svg>
|
||
`,
|
||
},
|
||
buttonText: "دریافت برنامه",
|
||
buttonIcon: {
|
||
type: "svg",
|
||
svg: `
|
||
<svg width="24" height="24">
|
||
<use href="./assets/icons.svg#barname-in"></use>
|
||
</svg>
|
||
`,
|
||
},
|
||
},
|
||
{
|
||
title: "انتخاب نوع آموزش ",
|
||
pets: ["سگ", "گربه", "پرنده", "خرگوش"],
|
||
optionsByPet: {
|
||
سگ: [
|
||
" ایبوک چگونه توله سگ مودبی باشیم",
|
||
"راهنمای جامع زندگی با سگ (به صورت کاربردی)",
|
||
"9ترفند برای تربیت سگ با کلیکر",
|
||
"راهحلهای ساده برای مشکلات رفتاری سگها",
|
||
"ایبوک 101 نکته ضروری مراقبت از سگها",
|
||
"چگونه با سگ خود بازی کنیم",
|
||
],
|
||
گربه: [
|
||
"راهنمای نگهداری،آموزش و تربیت گربه",
|
||
"101 نکته ضروری مراقبت از گربه",
|
||
],
|
||
پرنده: ["مراقبت از عروس هلندی، راهنمای جامع"],
|
||
خرگوش: ["راهنمای نگهداری و تربیت خرگوشها(0تا100)"],
|
||
},
|
||
defaultOptions: [
|
||
" ایبوک چگونه توله سگ مودبی باشیم",
|
||
"راهنمای جامع زندگی با سگ (به صورت کاربردی)",
|
||
"9ترفند برای تربیت سگ با کلیکر",
|
||
"راهحلهای ساده برای مشکلات رفتاری سگها",
|
||
"ایبوک 101 نکته ضروری مراقبت از سگها",
|
||
"چگونه با سگ خود بازی کنیم",
|
||
"راهنمای نگهداری،آموزش و تربیت گربه",
|
||
"101 نکته ضروری مراقبت از گربه",
|
||
"مراقبت از عروس هلندی راهنمای جامع",
|
||
"راهنمای نگهداری و تربیت خرگوشها(0تا100)",
|
||
],
|
||
buttonText: "شروع آموزش",
|
||
servicePlaceholder: {
|
||
text: "چی میخوایین بهش یادبدین؟",
|
||
icon: `
|
||
<svg width="24" height="24">
|
||
<use href="./assets/icons.svg#amozesh-icons"></use>
|
||
</svg>
|
||
|
||
`,
|
||
},
|
||
buttonIcon: {
|
||
type: "svg",
|
||
svg: `
|
||
<svg
|
||
aria-hidden="true"
|
||
width="24"
|
||
height="24"
|
||
>
|
||
<use href="./assets/icons.svg#amozesh"></use>
|
||
</svg>
|
||
`,
|
||
},
|
||
},
|
||
];
|
||
|
||
const overlay = document.getElementById("overlay");
|
||
|
||
let activeService = 0;
|
||
let tempPet = null;
|
||
let tempService = null;
|
||
let selectedPet = null;
|
||
let selectedService = null;
|
||
|
||
const serviceBoxes = document.querySelectorAll(".services-box");
|
||
|
||
serviceBoxes.forEach((box) => {
|
||
box.addEventListener("click", () => {
|
||
serviceBoxes.forEach((b) => {
|
||
b.classList.remove("active");
|
||
b.classList.remove("show-text");
|
||
});
|
||
|
||
box.classList.add("active");
|
||
activeService = Number(box.dataset.service);
|
||
updateAll();
|
||
|
||
if (window.innerWidth <= 768) {
|
||
box.classList.add("show-text");
|
||
|
||
const filtersSection = document.querySelector(".filters");
|
||
|
||
const offset = 350;
|
||
const bodyRect = document.body.getBoundingClientRect().top;
|
||
const elementRect = filtersSection.getBoundingClientRect().top;
|
||
const elementPosition = elementRect - bodyRect;
|
||
const offsetPosition = elementPosition - offset;
|
||
|
||
window.scrollTo({
|
||
top: offsetPosition,
|
||
behavior: "smooth",
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
const petBox = document.getElementById("selectBox");
|
||
const petDropdown = document.getElementById("dropdown");
|
||
const petOptions = document.getElementById("petOptions");
|
||
const selectedPetText = document.getElementById("selectedText");
|
||
|
||
overlay.addEventListener("click", closeAllDropdowns);
|
||
|
||
petBox.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
|
||
const isOpen = petDropdown.classList.contains("accordion-open");
|
||
|
||
if (isOpen) {
|
||
closeAllDropdowns();
|
||
return;
|
||
}
|
||
|
||
serviceDropdown.classList.remove("accordion-open");
|
||
serviceDropdown.style.display = "none";
|
||
|
||
if (window.innerWidth <= 768) {
|
||
overlay.classList.add("active");
|
||
petDropdown.style.display = "block";
|
||
|
||
requestAnimationFrame(() => {
|
||
petDropdown.classList.add("accordion-open");
|
||
});
|
||
document.body.style.overflow = "hidden";
|
||
} else {
|
||
petDropdown.style.display = "block";
|
||
overlay.classList.remove("active");
|
||
|
||
requestAnimationFrame(() => {
|
||
const rect = petDropdown.getBoundingClientRect();
|
||
const dropdownBottom = rect.bottom + window.pageYOffset;
|
||
const scrollBottom = dropdownBottom - window.innerHeight;
|
||
|
||
if (scrollBottom > 0) {
|
||
window.scrollTo({
|
||
top: scrollBottom + 20,
|
||
behavior: "smooth",
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
document.getElementById("confirmPet").addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
if (tempPet) {
|
||
selectedPet = tempPet;
|
||
selectedPetText.textContent = tempPet;
|
||
updateServiceOptions();
|
||
}
|
||
closeAllDropdowns();
|
||
updateButtonState();
|
||
});
|
||
|
||
document.getElementById("cancelPet").addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
tempPet = null;
|
||
closeAllDropdowns();
|
||
});
|
||
|
||
const serviceBox = document.getElementById("serviceSelect");
|
||
const serviceDropdown = document.getElementById("serviceDropdown");
|
||
const serviceOptions = document.getElementById("serviceOptions");
|
||
const selectedServiceText = document.getElementById("selectedService");
|
||
const serviceTitle = document.getElementById("serviceTitle");
|
||
|
||
serviceBox.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
|
||
const isOpen = serviceDropdown.classList.contains("accordion-open");
|
||
|
||
if (isOpen) {
|
||
closeAllDropdowns();
|
||
return;
|
||
}
|
||
|
||
petDropdown.classList.remove("accordion-open");
|
||
petDropdown.style.display = "none";
|
||
|
||
if (typeof SERVICES !== "undefined" && SERVICES[activeService]) {
|
||
serviceTitle.textContent = SERVICES[activeService].title;
|
||
}
|
||
|
||
// serviceDropdown.classList.add("accordion-open");
|
||
|
||
if (window.innerWidth <= 767) {
|
||
overlay.classList.add("active");
|
||
serviceDropdown.style.display = "block";
|
||
requestAnimationFrame(() => {
|
||
serviceDropdown.classList.add("accordion-open");
|
||
});
|
||
} else {
|
||
serviceDropdown.style.display = "block";
|
||
overlay.classList.remove("active");
|
||
|
||
requestAnimationFrame(() => {
|
||
const rect = serviceDropdown.getBoundingClientRect();
|
||
if (rect.bottom > window.innerHeight) {
|
||
window.scrollBy({
|
||
top: rect.bottom - window.innerHeight + 20,
|
||
behavior: "smooth",
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
document.getElementById("confirmService").addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
if (tempService) {
|
||
selectedService = tempService;
|
||
selectedServiceText.textContent = tempService;
|
||
if (activeService < SERVICES.length - 1) {
|
||
activeService++;
|
||
serviceTitle.textContent = SERVICES[activeService].title;
|
||
}
|
||
closeAllDropdowns();
|
||
updateButtonState();
|
||
tempService = null;
|
||
}
|
||
});
|
||
|
||
document.getElementById("cancelService").addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
tempService = null;
|
||
closeAllDropdowns();
|
||
});
|
||
|
||
petDropdown.addEventListener("click", (e) => e.stopPropagation());
|
||
serviceDropdown.addEventListener("click", (e) => e.stopPropagation());
|
||
|
||
function closeAllDropdowns() {
|
||
petDropdown.classList.remove("accordion-open");
|
||
serviceDropdown.classList.remove("accordion-open");
|
||
overlay.classList.remove("active");
|
||
|
||
document.body.style.overflow = "auto";
|
||
|
||
if (window.innerWidth <= 767) {
|
||
setTimeout(() => {
|
||
if (!serviceDropdown.classList.contains("accordion-open")) {
|
||
serviceDropdown.style.display = "none";
|
||
petDropdown.style.display = "none";
|
||
}
|
||
}, 300);
|
||
} else {
|
||
petDropdown.style.display = "none";
|
||
serviceDropdown.style.display = "none";
|
||
}
|
||
}
|
||
|
||
overlay.addEventListener("click", closeAllDropdowns);
|
||
document.addEventListener("click", (e) => {
|
||
const isClickInsidePet = petBox.contains(e.target);
|
||
const isClickInsideService = serviceBox.contains(e.target);
|
||
|
||
if (!isClickInsidePet && !isClickInsideService) {
|
||
closeAllDropdowns();
|
||
}
|
||
});
|
||
|
||
function updateAll() {
|
||
updatePetOptions();
|
||
updateServiceOptions();
|
||
updateButton();
|
||
}
|
||
|
||
function updatePetOptions() {
|
||
petOptions.innerHTML = "";
|
||
tempPet = null;
|
||
selectedPetText.textContent = "نوع پت خودتون رو مشخص کنید";
|
||
selectedPet = null;
|
||
selectedService = null;
|
||
updateButtonState();
|
||
selectedPetText.style.color = "#000000";
|
||
SERVICES[activeService].pets.forEach((pet) => {
|
||
petOptions.innerHTML += `
|
||
<label class="option">
|
||
<input type="radio" name="pet" value="${pet}">
|
||
${pet}
|
||
</label>
|
||
`;
|
||
});
|
||
|
||
petOptions.querySelectorAll("input").forEach((radio) => {
|
||
radio.onchange = () => {
|
||
tempPet = radio.value;
|
||
|
||
petOptions.querySelectorAll(".option").forEach((label) => {
|
||
label.classList.remove("active");
|
||
});
|
||
|
||
radio.closest(".option").classList.add("active");
|
||
|
||
if (window.innerWidth > 768) {
|
||
selectedPet = tempPet;
|
||
selectedPetText.textContent = tempPet;
|
||
closeAllDropdowns();
|
||
updateServiceOptions();
|
||
updateButtonState();
|
||
}
|
||
};
|
||
});
|
||
}
|
||
|
||
function setPlaceholder(el, placeholder) {
|
||
if (!placeholder) return;
|
||
el.innerHTML = `
|
||
<span class="placeholder-content">
|
||
${placeholder.icon || ""}
|
||
<span class="placeholder-text">${placeholder.text}</span>
|
||
</span>
|
||
`;
|
||
el.style.color = "#000000";
|
||
}
|
||
|
||
function updateServiceOptions() {
|
||
serviceOptions.innerHTML = "";
|
||
tempService = null;
|
||
setPlaceholder(
|
||
selectedServiceText,
|
||
SERVICES[activeService].servicePlaceholder,
|
||
);
|
||
|
||
const serviceData = SERVICES[activeService];
|
||
const optionsToShow =
|
||
serviceData.optionsByPet && tempPet && serviceData.optionsByPet[tempPet]
|
||
? serviceData.optionsByPet[tempPet]
|
||
: serviceData.defaultOptions;
|
||
|
||
optionsToShow.forEach((opt) => {
|
||
serviceOptions.innerHTML += `
|
||
<label class="option">
|
||
<input type="radio" name="serviceOpt" value="${opt}">
|
||
${opt}
|
||
</label>
|
||
`;
|
||
});
|
||
|
||
serviceOptions.querySelectorAll("input").forEach((radio) => {
|
||
radio.onchange = (e) => {
|
||
e.stopPropagation();
|
||
|
||
tempService = radio.value;
|
||
|
||
if (window.innerWidth > 768) {
|
||
selectedService = tempService;
|
||
selectedServiceText.textContent = tempService;
|
||
|
||
serviceDropdown.classList.remove("accordion-open");
|
||
closeAllDropdowns();
|
||
updateButtonState();
|
||
}
|
||
};
|
||
});
|
||
}
|
||
|
||
function updateButton() {
|
||
const btn = document.getElementById("mainActionBtn");
|
||
const iconData = SERVICES[activeService].buttonIcon;
|
||
const text = SERVICES[activeService].buttonText;
|
||
|
||
let iconHTML = iconData.svg;
|
||
|
||
btn.innerHTML = `
|
||
${iconHTML}
|
||
<span>${text}</span>
|
||
`;
|
||
}
|
||
|
||
function updateButtonState() {
|
||
const btn = document.getElementById("mainActionBtn");
|
||
|
||
if (selectedService) {
|
||
btn.disabled = false;
|
||
btn.style.opacity = "1";
|
||
btn.style.cursor = "pointer";
|
||
} else {
|
||
btn.disabled = true;
|
||
btn.style.opacity = "0.5";
|
||
btn.style.cursor = "not-allowed";
|
||
}
|
||
}
|
||
|
||
updateAll();
|
||
updateButtonState();
|
||
const wrapper = document.querySelector(".words-wrapper");
|
||
|
||
let index = 0;
|
||
|
||
setInterval(() => {
|
||
index = (index + 1) % 4;
|
||
|
||
wrapper.style.transform = `translateY(-${index * 50}px)`;
|
||
}, 1400);
|
||
|
||
function addSwipeToClose(dropdownElement) {
|
||
const handle = dropdownElement.querySelector(".line-option");
|
||
if (!handle) return;
|
||
|
||
let startY = 0;
|
||
let currentY = 0;
|
||
let isDragging = false;
|
||
|
||
handle.addEventListener("touchstart", (e) => {
|
||
if (window.innerWidth > 575) return;
|
||
if (!dropdownElement.classList.contains("accordion-open")) return;
|
||
|
||
startY = e.touches[0].clientY;
|
||
currentY = startY;
|
||
isDragging = true;
|
||
|
||
dropdownElement.style.transition = "none";
|
||
});
|
||
|
||
handle.addEventListener("touchmove", (e) => {
|
||
if (!isDragging) return;
|
||
|
||
currentY = e.touches[0].clientY;
|
||
const diff = currentY - startY;
|
||
|
||
if (diff > 0) {
|
||
dropdownElement.style.bottom = `${-10 - diff}px`;
|
||
}
|
||
});
|
||
|
||
handle.addEventListener("touchend", () => {
|
||
if (!isDragging) return;
|
||
isDragging = false;
|
||
|
||
dropdownElement.style.transition = "bottom 0.4s cubic-bezier(.25,.8,.25,1)";
|
||
|
||
const diff = currentY - startY;
|
||
if (diff > 120) {
|
||
closeAllDropdowns();
|
||
} else {
|
||
dropdownElement.style.bottom = "-10px";
|
||
}
|
||
setTimeout(() => {
|
||
if (!dropdownElement.classList.contains("accordion-open")) {
|
||
dropdownElement.style.bottom = "";
|
||
dropdownElement.style.transition = "";
|
||
}
|
||
}, 400);
|
||
});
|
||
}
|
||
addSwipeToClose(petDropdown);
|
||
addSwipeToClose(serviceDropdown);
|
||
|
||
// ----------------------------body------------------------------
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const scrollBtn = document.querySelector(".second-button");
|
||
const heroBox = document.querySelector(".hero-box");
|
||
|
||
scrollBtn.addEventListener("click", function () {
|
||
heroBox.scrollIntoView({
|
||
behavior: "smooth",
|
||
block: "start",
|
||
});
|
||
});
|
||
});
|
||
|
||
const slider = document.querySelector(".op-box");
|
||
const cards = document.querySelectorAll(".op-card");
|
||
const pagination = document.querySelector(".op-pagination");
|
||
|
||
let cardWidth;
|
||
let cardsPerPage = 0;
|
||
let totalDots;
|
||
|
||
function setupSlider() {
|
||
const style = window.getComputedStyle(slider);
|
||
const gap = parseInt(style.gap) || 0;
|
||
|
||
cardWidth = cards[0].offsetWidth + gap;
|
||
|
||
const newCardsPP = Math.round(slider.offsetWidth / cardWidth);
|
||
|
||
if (newCardsPP < 1) {
|
||
cardsPerPage = 1;
|
||
} else if (cardsPerPage == newCardsPP) return;
|
||
else {
|
||
cardsPerPage = newCardsPP;
|
||
}
|
||
|
||
totalDots = Math.ceil(cards.length - cardsPerPage + 1);
|
||
|
||
pagination.innerHTML = "";
|
||
|
||
for (let i = 0; i < totalDots; i++) {
|
||
const dot = document.createElement("div");
|
||
dot.classList.add("op-dot");
|
||
|
||
dot.addEventListener("click", () => {
|
||
const scrollPosition = i * cardWidth;
|
||
|
||
slider.scrollTo({
|
||
left: -scrollPosition,
|
||
behavior: "smooth",
|
||
});
|
||
});
|
||
|
||
pagination.appendChild(dot);
|
||
}
|
||
|
||
setActiveDot();
|
||
}
|
||
|
||
setupSlider();
|
||
|
||
window.addEventListener("resize", setupSlider, { passive: true });
|
||
|
||
slider.addEventListener("scroll", setActiveDot, { passive: true });
|
||
|
||
function setActiveDot() {
|
||
const index = Math.round(Math.abs(slider.scrollLeft) / cardWidth);
|
||
|
||
const dots = document.querySelectorAll(".op-dot");
|
||
|
||
const isActive = dots[index]?.classList.contains("active");
|
||
|
||
if (isActive) {
|
||
return;
|
||
} else {
|
||
dots.forEach((d) => d.classList.remove("active"));
|
||
dots[index]?.classList.add("active");
|
||
}
|
||
}
|
||
|
||
// Dragging scroll in pc
|
||
let isDown = false;
|
||
let startX;
|
||
let scrollLeft;
|
||
|
||
slider.addEventListener("mousedown", (e) => {
|
||
isDown = true;
|
||
startX = e.pageX - slider.offsetLeft;
|
||
scrollLeft = slider.scrollLeft;
|
||
});
|
||
|
||
slider.addEventListener("mouseleave", () => {
|
||
isDown = false;
|
||
});
|
||
|
||
slider.addEventListener("mouseup", () => {
|
||
isDown = false;
|
||
});
|
||
|
||
slider.addEventListener("mousemove", (e) => {
|
||
if (!isDown) return;
|
||
e.preventDefault();
|
||
const x = e.pageX - slider.offsetLeft;
|
||
const walk = (startX - x) * 1.3;
|
||
slider.scrollLeft = scrollLeft + walk;
|
||
});
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const clinicsBox = document.querySelector(".clinics-box");
|
||
const cards = document.querySelectorAll(".clinic-card");
|
||
const dots = document.querySelectorAll(".clinics-pagination span");
|
||
|
||
if (!clinicsBox) return;
|
||
|
||
function updateDots() {
|
||
let closestIndex = 0;
|
||
let smallestDistance = Infinity;
|
||
|
||
cards.forEach((card, index) => {
|
||
const cardRect = card.getBoundingClientRect();
|
||
const containerRect = clinicsBox.getBoundingClientRect();
|
||
|
||
const cardCenter = cardRect.left + cardRect.width / 2;
|
||
const containerCenter = containerRect.left + containerRect.width / 2;
|
||
|
||
const distance = Math.abs(containerCenter - cardCenter);
|
||
|
||
if (distance < smallestDistance) {
|
||
smallestDistance = distance;
|
||
closestIndex = index;
|
||
}
|
||
});
|
||
|
||
dots.forEach((dot) => dot.classList.remove("active"));
|
||
dots[closestIndex].classList.add("active");
|
||
}
|
||
|
||
clinicsBox.addEventListener("scroll", updateDots, { passive: true });
|
||
|
||
dots.forEach((dot, i) => {
|
||
dot.addEventListener("click", () => {
|
||
cards[i].scrollIntoView({
|
||
behavior: "smooth",
|
||
inline: "center",
|
||
});
|
||
});
|
||
});
|
||
});
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const slider = document.querySelector(".banner-slider");
|
||
const slidesContainer = document.querySelector(".banner-slides");
|
||
const slides = document.querySelectorAll(".slide");
|
||
const next = document.querySelector(".next");
|
||
const prev = document.querySelector(".prev");
|
||
const pagination = document.querySelector(".banner-pagination");
|
||
|
||
let index = 0;
|
||
let total = slides.length;
|
||
let startX = 0;
|
||
let autoplay = setInterval(() => {
|
||
showSlide(index + 1);
|
||
}, 4000);
|
||
|
||
const pauseAutoPlay = () => {
|
||
clearInterval(autoplay);
|
||
};
|
||
const playAutoPlay = () => {
|
||
autoplay = setInterval(() => {
|
||
showSlide(index + 1);
|
||
}, 4000);
|
||
};
|
||
|
||
slides.forEach((_, i) => {
|
||
const dot = document.createElement("span");
|
||
dot.classList.add("banner-dot");
|
||
|
||
if (i === 0) dot.classList.add("active");
|
||
|
||
dot.addEventListener("click", () => {
|
||
pauseAutoPlay();
|
||
showSlide(i);
|
||
playAutoPlay();
|
||
});
|
||
|
||
pagination.appendChild(dot);
|
||
});
|
||
|
||
const dots = document.querySelectorAll(".banner-dot");
|
||
|
||
function showSlide(i) {
|
||
if (i >= total) index = 0;
|
||
else if (i < 0) index = total - 1;
|
||
else index = i;
|
||
|
||
slidesContainer.style.transform = `translateX(${index * 100}%)`;
|
||
|
||
dots.forEach((d) => d.classList.remove("active"));
|
||
dots[index].classList.add("active");
|
||
|
||
updateButtons();
|
||
}
|
||
|
||
function updateButtons() {
|
||
next.disabled = index === 0;
|
||
prev.disabled = index === total - 1;
|
||
}
|
||
|
||
next.addEventListener("click", () => {
|
||
pauseAutoPlay();
|
||
showSlide(index + 1);
|
||
playAutoPlay();
|
||
});
|
||
|
||
prev.addEventListener("click", () => {
|
||
pauseAutoPlay();
|
||
showSlide(index - 1);
|
||
playAutoPlay();
|
||
});
|
||
|
||
slidesContainer.addEventListener("touchstart", (e) => {
|
||
startX = e.touches[0].clientX;
|
||
});
|
||
|
||
slidesContainer.addEventListener("touchend", (e) => {
|
||
let endX = e.changedTouches[0].clientX;
|
||
let diff = startX - endX;
|
||
|
||
if (Math.abs(diff) > 50) {
|
||
pauseAutoPlay();
|
||
if (diff > 0) showSlide(index + 1);
|
||
else showSlide(index - 1);
|
||
playAutoPlay();
|
||
}
|
||
});
|
||
|
||
let isDown = false;
|
||
|
||
slidesContainer.addEventListener("mousedown", (e) => {
|
||
isDown = true;
|
||
startX = e.clientX;
|
||
});
|
||
|
||
slidesContainer.addEventListener("mouseup", (e) => {
|
||
if (!isDown) return;
|
||
|
||
let diff = startX - e.clientX;
|
||
isDown = false;
|
||
|
||
if (Math.abs(diff) > 50) {
|
||
pauseAutoPlay();
|
||
if (diff > 0) showSlide(index + 1);
|
||
else showSlide(index - 1);
|
||
playAutoPlay();
|
||
}
|
||
});
|
||
slider.addEventListener("mouseenter", () => {
|
||
pauseAutoPlay();
|
||
});
|
||
slider.addEventListener("mouseleave", () => {
|
||
pauseAutoPlay();
|
||
playAutoPlay();
|
||
});
|
||
});
|
||
|
||
// Blog Mouse Dragging
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const container = document.querySelector(".blog-section-box");
|
||
|
||
let isDown = false;
|
||
let startX;
|
||
let scrollLeft;
|
||
let isDragged = false;
|
||
let startScrollLeft;
|
||
|
||
container.addEventListener("mousedown", (e) => {
|
||
isDown = true;
|
||
isDragged = false;
|
||
startX = e.pageX - container.offsetLeft;
|
||
scrollLeft = container.scrollLeft;
|
||
startScrollLeft = container.scrollLeft;
|
||
});
|
||
|
||
container.addEventListener("mouseleave", () => {
|
||
isDown = false;
|
||
});
|
||
|
||
container.addEventListener("mouseup", (e) => {
|
||
isDown = false;
|
||
|
||
const moved = Math.abs(container.scrollLeft - startScrollLeft);
|
||
if (moved > 5) {
|
||
isDragged = true;
|
||
}
|
||
});
|
||
|
||
container.addEventListener("mousemove", (e) => {
|
||
if (!isDown) return;
|
||
e.preventDefault();
|
||
|
||
const x = e.pageX - container.offsetLeft;
|
||
const walk = (startX - x) * 1.3;
|
||
container.scrollLeft = scrollLeft + walk;
|
||
|
||
if (Math.abs(walk) > 3) {
|
||
isDragged = true;
|
||
}
|
||
});
|
||
|
||
container.addEventListener(
|
||
"click",
|
||
(e) => {
|
||
if (isDragged) {
|
||
e.preventDefault();
|
||
e.stopImmediatePropagation();
|
||
isDragged = false;
|
||
}
|
||
},
|
||
true,
|
||
);
|
||
});
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const categoryButtons = document.querySelectorAll(".blog-category");
|
||
const blogBoxes = document.querySelectorAll(".blog-box");
|
||
|
||
categoryButtons.forEach((button) => {
|
||
button.addEventListener("click", function () {
|
||
categoryButtons.forEach((btn) => btn.classList.remove("active"));
|
||
this.classList.add("active");
|
||
|
||
const selectedCategory = this.textContent.trim();
|
||
|
||
blogBoxes.forEach((box) => {
|
||
const badges = box.querySelectorAll(".blog-badge");
|
||
let matchFound = false;
|
||
|
||
badges.forEach((badge) => {
|
||
const badgeText = badge.textContent.trim();
|
||
|
||
if (selectedCategory === "همه") {
|
||
matchFound = true;
|
||
}
|
||
|
||
if (badgeText.includes(selectedCategory)) {
|
||
matchFound = true;
|
||
}
|
||
});
|
||
|
||
if (matchFound) {
|
||
box.style.display = "block";
|
||
} else {
|
||
box.style.display = "none";
|
||
}
|
||
});
|
||
});
|
||
});
|
||
});
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const aboutText = document.querySelector(".about-section-text");
|
||
const btn = document.querySelector(".about-section-btn");
|
||
const btnText = btn.querySelector("p");
|
||
|
||
btn.addEventListener("click", function (e) {
|
||
const isOpen = aboutText.classList.contains("open");
|
||
|
||
if (!isOpen) {
|
||
aboutText.classList.add("open");
|
||
btn.classList.add("open");
|
||
btnText.textContent = "مطالعه کمتر";
|
||
} else {
|
||
aboutText.classList.remove("open");
|
||
btn.classList.remove("open");
|
||
btnText.textContent = "مطالعه بیشتر";
|
||
|
||
aboutText.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
}
|
||
});
|
||
});
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const modal = document.getElementById("videoModal");
|
||
const openTrigger = document.querySelector(".about-left-img");
|
||
const closeBtn = document.querySelector(".close-btn");
|
||
const cover = document.getElementById("videoCover");
|
||
const video = document.getElementById("aboutVideo");
|
||
const fullscreenBtn = document.getElementById("fullscreenBtn");
|
||
|
||
openTrigger.addEventListener("click", () => {
|
||
modal.classList.add("active");
|
||
document.body.style.overflow = "hidden";
|
||
});
|
||
|
||
function closeModal() {
|
||
modal.classList.remove("active");
|
||
video.pause();
|
||
video.currentTime = 0;
|
||
video.style.display = "none";
|
||
cover.style.display = "block";
|
||
document.body.style.overflow = "auto";
|
||
}
|
||
closeBtn.addEventListener("click", closeModal);
|
||
|
||
modal.addEventListener("click", (e) => {
|
||
if (e.target === modal) {
|
||
closeModal();
|
||
}
|
||
});
|
||
cover.addEventListener("click", () => {
|
||
cover.style.display = "none";
|
||
video.style.display = "block";
|
||
video.play();
|
||
});
|
||
fullscreenBtn.addEventListener("click", () => {
|
||
if (video.requestFullscreen) {
|
||
video.requestFullscreen();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Custom scroller
|
||
|
||
const customScrollerLists = document.querySelectorAll(
|
||
".custom-scroller-list-js",
|
||
);
|
||
|
||
customScrollerLists.forEach((list) => {
|
||
let isDragging = false;
|
||
let startX;
|
||
let startRight;
|
||
|
||
const scrollIndicator = list.parentNode.querySelector(
|
||
".custom-scroller-indicator-js",
|
||
);
|
||
const scrollThumb = scrollIndicator.querySelector(".scroll-thumb");
|
||
|
||
const thumbWidthPercentage = (list.clientWidth * 100) / list.scrollWidth;
|
||
scrollThumb.style.width = `${thumbWidthPercentage}%`;
|
||
|
||
list.addEventListener(
|
||
"scroll",
|
||
() => {
|
||
if (isDragging) return;
|
||
const scrollWidth = list.scrollWidth - list.clientWidth;
|
||
const scrollLeft = Math.abs(list.scrollLeft);
|
||
const thumbWidth = scrollThumb.clientWidth;
|
||
const indicatorWidth = scrollIndicator.clientWidth;
|
||
const maxThumbPosition = indicatorWidth - thumbWidth;
|
||
const thumbPosition = (scrollLeft / scrollWidth) * maxThumbPosition;
|
||
|
||
scrollThumb.style.right = `${thumbPosition}px`;
|
||
},
|
||
{ passive: true },
|
||
);
|
||
|
||
scrollThumb.addEventListener("mousedown", (e) => {
|
||
isDragging = true;
|
||
scrollThumb.classList.add("dragging");
|
||
startX = e.pageX;
|
||
startRight = parseFloat(scrollThumb.style.right || 0);
|
||
e.preventDefault();
|
||
});
|
||
|
||
document.addEventListener(
|
||
"mousemove",
|
||
(e) => {
|
||
if (!isDragging) return;
|
||
|
||
const indicatorWidth = scrollIndicator.clientWidth;
|
||
const thumbWidth = scrollThumb.clientWidth;
|
||
const maxThumbPosition = indicatorWidth - thumbWidth;
|
||
|
||
const deltaX = startX - e.pageX;
|
||
let newRight = startRight + deltaX;
|
||
|
||
newRight = Math.max(0, Math.min(newRight, maxThumbPosition));
|
||
scrollThumb.style.right = `${newRight}px`;
|
||
|
||
const scrollWidth = list.scrollWidth - list.clientWidth;
|
||
const scrollPosition = (newRight / maxThumbPosition) * scrollWidth;
|
||
list.scrollLeft = -scrollPosition;
|
||
},
|
||
{ passive: true },
|
||
);
|
||
|
||
document.addEventListener("mouseup", () => {
|
||
if (isDragging) {
|
||
isDragging = false;
|
||
scrollThumb.classList.remove("dragging");
|
||
}
|
||
});
|
||
|
||
document.addEventListener("mouseleave", () => {
|
||
if (isDragging) {
|
||
isDragging = false;
|
||
scrollThumb.classList.remove("dragging");
|
||
}
|
||
});
|
||
});
|