From f8bed73c262e05a7b4074f13ba3a956b60a97572 Mon Sep 17 00:00:00 2001
From: Brian Huisman <bhuisman@greywyvern.com>
Date: Fri, 15 Sep 2023 10:32:59 -0400
Subject: [PATCH] Responsive pagination bar on Page Index

---
 orcinus/admin.php   | 39 ++++++++++++++++++---------------------
 orcinus/js/admin.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/orcinus/admin.php b/orcinus/admin.php
index e8f99eb..1dae384 100644
--- a/orcinus/admin.php
+++ b/orcinus/admin.php
@@ -1879,28 +1879,25 @@ ORCINUS;
                           } else { ?> 
                             <li class="page-item disabled"><span class="page-link">Previous</span></li><?php
                           }
-                          if ($_RDATA['index_pages'] < 6) {
-                            for ($x = 1; $x <= $_RDATA['index_pages']; $x++) {
-                              if ($x != $_SESSION['index_page']) { ?>
-                                <li class="page-item"><a class="page-link" href="?ipage=<?php echo $x; ?>"><?php echo $x; ?></a></li><?php
-                              } else { ?> 
-                                <li class="page-item disabled"><span class="page-link"><strong><?php echo $x; ?></strong></span></li><?php
-                              }
+                          for ($x = 1; $x <= $_RDATA['index_pages']; $x++) {
+                            if ($x != $_SESSION['index_page']) { ?>
+                              <li class="page-item"><a class="page-link" href="?ipage=<?php echo $x; ?>"><?php echo $x; ?></a></li><?php
+                            } else { ?> 
+                              <li class="page-item disabled"><span class="page-link"><strong><?php echo $x; ?></strong></span></li><?php
                             }
-                          } else { ?> 
-                            <li class="page-item d-table">
-                              <label class="d-table-cell align-middle h-100 text-nowrap ps-3 pe-3 h-100 border border-1">
-                                <span class="align-middle">Jump to page:</span>
-                                <select name="os_index_pagination_page_select" class="form-select form-select-sm d-inline-block w-auto"><?php
-                                  for ($x = 1; $x <= $_RDATA['index_pages']; $x++) { ?> 
-                                    <option value="<?php echo $x; ?>"<?php 
-                                      if ($x == $_SESSION['index_page']) echo ' selected="selected"';
-                                      ?>><?php echo $x; ?></option><?php
-                                  }
-                                ?></select>
-                              </label>
-                            </li><?php
-                          }
+                          } ?> 
+                          <li class="page-item d-none border border-1" id="os_pagination_jump">
+                            <label class="text-nowrap ps-3 pe-3 h-100 d-flex align-items-center">
+                              <span class="pe-1">Jump to page:</span>
+                              <select name="os_index_pagination_page_select" class="form-select form-select-sm d-inline-block w-auto"><?php
+                                for ($x = 1; $x <= $_RDATA['index_pages']; $x++) { ?> 
+                                  <option value="<?php echo $x; ?>"<?php 
+                                    if ($x == $_SESSION['index_page']) echo ' selected="selected"';
+                                    ?>><?php echo $x; ?></option><?php
+                                }
+                              ?></select>
+                            </label>
+                          </li><?php
                           if ($_SESSION['index_page'] < $_RDATA['index_pages']) { ?> 
                             <li class="page-item"><a class="page-link" href="?ipage=<?php echo $_SESSION['index_page'] + 1; ?>">Next</a></li><?php
                           } else { ?> 
diff --git a/orcinus/js/admin.js b/orcinus/js/admin.js
index d14995e..56522f0 100644
--- a/orcinus/js/admin.js
+++ b/orcinus/js/admin.js
@@ -176,6 +176,35 @@ for (let x = 0; x < os_index_pagination_page_select.length; x++) {
   }, false);
 }
 
+let os_index_pagination_bars = document.querySelectorAll('nav > ul.pagination');
+for (let x = 0; x < os_index_pagination_bars.length; x++) {
+  os_index_pagination_bars[x].items = os_index_pagination_bars[x].getElementsByTagName('li');
+  os_index_pagination_bars[x].checkWidth = function() {
+    let totalWidth = 0;
+    for (let y = 0; y < this.items.length; y++) {
+      if (this.items[y].id != 'os_pagination_jump') {
+        this.items[y].classList.remove('d-none');
+        totalWidth += this.items[y].offsetWidth;
+      }
+    }
+    for (let y = 1; y < this.items.length - 1; y++) {
+      if (totalWidth / this.offsetWidth > 0.75) {
+        this.items[y].classList.add('d-none');
+        if (this.items[y].id == 'os_pagination_jump')
+          this.items[y].classList.remove('d-none');
+      } else if (this.items[y].id == 'os_pagination_jump')
+        this.items[y].classList.add('d-none');
+    }
+  }
+  os_index_pagination_bars[x].checkWidth();
+}
+if (os_index_pagination_bars.length) {
+  window.addEventListener('resize', function() {
+    for (let x = 0; x < os_index_pagination_bars.length; x++)
+      os_index_pagination_bars[x].checkWidth();
+  }, false);
+}
+
 let os_index_filter_text = document.querySelector('input[name="os_index_filter_text"]');
 let os_index_filter_text_clear = document.querySelector('button[name="os_index_filter_text_clear"]');
 if (os_index_filter_text_clear && os_index_filter_text) {