diff options
Diffstat (limited to 'resources/views/pagination.blade.php')
-rw-r--r-- | resources/views/pagination.blade.php | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/resources/views/pagination.blade.php b/resources/views/pagination.blade.php new file mode 100644 index 0000000..d4564fa --- /dev/null +++ b/resources/views/pagination.blade.php @@ -0,0 +1,89 @@ +@php +if (! isset($scrollTo)) { + $scrollTo = 'body'; +} + +$scrollIntoViewJsSnippet = ($scrollTo !== false) + ? <<<JS + (\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView() + JS + : ''; +@endphp +<div> + @if ($paginator->hasPages()) + <nav class="d-flex justify-items-center justify-content-between"> + <div class="d-flex justify-content-between flex-fill d-sm-none"> + <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"> + <button type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.previous')</button> + </li> + @endif + + {{-- Next Page Link --}} + @if ($paginator->hasMorePages()) + <li class="page-item"> + <button type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.next')</button> + </li> + @else + <li class="page-item disabled" aria-disabled="true"> + <span class="page-link" aria-hidden="true">@lang('pagination.next')</span> + </li> + @endif + </ul> + </div> + + <div class="d-none flex-sm-fill d-sm-flex align-items-sm-center justify-content-sm-between"> + <div> + <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">‹</span> + </li> + @else + <li class="page-item"> + <button type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" aria-label="@lang('pagination.previous')">‹</button> + </li> + @endif + + {{-- Pagination Elements --}} + @foreach ($elements as $element) + {{-- "Three Dots" Separator --}} + @if (is_string($element)) + <li class="page-item disabled" aria-disabled="true"><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" wire:key="paginator-{{ $paginator->getPageName() }}-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li> + @else + <li class="page-item" wire:key="paginator-{{ $paginator->getPageName() }}-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}">{{ $page }}</button></li> + @endif + @endforeach + @endif + @endforeach + + {{-- Next Page Link --}} + @if ($paginator->hasMorePages()) + <li class="page-item"> + <button type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" aria-label="@lang('pagination.next')">›</button> + </li> + @else + <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> + <span class="page-link" aria-hidden="true">›</span> + </li> + @endif + </ul> + </div> + </div> + </nav> + @endif +</div> |