Update paginator.js

content/search-results.php

@@ -45,9 +45,9 @@ $resultCount = count($results);
     <!-- Links: Seitenleiste für Filter und Suche -->
     <aside class="s-res-sidebar">
 
-    <!-- Sortierfuntion Box und Such Box-->
+        <!-- Sortierfuntion Box und Such Box-->
         <form action="php/controller/search-results-controller.php" method="GET" id="search-form-id" class="s-res-sidebar-form">
-            
+
             <input type="hidden" id="s-res-page-input" name="page" value="<?php echo $_GET['page'] ?? 1; ?>">
 
             <div class="s-res-sidebar-box">
@@ -125,13 +125,13 @@ $resultCount = count($results);
 
         <!-- Ergebnisliste -->
         <div class="s-res-list">
-            <?php 
+            <?php
             if (!empty($results)): ?>
-    
+
-                <?php foreach ($results as $item): 
+                <?php foreach ($results as $item):
                     // Anzahl der Likes ermitteln (falls es ein Array ist, zählen; falls Zahl, direkt nutzen)
                     $likesCount = isset($item['likes']) && is_array($item['likes']) ? count($item['likes']) : ($item['likes'] ?? 0);
-                ?>
+                    ?>
                     <div class="s-res-item" data-likes="<?php echo $likesCount; ?>" data-category="<?php echo strtolower($item['category'] ?? ''); ?>">
                         <div class="s-res-content">
                             <h2 class="s-res-item-title">
@@ -151,13 +151,13 @@ $resultCount = count($results);
                     </div>
                 <?php endforeach; ?>
 
-            <?php 
+            <?php
             elseif (isset($_SESSION["search_query"]) && $_SESSION["search_query"] !== "" && $resultCount === 0): ?>
-                <p>Keine Beiträge zu diesem Suchbegriff gefunden.</p>  
+                <p>Keine Beiträge zu diesem Suchbegriff gefunden.</p>
-            <?php 
+            <?php
             elseif (isset($_SESSION["message"]) && $_SESSION["message"] == "invalid_search_query"): ?>
                 <p>Unzulässige Suchanfrage</p>
-                
+
             <?php endif; ?>
             <?php
             unset($_SESSION["message"]);
@@ -179,9 +179,9 @@ $resultCount = count($results);
 
             <div class="s-res-page-navigation">
                 <button type="button" class="s-res-page-btn" id="prev-page-btn" data-page="0">«</button>
-                
+
                 <span id="dynamic-page-numbers"></span>
-                
+
                 <button type="button" class="s-res-page-btn" id="next-page-btn" data-page="2">»</button>
             </div>
 

js/editor.js

