From a51a2c65277df5d6cf5add1f8b749f4997e4b3c9 Mon Sep 17 00:00:00 2001
From: Bastian Luettig <bastian.luettig@bastie.space>
Date: Wed, 24 Jul 2024 16:49:11 +0200
Subject: [PATCH 1/2] added option to show dropdown in pagination

---
 src/theme/mermaid/pagination.scss | 20 ++++++++++++++++----
 src/view/plugin/pagination.tsx    | 22 +++++++++++++++++++++-
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/theme/mermaid/pagination.scss b/src/theme/mermaid/pagination.scss
index df4607d3..911c1d46 100644
--- a/src/theme/mermaid/pagination.scss
+++ b/src/theme/mermaid/pagination.scss
@@ -25,15 +25,24 @@
       outline: none;
       user-select: none;
     }
-
-    button:focus {
+    select {
+      padding: 6px 14px;
+      border: 1px solid $gray4;
+      background-color: $white;
+      border-right: none;
+      outline: none;
+      user-select: none;
+    }
+    button:focus,
+    select:focus {
       box-shadow: 0 0 0 2px rgba(149, 189, 243, 0.5);
       position: relative;
       margin-right: -1px;
       border-right: 1px solid $gray4;
     }
 
-    button:hover {
+    button:hover,
+    select:hover {
       background-color: $gray2;
       color: $darkBlue1;
       outline: none;
@@ -41,7 +50,10 @@
 
     button:disabled,
     button[disabled],
-    button:hover:disabled {
+    button:hover:disabled,
+    select:disabled,
+    select[disabled],
+    select:hover:disabled {
       cursor: default;
       background-color: $white;
       color: $gray5;
diff --git a/src/view/plugin/pagination.tsx b/src/view/plugin/pagination.tsx
index 229d1c6f..d3d0e9fa 100644
--- a/src/view/plugin/pagination.tsx
+++ b/src/view/plugin/pagination.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment } from 'preact';
+import { h, Fragment, JSX } from 'preact';
 import PaginationLimit from '../../pipeline/limit/pagination';
 import { classJoin, className } from '../../util/className';
 import ServerPaginationLimit from '../../pipeline/limit/serverPagination';
@@ -14,6 +14,7 @@ export interface PaginationConfig {
   prevButton?: boolean;
   buttonsCount?: number;
   resetPageOnUpdate?: boolean;
+  showDropdown?: boolean;
   server?: {
     url?: (prevUrl: string, page: number, limit: number) => string;
     body?: (prevBody: BodyInit, page: number, limit: number) => BodyInit;
@@ -27,6 +28,7 @@ export function Pagination() {
     summary = true,
     nextButton = true,
     prevButton = true,
+    showDropdown = false,
     buttonsCount = 3,
     limit = 10,
     page = 0,
@@ -224,6 +226,12 @@ export function Pagination() {
     );
   };
 
+  function handlePageChange(event: JSX.TargetedMouseEvent<HTMLSelectElement>) {
+    if (event.target instanceof HTMLInputElement) {
+      setPage(parseInt(event.target.value, 10));
+    }
+  }
+
   return (
     <div
       className={classJoin(
@@ -253,6 +261,18 @@ export function Pagination() {
 
         {renderPages()}
 
+        {showDropdown && (<select
+          value={currentPage}
+          onChange={handlePageChange}
+          aria-label={_('pagination.selectPage')}
+        >
+          {Array.from({ length: pages() }, (_, index) => (
+            <option key={index} value={index} selected={index === currentPage}>
+              {index + 1}
+            </option>
+          ))}
+        </select>)}
+
         {nextButton && (
           <button
             tabIndex={0}

From cb2ff716c6a9a916bd7ebc90e3be475d9527bf1c Mon Sep 17 00:00:00 2001
From: Bastian Luettig <bastian.luettig@bastie.space>
Date: Wed, 24 Jul 2024 17:03:15 +0200
Subject: [PATCH 2/2] fix: htmlSelectElement

---
 src/view/plugin/pagination.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/plugin/pagination.tsx b/src/view/plugin/pagination.tsx
index d3d0e9fa..fc94aee1 100644
--- a/src/view/plugin/pagination.tsx
+++ b/src/view/plugin/pagination.tsx
@@ -227,7 +227,7 @@ export function Pagination() {
   };
 
   function handlePageChange(event: JSX.TargetedMouseEvent<HTMLSelectElement>) {
-    if (event.target instanceof HTMLInputElement) {
+    if (event.target instanceof HTMLSelectElement) {
       setPage(parseInt(event.target.value, 10));
     }
   }