https://www.pcsclassical.org/wp-content/themes/salient-child/short…/way-components-tabs.js?ver=1773685033

1function initSelects() {
2	const selects = document.querySelectorAll(".providence-select");
3
4	selects.forEach((select) => {
5		if (!select.classList.contains("choices-initialized")) {
6			new Choices(select, {
7				searchEnabled: false,
8				itemSelectText: "",
9				shouldSort: false,
10				position: "bottom",
11				classNames: {
12					containerOuter: "choices-providence-choices",
13				},
14			});
15			select.classList.add("choices-initialized");
16		}
17	});
18}
19
20function scrollToHero() {
21	setTimeout(() => {
22		const heroSection = document.querySelector(".providence-hero");
23		if (heroSection) {
24			const offset = heroSection.getBoundingClientRect().top + window.scrollY;
25			window.scrollTo({ top: offset, behavior: "smooth" });
26		}
27	}, 400);
28}
29
30function initViewSwitcher() {
31	const ageStage = document.getElementById("age-stage");
32	const componentSelector = document.getElementById("component-selector");
33	const tabButtons = document.querySelectorAll(".providence-tab-btn");
34
35	if (ageStage) {
36		ageStage.addEventListener("change", function () {
37			const slug = this.value;
38			const url = new URL(window.location.href);
39			url.searchParams.set("stage", slug);
40			url.searchParams.set("view", "stage");
41			window.location.href = url.toString();
42		});
43	}
44
45	if (componentSelector) {
46		componentSelector.addEventListener("change", function () {
47			const slug = this.value;
48			const url = new URL(window.location.href);
49			url.searchParams.set("component", slug);
50			url.searchParams.set("view", "component");
51			window.location.href = url.toString();
52		});
53	}
54
55	tabButtons.forEach((btn) => {
56		btn.addEventListener("click", function () {
57			const view = this.dataset.view;
58			const url = new URL(window.location.href);
59			url.searchParams.set("view", view);
60
61			if (view === "component") {
62				const firstComponent = document.querySelector(
63					"#component-selector option",
64				);
65				if (firstComponent)
66					url.searchParams.set("component", firstComponent.value);
67			} else if (view === "stage") {
68				const firstStage = document.querySelector("#age-stage option");
69				if (firstStage) url.searchParams.set("stage", firstStage.value);
70			}
71
72			window.location.href = url.toString();
73		});
74	});
75}
76
77function updateTabsWrapperTop() {
78	const header = document.querySelector(".site-header");
79	const tabsWrapper = document.querySelector(
80		".providence-tabs-wrapper.mobile-only",
81	);
82
83	if (!header || !tabsWrapper) return;
84
85	if (header.classList.contains("hide")) {
86		tabsWrapper.style.top = "0";
87	} else {
88		tabsWrapper.style.top = getComputedStyle(document.documentElement)
89			.getPropertyValue("--header-height")
90			.trim();
91	}
92}
93
94document.addEventListener("DOMContentLoaded", () => {
95	initSelects();
96	initViewSwitcher();
97	scrollToHero();
98
99	const activeTab = document.querySelector(".providence-tab-btn.active");
100	const hero = document.querySelector(".providence-hero");
101
102	if (activeTab && hero) {
103		const viewName = activeTab.dataset.view;
104		if (viewName) {
105			hero.classList.add(`hero--${viewName}`);
106		}
107	}
108});
109
110window.addEventListener("load", updateTabsWrapperTop);
111const header = document.querySelector(".site-header");
112if (header) {
113	const observer = new MutationObserver(updateTabsWrapperTop);
114	observer.observe(header, { attributes: true, attributeFilter: ["class"] });
115}