diff --git a/js/filter.js b/js/filter.js deleted file mode 100644 index 72d21fc..0000000 --- a/js/filter.js +++ /dev/null @@ -1,116 +0,0 @@ -let currentClientPage = 1; -let itemsPerPage = 10; - -function initFilter() { - const filterSelect = document.getElementById('category-filter'); - const listContainer = document.querySelector('.s-res-list'); - const limitSelect = document.getElementById('s-res-per-page'); - - if (!filterSelect || !listContainer) return; - - if (limitSelect) { - itemsPerPage = parseInt(limitSelect.value, 10) || 10; - } - - updateVisibility(); - - if (limitSelect) { - limitSelect.addEventListener('change', function() { - - //neues limit einlesen - itemsPerPage = parseInt(this.value, 10); - currentClientPage = 1; - updateVisibility(); - }); - } - - filterSelect.addEventListener('change', function() { - currentClientPage = 1; - updateVisibility(); - }); - - const navigationContainer = document.querySelector('.s-res-page-navigation'); - if (navigationContainer) { - navigationContainer.addEventListener('click', function(e) { - const button = e.target.closest('.s-res-page-btn'); - if (!button || button.disabled) return; - - e.preventDefault(); - - const targetPage = button.getAttribute('data-page'); - if (targetPage) { - currentClientPage = parseInt(targetPage, 10); - updateVisibility(); - } - }); - } -} - -function updateVisibility() { - const filterSelect = document.getElementById('category-filter'); - const listContainer = document.querySelector('.s-res-list'); - const selectedCategory = filterSelect.value.toLowerCase().trim(); - const cards = listContainer.querySelectorAll('.s-res-item'); - - let visibleCards = []; - cards.forEach(card => { - const cardCategory = (card.getAttribute('data-category') || '').toLowerCase().trim(); - if (selectedCategory === 'all' || cardCategory.includes(selectedCategory) || selectedCategory.includes(cardCategory)) { - visibleCards.push(card); - } else { - card.style.display = 'none'; - } - }); - - const totalVisible = visibleCards.length; - const totalPages = Math.max(1, Math.ceil(totalVisible / itemsPerPage)); - - if (currentClientPage < 1) currentClientPage = 1; - if (currentClientPage > totalPages) currentClientPage = totalPages; - - const startOffset = (currentClientPage - 1) * itemsPerPage; - const endOffset = startOffset + itemsPerPage; - - visibleCards.forEach((card, index) => { - if (index >= startOffset && index < endOffset) { - card.style.display = 'flex'; - } else { - card.style.display = 'none'; - } - }); - - updatePaginatorUI(currentClientPage, totalPages); -} - -function updatePaginatorUI(currentPage, totalPages) { - const prevBtn = document.getElementById('prev-page-btn'); - const nextBtn = document.getElementById('next-page-btn'); - const numbersContainer = document.getElementById('dynamic-page-numbers'); - - if (!prevBtn || !nextBtn || !numbersContainer) return; - - prevBtn.setAttribute('data-page', currentPage - 1); - prevBtn.disabled = (currentPage <= 1); - - nextBtn.setAttribute('data-page', currentPage + 1); - nextBtn.disabled = (currentPage >= totalPages); - - let buttonsHTML = ''; - for (let i = 1; i <= totalPages; i++) { - const activeClass = (i === currentPage) ? 's-res-page-btn-active' : ''; - buttonsHTML += ` `; - } - numbersContainer.innerHTML = buttonsHTML; -} - -// Hilfsfunktion für Math.ceil in JS -function ceil(val) { return Math.ceil(val); } - -// ist das DOM bereits vollständig aufgebaut? -if (document.readyState === 'loading') { - // Falls noch geladen wird, auf das Event warten - document.addEventListener('DOMContentLoaded', initFilter); -} else { - // Falls das HTML bereits komplett da ist, sofort ausführen - initFilter(); -} \ No newline at end of file diff --git a/js/paginator.js b/js/paginator.js deleted file mode 100644 index 378174b..0000000 --- a/js/paginator.js +++ /dev/null @@ -1,27 +0,0 @@ -function initPaginator() { - const form = document.getElementById('search-form-id'); - const pageInput = document.getElementById('s-res-page-input'); - const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn'); - - pageButtons.forEach(button => { - button.addEventListener('click', function() { - if (this.disabled) return; - - const targetPage = this.getAttribute('data-page'); - - if (targetPage && form && pageInput) { - pageInput.value = targetPage; - form.submit(); - } - }); - }); -} - -// ist das DOM bereits vollständig aufgebaut? -if (document.readyState === 'loading') { - // Falls noch geladen wird, auf das Event warten - document.addEventListener('DOMContentLoaded', initPaginator); -} else { - // Falls das HTML bereits komplett da ist, sofort ausführen - initPaginator(); -} \ No newline at end of file diff --git a/js/search-results.js b/js/search-results.js index e085110..9461e39 100644 --- a/js/search-results.js +++ b/js/search-results.js @@ -1,16 +1,16 @@ /** * Übernimmt Sortierung, Kategorie-Filter und Pagination der Suchergebnisse - * vollständig im Browser (kein Reload, keine erneute Suche). + * vollständig clientseitig * * Ablauf: * 1. Kompletten Ergebnis-Datensatz einmalig per fetch() nachladen * (php/controller/search-results-data.php, liest nur die Session-Daten, * keine erneute Datenbank-Suche). - * 2. Sortieren + filtern + paginieren rein im Speicher (JS-Array). + * 2. Sortieren + filtern (JS-Array). * 3. Ergebnisliste + Pagination-UI daraus neu rendern. * * Ersetzt sorter.js, filter.js und paginator.js, deren Klick-Handler sich - * gegenseitig ins Gehege kamen (Formular-Submit vs. clientseitiges Hiden). + * gegenseitig ins Gehege kamen. * Ohne JS bleibt die serverseitig gerenderte Seite (echte Links/Formulare) * voll funktionsfähig. */ @@ -220,8 +220,8 @@ }); } - // Mit aktivem JS übernimmt render() Sortierung/Filter live; - // ein echtes Absenden des Filterformulars (No-JS-Fallback) ist dann nicht mehr nötig. + // Mit aktivem JS übernimmt render() Sortierung/Filter live + // ein echtes Absenden des Formulars (No-JS-Fallback) ist dann nicht mehr nötig. const filterForm = document.getElementById('s-res-filter-form'); if (filterForm) { filterForm.addEventListener('submit', function (e) { diff --git a/js/sorter.js b/js/sorter.js deleted file mode 100644 index 5a1ee59..0000000 --- a/js/sorter.js +++ /dev/null @@ -1,50 +0,0 @@ - -function initSorter() { - const listContainer = document.querySelector('.s-res-list'); - const sortRadios = document.querySelectorAll('.sort-radio'); - - // wenn keine liste vorhanden, abbrechen - if (!listContainer || sortRadios.length === 0) return; - - sortRadios.forEach(radio => { - radio.addEventListener('change', function() { - const cards = Array.from(listContainer.querySelectorAll('.s-res-item')); - const sortValue = this.value; - - cards.sort((a, b) => { - if (sortValue === 'likes') { - const likesA = parseInt(a.getAttribute('data-likes') || '0', 10); - const likesB = parseInt(b.getAttribute('data-likes') || '0', 10); - return likesB - likesA; - } - else if (sortValue === 'alphabet') { - // alphabetische sortierung - const titleA = a.querySelector('.s-res-link').textContent.trim().toLowerCase(); - const titleB = b.querySelector('.s-res-link').textContent.trim().toLowerCase(); - return titleA.localeCompare(titleB); - } - else if (sortValue === 'newest' || sortValue === 'oldest') { - // hoehere ID wird als neuer gesehen - const urlA = a.querySelector('.s-res-link').getAttribute('href'); - const urlB = b.querySelector('.s-res-link').getAttribute('href'); - - const idA = parseInt(urlA.match(/id=(\d+)/)[1], 10); - const idB = parseInt(urlB.match(/id=(\d+)/)[1], 10); - - return sortValue === 'newest' ? idB - idA : idA - idB; - } - return 0; - }); - - listContainer.innerHTML = ''; - cards.forEach(card => listContainer.appendChild(card)); - }); - }); -} - -// ist das DOM bereits vollständig aufgebaut? -if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', initSorter); -} else { - initSorter(); -} \ No newline at end of file