From 3b467e2870c32676758fdb55016a0c4f7ca00332 Mon Sep 17 00:00:00 2001
From: Jurj-Bogdan <jurj@dotkernel.com>
Date: Fri, 13 Dec 2024 12:00:55 +0200
Subject: [PATCH] jquery replaced with vanilla js

Signed-off-by: Jurj-Bogdan <jurj@dotkernel.com>
---
 bootstrap/js/_ecosystem.js         | 168 ++++++++++++++---------------
 bootstrap/scss/_custom-styles.scss |   2 +-
 src/Ecosystem/templates/list.phtml |  15 ++-
 3 files changed, 89 insertions(+), 96 deletions(-)

diff --git a/bootstrap/js/_ecosystem.js b/bootstrap/js/_ecosystem.js
index 2c619614..7e2443ef 100644
--- a/bootstrap/js/_ecosystem.js
+++ b/bootstrap/js/_ecosystem.js
@@ -1,114 +1,102 @@
 'use strict';
 
-$(document).ready(function () {
-    $('.package-button').click(function (e) {
-        e.preventDefault();
-
-        const url = new URL(window.location.href);
-        const params = new URLSearchParams(url.search);
-        const entry = $(this).data('value');
-
-        if ($(this).hasClass('keyword')) {
-            if (! params.has("keywords[]", entry)) {
-                params.append("keywords[]", entry);
-                url.search = params.toString();
-
-                window.location.replace(url.toString());
-            }
+document.querySelectorAll('.package-button.type, .package-button.category, .package-button.usage').forEach(button => {
+    button.addEventListener('click', handleFilters);
+})
+
+document.querySelectorAll('.package-button.keyword').forEach(button => {
+    button.addEventListener('click', handleKeywords);
+})
+
+document.querySelectorAll('.ecosystem-filter').forEach(button => {
+    button.addEventListener('click', removeKeyword);
+})
+
+document.querySelectorAll('#ecosystem-pagination a').forEach(a => {
+    const url = new URL(a.href)
+    for (let [k,v] of new URLSearchParams(window.location.search).entries()) {
+        if (k === 'keywords[]' || k === 'q' || k === 'type' || k === 'category' || k === 'usage') {
+            url.searchParams.set(k,v);
         }
+    }
+    a.href = url.toString();
+})
 
-        if ($(this).hasClass('type')) {
-            if (! params.has("type", entry)) {
-                url.searchParams.set('type', entry);
-
-                window.location.replace(url.toString());
-            } else if (params.get("type") === entry) {
-                url.searchParams.delete("type");
+document.querySelector('#clear-filters-button')?.addEventListener('click', function () {
+    const url = new URL(window.location.href);
 
-                window.location.replace(url.toString());
-            }
+    for (let [k,v] of new URLSearchParams(window.location.search).entries()) {
+        if (k !== 'page') {
+            url.searchParams.delete(k);
         }
+    }
 
-        if ($(this).hasClass('category')) {
-            if (! params.has("category", entry)) {
-                url.searchParams.set('category', entry);
-
-                window.location.replace(url.toString());
-            } else if (params.get("category") === entry) {
-                url.searchParams.delete("category");
-
-                window.location.replace(url.toString());
-            }
-        }
+    window.location.replace(url.toString());
+});
 
-        if ($(this).hasClass('usage')) {
-            if (! params.has("usage", entry)) {
-                url.searchParams.set('usage', entry);
+document.querySelector('#ecosystem-search-btn').addEventListener('click', function () {
+    setSearchQuery(document.querySelector('#ecosystem-search').value);
+});
 
-                window.location.replace(url.toString());
-            } else if (params.get("usage") === entry) {
-                url.searchParams.delete("usage");
+document.querySelector('#ecosystem-search').addEventListener('keypress', function (e) {
+    const search = this.value;
+    if (e.which === 13) {
+        setSearchQuery(search);
+    }
+})
 
-                window.location.replace(url.toString());
-            }
+function handleFilters() {
+    for (const filter of ['type', 'category', 'usage']) {
+        if (this.classList.contains(filter)) {
+            handleParams(filter, this.dataset.value);
         }
-    });
-
-    $('.ecosystem-filter').click(function (e) {
-        e.preventDefault();
+    }
+}
 
-        const url = new URL(window.location.href);
-        const params = new URLSearchParams(url.search);
-        const entry = $(this).data('value');
+function handleParams(filterKey, filterValue) {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
 
-        if ($(this).hasClass('keyword')) {
-            if (params.has("keywords[]", entry)) {
-                params.delete("keywords[]", entry);
-                url.search = params.toString();
+    if (! params.has(filterKey, filterValue)) {
+        url.searchParams.set(filterKey, filterValue);
 
-                window.location.replace(url.toString());
-            }
-        }
-    });
-
-    [...$('#ecosystem-pagination a')].forEach(a => {
-        const url = new URL(a.href)
-        for (let [k,v] of new URLSearchParams(window.location.search).entries()) {
-            if (k === 'keywords[]' || k === 'q' || k === 'type' || k === 'category' || k === 'usage') {
-                url.searchParams.set(k,v)
-            }
-        }
-        a.href = url.toString();
-    })
+        window.location.replace(url.toString());
+    } else if (params.get(filterKey) === filterValue) {
+        url.searchParams.delete(filterKey);
 
-    $('#ecosystem-search').keypress(function (e) {
-        const search = $(this).val();
-        if (e.which === 13) {
-            setSearchQuery(search);
-        }
-    });
+        window.location.replace(url.toString());
+    }
+}
 
-    $('#ecosystem-search-btn').click(function (e) {
-        const search = $('#ecosystem-search').val();
-        setSearchQuery(search);
-    });
+function handleKeywords() {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    const keyword = this.dataset.value;
 
-    function setSearchQuery(search) {
-        const url = new URL(window.location.href);
+    if (! params.has("keywords[]", keyword)) {
+        params.append("keywords[]", keyword);
+        url.search = params.toString();
 
-        url.searchParams.set('q', search);
         window.location.replace(url.toString());
     }
+}
 
-    $('#clear-filters-button').click(function (e) {
-        const url = new URL(window.location.href);
+function removeKeyword() {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    const keyword = this.dataset.value;
 
-        for (let [k,v] of new URLSearchParams(window.location.search).entries()) {
-            if (k === 'type' || k === 'category' || k === 'usage') {
-                url.searchParams.delete(k)
-            }
-        }
+    if (params.has("keywords[]", keyword)) {
+        params.delete("keywords[]", keyword);
+        url.search = params.toString();
 
         window.location.replace(url.toString());
-    });
-});
+    }
+}
+
+function setSearchQuery(search) {
+    const url = new URL(window.location.href);
+
+    url.searchParams.set('q', search);
+    window.location.replace(url.toString());
+}
diff --git a/bootstrap/scss/_custom-styles.scss b/bootstrap/scss/_custom-styles.scss
index 6b7c241c..b02d014d 100644
--- a/bootstrap/scss/_custom-styles.scss
+++ b/bootstrap/scss/_custom-styles.scss
@@ -541,4 +541,4 @@ article {
         gap: .5em;
         align-items: baseline;
     }
-}
\ No newline at end of file
+}
diff --git a/src/Ecosystem/templates/list.phtml b/src/Ecosystem/templates/list.phtml
index c199710c..c9434710 100644
--- a/src/Ecosystem/templates/list.phtml
+++ b/src/Ecosystem/templates/list.phtml
@@ -32,8 +32,11 @@ $this->layout('layout::default', ['title' => 'Laminas Ecosystem']);
                     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#packageNavbarToggle" aria-controls="packageNavbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                         <span class="navbar-toggler-icon"></span>
                     </button>
-                    <input id="ecosystem-search" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" value="<?= $search ?>">
-                    <button id="ecosystem-search-btn" class="btn btn-outline-success my-2 my-sm-0" type="button"><i class="bi bi-search"></i></button>
+
+                    <div class="input-group">
+                        <input type="text" id="ecosystem-search" class="form-control mr-sm-2" aria-label="Search" aria-describedby="ecosystem-search-btn" value="<?= $search ?>">
+                        <button id="ecosystem-search-btn" class="btn btn-outline-success my-2 my-sm-0" type="button"><i class="bi bi-search"></i></button>
+                    </div>
                 </div>
                 <div class="collapse navbar-collapse" id="packageNavbarToggle">
                     <div class="btn-group">
@@ -84,9 +87,11 @@ $this->layout('layout::default', ['title' => 'Laminas Ecosystem']);
                         </ul>
                     </div>
 
-                    <div class="btn-group">
-                        <button id="clear-filters-button" type="button" class="btn btn-outline-danger">Clear filters <i class="bi bi-x-circle"></i></button>
-                    </div>
+                    <?php if ($type || $usage || $category || $search) : ?>
+                        <div class="btn-group">
+                            <button id="clear-filters-button" type="button" class="btn btn-outline-danger">Clear filters <i class="bi bi-x-circle"></i></button>
+                        </div>
+                    <?php endif; ?>
                 </div>
             </div>
         </nav>