made pagination and mostly finalized the searchbox

2026-02-11 21:26:19 +01:00
parent 2f8396d994
commit 9ea053986d
5 changed files with 186 additions and 35 deletions
--- 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';
--- 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);
 	}

 	/**
--- 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,9 +446,8 @@
  width: 50px;
  height: 25px;
  cursor: pointer;
-}

-.pexpo-core-toggle label::before {
+  &::before {
    content: '';
    display: block;
    width: 100%; 
@@ -421,7 +459,7 @@
    transition: all 0.2s ease-in;
  }

-.pexpo-core-toggle label::after {
+  &::after {
    content: '';
    display: block;
    height: 21px;
@@ -434,6 +472,7 @@
    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; }
--- 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);
--- a/public/partials/partnerexpo-core-public-searchbox.php
+++ b/public/partials/partnerexpo-core-public-searchbox.php
@@ -70,11 +70,16 @@ $tags = get_terms([

  <div class="pexpo-core-body">
    <div class="pexpo-core-metaRow">
-      <div id="pexpo-core-metaLeft"><b id="pexpo-core-count">0</b> <?php echo esc_html__('találat', 'partnerexpo-core'); ?></div>
+      <div id="pexpo-core-metaLeft"><b id="pexpo-core-count"></b> <?php echo esc_html__('találat', 'partnerexpo-core'); ?></div>
    </div>

    <div class="pexpo-core-masonry" id="pexpo-core-masonry" aria-live="polite">
-      <!-- TODO Make a pagination -->
+      
+    </div>
+    <div id="pexpo-core-pagination">
+      <button id="pexpo-core-page-prev"><span class="pexpo-core-icons-arrow-left" ></span></button>
+      <span id="pexpo-core-page-number">1</span>
+      <button id="pexpo-core-page-next"><span class="pexpo-core-icons-arrow-right" ></span></button>
    </div>
    <div id="pexpo-core-emptyResult"><?php echo esc_html__('Nincs a szűrőnek megfelelő találat.', 'partnerexpo-core'); ?></div>
    <div id="pexpo-core-measure" style="position:absolute; left:-9999px; top:-9999px; width:300px; visibility:hidden;"></div>