Merge pull request #92 from zachlasiuk/main

included dynamic description adding to file

themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/filter-dropdown-multilevel.html

@@ -3,6 +3,8 @@
 {{$group_display_name := .title}}
 {{$group_name := .title | urlize}}
 
+{{$all_description := "Filter by category and view the category description here."}}
+
 
 <ads-expansion-panel is-default-expanded class="learning-path-filters u-padding-bottom-1">
     <span slot="toggle">{{.title}}</span>
@@ -16,7 +18,7 @@
                         data-group-display-name="{{$group_display_name}}">
             </ads-select>
             <p id="{{$group_name}}-explaining" style="padding-top:16px;">
-                Filter by category and view the category description here.
+                {{$all_description}}
             </p>
         </div>
     </div>
@@ -26,6 +28,52 @@
 
 
 <script>
+
+    ///////////////////////////////////////////////////////////////
+    {{/* Create translation dictionary to properly map URLized names called during an event to their descriptions. */}}
+    {{ $data := index .items "category_list" }}
+
+    var nameToDescriptionMap = {
+        {{ range $data }}
+            {{ range .categories }}
+                {{ $replaced := replace .name "/" "__" }}               
+                {{ $name_urlized := $replaced | urlize }}
+
+                    "{{$name_urlized}}": "{{.description}}",
+
+            {{end}}
+        {{end}}
+    };
+
+    var nameToDisplayNameMap = {
+        {{ range $data }}
+            {{ range .categories }}
+                {{ $replaced := replace .name "/" "__" }}               
+                {{ $name_urlized := $replaced | urlize }}
+
+                    "{{$name_urlized}}": "{{.name}}",
+
+            {{end}}
+        {{end}}
+    };
+
+    ///////////////////////////////////////////////////////////////
+
+
+    // Function to translate URLized name to display name
+    function translate(urlizedName,type) {
+        if (type == "description") {
+            return nameToDescriptionMap[urlizedName] || "{{$all_description}}";
+        }
+        else if (type == "displayname") {
+            return nameToDisplayNameMap[urlizedName] || "All";
+        }
+        else {
+            return "Error in translation type.";
+            console.log('error in translation type.');
+        }
+    }
+
 
     function selectChangeHandler(evt) {
         const all_path_cards = document.querySelectorAll('div.search-div');
@@ -35,19 +83,23 @@
 
         // Update the facet
         var item_name = evt.detail.value;
+        var item_display_name = translate(item_name,'displayname');
         var group_name  = document.querySelector('#dropdown-category').getAttribute('data-group-display-name');
-        updateFacet(group_name,item_name);
+        updateFacet(group_name,item_display_name);
+
+        // Update category description
+        var category_paragraph = document.getElementById("{{$group_name}}-explaining");
+
+        var description = translate(item_name,'description');
+        category_paragraph.textContent = description; 
       };
 
 
     (() => {
+
         const select = document.getElementById('dropdown-{{$group_name}}');
         select.addEventListener('selectChange', selectChangeHandler);
 
-        {{ $data := index .items "category_list" }}
-
-
-
         select.items = [
             {
                 value: 'all',