rui-neng/public/themes/dist_static/static/js/index.js

import "./common.js";
import "./earth.js";
//#region js/home.js
function counterUpInit() {
	if (!window.counterUp) return;
	const counterUp = window.counterUp.default;
	const callback = (entries) => {
		entries.forEach((entry) => {
			const el = entry.target;
			if (entry.isIntersecting && !el.classList.contains("is-visible")) {
				counterUp(el, {
					duration: 1e3,
					delay: 16
				});
				el.classList.add("is-visible");
			}
		});
	};
	const IO = new IntersectionObserver(callback, { threshold: .5 });
	document.querySelectorAll(".counter").forEach((el) => {
		IO.observe(el);
	});
}
function bindCarouselVideos(el, swiper, root) {
	const isInViewport = (node) => {
		const rect = node.getBoundingClientRect();
		return rect.bottom > 0 && rect.top < window.innerHeight;
	};
	let inView = !root || isInViewport(root);
	const sync = () => {
		const activeVideo = swiper.slides[swiper.activeIndex]?.querySelector("video");
		el.querySelectorAll("video").forEach((video) => {
			video.muted = true;
			if (inView && video === activeVideo) video.play().catch(() => {});
			else video.pause();
		});
		if (!swiper.passedParams?.autoplay) return;
		if (inView) swiper.autoplay.start();
		else swiper.autoplay.stop();
	};
	swiper.on("slideChange", sync);
	swiper.on("slideChangeTransitionEnd", sync);
	sync();
	if (!root || !window.IntersectionObserver) return;
	new IntersectionObserver(([entry]) => {
		inView = !!entry?.isIntersecting;
		sync();
	}, { threshold: .1 }).observe(root);
}
function section2CarouselInit() {
	const root = document.querySelector(".section-2");
	const SwiperCtor = window.Swiper;
	if (!root || !SwiperCtor) return;
	const el = root.querySelector(".section-2__swiper");
	const buttons = [...root.querySelectorAll(".section-2__nav > button:not(.section-2__nav-arrow)")];
	const nextBtn = root.querySelector(".section-2__nav-arrow");
	if (!el || !buttons.length) return;
	const swiper = new SwiperCtor(el, {
		initialSlide: Math.max(0, buttons.findIndex((btn) => btn.classList.contains("is-active"))),
		loop: true,
		grabCursor: true,
		speed: 600,
		autoplay: {
			delay: 3e3,
			disableOnInteraction: false
		}
	});
	const syncNav = (index) => {
		buttons.forEach((btn, i) => btn.classList.toggle("is-active", i === index));
	};
	buttons.forEach((btn, i) => {
		btn.addEventListener("click", () => swiper.slideToLoop(i));
	});
	nextBtn?.addEventListener("click", () => swiper.slideNext());
	swiper.on("slideChange", () => syncNav(swiper.realIndex));
	bindCarouselVideos(el, swiper, root);
}
function sectionBannerCarouselInit() {
	const el = document.querySelector(".section-banner__swiper");
	if (!el || !window.Swiper) return;
	bindCarouselVideos(el, new window.Swiper(el, {
		loop: true,
		grabCursor: true,
		speed: 600
	}), el.closest(".section-banner"));
}
function section1CarouselInit() {
	const root = document.querySelector(".section-1");
	const el = root?.querySelector(".section-1__swiper");
	if (!root || !el || !window.Swiper) return;
	const swiper = new window.Swiper(el, {
		slidesPerView: 1,
		spaceBetween: 28,
		speed: 600,
		navigation: {
			prevEl: root.querySelector(".section-1__header .s-arrows__prev"),
			nextEl: root.querySelector(".section-1__header .s-arrows__next")
		},
		breakpoints: {
			576: {
				slidesPerView: 2,
				spaceBetween: 24
			},
			1440: {
				slidesPerView: 4,
				spaceBetween: 30
			}
		}
	});
	const mobilePrev = root.querySelector(".section-1__more .s-arrows__prev");
	const mobileNext = root.querySelector(".section-1__more .s-arrows__next");
	mobilePrev?.addEventListener("click", () => swiper.slidePrev());
	mobileNext?.addEventListener("click", () => swiper.slideNext());
}
$(function() {
	counterUpInit();
	sectionBannerCarouselInit();
	section2CarouselInit();
	section1CarouselInit();
});
//#endregion