341 lines
10 KiB
JavaScript
341 lines
10 KiB
JavaScript
(() => {
|
|
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
const selectors = [
|
|
".section__head",
|
|
".info-card",
|
|
".feature-card",
|
|
".object-card",
|
|
".service-card",
|
|
".gallery__item",
|
|
".review-card",
|
|
".stats article",
|
|
".booking__form",
|
|
".contacts-card",
|
|
".hours-card",
|
|
];
|
|
|
|
const elements = Array.from(document.querySelectorAll(selectors.join(",")));
|
|
if (!elements.length) return;
|
|
|
|
const siblingCounters = new WeakMap();
|
|
|
|
elements.forEach((element) => {
|
|
element.classList.add("scroll-reveal");
|
|
const parent = element.parentElement;
|
|
let offsetIndex = 0;
|
|
|
|
if (parent) {
|
|
offsetIndex = siblingCounters.get(parent) ?? 0;
|
|
siblingCounters.set(parent, offsetIndex + 1);
|
|
}
|
|
|
|
element.style.setProperty("--reveal-delay", `${(offsetIndex % 4) * 80}ms`);
|
|
});
|
|
|
|
if (reduceMotion || !("IntersectionObserver" in window)) {
|
|
elements.forEach((element) => element.classList.add("is-visible"));
|
|
return;
|
|
}
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries, currentObserver) => {
|
|
entries.forEach((entry) => {
|
|
if (!entry.isIntersecting) return;
|
|
entry.target.classList.add("is-visible");
|
|
currentObserver.unobserve(entry.target);
|
|
});
|
|
},
|
|
{
|
|
threshold: 0.18,
|
|
rootMargin: "0px 0px -12% 0px"
|
|
}
|
|
);
|
|
|
|
elements.forEach((element) => observer.observe(element));
|
|
})();
|
|
|
|
(() => {
|
|
const counters = Array.from(document.querySelectorAll(".js-counter"));
|
|
if (!counters.length) return;
|
|
|
|
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
const formatCounter = (counter, value) => {
|
|
const suffix = counter.dataset.suffix || "";
|
|
counter.textContent = `${value}${suffix}`;
|
|
};
|
|
|
|
const setFinalValue = (counter) => {
|
|
const target = Number(counter.dataset.target || 0);
|
|
formatCounter(counter, Number.isFinite(target) ? target : 0);
|
|
};
|
|
|
|
const animateCounter = (counter) => {
|
|
const target = Number(counter.dataset.target || 0);
|
|
const duration = Number(counter.dataset.duration || 1300);
|
|
|
|
if (!Number.isFinite(target) || target <= 0) {
|
|
setFinalValue(counter);
|
|
return;
|
|
}
|
|
|
|
let startTime = null;
|
|
|
|
const tick = (timestamp) => {
|
|
if (startTime === null) startTime = timestamp;
|
|
|
|
const progress = Math.min((timestamp - startTime) / duration, 1);
|
|
const currentValue = Math.floor(progress * target);
|
|
formatCounter(counter, currentValue);
|
|
|
|
if (progress < 1) {
|
|
window.requestAnimationFrame(tick);
|
|
return;
|
|
}
|
|
|
|
setFinalValue(counter);
|
|
};
|
|
|
|
window.requestAnimationFrame(tick);
|
|
};
|
|
|
|
if (reduceMotion || !("IntersectionObserver" in window)) {
|
|
counters.forEach(setFinalValue);
|
|
return;
|
|
}
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries, currentObserver) => {
|
|
entries.forEach((entry) => {
|
|
if (!entry.isIntersecting) return;
|
|
animateCounter(entry.target);
|
|
currentObserver.unobserve(entry.target);
|
|
});
|
|
},
|
|
{ threshold: 0.45 }
|
|
);
|
|
|
|
counters.forEach((counter) => {
|
|
formatCounter(counter, 0);
|
|
observer.observe(counter);
|
|
});
|
|
})();
|
|
|
|
(() => {
|
|
const slider = document.querySelector("[data-reviews-slider]");
|
|
if (!slider) return;
|
|
|
|
const viewport = slider.querySelector("[data-reviews-viewport]");
|
|
const track = slider.querySelector("[data-reviews-track]");
|
|
const prevButton = slider.querySelector("[data-reviews-prev]");
|
|
const nextButton = slider.querySelector("[data-reviews-next]");
|
|
const dotsContainer = document.querySelector("[data-reviews-dots]");
|
|
const cards = Array.from(track?.querySelectorAll(".review-card") ?? []);
|
|
|
|
if (!viewport || !track || !prevButton || !nextButton || !dotsContainer || cards.length < 2) return;
|
|
|
|
let currentIndex = 0;
|
|
let touchStartX = 0;
|
|
|
|
const readVisibleSlides = () => {
|
|
const visibleValue = Number.parseInt(getComputedStyle(slider).getPropertyValue("--reviews-visible"), 10);
|
|
return Number.isFinite(visibleValue) && visibleValue > 0 ? visibleValue : 1;
|
|
};
|
|
|
|
const readTrackGap = () => {
|
|
const styles = getComputedStyle(track);
|
|
const gapValue = styles.gap || styles.columnGap || "0";
|
|
const parsedGap = Number.parseFloat(gapValue);
|
|
return Number.isFinite(parsedGap) ? parsedGap : 0;
|
|
};
|
|
|
|
const maxIndex = () => Math.max(0, cards.length - readVisibleSlides());
|
|
|
|
const renderDots = () => {
|
|
const total = maxIndex() + 1;
|
|
dotsContainer.innerHTML = "";
|
|
|
|
for (let index = 0; index < total; index += 1) {
|
|
const dot = document.createElement("button");
|
|
dot.type = "button";
|
|
dot.className = "reviews__dot";
|
|
dot.setAttribute("aria-label", `Показать отзыв ${index + 1}`);
|
|
dot.addEventListener("click", () => {
|
|
currentIndex = index;
|
|
update();
|
|
});
|
|
dotsContainer.appendChild(dot);
|
|
}
|
|
};
|
|
|
|
const update = () => {
|
|
const max = maxIndex();
|
|
currentIndex = Math.min(Math.max(currentIndex, 0), max);
|
|
|
|
const cardWidth = cards[0].getBoundingClientRect().width;
|
|
const offset = (cardWidth + readTrackGap()) * currentIndex;
|
|
track.style.transform = `translateX(${-offset}px)`;
|
|
|
|
prevButton.disabled = currentIndex === 0;
|
|
nextButton.disabled = currentIndex === max;
|
|
|
|
const dots = Array.from(dotsContainer.querySelectorAll(".reviews__dot"));
|
|
dots.forEach((dot, index) => {
|
|
dot.classList.toggle("is-active", index === currentIndex);
|
|
dot.setAttribute("aria-current", index === currentIndex ? "true" : "false");
|
|
});
|
|
};
|
|
|
|
prevButton.addEventListener("click", () => {
|
|
currentIndex -= 1;
|
|
update();
|
|
});
|
|
|
|
nextButton.addEventListener("click", () => {
|
|
currentIndex += 1;
|
|
update();
|
|
});
|
|
|
|
viewport.addEventListener("touchstart", (event) => {
|
|
touchStartX = event.changedTouches[0].clientX;
|
|
}, { passive: true });
|
|
|
|
viewport.addEventListener("touchend", (event) => {
|
|
const deltaX = event.changedTouches[0].clientX - touchStartX;
|
|
const threshold = 48;
|
|
|
|
if (deltaX > threshold) {
|
|
currentIndex -= 1;
|
|
update();
|
|
return;
|
|
}
|
|
|
|
if (deltaX < -threshold) {
|
|
currentIndex += 1;
|
|
update();
|
|
}
|
|
}, { passive: true });
|
|
|
|
const handleResize = () => {
|
|
renderDots();
|
|
update();
|
|
};
|
|
|
|
let resizeRaf = null;
|
|
window.addEventListener("resize", () => {
|
|
if (resizeRaf) return;
|
|
resizeRaf = window.requestAnimationFrame(() => {
|
|
resizeRaf = null;
|
|
handleResize();
|
|
});
|
|
});
|
|
|
|
renderDots();
|
|
update();
|
|
})();
|
|
|
|
(() => {
|
|
const bookingForm = document.getElementById("booking-form");
|
|
const successModal = document.getElementById("booking-success-modal");
|
|
|
|
if (!bookingForm || !successModal) return;
|
|
|
|
const closeTriggers = Array.from(successModal.querySelectorAll("[data-modal-close]"));
|
|
|
|
const openModal = () => {
|
|
successModal.classList.add("is-open");
|
|
successModal.setAttribute("aria-hidden", "false");
|
|
};
|
|
|
|
const closeModal = () => {
|
|
successModal.classList.remove("is-open");
|
|
successModal.setAttribute("aria-hidden", "true");
|
|
};
|
|
|
|
const triggerAnalytics = () => {
|
|
const eventName = "заявка";
|
|
|
|
const metrikaIdRaw = bookingForm.dataset.metrikaId || document.body.dataset.metrikaId || window.YANDEX_METRIKA_ID;
|
|
const metrikaId = Number(metrikaIdRaw);
|
|
|
|
if (typeof window.ym === "function" && Number.isFinite(metrikaId) && metrikaId > 0) {
|
|
window.ym(metrikaId, "reachGoal", eventName);
|
|
}
|
|
|
|
const legacyCounterKey = Object.keys(window).find((key) => {
|
|
return key.startsWith("yaCounter") && typeof window[key]?.reachGoal === "function";
|
|
});
|
|
|
|
if (legacyCounterKey) {
|
|
window[legacyCounterKey].reachGoal(eventName);
|
|
}
|
|
|
|
if (typeof window.gtag === "function") {
|
|
window.gtag("event", eventName, {
|
|
event_category: "lead",
|
|
event_label: "booking_form"
|
|
});
|
|
}
|
|
|
|
if (Array.isArray(window.dataLayer)) {
|
|
window.dataLayer.push({
|
|
event: eventName,
|
|
event_category: "lead",
|
|
event_label: "booking_form"
|
|
});
|
|
}
|
|
};
|
|
|
|
const triggerAutoReply = async (email) => {
|
|
if (!email) return;
|
|
|
|
const autoReplyEndpoint = bookingForm.dataset.autoreplyEndpoint || window.BOOKING_AUTOREPLY_ENDPOINT;
|
|
if (!autoReplyEndpoint) return;
|
|
|
|
try {
|
|
await fetch(autoReplyEndpoint, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
email,
|
|
source: "booking-form"
|
|
})
|
|
});
|
|
} catch (error) {
|
|
// Auto-reply is optional and should not block form success.
|
|
console.error("Auto-reply request failed", error);
|
|
}
|
|
};
|
|
|
|
bookingForm.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
|
|
if (!bookingForm.checkValidity()) {
|
|
bookingForm.reportValidity();
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(bookingForm);
|
|
const email = String(formData.get("email") || "").trim();
|
|
|
|
triggerAnalytics();
|
|
await triggerAutoReply(email);
|
|
|
|
bookingForm.reset();
|
|
openModal();
|
|
});
|
|
|
|
closeTriggers.forEach((trigger) => {
|
|
trigger.addEventListener("click", closeModal);
|
|
});
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape" && successModal.classList.contains("is-open")) {
|
|
closeModal();
|
|
}
|
|
});
|
|
})();
|