bandolier-template/client/components/Pagination.svelte

<script>
  import Icon from "./Icon.svelte";
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  export let pagination = {currentPage: 1}

  const numbers = (start, count) => Array.from(Array(count).keys()).map(x => x + start);

  const pages_list = (paging) => {
    let {currentPage, lastPage} = paging;

    if(lastPage <= 4) {
      return numbers(1, lastPage);
    } else if(currentPage > 0 && currentPage <= 3) {
      return [...numbers(1, 4), "...", lastPage];
    } else if(currentPage > 3 && currentPage <= lastPage - 3) {
      return [1, "...", ...numbers(currentPage - 2, 5), "...", lastPage];
    } else if(currentPage > lastPage - 3) {
      return [1, "...", ...numbers(lastPage - 3, 4)];
    } else {
      return ["Messed up the logic."];
    }
  }

  $: pages = pages_list(pagination);

  const page_change = (page) => {
    if(page <= pagination.lastPage && page > 0) {
      pagination.currentPage = page;
      dispatch("change", pagination.currentPage);
    } else {
      // ignore the change as it's out of range
    }
  }
</script>

<style>
  pagination {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: start;
  }

  pagination span {
    display: block;
    font-size: 1.5em;
    padding: 0.5em;
  }

  pagination span.active {
    border: 1px solid black;
    text-align: center;
    font-weight: bold;
    background: var(--color-bg-tertiary);
  }
</style>

<pagination>
<span on:click={ () => page_change(pagination.currentPage - 1) }><Icon name="chevrons-left" tooltip="Previous page." size="36" /></span>
  {#each pages as page}
    {#if page !== "..."}
      <span class:active={page === pagination.currentPage}
            on:click={ () => page_change(page) }>{page}</span>
    {:else}
      <span>{ page }</span>
    {/if}
  {/each}
  <span on:click={ () => page_change(pagination.currentPage + 1) }><Icon name="chevrons-right" tooltip="Next page." size="36" /></span>
</pagination>