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.6 KiB
125 lines
4.6 KiB
import "./common.js";
|
|
//#region assets/videos/banner.mp4
|
|
var banner_default = "" + new URL("../assets/banner-BKfbidi-.mp4", import.meta.url).href;
|
|
//#endregion
|
|
//#region js/video.js
|
|
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 initVideoModal() {
|
|
const modal = document.getElementById("v-modal");
|
|
const video = document.getElementById("v-modal-video");
|
|
const titleEl = document.getElementById("v-modal-title");
|
|
if (!modal || !video || !titleEl) return;
|
|
const defaultSrc = banner_default;
|
|
let lastFocus = null;
|
|
const openModal = (src, title) => {
|
|
lastFocus = document.activeElement;
|
|
titleEl.textContent = title || "视频播放";
|
|
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(".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();
|
|
};
|
|
document.querySelectorAll(".v-card").forEach((card) => {
|
|
card.addEventListener("click", () => {
|
|
openModal(card.getAttribute("data-video-src") || defaultSrc, card.querySelector(".v-card__title")?.textContent?.trim() || "视频播放");
|
|
});
|
|
});
|
|
modal.querySelectorAll("[data-v-modal-close]").forEach((el) => {
|
|
el.addEventListener("click", closeModal);
|
|
});
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape" && !modal.hidden) closeModal();
|
|
});
|
|
}
|
|
function initFilterDropdown() {
|
|
const $trigger = $("[data-filter-trigger]");
|
|
if (!$trigger.length) return;
|
|
const closeDropdown = () => {
|
|
$("[data-filter-dropdown]").prop("hidden", true);
|
|
$("[data-filter-trigger]").removeClass("is-open").attr("aria-expanded", "false");
|
|
};
|
|
$trigger.on("click", function() {
|
|
const $btn = $(this);
|
|
const $dropdown = $btn.next("[data-filter-dropdown]");
|
|
if (!$dropdown.prop("hidden")) closeDropdown();
|
|
else {
|
|
closeDropdown();
|
|
$btn.addClass("is-open").attr("aria-expanded", "true");
|
|
$dropdown.prop("hidden", false);
|
|
}
|
|
});
|
|
$("[data-filter-dropdown] button").on("click", function() {
|
|
const $item = $(this);
|
|
const $dropdown = $item.closest("[data-filter-dropdown]");
|
|
const $btn = $dropdown.prev("[data-filter-trigger]");
|
|
if ($item.is("[data-filter-clear]")) {
|
|
$btn.find("span").text("按产品筛选");
|
|
$btn.removeClass("is-selected");
|
|
$dropdown.find(".is-active").removeClass("is-active");
|
|
$item.addClass("is-active");
|
|
} else {
|
|
$item.addClass("is-active").siblings().removeClass("is-active");
|
|
$btn.find("span").text($item.text());
|
|
$btn.addClass("is-selected");
|
|
}
|
|
closeDropdown();
|
|
});
|
|
$(document).on("click", function(event) {
|
|
if (!$(event.target).closest("[data-filter-trigger], [data-filter-dropdown]").length) closeDropdown();
|
|
});
|
|
}
|
|
function getActiveTabId() {
|
|
return $("[data-filter-dropdown] .is-active[data-tab]").attr("data-tab") || "";
|
|
}
|
|
function activateTabById(tabId) {
|
|
if (!tabId) return;
|
|
const $item = $(`[data-filter-dropdown] [data-tab="${tabId}"]`).first();
|
|
if (!$item.length) return;
|
|
const $dropdown = $item.closest("[data-filter-dropdown]");
|
|
const $btn = $dropdown.prev("[data-filter-trigger]");
|
|
$item.addClass("is-active").siblings().removeClass("is-active");
|
|
$btn.find("span").text($item.text());
|
|
$btn.addClass("is-selected");
|
|
}
|
|
function initTabKeywordsSearch() {
|
|
$("[data-tab-search]").on("submit", function(event) {
|
|
event.preventDefault();
|
|
const params = new URLSearchParams();
|
|
const keywords = $(this).find('[name="keywords"]').val().trim();
|
|
const tabId = getActiveTabId();
|
|
if (tabId) params.set("cid", tabId);
|
|
if (keywords) params.set("keywords", keywords);
|
|
const query = params.toString();
|
|
window.location.href = query ? `${window.location.pathname}?${query}` : window.location.pathname;
|
|
});
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
const tabParam = searchParams.get("cid");
|
|
const keywordsParam = searchParams.get("keywords");
|
|
if (keywordsParam) $("[data-tab-search] [name='keywords']").val(keywordsParam);
|
|
if (tabParam) activateTabById(tabParam);
|
|
}
|
|
$(function() {
|
|
setActiveNav();
|
|
initVideoModal();
|
|
initFilterDropdown();
|
|
initTabKeywordsSearch();
|
|
});
|
|
//#endregion
|