You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.4 KiB
83 lines
2.4 KiB
import "./common.js";
|
|
import "./earth.js";
|
|
//#region js/about.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 setActiveNav() {
|
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav");
|
|
if (!pageNav) return;
|
|
document.querySelectorAll(".site-header__nav a").forEach((link) => {
|
|
const active = link.textContent.trim().startsWith(pageNav);
|
|
link.classList.toggle("is-active", active);
|
|
});
|
|
}
|
|
function initHistorySwiper() {
|
|
const root = document.querySelector(".ab-history");
|
|
const el = root?.querySelector(".ab-history__swiper");
|
|
if (!root || !el || !window.Swiper) return;
|
|
function updateFarClass(swiper) {
|
|
const active = swiper.activeIndex;
|
|
swiper.slides.forEach((slide, i) => {
|
|
slide.classList.toggle("is-far", i > active + 2);
|
|
});
|
|
}
|
|
updateFarClass(new window.Swiper(el, {
|
|
slidesPerView: "auto",
|
|
spaceBetween: 100,
|
|
navigation: {
|
|
prevEl: root.querySelector(".ab-history__head .s-arrows__prev"),
|
|
nextEl: root.querySelector(".ab-history__head .s-arrows__next")
|
|
},
|
|
breakpoints: {
|
|
0: {
|
|
spaceBetween: 32,
|
|
navigation: {
|
|
prevEl: root.querySelector(".ab-history__arrows-mobile .s-arrows__prev"),
|
|
nextEl: root.querySelector(".ab-history__arrows-mobile .s-arrows__next")
|
|
}
|
|
},
|
|
993: { spaceBetween: 100 }
|
|
},
|
|
on: { slideChange: updateFarClass }
|
|
}));
|
|
}
|
|
function initHonorsToggle() {
|
|
const list = document.querySelector(".ab-honors__list");
|
|
const btn = document.querySelector(".ab-honors__more");
|
|
if (!list || !btn) return;
|
|
const items = list.querySelectorAll(".ab-honors__item");
|
|
if (items.length <= 5) {
|
|
btn.style.display = "none";
|
|
return;
|
|
}
|
|
btn.addEventListener("click", () => {
|
|
const expanded = list.classList.toggle("is-expanded");
|
|
btn.classList.toggle("is-expanded", expanded);
|
|
btn.querySelector("span").textContent = expanded ? "收起" : "展开更多";
|
|
});
|
|
}
|
|
$(function() {
|
|
setActiveNav();
|
|
initHistorySwiper();
|
|
counterUpInit();
|
|
initHonorsToggle();
|
|
});
|
|
//#endregion
|