From ac3bc5b0ed43c91df48ed1631420c0edb1e0a5b0 Mon Sep 17 00:00:00 2001
From: Denys Konovalov <kontakt@denyskon.de>
Date: Sat, 20 Jan 2024 21:52:20 +0100
Subject: [PATCH] drop filterizr in favor of shuffle (close #258)

---
 assets/js/script.js                             | 17 ++++++-----------
 config.yml                                      |  2 +-
 layouts/ganztagsangebote/list.html              |  5 +++--
 layouts/termine/list.html                       |  5 +++--
 layouts/wettbewerbe/list.html                   |  5 +++--
 .../previews/page-previews/event-preview.js     |  4 ++--
 6 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index 9b588503..b4ced086 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -65,20 +65,15 @@
 
   // filter
   $(document).ready(function () {
-    var containerEl = document.querySelector('.filtr-container');
-    if (containerEl) {
-      new Filterizr(
-        '.filtr-container',
-        {
-          layout: 'sameWidth',
-          gutterPixels: 10
-        }
-      );
-    } 
-    // active changer
+    const shuffleInstance = new Shuffle($('.filter-container'), {
+      itemSelector: '.filter-item',
+      sizer: '.filter-sizer', // could also be a selector: '.js-shuffle-sizer'
+      delimiter: ','
+    });
     $('.filter-controls li').on('click', function () {
       $('.filter-controls li').removeClass('active');
       $(this).addClass('active');
+      shuffleInstance.filter($(this).data('filter'))
     });
   });
 
diff --git a/config.yml b/config.yml
index 3c50bb38..30b67780 100644
--- a/config.yml
+++ b/config.yml
@@ -43,7 +43,7 @@ params:
     head_js:
       - https://assets.cantorgymnasium.de/jquery/v3.7/jquery.min.js
       - https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.js
-      - https://assets.cantorgymnasium.de/filterizr/v2/dist/vanilla.filterizr.min.js
+      - https://assets.cantorgymnasium.de/shuffle/v6/shuffle.min.js
   social:
     - title: YouTube
       icon: youtube
diff --git a/layouts/ganztagsangebote/list.html b/layouts/ganztagsangebote/list.html
index 717c8c50..5ad1899d 100644
--- a/layouts/ganztagsangebote/list.html
+++ b/layouts/ganztagsangebote/list.html
@@ -3,12 +3,13 @@
 <section class="section">
   <div class="container">
     {{ partial "filter-controls" . }}
-    <div class="filtr-container">
+    <div class="filter-container row">
     {{ range .Data.Pages }}
-      <div data-category="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filtr-item">
+      <div data-groups="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filter-item">
         {{ partial "ganztag" . }}
       </div>
     {{ end }}
+    <div class="filter-sizer col-1"></div>
     </div>
   </div>
 </section>
diff --git a/layouts/termine/list.html b/layouts/termine/list.html
index dabb22eb..595a7acd 100644
--- a/layouts/termine/list.html
+++ b/layouts/termine/list.html
@@ -7,12 +7,13 @@
       <li class="list-inline-item m-3 text-uppercase" data-filter="upcoming">Anstehend</li>
       <li class="list-inline-item m-3 text-uppercase" data-filter="past">Vergangen</li>
     </ul>
-    <div class="filtr-container row mx-auto">
+    <div class="filter-container row mx-auto">
       {{ range .Params.events }}
-      <div class="filtr-item col-12" data-category="{{ if or (ge (.date | time.AsTime).Unix now.Unix) (and .enddate (ge (.enddate | time.AsTime).Unix now.Unix)) }}upcoming{{else}}past{{end}}" data-time="{{.date}}">
+      <div class="filter-item col-12" data-groups="{{ if or (ge (.date | time.AsTime).Unix now.Unix) (and .enddate (ge (.enddate | time.AsTime).Unix now.Unix)) }}upcoming{{else}}past{{end}}" data-time="{{.date}}">
         {{ partial "termin" . }}
       </div>
       {{ end }}
+      <div class="filter-sizer col-1"></div>
     </div>
   </div>
 </section>
diff --git a/layouts/wettbewerbe/list.html b/layouts/wettbewerbe/list.html
index bc0aca09..ca4547d8 100644
--- a/layouts/wettbewerbe/list.html
+++ b/layouts/wettbewerbe/list.html
@@ -3,12 +3,13 @@
 <section class="section">
   <div class="container">
     {{ partial "filter-controls" . }}
-    <div class="row filtr-container">
+    <div class="filter-container row">
       {{ range .Data.Pages }}
-      <div data-category="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filtr-item">
+      <div data-groups="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filter-item">
         {{ partial "card-category" . }}
       </div>
       {{ end }}
+      <div class="filter-sizer col-1"></div>
     </div>
   </div>
 </section>
diff --git a/static/admin/previews/page-previews/event-preview.js b/static/admin/previews/page-previews/event-preview.js
index 12f98dd6..c17fd31d 100644
--- a/static/admin/previews/page-previews/event-preview.js
+++ b/static/admin/previews/page-previews/event-preview.js
@@ -31,11 +31,11 @@ const EventPreview = ({ widgetsFor, entry }) => {
         ),
         h(
           "div",
-          { className: "filtr-container row" },
+          { className: "filter-container row" },
           widgetsFor("events").map((event) =>
             h(
               "div",
-              { className: "filtr-item col-12" },
+              { className: "filter-item col-12" },
               h(
                 "div",
                 {