Add filtering to external resources on toolkit page

_includes/current-guides.html

@@ -1,7 +1,7 @@
 <div class="toolkit-background">
     <a class="anchor" id="guides"></a>
     <section class="toolkit-content-container filter-content-container content-section">
-        <div>
+        <div class="toolkit-content-filter-container">
             <nav class="filter-toolbar toolkit-filters" aria-label="Filter Navbar">
                 <div class="filtersDiv filtersDiv-background">
                     <h3 class="filters-title">
@@ -66,7 +66,7 @@ <h2 class="external-resources-text title3">External Resources</h2>
                     <!-- Searching through toolkitResources collection -->
                     {%- for item in site.data.internal.toolkitresources -%}
                     {%- if item.display == true -%}
-                    <div data-article-type={{ item.practice-area | downcase | remove: ' ' }} class="toolkit-flex-item section-container">
+                    <div data-practice-Areas="{{ item.practice-area }}" data-project-Tools="{{ item.tools }}" class="toolkit-flex-item section-container toolkit-resource-card">
                         {%- if item.svg -%}
                         <div class="toolkit-flex-item-img-container resource-svg-icons">
                         {% include {{ item.svg }} %}

_sass/components/_toolkit.scss

@@ -46,6 +46,13 @@
     color: $color-white;
     margin-bottom: 0;
 }
+.toolkit-content-filter-container {
+    flex-basis: 392px;
+}
+
+.toolkit__card-list{
+    flex-basis: 1152px;
+}
 
 .toolkit-flex-container {
     display: grid;
@@ -104,12 +111,12 @@
     margin: 0 auto;
 }
 
-[data-article-type="development"] .resource-svg-icons svg{
+.toolkit-resource-card[data-project-tools="GitHub"] .resource-svg-icons svg{
     width: 50%;
     height: 50%;
 }
 
-[data-article-type="development"] .toolkit-flex-item-img-container{
+.toolkit-resource-card[data-project-tools="GitHub"] .toolkit-flex-item-img-container{
     display: flex;
     align-items: center;
     justify-content: center;

assets/js/toolkit.js

@@ -55,6 +55,8 @@ document.addEventListener("DOMContentLoaded", () => {
 function retrieveFilterCategories() {
     {% assign projects = site.guide-pages | where: "display", "true" %}
     let projects = JSON.parse(decodeURIComponent("{{ projects | jsonify | uri_escape }}"))
+    {% assign resources = site.data.internal.toolkitresources | where: "display", true %}
+    const resources = JSON.parse(decodeURIComponent("{{ resources | jsonify | uri_escape }}"))
 
     const practiceAreas = []
     const projectStatus = []
@@ -108,6 +110,23 @@ function retrieveFilterCategories() {
             }
         }
     }
+
+    resources.forEach(resource => {
+    const practiceArea = resource["practice-area"]
+
+    if (practiceArea && !practiceAreas.includes(practiceArea)) {
+        practiceAreas.push(practiceArea)
+    }
+
+    if (resource["tools"]) {
+        resource["tools"].forEach(tool => {
+            if (tool && !projectTools.includes(tool)) {
+                projectTools.push(tool)
+            }
+        })
+    }
+})
+
     return {projectStatus, practiceAreas, projectTools, projectResourceType, projectTechnologies, projectSource, projectContributors}
 }
 
@@ -192,11 +211,11 @@ function initializeFilters() {
 function applyFilters(filtersParams) {
     // Show all cards if there are no active filters
     if (Object.values(filtersParams).every(x => x.length === 0)) {
-        document.querySelectorAll(".guide-card").forEach(card => {
+        document.querySelectorAll(".guide-card, .toolkit-resource-card").forEach(card => {
             card.style.display = 'block'
         })
     } else {
-        document.querySelectorAll(".guide-card").forEach(card => {
+        document.querySelectorAll(".guide-card, .toolkit-resource-card").forEach(card => {
             card.style.display = 'block'
             for (let key in filtersParams) {
                 let filterList
@@ -219,7 +238,8 @@ function applyFilters(filtersParams) {
                             }
                         })
                     }
-                    if (!(filterList.some(data => card.dataset[key].includes(data)))) {
+                    const cardFilterValue = card.dataset[key] ?? ''
+                    if (!(filterList.some(data => cardFilterValue.includes(data)))) {
                         card.style.display = 'none'
                     }
                 }
@@ -243,7 +263,7 @@ function applyFilters(filtersParams) {
     attachEventListenerToFilterTags(filtersParams)
 
     // Displays no results message if no matches and 2nd parameter is querySelector name
-    toggleNoResultMsgIfNoMatch(filtersParams, 'guide-card')
+    toggleNoResultMsgIfNoMatch(filtersParams, ['guide-card', 'toolkit-resource-card'])
 }
 
 // Apply current filters to URL
@@ -279,10 +299,7 @@ function applyURLtoFilters(filterParams) {
 // Computes and returns the frequency of each checkbox filter that are currently present on the displayed cards on the page
 function updateFilterFrequency() {
     const onPageFilters = []
-    const guideCards = document.querySelectorAll('.guide-card')
-    const guideCardsArray = Array.from(guideCards)
-    const visibleGuideCards = guideCardsArray.filter(card => card.style.display === 'block')
-    document.querySelectorAll('.guide-card[style*="display: block"]').forEach(card => {
+    document.querySelectorAll('.guide-card[style*="display: block"], .toolkit-resource-card[style*="display: block"]').forEach(card => {
         for(const [key, value] of Object.entries(card.dataset)) {
             value.split(",").map(item => {
                 if (item.toLowerCase() === 'completed') {
@@ -499,9 +516,15 @@ function tabFocusedKeyDownHandler(e) {
 }
 
 //controls if no results message should display if no results match from filter selection
-function toggleNoResultMsgIfNoMatch(filtersParams,querySelector) {
-    if ([...document.querySelectorAll(`.${querySelector}`)].every(card => card.style.display === 'none')) {
-        noResultsMessageComponent(filtersParams,'white')
+function toggleNoResultMsgIfNoMatch(filtersParams, querySelector) {
+    const selectedSelectors = Array.isArray(querySelector) ? querySelector : [querySelector]
+
+    const cards = selectedSelectors.flatMap(selector =>
+        [...document.querySelectorAll(`.${selector}`)]
+    )
+
+    if (cards.length === 0 || cards.every(card => card.style.display === 'none')) {
+        noResultsMessageComponent(filtersParams, 'white')
     } else {
         document.querySelector(".no-results-message").innerHTML = ""
     }