Skip to content

Commit 10fc2f9

Browse files
chrisorbanchrisorban
committed
ok this should create a dropdown menu on activities.html when viewed on a smartphone
1 parent ca4b6a2 commit 10fc2f9

3 files changed

Lines changed: 151 additions & 2 deletions

File tree

‎activities.qmd‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,79 @@ listing:
4343
}
4444
}
4545

46-
</style>
46+
</style>
47+
48+
<script>
49+
document.addEventListener("DOMContentLoaded", () => {
50+
// Find all category elements in the sidebar
51+
const categoryElements = document.querySelectorAll(".quarto-listing-category .category");
52+
if (categoryElements.length === 0) return;
53+
54+
// Create the container for the mobile dropdown
55+
const dropdownContainer = document.createElement("div");
56+
dropdownContainer.className = "mobile-category-filter-container";
57+
58+
// Create the label
59+
const label = document.createElement("label");
60+
label.htmlFor = "mobile-category-select";
61+
label.textContent = "Filter by Category:";
62+
label.className = "mobile-category-label";
63+
dropdownContainer.appendChild(label);
64+
65+
// Create the select element
66+
const select = document.createElement("select");
67+
select.id = "mobile-category-select";
68+
select.className = "mobile-category-select";
69+
70+
// Populate the select element with options from categoryElements
71+
categoryElements.forEach((catEl) => {
72+
const option = document.createElement("option");
73+
// Extract full text content, e.g., "Advanced HS (26)" or "All (56)"
74+
const catName = catEl.textContent.replace(/\s+/g, ' ').trim();
75+
option.value = catEl.getAttribute("data-category") || "";
76+
option.textContent = catName;
77+
select.appendChild(option);
78+
});
79+
80+
dropdownContainer.appendChild(select);
81+
82+
// Insert the dropdown container right before the activities grid
83+
const listingContainer = document.querySelector("#listing-listing");
84+
if (listingContainer) {
85+
listingContainer.parentNode.insertBefore(dropdownContainer, listingContainer);
86+
}
87+
88+
// Handle dropdown selection change
89+
select.addEventListener("change", (e) => {
90+
const selectedVal = e.target.value;
91+
const targetCatEl = Array.from(categoryElements).find(
92+
(el) => (el.getAttribute("data-category") || "") === selectedVal
93+
);
94+
if (targetCatEl) {
95+
targetCatEl.click();
96+
}
97+
});
98+
99+
// Keep the select dropdown in sync if a category is clicked elsewhere (e.g. card badges)
100+
const observer = new MutationObserver(() => {
101+
const activeCatEl = document.querySelector(".quarto-listing-category .category.active");
102+
if (activeCatEl) {
103+
const activeVal = activeCatEl.getAttribute("data-category") || "";
104+
if (select.value !== activeVal) {
105+
select.value = activeVal;
106+
}
107+
} else {
108+
select.value = "";
109+
}
110+
});
111+
112+
const categoriesContainer = document.querySelector(".quarto-listing-category");
113+
if (categoriesContainer) {
114+
observer.observe(categoriesContainer, {
115+
attributes: true,
116+
subtree: true,
117+
attributeFilter: ["class"]
118+
});
119+
}
120+
});
121+
</script>

‎docs/activities.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,80 @@ <h1 class="title">Activities</h1>
256256
}
257257

258258
</style>
259+
<script>
260+
document.addEventListener("DOMContentLoaded", () => {
261+
// Find all category elements in the sidebar
262+
const categoryElements = document.querySelectorAll(".quarto-listing-category .category");
263+
if (categoryElements.length === 0) return;
264+
265+
// Create the container for the mobile dropdown
266+
const dropdownContainer = document.createElement("div");
267+
dropdownContainer.className = "mobile-category-filter-container";
268+
269+
// Create the label
270+
const label = document.createElement("label");
271+
label.htmlFor = "mobile-category-select";
272+
label.textContent = "Filter by Category:";
273+
label.className = "mobile-category-label";
274+
dropdownContainer.appendChild(label);
275+
276+
// Create the select element
277+
const select = document.createElement("select");
278+
select.id = "mobile-category-select";
279+
select.className = "mobile-category-select";
280+
281+
// Populate the select element with options from categoryElements
282+
categoryElements.forEach((catEl) => {
283+
const option = document.createElement("option");
284+
// Extract full text content, e.g., "Advanced HS (26)" or "All (56)"
285+
const catName = catEl.textContent.replace(/\s+/g, ' ').trim();
286+
option.value = catEl.getAttribute("data-category") || "";
287+
option.textContent = catName;
288+
select.appendChild(option);
289+
});
290+
291+
dropdownContainer.appendChild(select);
292+
293+
// Insert the dropdown container right before the activities grid
294+
const listingContainer = document.querySelector("#listing-listing");
295+
if (listingContainer) {
296+
listingContainer.parentNode.insertBefore(dropdownContainer, listingContainer);
297+
}
298+
299+
// Handle dropdown selection change
300+
select.addEventListener("change", (e) => {
301+
const selectedVal = e.target.value;
302+
const targetCatEl = Array.from(categoryElements).find(
303+
(el) => (el.getAttribute("data-category") || "") === selectedVal
304+
);
305+
if (targetCatEl) {
306+
targetCatEl.click();
307+
}
308+
});
309+
310+
// Keep the select dropdown in sync if a category is clicked elsewhere (e.g. card badges)
311+
const observer = new MutationObserver(() => {
312+
const activeCatEl = document.querySelector(".quarto-listing-category .category.active");
313+
if (activeCatEl) {
314+
const activeVal = activeCatEl.getAttribute("data-category") || "";
315+
if (select.value !== activeVal) {
316+
select.value = activeVal;
317+
}
318+
} else {
319+
select.value = "";
320+
}
321+
});
322+
323+
const categoriesContainer = document.querySelector(".quarto-listing-category");
324+
if (categoriesContainer) {
325+
observer.observe(categoriesContainer, {
326+
attributes: true,
327+
subtree: true,
328+
attributeFilter: ["class"]
329+
});
330+
}
331+
});
332+
</script>
259333

260334

261335

0 commit comments

Comments
 (0)