Glossary

` }); var allTags = ["terms","offices"]; const generateGlossary = (glossary) => { // Since more arrays are merged, sorting can only be done client-side // otherwise it could done trough REST API (server processing is soooo much faster!) // Time complexity of sorting is O(n log n) - but it slightly differs across browsers // @see: https://stackoverflow.com/questions/57763205/what-is-array-prototype-sort-time-complexity // Sorting needs to be done case-insensitive // @see: https://stackoverflow.com/questions/8996963/how-to-perform-case-insensitive-sorting-array-of-string-in-javascript glossary.sort((a,b) => a.term.localeCompare(b.term, 'en', {'sensitivity': 'base'}) ) // Build filter buttons var tgtTagFilter = document.querySelector("#glossary-filter"); allTags.forEach(tag => { tgtTagFilter.innerHTML += ` ${tag} `; }) // Add content var tgtContent = document.querySelector("#glossary-content"); var anchorLetter = undefined; glossary.forEach(entry => { let firstChar = entry.term.charAt(0).toUpperCase(); if(firstChar !== anchorLetter){ anchorLetter = firstChar; tgtContent.innerHTML += ``; } tgtContent.innerHTML += ` `; }) // Add event listeners to filters tgtTagFilter.querySelectorAll("input").forEach(filterBtn => { filterBtn.addEventListener("click",filterGlossary) }) // Now display everything document.querySelector("#placeholder").classList.add("d-none"); document.querySelector("#glossary").classList.remove("d-none"); // Allow filtering function filterGlossary(){ var activeTags = [...tgtTagFilter.querySelectorAll("input:checked + span")].map(span => span.innerText); tgtContent.querySelectorAll("[data-tags]").forEach(entry => { entry.classList.add("d-none"); if(activeTags.some(tag => entry.dataset.tags.includes(tag))){ entry.classList.remove("d-none"); } }) } // Regenerate Anchors (override NIHOD5 drupal behavior) tgtContent.querySelectorAll("h5").forEach((anchorElement) => { let innerText = anchorElement.innerText; let anchor = innerText.replace(/\s+/g, ''); anchorElement.setAttribute("id", anchor) anchorElement.innerHTML += `#`; //anchorElement.classList.add("anchor"); }); // Hijack Broswer scroll in favor of JS scroll (needed because glossary needs to load first) if(window.location.hash){ setTimeout(() => { let tgt = window.location.hash.substring(1); document.getElementById(tgt).scrollIntoView({ behavior: "instant", block: "start" }); },100); } // Auto-filter if url contains query params if(window.location.search){ setTimeout(() => { let params = new URLSearchParams(window.location.search); let tags = params.get('tags'); if(tags){ document.querySelector("#glossary-filter").querySelectorAll("input").forEach(tag => tag.click()); tags.split(",").forEach(tag => document.querySelector(`#glossary-filter [value="${tag}"]`).click()); } },100); } } var data = JSON.parse(localStorage.getItem('glossary_all')); // Check for glossary data in the localStorage // this will prevent multiple refetches per user - greatly reducing API load if (!data){ // Get Terms // !!!! (use below endpoint when glossary API app is made public) !!!! //let terms = fetch("https://glossary.od.nih.gov/items/terms?fields=term,definition,destination&filter[status][_eq]=published&limit=-1") let terms = fetch("/__extra/data-glossary/terms.json") .then(r => r.json()) .then(d => { // We need to filter by the destination field so that entries only display for this domain. // Note: filtering a JSON stored value through the API request is not possible atm // @see: https://github.com/directus/directus/issues/12496 // @see: https://github.com/directus/directus/issues/22176 // Delete this step when above functionality becomes available // as data processing at a server level is SO much faster! var host = window.location.host; return d.data.filter(entry => { // Add syntetic tag for all entries entry["tags"] = ["terms"]; if(["all",host].some(v => entry.destination.includes(v))) return entry; }) }); // Get Acronyms // !!!! (use below endpoint when glossary API app is made public) !!!! //let acronyms = fetch("https://glossary.od.nih.gov/items/acronyms?fields=term,definition,tags&limit=-1") /*let acronyms = fetch("/__extra/data-glossary/acronyms.json") .then(r => r.json()) .then(d => { d.data.forEach(entry => { // Add synthetic tag for all entries entry.tags.push("acronyms"); // Check the tags field and extract unique ones if(entry.tags.length) entry.tags.forEach(tag => { if(!allTags.includes(tag)) allTags.push(tag) }); return entry; }) return d.data; })*/ // Get Offices // !!!! (use below endpoint when glossary API app is made public) !!!! //let offices = fetch("https://glossary.od.nih.gov/items/offices?fields=term,definition,org_code,url,tags&limit=-1") let offices = fetch("/__extra/data-glossary/offices.json") .then(r => r.json()) .then(d => { d.data.forEach(entry => { // Add syntetic tag for all entries entry.tags.push("offices"); // Check the tags field and extract unique ones if(entry.tags.length) entry.tags.forEach(tag => { if(!allTags.includes(tag)) allTags.push(tag) }) }) return d.data; }) // Do beatiful things with the data Promise.all([terms, offices]).then(values => { let data = values.flat(); localStorage.setItem('glossary_all', JSON.stringify(data)); generateGlossary(data); }); }else{ let data = JSON.parse(localStorage.getItem('glossary_all')); generateGlossary(data) }