From 9ea053986d76e8ee14af6fde79f8086aa622f828 Mon Sep 17 00:00:00 2001 From: Duskell Date: Wed, 11 Feb 2026 21:26:19 +0100 Subject: [PATCH] made pagination and mostly finalized the searchbox --- partnerexpo-core.php | 4 +- public/class-partnerexpo-core-public.php | 11 +- public/css/searchbox.css | 153 +++++++++++++++--- public/js/searchbox.js | 44 ++++- .../partnerexpo-core-public-searchbox.php | 9 +- 5 files changed, 186 insertions(+), 35 deletions(-) diff --git a/partnerexpo-core.php b/partnerexpo-core.php index fc3d5e0..925dea7 100644 --- a/partnerexpo-core.php +++ b/partnerexpo-core.php @@ -9,7 +9,7 @@ * Plugin Name: PartnerExpo Core * Plugin URI: https://partnerexpo.eu * Description: A PartnerEXPO oldal belső pluginja - * Version: 1.0.9 + * Version: 1.1.0 * Author: Juhász Levente * Author URI: https://github.com/Duskell/ * License: GPL-2.0+ @@ -23,7 +23,7 @@ if ( ! defined( 'WPINC' ) ) { die; } -define( 'PARTNEREXPO_CORE_VERSION', '1.0.9' ); +define( 'PARTNEREXPO_CORE_VERSION', '1.1.0' ); function activate_partnerexpo_core() { require_once plugin_dir_path( __FILE__ ) . 'includes/class-partnerexpo-core-activator.php'; diff --git a/public/class-partnerexpo-core-public.php b/public/class-partnerexpo-core-public.php index 415b3bb..3f97736 100644 --- a/public/class-partnerexpo-core-public.php +++ b/public/class-partnerexpo-core-public.php @@ -127,12 +127,18 @@ class Partnerexpo_Core_Public { $query = new WP_Query_WithRelevance($args); + $response = [ + 'pages' => $query->max_num_pages, + 'found' => $query->found_posts, + 'results' => [], + ]; + $posts = []; foreach ($query->posts as $post) { $tags = wp_get_post_terms($post->ID, 'pexpo_tags', ['fields' => 'names']); - $posts[] = [ + $response['results'][] = [ 'id' => $post->ID, 'title' => $post->post_title, 'image' => get_the_post_thumbnail_url($post->ID), @@ -140,13 +146,12 @@ class Partnerexpo_Core_Public { 'date' => date('Y-m-d', strtotime($post->post_date)), 'tag' => $tags ?? null, 'url' => get_permalink($post), - 'order' => $params['sort'] ?? 'relevance', ]; } wp_reset_postdata(); - return rest_ensure_response($posts); + return rest_ensure_response($response); } /** diff --git a/public/css/searchbox.css b/public/css/searchbox.css index 88086d3..2aa6d73 100644 --- a/public/css/searchbox.css +++ b/public/css/searchbox.css @@ -323,6 +323,45 @@ gap: 0; } +/* Pagination */ +#pexpo-core-pagination { + margin-top: 20px; + display:flex; + justify-content:center; + gap: 12px; +} + +#pexpo-core-pagination button { + width: 32px; + height: 32px; + border-radius: 6px; + border: none; + background: transparent; + box-shadow: 0 8px 22px var(--stroke2); + display:flex; + align-items:center; + justify-content:center; + cursor:pointer; + + &:focus-visible, &:focus { + outline: none; + } + + &:disabled { + opacity: 0.4; + cursor: default; + box-shadow: none; + } +} + +#pexpo-core-page-number { + font-size: 14px; + color: var(--text); + text-align: center; + display: flex; + align-items: center; +} + /* Filter drawer */ .pexpo-core-filterDrawerBackdrop { position:absolute; @@ -407,33 +446,33 @@ width: 50px; height: 25px; cursor: pointer; -} -.pexpo-core-toggle label::before { - content: ''; - display: block; - width: 100%; - height: 100%; - border-radius: 4px; - background: var(--toggle-bg-off); - border: 1.5px solid color-mix(in srgb, var(--toggle-bg-off), black var(--darker)); - box-sizing: border-box; - transition: all 0.2s ease-in; -} + &::before { + content: ''; + display: block; + width: 100%; + height: 100%; + border-radius: 4px; + background: var(--toggle-bg-off); + border: 1.5px solid color-mix(in srgb, var(--toggle-bg-off), black var(--darker)); + box-sizing: border-box; + transition: all 0.2s ease-in; + } -.pexpo-core-toggle label::after { - content: ''; - display: block; - height: 21px; - width: 21px; - border-radius: 2px; - background: var(--toggle-nub-color); - position: absolute; - top: 2px; - left: 2px; - transition: all 0.2s ease-in; - box-shadow: 0 2px 5px rgba(0,0,0,0.2); -} + &::after { + content: ''; + display: block; + height: 21px; + width: 21px; + border-radius: 2px; + background: var(--toggle-nub-color); + position: absolute; + top: 2px; + left: 2px; + transition: all 0.2s ease-in; + box-shadow: 0 2px 5px rgba(0,0,0,0.2); + } +} .pexpo-core-toggle input:checked + label::before { background: var(--toggle-bg-on); @@ -595,6 +634,70 @@ right: -4px; } +.pexpo-core-icons-arrow-left { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--ggs, 1)); + width: 22px; + height: 22px; +} +.pexpo-core-icons-arrow-left::after, +.pexpo-core-icons-arrow-left::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + left: 3px; +} +.pexpo-core-icons-arrow-left::after { + width: 8px; + height: 8px; + border-bottom: 2px solid; + border-left: 2px solid; + transform: rotate(45deg); + bottom: 7px; +} +.pexpo-core-icons-arrow-left::before { + width: 16px; + height: 2px; + bottom: 10px; + background: currentColor; +} + +.pexpo-core-icons-arrow-right { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--ggs, 1)); + width: 22px; + height: 22px; +} +.pexpo-core-icons-arrow-right::after, +.pexpo-core-icons-arrow-right::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + right: 3px; +} +.pexpo-core-icons-arrow-right::after { + width: 8px; + height: 8px; + border-top: 2px solid; + border-right: 2px solid; + transform: rotate(45deg); + bottom: 7px; +} +.pexpo-core-icons-arrow-right::before { + width: 16px; + height: 2px; + bottom: 10px; + background: currentColor; +} + + + @media (max-width: 720px) { .pexpo-core-topbar { flex-direction:column; } .pexpo-core-searchWrap { justify-content:stretch; } diff --git a/public/js/searchbox.js b/public/js/searchbox.js index 056f9f1..3a09f37 100644 --- a/public/js/searchbox.js +++ b/public/js/searchbox.js @@ -22,6 +22,9 @@ class PartnerExpoSearch { layoutMeta: document.getElementById("pexpo-core-layoutMeta"), sortSelect: document.getElementById("pexpo-core-sortSelect"), filterApply: document.getElementById("pexpo-core-filterApply"), + pageNum: document.getElementById("pexpo-core-page-number"), + pagePrev: document.getElementById("pexpo-core-page-prev"), + pageNext: document.getElementById("pexpo-core-page-next"), }; this.state = { @@ -34,6 +37,8 @@ class PartnerExpoSearch { page: 1, }, activeSortKey: "relevance", + total: '', + pages: 1, results: [], layoutQueued: false }; @@ -144,6 +149,20 @@ class PartnerExpoSearch { this.setDrawerOpen(false); } }); + + this.els.pageNext.addEventListener("click", () => { + if (this.state.filters.page < this.state.pages) { + this.state.filters.page += 1; + this.fetchData(); + } + }); + + this.els.pagePrev.addEventListener("click", () => { + if (this.state.filters.page > 1) { + this.state.filters.page -= 1; + this.fetchData(); + } + }); } // ---------- Fetch ---------- @@ -156,7 +175,10 @@ class PartnerExpoSearch { const response = await fetch(`/wp-json/pexpo/v1/query?${queryString}`); const data = await response.json(); - this.state.results = data; + this.state.results = data['results'] || []; + this.state.total = data['found'] || 0; + this.state.pages = data['pages'] || 1; + console.log("Fetched data:", data['pages']); this.requestLayout(); } catch (error) { @@ -287,11 +309,27 @@ class PartnerExpoSearch { applyMasonry() { const n = this.state.results.length || 0; - this.els.count.textContent = n; + const page = this.state.filters.page || 1; + const pages = this.state.pages; + this.els.count.textContent = this.state.total ? this.state.total : ''; + this.els.pageNum.textContent = page; this.els.masonry.innerHTML = ""; - + + if (page >= pages) { + this.els.pageNext.setAttribute("disabled", "disabled"); + } else { + this.els.pageNext.removeAttribute("disabled"); + } + + if (page <= 1) { + this.els.pagePrev.setAttribute("disabled", "disabled"); + } else { + this.els.pagePrev.removeAttribute("disabled"); + } + if (n === 0) { if(this.els.emptyResult) { + this.els.count.textContent = this.state.total ? this.state.total : 0; let emptyClone = this.els.emptyResult.cloneNode(true); emptyClone.style.display = "block"; this.els.masonry.appendChild(emptyClone); diff --git a/public/partials/partnerexpo-core-public-searchbox.php b/public/partials/partnerexpo-core-public-searchbox.php index 117fc8f..54bb1ae 100644 --- a/public/partials/partnerexpo-core-public-searchbox.php +++ b/public/partials/partnerexpo-core-public-searchbox.php @@ -70,11 +70,16 @@ $tags = get_terms([
-
0
+
- + +
+
+ + 1 +