@@ -1,13 +1,13 @@
-console.log("Die JavaScript-Datei wurde erfolgreich geladen!");
+console.log("editor.js wurde erfolgreich geladen!");
 
 function initEditor() {
     const form = document.getElementById("editor-form");
 
     if (!form) {
-        console.error("Skript abgebrochen: Formular nicht gefunden!");
+        console.error("editor.js wurde abgebrochen: Formular nicht gefunden!");
         return;
     } else {
-        console.log("Formular gefunden und Editor initialisiert:", form);
+        console.log("Formular gefunden und editor.js initialisiert:", form);
     }
 
     const container = document.getElementById("block-container");

js/paginator.js

@@ -1,27 +1,229 @@
-function initPaginator() {
+console.log("editor.js wurde erfolgreich geladen!");
-    const form = document.getElementById('search-form-id');
+(function () {
-    const pageInput = document.getElementById('s-res-page-input');
+    'use strict';
-    const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
 
-    pageButtons.forEach(button => {
+    const state = {
-        button.addEventListener('click', function() {
+        items: [],
-            if (this.disabled) return;
+        sorted: [],
+        category: 'all',
+        sort: 'alphabet',
+        limit: 10,
+        page: 1,
+    };
 
-            const targetPage = this.getAttribute('data-page');
+    function loadData() {
+        const el = document.getElementById('s-res-data');
+        if (!el) return [];
+        try {
+            return JSON.parse(el.textContent);
+        } catch (e) {
+            console.error('Suchergebnis-Daten konnten nicht gelesen werden', e);
+            return [];
+        }
+    }
 
-            if (targetPage && form && pageInput) {
+    function applyFilterAndSort() {
-                pageInput.value = targetPage;
+        let list = state.items.slice();
-                form.submit();
+
-            }
+        if (state.category && state.category !== 'all') {
+            list = list.filter(item => (item.category || '') === state.category);
+        }
+
+        switch (state.sort) {
+            case 'likes':
+                list.sort((a, b) => (b.likes || 0) - (a.likes || 0));
+                break;
+            case 'newest':
+                list.sort((a, b) => (b.creationDate || '').localeCompare(a.creationDate || ''));
+                break;
+            case 'oldest':
+                list.sort((a, b) => (a.creationDate || '').localeCompare(b.creationDate || ''));
+                break;
+            default:
+                list.sort((a, b) => (a.title || '').localeCompare(b.title || '', 'de', { sensitivity: 'base' }));
+        }
+
+        state.sorted = list;
+        const totalPages = Math.max(1, Math.ceil(state.sorted.length / state.limit));
+        state.page = Math.min(Math.max(state.page, 1), totalPages);
+    }
+
+    function el(tag, className, text) {
+        const e = document.createElement(tag);
+        if (className) e.className = className;
+        if (text !== undefined) e.textContent = text;
+        return e;
+    }
+
+    function renderList() {
+        const container = document.querySelector('.s-res-list');
+        if (!container) return;
+
+        const start = (state.page - 1) * state.limit;
+        const pageItems = state.sorted.slice(start, start + state.limit);
+
+        container.innerHTML = '';
+
+        if (pageItems.length === 0) {
+            container.appendChild(el('p', null, 'Keine Beiträge zu diesem Suchbegriff gefunden.'));
+            return;
+        }
+
+        pageItems.forEach(item => {
+            const item_el = el('div', 's-res-item');
+            item_el.dataset.likes = item.likes;
+            item_el.dataset.category = item.category;
+
+            const link = el('a', 's-res-link', item.title);
+            link.href = 'index.php?pfad=showArticle&id=' + encodeURIComponent(item.id);
+
+            const title = el('h2', 's-res-item-title');
+            title.appendChild(link);
+
+            const authorName = el('span', 's-res-author-name', item.author);
+            const author = el('p', 's-res-author', 'Von: ');
+            author.appendChild(authorName);
+
+            const likes = el('span', 's-res-likes', '❤️ ' + item.likes);
+
+            const metaRow = el('div', 's-res-meta-row');
+            metaRow.appendChild(author);
+            metaRow.appendChild(likes);
+
+            const content = el('div', 's-res-content');
+            content.appendChild(title);
+            content.appendChild(metaRow);
+
+            item_el.appendChild(content);
+            item_el.appendChild(el('div', 's-res-arrow', '→'));
+
+            container.appendChild(item_el);
         });
-    });
+    }
-}
 
-// ist das DOM bereits vollständig aufgebaut?
+    function renderMeta() {
-if (document.readyState === 'loading') {
+        const metaEl = document.querySelector('.s-res-meta');
-    // Falls noch geladen wird, auf das Event warten
+        const queryInput = document.getElementById('site-search');
-    document.addEventListener('DOMContentLoaded', initPaginator);
+        if (metaEl) {
-} else {
+            const q = queryInput ? queryInput.value : '';
-    // Falls das HTML bereits komplett da ist, sofort ausführen
+            metaEl.textContent = state.sorted.length + ' Treffer für Ihre Suchanfrage "' + q + '"';
-    initPaginator();
+        }
-}
+    }
+
+    function renderPagination() {
+        const nav = document.querySelector('.s-res-page-navigation');
+        if (!nav) return;
+
+        const totalPages = Math.max(1, Math.ceil(state.sorted.length / state.limit));
+        nav.innerHTML = '';
+
+        const makeBtn = (label, page, disabled, active) => {
+            const btn = el('button', 's-res-page-btn' + (active ? ' is-active' : ''), label);
+            btn.type = 'button';
+            btn.disabled = !!disabled;
+            btn.addEventListener('click', () => goToPage(page));
+            return btn;
+        };
+
+        nav.appendChild(makeBtn('«', state.page - 1, state.page <= 1));
+
+        const windowSize = 2;
+        for (let p = 1; p <= totalPages; p++) {
+            const edge = p === 1 || p === totalPages;
+            const near = Math.abs(p - state.page) <= windowSize;
+            if (!edge && !near) {
+                if (p === 2 || p === totalPages - 1) nav.appendChild(el('span', 's-res-page-dots', '…'));
+                continue;
+            }
+            nav.appendChild(makeBtn(String(p), p, false, p === state.page));
+        }
+
+        nav.appendChild(makeBtn('»', state.page + 1, state.page >= totalPages));
+    }
+
+    function updateUrl() {
+        const url = new URL(window.location.href);
+        url.searchParams.set('sort', state.sort);
+        url.searchParams.set('category', state.category);
+        url.searchParams.set('limit', state.limit);
+        url.searchParams.set('page', state.page);
+        window.history.replaceState(null, '', url);
+    }
+
+    function rerender() {
+        applyFilterAndSort();
+        renderList();
+        renderMeta();
+        renderPagination();
+        updateUrl();
+    }
+
+    function goToPage(page) {
+        const totalPages = Math.max(1, Math.ceil(state.sorted.length / state.limit));
+        state.page = Math.min(Math.max(page, 1), totalPages);
+        renderList();
+        renderPagination();
+        updateUrl();
+    }
+
+    function initPaginator() {
+        state.items = loadData();
+
+        const checkedSort = document.querySelector('.sort-radio:checked');
+        state.sort = checkedSort ? checkedSort.value : 'alphabet';
+
+        const categorySelect = document.getElementById('category-filter');
+        state.category = categorySelect ? categorySelect.value.toLowerCase() : 'all';
+
+        const limitSelect = document.getElementById('s-res-per-page');
+        state.limit = limitSelect ? parseInt(limitSelect.value, 10) || 10 : 10;
+
+        const params = new URLSearchParams(window.location.search);
+        state.page = parseInt(params.get('page') || '1', 10) || 1;
+
+        document.querySelectorAll('.sort-radio').forEach(radio => {
+            radio.addEventListener('change', function () {
+                state.sort = this.value;
+                state.page = 1;
+                rerender();
+            });
+        });
+
+        if (categorySelect) {
+            categorySelect.addEventListener('change', function () {
+                state.category = this.value.toLowerCase();
+                state.page = 1;
+                rerender();
+            });
+        }
+
+        if (limitSelect) {
+            limitSelect.addEventListener('change', function () {
+                state.limit = parseInt(this.value, 10) || 10;
+                state.page = 1;
+                rerender();
+            });
+        }
+
+        // "Filter anwenden"-Button wird bei aktivem JS nicht gebraucht
+        const applyBtn = document.querySelector('.s-res-apply-btn');
+        if (applyBtn) applyBtn.style.display = 'none';
+
+        // Server-gerenderte Pagination-Links durch clientseitige Steuerung ersetzen
+        document.querySelectorAll('.s-res-page-navigation .s-res-page-btn').forEach(link => {
+            link.addEventListener('click', function (evt) {
+                evt.preventDefault();
+                const target = parseInt(this.getAttribute('data-page'), 10);
+                if (!isNaN(target)) goToPage(target);
+            });
+        });
+
+        rerender();
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initPaginator);
+    } else {
+        initPaginator();
+    }
+})();

php/controller/search-results-controller.php

@@ -16,37 +16,11 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
         $_SESSION["message"] = "invalid_search_query";
     } else {
         try {
-            
             $articleManager = ArticleManager::getInstance();
             $userManager = UserManager::getInstance();
-            
+
             $results = $articleManager->search($search);
 
-            $sortStyle = $_GET['sort'] ?? 'alphabet';
-            $_SESSION['search_sort'] = $sortStyle;
-
-            if ($sortStyle === 'alphabet') {
-                // Titel aufsteigend alphabetiisch sortiert
-                usort($results, function ($a, $b) {
-                    return strcasecmp($a->getTitle(), $b->getTitle());
-                });
-            } elseif ($sortStyle === 'likes') {
-                usort($results, function($a, $b) {
-                    return $b->getLikeCount() <=> $a->getLikeCount();
-                });
-            } elseif ($sortStyle === 'newest') {
-                // Datum neu zu alt sortiert
-                usort($results, function($a, $b) {
-                    return strcmp($b->getCreationDate(), $a->getCreationDate());
-                });
-            } elseif ($sortStyle === 'oldest') {
-                // Datum alt zu neu sortiert
-                usort($results, function($a, $b) {
-                    return strcmp($a->getCreationDate(), $b->getCreationDate());
-                });
-            }
-
-            // Ergebnisse werden in ein flaches array umgewandelt, da sont incomplete-PHP error im Ergebnis
             $safeArrayResults = [];
             foreach ($results as $obj) {
                 $safeArrayResults[] = [
@@ -60,25 +34,21 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
                     "likes" => $obj->getLikes(),
                 ];
             }
-            
+
             $_SESSION["search_results"] = $safeArrayResults;
             $_SESSION["search_query"] = $search;
             $_SESSION["message"] = "new_search_results";
 
-        } catch (Exception $e){
+            // Bei einer neuen Suche Anzeige-Filter zurücksetzen
+            $_SESSION['search_sort'] = 'alphabet';
+            $_SESSION['search_category'] = 'all';
+            $_SESSION['search_limit'] = 10;
+
+        } catch (Exception $e) {
             $_SESSION["message"] = "internal_error";
         }
     }
 
-    $sort  = $_GET['sort'] ?? 'alphabet';
+    header("Location: ../../index.php?pfad=search-results&q=" . urlencode($search));
-    $limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
-    if (!searchLimitValidator($limit)) {
-        $limit = 10;
-    }
-    $page  = isset($_GET['page']) ? (int)$_GET['page'] : 1;
-    header("Location: ../../index.php?pfad=search-results&q=" . urlencode($search) . "&sort=" . urlencode($sort) . "&limit=" . $limit . "&page=" . $page);
     exit();
-    
+}
-}
-
-?>