Directory filtering (#202)

* fix hugo toml * fix post types * display author and tag information correctly * improve directory filtering. fix #182
rladies · Aug 14, 2023 · 3c73a15 · 3c73a15
1 parent 2c88dce
commit 3c73a15
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 33 deletions.
diff --git a/themes/hugo-rladies/layouts/directory/single.html b/themes/hugo-rladies/layouts/directory/single.html
@@ -61,18 +61,18 @@ <h3>{{ i18n "counter_entries" | markdownify }}</h3>
         <div class="input-group-prepend" for="filter-interests">
           <label class="input-group-text" style="min-width:120px;" >Interests</label>
         </div>
-        <select class="custom-select" id="filter-interests" multiple="multiple">
+        <select class="custom-select" id="filter-interests" multiple data-group="interests">
           {{ range $ints }}
             <option value="{{. | urlize }}" >{{.}}</option>
           {{ end }}
         </select>
       </div>
 
       <div class="input-group">
-        <div class="input-group-prepend" for="filter-language">
+        <div class="input-group-prepend" for="filter-languages">
           <label class="input-group-text" style="min-width:120px;" >Languages</label>
         </div>
-        <select class="custom-select" id="filter-language" multiple="multiple">
+        <select class="custom-select" id="filter-languages" multiple data-group="languages">
           {{ range $langs }}
               <option value="{{. | urlize }}" >{{.}}</option>
           {{ end }}
@@ -83,7 +83,7 @@ <h3>{{ i18n "counter_entries" | markdownify }}</h3>
         <div class="input-group-prepend" for="filter-location">
           <label class="input-group-text" style="min-width:120px;" >Location</label>
         </div>
-        <select class="custom-select" id="filter-location" multiple="multiple">
+        <select class="custom-select" id="filter-location" multiple data-group="location">
           {{ range $countries }}
             {{ $c := . }}
             <optgroup label="{{$c}}" class="{{$c}}">
@@ -108,26 +108,56 @@ <h3>{{ i18n "counter_entries" | markdownify }}</h3>
           {{ end }}
       </ul>
     </div>
-  </div> 
+  </div>
 {{ end }}
 
 {{ define  "footer" }}
-{{ if eq hugo.Environment "production" }}
-  {{ .Scratch.Set "n_page_directory" 25}}
-{{ else }}
-  {{ .Scratch.Set "n_page_directory" 5}}
-{{ end }} 
-
 <script type="text/javascript">
+
   $(document).ready(function() {
-    $('.custom-select').multiselect({
+    $('[id^="filter-"]').multiselect({
       includeSelectAllOption: true,
       maxHeight: 300,
       enableFiltering: true,
       enableClickableOptGroups: true,
       enableCollapsibleOptGroups: true
     });
     $('.form-check-input').attr('name', 'shuffle-filter');
+
+    // Attach event listeners to the multiselect change event
+    $('[id^="filter-"]').on('change', applyFilters);
+
+    // Select the container for shuffle items
+    const shuffleContainer = document.getElementById('directory-grid');
+
+    // Initialize Shuffle.js
+    const shuffleInstance = new Shuffle(shuffleContainer, {
+      itemSelector: '.shuffle-item',
+      buffer: 1,
+      isCentered: true
+    });
+
+    // Function to apply filters
+    function applyFilters() {
+      // Get selected values from multiselects || Default to empty array if no values selected
+      const interests = $('#filter-interests').val() || []; 
+      const languages = $('#filter-languages').val() || [];
+      const locations = $('#filter-location').val() || [];
+
+      // Use Shuffle.js filter method
+      shuffleInstance.filter(item => {
+        const itemInterests = JSON.parse(item.getAttribute('data-interests'));
+        const itemLanguages = JSON.parse(item.getAttribute('data-languages'));
+        const itemLocations = JSON.parse(item.getAttribute('data-location'));
+
+        // Check if item passes the selected filters
+        return (
+          (interests.length === 0 || interests.some(i => itemInterests.includes(i))) &&
+          (languages.length === 0 || languages.some(l => itemLanguages.includes(l))) &&
+          (locations.length === 0 || locations.some(loc => itemLocations.includes(loc)))
+        );
+      });
+    }
   });
 </script>
 {{ end }}
diff --git a/themes/hugo-rladies/layouts/partials/footer/scripts.html b/themes/hugo-rladies/layouts/partials/footer/scripts.html
@@ -21,21 +21,5 @@
     });
 </script>
 
-<script>
-var containerEl = document.querySelector('.shuffle-wrapper');
-if (containerEl) {
-  var Shuffle = window.Shuffle;
-  var myShuffle = new Shuffle(document.querySelector('.shuffle-wrapper'), {
-    itemSelector: '.shuffle-item',
-    buffer: 1,
-    isCentered: true
-  });
-  jQuery('.custom-select').on('change', function (evt) {
-    var i = $('.custom-select option:selected').map(function(a, item){return item.value;});
-    console.log(i);
-    myShuffle.filter(i.get());
-  });
-}
-</script>
 <script type="text/javascript" src="{{ "js/counter.js" | relURL }}"></script>
 
diff --git a/themes/hugo-rladies/layouts/partials/footer/shuffle.html b/themes/hugo-rladies/layouts/partials/footer/shuffle.html
@@ -0,0 +1,15 @@
+<script>
+var containerEl = document.querySelector('.shuffle-wrapper');
+if (containerEl) {
+  var Shuffle = window.Shuffle;
+  var myShuffle = new Shuffle(document.querySelector('.shuffle-wrapper'), {
+    itemSelector: '.shuffle-item',
+    buffer: 1,
+    isCentered: true
+  });
+  jQuery('.custom-select').on('change', function (evt) {
+    var i = $('.custom-select option:selected').map(function(a, item){return item.value;});
+    myShuffle.filter(i.get());
+  });
+}
+</script>
diff --git a/themes/hugo-rladies/layouts/partials/funcs/card-expand.html b/themes/hugo-rladies/layouts/partials/funcs/card-expand.html
@@ -11,7 +11,7 @@
     {{ $tags = $tags | append $split }}
 {{ end }}
 
-<li class="shuffle-item card-expand rounded card-{{ $size }} card" {{ with .id }} id="{{  . | htmlUnescape | urlize }}" {{ end }} data-groups="[{{ with .shuffle }} {{range  $index, $tags := . }}{{if ne $index 0}},{{end}}&quot;{{$tags | urlize}}&quot;{{ end }}{{ end}}]" >
+<li class="shuffle-item card-expand rounded card-{{ $size }} card" {{ with .id }} id="{{  . | htmlUnescape | urlize }}" {{ end }} {{ range $key, $value := .shuffle }} data-{{ $key }}="[{{range  $index, $tags := $value }}{{if ne $index 0}},{{end}}&quot;{{$tags | urlize}}&quot;{{ end }}]"{{ end }} >
   <div class="card-expand-img rounded-top">
     <img src="{{ $image }}"/>
   </div>

diff --git a/themes/hugo-rladies/layouts/partials/funcs/directory/card.html b/themes/hugo-rladies/layouts/partials/funcs/directory/card.html
@@ -21,14 +21,20 @@
   {{ $dir.Set "img" $image.RelPermalink }}
 {{ end }}
 
+{{ $interests := dict "interests" "" }}
 {{ with .data.interests }}
-  {{ $dir.Add "shuffle" . }}
+  {{ $dir.Set "interests" .}}
 {{ end }}
+{{ $interests := dict "interests" ($dir.Get "interests") }}
 
+{{ $languages := dict "languages" "" }}
 {{ with .data.languages }}
-  {{ $dir.Add "shuffle" . }}
+  {{ $dir.Set "languages" .}}
 {{ end }}
+{{ $languages := dict "languages" ($dir.Get "languages") }}
 
+
+{{ $location := dict "location" "" }}
 {{ with .data.location }}
   {{ $tmp := newScratch }}
   {{ with .country }}
@@ -42,13 +48,15 @@
   {{ with .city }}
     {{ $tmp.Add "loc" ( . | printf ", %s") }}
   {{ end }}
-  {{ $dir.Add "shuffle" ($tmp.Get "loc")}}
+  {{ $dir.Add "location" ($tmp.Get "loc")}}
+  {{ $location := dict "location" . }}
 {{ end }}
+{{ $location := dict "location" ($dir.Get "location" | slice ) }}
 
 {{ $descr := partial "funcs/directory/descr.html" (dict "data" .data "id" .name ) }}
 {{ $subtitle := ($dir.Get "subtitle" ) }}
 {{ $title := ($dir.Get "title" ) }}
 {{ $foot := (partial "funcs/directory/foot.html" .data ) }}
-{{ $shuffle := ( $dir.Get "shuffle" ) }}
+{{ $shuffle := merge $interests $languages $location }}
 
 {{ partial "funcs/card-expand.html" (dict "title" $title "subtitle" $subtitle "size" .size  "img" ($dir.Get "img") "category" .data.honorific "descr" $descr "foot" $foot "footcol" 2 "id" .name  "shuffle" $shuffle ) }}