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.
131 lines
5.0 KiB
131 lines
5.0 KiB
import "./common.js";
|
|
//#region js/download.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() {
|
|
setActiveNav();
|
|
const activateTab = ($btn) => {
|
|
$btn.addClass("is-active").attr("aria-selected", "true");
|
|
$(".d-tabs__item").not($btn).removeClass("is-active").attr("aria-selected", "false");
|
|
};
|
|
const closeDropdowns = () => {
|
|
$("[data-dropdown]").prop("hidden", true);
|
|
$("[data-dropdown-trigger]").removeClass("is-open").attr("aria-expanded", "false");
|
|
};
|
|
const getActiveTabId = () => {
|
|
const $active = $(".d-tabs__item.is-active").first();
|
|
const $group = $active.closest(".d-tabs__group");
|
|
if ($group.length) {
|
|
const $activeChild = $group.find(".d-tabs__dropdown-item.is-active[data-tab]").first();
|
|
if ($activeChild.length) return $activeChild.attr("data-tab") || "";
|
|
}
|
|
return $active.attr("data-tab") || "";
|
|
};
|
|
const getKeywords = () => $("[data-tab-search] [name='keywords']").val().trim();
|
|
const getCurrentPage = () => {
|
|
const activePage = Number($(".d-pagination__page.is-active").attr("data-page") || 1);
|
|
return Number.isFinite(activePage) && activePage > 0 ? activePage : 1;
|
|
};
|
|
const getMaxPage = () => {
|
|
let max = 1;
|
|
$(".d-pagination__page[data-page]").each(function() {
|
|
const page = Number($(this).attr("data-page") || 0);
|
|
if (page > max) max = page;
|
|
});
|
|
return max;
|
|
};
|
|
const buildQueryUrl = ({ tabId = getActiveTabId(), keywords = getKeywords(), page } = {}) => {
|
|
const params = new URLSearchParams();
|
|
if (tabId) params.set("cid", tabId);
|
|
if (keywords) params.set("keywords", keywords);
|
|
if (page && Number(page) > 1) params.set("page", String(page));
|
|
const query = params.toString();
|
|
return query ? `${window.location.pathname}?${query}` : window.location.pathname;
|
|
};
|
|
const goToPage = (page) => {
|
|
const nextPage = Number(page);
|
|
if (!Number.isFinite(nextPage) || nextPage < 1) return;
|
|
window.location.href = buildQueryUrl({ page: nextPage });
|
|
};
|
|
const activateTabById = (tabId) => {
|
|
if (!tabId) return;
|
|
const $dropdownItem = $(`.d-tabs__dropdown-item[data-tab="${tabId}"]`).first();
|
|
if ($dropdownItem.length) {
|
|
$dropdownItem.addClass("is-active").siblings().removeClass("is-active");
|
|
const $trigger = $dropdownItem.closest(".d-tabs__group").find("[data-dropdown-trigger]");
|
|
$trigger.find("span").text($dropdownItem.text());
|
|
activateTab($trigger);
|
|
return;
|
|
}
|
|
const $target = $(`.d-tabs__item[data-tab="${tabId}"]`).first();
|
|
if ($target.length) activateTab($target);
|
|
};
|
|
const activatePageById = (page) => {
|
|
const pageNum = Number(page) || 1;
|
|
const $target = $(`.d-pagination__page[data-page="${pageNum}"]`).first();
|
|
if (!$target.length) return;
|
|
$(".d-pagination__page").removeClass("is-active").removeAttr("aria-current");
|
|
$target.addClass("is-active").attr("aria-current", "page");
|
|
$("[data-page-prev]").prop("disabled", pageNum <= 1);
|
|
$("[data-page-next]").prop("disabled", pageNum >= getMaxPage());
|
|
};
|
|
$(".d-tabs__item:not([data-dropdown-trigger])").on("click", function() {
|
|
activateTab($(this));
|
|
closeDropdowns();
|
|
});
|
|
$("[data-dropdown-trigger]").on("click", function() {
|
|
const $btn = $(this);
|
|
const $dropdown = $btn.next("[data-dropdown]");
|
|
if (!$dropdown.prop("hidden")) closeDropdowns();
|
|
else {
|
|
closeDropdowns();
|
|
$btn.addClass("is-open").attr("aria-expanded", "true");
|
|
$dropdown.prop("hidden", false);
|
|
}
|
|
});
|
|
$(".d-tabs__dropdown-item").on("click", function() {
|
|
const $item = $(this);
|
|
$item.addClass("is-active").siblings().removeClass("is-active");
|
|
const $trigger = $item.closest(".d-tabs__group").find("[data-dropdown-trigger]");
|
|
$trigger.find("span").text($item.text());
|
|
activateTab($trigger);
|
|
closeDropdowns();
|
|
});
|
|
$(document).on("click", function(event) {
|
|
if (!$(event.target).closest(".d-tabs__group").length) closeDropdowns();
|
|
});
|
|
$("[data-tab-search]").on("submit", function(event) {
|
|
event.preventDefault();
|
|
window.location.href = buildQueryUrl({
|
|
tabId: getActiveTabId(),
|
|
keywords: $(this).find('[name="keywords"]').val().trim()
|
|
});
|
|
});
|
|
$(".d-pagination__page").on("click", function() {
|
|
const page = $(this).attr("data-page");
|
|
if (!page || $(this).hasClass("is-active")) return;
|
|
goToPage(page);
|
|
});
|
|
$("[data-page-prev]").on("click", function() {
|
|
if ($(this).prop("disabled")) return;
|
|
goToPage(getCurrentPage() - 1);
|
|
});
|
|
$("[data-page-next]").on("click", function() {
|
|
if ($(this).prop("disabled")) return;
|
|
goToPage(getCurrentPage() + 1);
|
|
});
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
const tabParam = searchParams.get("cid");
|
|
const keywordsParam = searchParams.get("keywords");
|
|
const pageParam = searchParams.get("page");
|
|
if (keywordsParam) $("[data-tab-search] [name='keywords']").val(keywordsParam);
|
|
if (tabParam) activateTabById(tabParam);
|
|
activatePageById(pageParam || 1);
|
|
});
|
|
//#endregion
|