feat: allow page select when clicking pagination ellipsis (#614)

* This allows users to modify the pagination style. * refactor: fix PHP styling * Never mind, guess I figured it out. * refactor: fix blade formatting * Forgot to remove this test. Whoops. * refactor: fix blade formatting * Simplified the quick pagination code some * Put the number input back because it's nice to type a number * refactor: fix blade formatting * Added credits didn't intend to when it was just me, but Moif deserves this * Minor update to credits- fixing up wiki pages. --------- Co-authored-by: SpeedyD <SpeedyD@users.noreply.github.com> Co-authored-by: moif <moiftab@gmail.com>
corowne · Jun 4, 2023 · 5b411fe · 5b411fe
1 parent 6c87c42
commit 5b411fe
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 1 deletion.
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
@@ -23,7 +23,8 @@ public function register() {
     public function boot() {
         //
         Schema::defaultStringLength(191);
-        Paginator::useBootstrap();
+        Paginator::defaultView('layouts._pagination');
+        Paginator::defaultSimpleView('layouts._simple-pagination');
 
         /*
          * Paginate a standard Laravel Collection.

diff --git a/public/css/lorekeeper.css b/public/css/lorekeeper.css
@@ -376,6 +376,18 @@ main > .row {
     flex-wrap: wrap;
 }
 
+/* Chrome, Safari, Edge, Opera */
+.pagination-popover input::-webkit-outer-spin-button,
+.pagination-popover input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+.pagination-popover input[type=number] {
+  -moz-appearance: textfield;
+}
+
 .spoiler {
     border: 1px solid rgba(0,0,0,0.1);
     border-radius: 5px;

diff --git a/resources/views/layouts/_pagination.blade.php b/resources/views/layouts/_pagination.blade.php
@@ -0,0 +1,55 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="page-item pageSelectPopover" data-container="body" data-toggle="popover" data-placement="top" data-title="Jump to Page" data-html="true"
+                        data-content='
+                        <div class="pagination-popover d-flex align-items-center" style="gap: 10px;">
+                            <input type="range" class="form-control-range custom-range paginationPageRange" min="1" max="{{ $paginator->lastPage() }}" value="{{ $paginator->currentPage() }}" oninput="this.nextElementSibling.value = this.value">
+                            <input type="number" style="flex: 1 0 35px; height: 24px;" class="paginationPageText form-control form-control-sm py-0 px-1" min="1" max="{{ $paginator->lastPage() }}" value="{{ $paginator->currentPage() }}" oninput="this.previousElementSibling.value = this.value">
+                            <span class="badge badge-primary paginator-btn p-1 px-2" style="cursor: pointer; font-size: 14px">Go</span>
+                        </div>
+                    '>
+                        <span class="page-link">{{ $element }}</span>
+                    </li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                        @else
+                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/layouts/_pagination_js.blade.php b/resources/views/layouts/_pagination_js.blade.php
@@ -0,0 +1,16 @@
+<script>
+    $('.pageSelectPopover').popover()
+
+    function onClick(e) {
+        const pageCurrent = new URL(window.location.href);
+        pageCurrent.searchParams.set("page", e.currentTarget.parentElement.querySelector('.paginationPageRange').value);
+        document.location.href = pageCurrent.href;
+    }
+
+    $('.pageSelectPopover').on('shown.bs.popover', function() {
+        $('.paginator-btn').on('click', onClick);
+        // so you can just hit enter after moving the range bar or entering a number
+        $('.paginationPageRange').on('keypress', (e) => e.which === 13 && onClick(e));
+        $('.paginationPageText').on('keypress', (e) => e.which === 13 ? onClick(e) : true);
+    });
+</script>
diff --git a/resources/views/layouts/_simple-pagination.blade.php b/resources/views/layouts/_simple-pagination.blade.php
@@ -0,0 +1,27 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">@lang('pagination.previous')</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
+                </li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">@lang('pagination.next')</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -141,6 +141,7 @@
         </div>
 
         @yield('scripts')
+        @include('layouts._pagination_js')
         <script>
             $(function() {
                 $('[data-toggle="tooltip"]').tooltip({

diff --git a/resources/views/pages/credits.blade.php b/resources/views/pages/credits.blade.php
@@ -47,6 +47,9 @@
         <p class="mb-0 col-md-4">
             <a href="http://wiki.lorekeeper.me/index.php?title=Extensions:MYO_Item_Tag"><strong>MYO Item Tag</strong></a> by <a href="https://github.com/junijwi">Junijwi</a>
         </p>
+        <p class="mb-0 col-md-4">
+            <a href="http://wiki.lorekeeper.me/index.php?title=Extensions:Pagination_Page_Select"><strong>Pagination Page Selector</strong></a> by <a href="https://github.com/SpeedyD">Speedy</a> and <a href="https://github.com/AW0005">Moif</a>
+        </p>
         <p class="mb-0 col-md-4">
             <a href="http://wiki.lorekeeper.me/index.php?title=Extensions:Reports"><strong>Reports</strong></a> by <a href="https://github.com/Ne-wt">Ne-wt</a>
         </p>