|
|
@ -1,4 +1,11 @@ |
|
|
//#region js/news.js
|
|
|
//#region js/news.js
|
|
|
|
|
|
var NEWS_CATEGORY_PARAM = "cat"; |
|
|
|
|
|
var NEWS_CATEGORIES = [ |
|
|
|
|
|
"all", |
|
|
|
|
|
"insight", |
|
|
|
|
|
"company", |
|
|
|
|
|
"event" |
|
|
|
|
|
]; |
|
|
function setActiveNav() { |
|
|
function setActiveNav() { |
|
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
|
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
|
|
if (!pageNav) return; |
|
|
if (!pageNav) return; |
|
|
@ -20,16 +27,94 @@ function newsDetailBackToggle() { |
|
|
else back.removeAttribute("tabindex"); |
|
|
else back.removeAttribute("tabindex"); |
|
|
}, { threshold: 1 }).observe(pager); |
|
|
}, { threshold: 1 }).observe(pager); |
|
|
} |
|
|
} |
|
|
|
|
|
var featuredSwiper = null; |
|
|
|
|
|
function getCategoryFromQuery() { |
|
|
|
|
|
const cat = new URLSearchParams(window.location.search).get(NEWS_CATEGORY_PARAM); |
|
|
|
|
|
if (!cat || cat === "all") return "all"; |
|
|
|
|
|
return NEWS_CATEGORIES.includes(cat) ? cat : "all"; |
|
|
|
|
|
} |
|
|
|
|
|
function setCategoryInUrl(cat) { |
|
|
|
|
|
const url = new URL(window.location.href); |
|
|
|
|
|
if (!cat || cat === "all") url.searchParams.delete(NEWS_CATEGORY_PARAM); |
|
|
|
|
|
else url.searchParams.set(NEWS_CATEGORY_PARAM, cat); |
|
|
|
|
|
window.history.replaceState(null, "", url); |
|
|
|
|
|
} |
|
|
|
|
|
function activateTab(cat) { |
|
|
|
|
|
document.querySelectorAll(".n-tabs__item").forEach((btn) => { |
|
|
|
|
|
const isActive = (btn.dataset.cat || "all") === cat; |
|
|
|
|
|
btn.classList.toggle("is-active", isActive); |
|
|
|
|
|
btn.setAttribute("aria-selected", isActive ? "true" : "false"); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
function filterNews(cat) { |
|
|
|
|
|
const isMatch = (itemCat) => cat === "all" || itemCat === cat; |
|
|
|
|
|
document.querySelectorAll(".n-featured__slide[data-category]").forEach((slide) => { |
|
|
|
|
|
slide.hidden = !isMatch(slide.dataset.category); |
|
|
|
|
|
}); |
|
|
|
|
|
document.querySelectorAll(".n-card[data-category]").forEach((card) => { |
|
|
|
|
|
card.hidden = !isMatch(card.dataset.category); |
|
|
|
|
|
}); |
|
|
|
|
|
const featured = document.querySelector(".n-featured"); |
|
|
|
|
|
if (!featured) return; |
|
|
|
|
|
featured.hidden = featured.querySelectorAll(".n-featured__slide:not([hidden])").length === 0; |
|
|
|
|
|
} |
|
|
|
|
|
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 applyCategory(cat) { |
|
|
|
|
|
activateTab(cat); |
|
|
|
|
|
filterNews(cat); |
|
|
|
|
|
updateFeaturedSwiper(); |
|
|
|
|
|
} |
|
|
|
|
|
function initNewsTabs() { |
|
|
|
|
|
const tabs = document.querySelector(".n-tabs"); |
|
|
|
|
|
if (!tabs) return; |
|
|
|
|
|
applyCategory(getCategoryFromQuery()); |
|
|
|
|
|
tabs.addEventListener("click", (event) => { |
|
|
|
|
|
const btn = event.target.closest(".n-tabs__item"); |
|
|
|
|
|
if (!btn) return; |
|
|
|
|
|
const cat = btn.dataset.cat || "all"; |
|
|
|
|
|
setCategoryInUrl(cat); |
|
|
|
|
|
applyCategory(cat); |
|
|
|
|
|
}); |
|
|
|
|
|
window.addEventListener("popstate", () => { |
|
|
|
|
|
applyCategory(getCategoryFromQuery()); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
function newsCardClick() { |
|
|
function newsCardClick() { |
|
|
$(".n-card, .n-featured").on("click", function(event) { |
|
|
$(".n-card, .n-featured").on("click", function(event) { |
|
|
if ($(event.target).closest("a, button").length) return; |
|
|
if ($(event.target).closest("a, button").length) return; |
|
|
const href = $(this).find("a[href]").attr("href"); |
|
|
|
|
|
|
|
|
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; |
|
|
if (href) window.location.href = href; |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
$(function() { |
|
|
$(function() { |
|
|
setActiveNav(); |
|
|
setActiveNav(); |
|
|
newsDetailBackToggle(); |
|
|
newsDetailBackToggle(); |
|
|
|
|
|
initNewsTabs(); |
|
|
newsCardClick(); |
|
|
newsCardClick(); |
|
|
}); |
|
|
}); |
|
|
//#endregion
|
|
|
//#endregion
|
