Glossary

`; } // Add glossary entry glossaryContentContainer.innerHTML += ` `; }); // Add event listeners to filter buttons const filterButtons = tagFilterContainer.querySelectorAll("input"); filterButtons.forEach((filterBtn) => { filterBtn.addEventListener("click", filterGlossary); }); // Display glossary and hide placeholder document.querySelector("#placeholder").classList.add("d-none"); document.querySelector("#glossary").classList.remove("d-none"); // Keyword filtering const keywordFilterInput = document.querySelector("#keyword-filter input"); keywordFilterInput.addEventListener("keyup", (e) => { const searchTerm = e.target.value.toLowerCase(); const entries = document.querySelectorAll( "#glossary-content [data-tags]:not(.tag-filtered)" ); entries.forEach((entry) => { const text = entry.firstElementChild.textContent.toLowerCase(); if (text.includes(searchTerm) || !searchTerm.length) { entry.classList.remove("d-none"); } else { entry.classList.add("d-none"); } }); }); // Tag filtering function function filterGlossary() { const activeTags = [...tagFilterContainer.querySelectorAll("input:checked + span")] .map((span) => span.innerText.toLowerCase()); const entries = glossaryContentContainer.querySelectorAll("[data-tags]"); entries.forEach((entry) => { entry.classList.add("d-none", "tag-filtered"); if (activeTags.some((tag) => entry.dataset.tags.includes(tag))) { entry.classList.remove("d-none", "tag-filtered"); } }); } // Regenerate anchors glossaryContentContainer.querySelectorAll("h5").forEach((anchorElement) => { const innerText = anchorElement.innerText; const anchor = innerText.replace(/\s+/g, ""); anchorElement.setAttribute("id", anchor); anchorElement.innerHTML += `#`; }); // Hijack browser scroll if (window.location.hash) { setTimeout(() => { const targetId = window.location.hash.substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: "instant", block: "start" }); } }, 100); } // Auto-filter based on query params if (window.location.search) { setTimeout(() => { const params = new URLSearchParams(window.location.search); const tagsParam = params.get("tags"); if (tagsParam) { const allCheckboxes = tagFilterContainer.querySelectorAll("input"); allCheckboxes.forEach((checkbox) => checkbox.click()); tagsParam.split(",").forEach((tag) => { const tagCheckbox = tagFilterContainer.querySelector(`[value="${tag}"]`); if (tagCheckbox) { tagCheckbox.click(); } }); } }, 100); } }; // Using sessionStorage to ease out on the API requests a bit. // Directus API currently not working, bug. See more @https://github.com/directus/directus/issues/20176 let glossaryData = JSON.parse(sessionStorage.getItem('glossary_data_all')); if (glossaryData) { generateGlossary(glossaryData); } else { // Fetch terms const termsPromise = fetch("/api/glossary/terms?fields=term,acronym,definition,destination,tags&filter[status][_eq]=published&limit=-1") .then((r) => r.json()) .then((d) => { const host = window.location.host; return d.data.filter((entry) => { entry.acronym ? entry.tags.push("acronym") : entry.tags.push("term"); if (["all", host].some((v) => entry.destination.includes(v))) { return entry; } }); }) .catch((error) => { console.error("Error fetching terms:", error); }); // Fetch offices const officesPromise = fetch("/api/glossary/offices?limit=-1") .then((r) => r.json()) .then((d) => { d.data.forEach((entry) => { entry.acronym ? entry.tags.push("acronym") : entry.tags.push("term"); if (entry.tags.length) { entry.tags.forEach((tag) => { if (!allTags.includes(tag)) { allTags.push(tag); } }); } }); return d.data; }) .catch((error) => { console.error("Error fetching offices:", error); }); // Process data and generate glossary Promise.all([termsPromise, officesPromise]).then((values) => { const data = values.flat(); sessionStorage.setItem('glossary_data_all', JSON.stringify(data)); generateGlossary(data); }); }