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.
125 lines
4.4 KiB
125 lines
4.4 KiB
//#region js/news.js
|
|
var NEWS_CATEGORY_PARAM = "cat";
|
|
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 newsDetailBackToggle() {
|
|
const back = document.querySelector(".nd-back");
|
|
const pager = document.querySelector(".nd-pager");
|
|
if (!back || !pager) return;
|
|
if (window.innerWidth <= 576) return;
|
|
new IntersectionObserver(([entry]) => {
|
|
const fullyVisible = entry.isIntersecting && entry.intersectionRatio >= 1;
|
|
back.classList.toggle("is-hidden", fullyVisible);
|
|
back.setAttribute("aria-hidden", fullyVisible ? "true" : "false");
|
|
if (fullyVisible) back.setAttribute("tabindex", "-1");
|
|
else back.removeAttribute("tabindex");
|
|
}, { threshold: 1 }).observe(pager);
|
|
}
|
|
var featuredSwiper = null;
|
|
function getCategoryFromQuery() {
|
|
return new URLSearchParams(window.location.search).get(NEWS_CATEGORY_PARAM) || "";
|
|
}
|
|
function activateTab(cat) {
|
|
if (!cat) return;
|
|
const catStr = String(cat);
|
|
document.querySelectorAll(".n-tabs__item").forEach((btn) => {
|
|
const isActive = String(btn.dataset.cat || "") === catStr;
|
|
btn.classList.toggle("is-active", isActive);
|
|
btn.setAttribute("aria-selected", isActive ? "true" : "false");
|
|
});
|
|
}
|
|
function updateFeaturedSwiper() {
|
|
const root = document.querySelector(".n-featured");
|
|
const el = root?.querySelector(".n-featured__swiper");
|
|
if (!el || !window.Swiper) return;
|
|
if (featuredSwiper) {
|
|
featuredSwiper.destroy(true, true);
|
|
featuredSwiper = null;
|
|
}
|
|
if (!root || root.hidden) return;
|
|
const slideCount = el.querySelectorAll(".swiper-wrapper > .swiper-slide:not([hidden])").length;
|
|
if (slideCount <= 1) return;
|
|
featuredSwiper = new window.Swiper(el, {
|
|
effect: "fade",
|
|
fadeEffect: { crossFade: true },
|
|
loop: slideCount > 1,
|
|
speed: 500,
|
|
observer: true,
|
|
observeParents: true,
|
|
watchOverflow: true,
|
|
navigation: {
|
|
prevEl: root.querySelector(".n-featured__nav .s-arrows__prev"),
|
|
nextEl: root.querySelector(".n-featured__nav .s-arrows__next")
|
|
}
|
|
});
|
|
}
|
|
function initNewsTabs() {
|
|
const tabs = document.querySelector(".n-tabs");
|
|
if (!tabs) return;
|
|
const cat = getCategoryFromQuery();
|
|
if (cat) activateTab(cat);
|
|
updateFeaturedSwiper();
|
|
}
|
|
function newsCardClick() {
|
|
$(".n-card:not(.n-card--video), .n-featured").on("click", function(event) {
|
|
if ($(event.target).closest("a, button").length) return;
|
|
const $root = $(this);
|
|
const href = $root.hasClass("n-featured") ? $root.find(".swiper-slide-active a[href]").attr("href") : $root.find("a[href]").first().attr("href");
|
|
if (href) window.location.href = href;
|
|
});
|
|
}
|
|
function initNewsVideoModal() {
|
|
const modal = document.getElementById("n-v-modal");
|
|
const video = document.getElementById("n-v-modal-video");
|
|
const titleEl = document.getElementById("n-v-modal-title");
|
|
if (!modal || !video || !titleEl) return;
|
|
let lastFocus = null;
|
|
const openModal = (src, title) => {
|
|
if (!src) return;
|
|
lastFocus = document.activeElement;
|
|
titleEl.textContent = title || (typeof window.t === "function" ? window.t("video.play") : "视频播放");
|
|
if (video.getAttribute("src") !== src) video.src = src;
|
|
modal.hidden = false;
|
|
document.body.style.overflow = "hidden";
|
|
if (window.lenis?.stop) window.lenis.stop();
|
|
video.play().catch(() => {});
|
|
modal.querySelector(".n-v-modal__close")?.focus();
|
|
};
|
|
const closeModal = () => {
|
|
video.pause();
|
|
video.removeAttribute("src");
|
|
video.load();
|
|
modal.hidden = true;
|
|
document.body.style.overflow = "";
|
|
if (window.lenis?.start) window.lenis.start();
|
|
if (lastFocus && typeof lastFocus.focus === "function") lastFocus.focus();
|
|
};
|
|
const bindCard = (card) => {
|
|
card.addEventListener("click", () => {
|
|
const title =
|
|
card.querySelector(".n-v-card__title, .n-card__title")?.textContent?.trim() || "";
|
|
openModal(card.getAttribute("data-video-src") || "", title);
|
|
});
|
|
};
|
|
document.querySelectorAll(".n-v-card, .n-card--video").forEach(bindCard);
|
|
modal.querySelectorAll("[data-n-v-modal-close]").forEach((el) => {
|
|
el.addEventListener("click", closeModal);
|
|
});
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape" && !modal.hidden) closeModal();
|
|
});
|
|
}
|
|
$(function() {
|
|
setActiveNav();
|
|
newsDetailBackToggle();
|
|
initNewsTabs();
|
|
newsCardClick();
|
|
initNewsVideoModal();
|
|
});
|
|
//#endregion
|