made pagination and mostly finalized the searchbox

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';

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);
 	}
 
 	/**

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%; 
@@ -419,9 +457,9 @@
     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 {
+  &::after {
     content: '';
     display: block;
     height: 21px;
@@ -433,6 +471,7 @@
     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 {
@@ -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; }

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);

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>