kokoro-hart / paginize

JavaScript (TypeScript) Pagination

Paginize

Paginize is a library for easily applying pagination to the existing DOM, implemented in TypeScript. Furthermore, it can reliably create pagination UI that complies with WAI-ARIA guidelines with minimal configuration.
You can also get this with just a little CSS writing: note: you will need to write your own CSS to get this UI. This package does not provide CSS.

Following are some of the interactions handled by the library:-

• Apply paging to already existing DOM elements
• Toggle each aria attribute
• Save each page to browser history

※Asynchronous paging is not supported

Installation

Paginize is provided by npm and can be installed from the command line.

npm i @kokorotobita/paginize

Quick Start

1. Add the pagination markup

<!-- [1] Wrapper-->
<div class="paginize">
  <!-- [2] Contents-->
  <ul class="paginize-contents">
    <li class="paginize-content">item-1</li>
    <li class="paginize-content">item-2</li>
    <li class="paginize-content">item-3</li>
    ...Repeat below
  </ul>

  <!-- [3] Paginaiton-->
  <nav aria-label="pagination" class="paginize-wrapper">
    <button type="button" class="paginize-prev" aria-label="Back to Previous Page"> &lt;</button>
    <ol class="paginize-counter-list" aria-busy="true">
      <!-- [4] The page numbers will be inserted here-->
    </ol>
    <button type="button" class="paginize-next" aria-label="Go to next page">&gt;</button>
  </nav>
</div>

[ 1 ] Wrapper
This is the outermost container for pagination and the content to which it switches. The role of this container is to limit the scope.

[ 2 ] Contents
Add contents.

[ 3 ] Paginaiton
Wrapper element for pagination.The aria-label attribute adds to the <nav> element. This is because the main site navigation also uses the <nav> element. If there are multiple <nav> elements on a single page, they must all be given unique, accessible names with aria-label.

[ 4 ] PageNumbers
A page number list is output here.　The aria-busy attribute is added to explicitly indicate that the contents are updated each time.

2. Add Paginize Instance

Import modules to instantiate Paginize

import { Paginize } from "@kokorotobita/paginize"

const pagination = new Paginize(".paginize")

[WIP] Using Options

Frequently used options Accepts an optional configuration object as the second argument.

const pagination = new Paginize(".paginize", {
  perPage: 10, // Number of contents to be displayed on one page
  pageRangeDisplayed: 2, // This determines how many "before and after" numbers are displayed on the page you are on.

  // A11y
  nextMassage: "Go to next page",
  prevMassage: "Go to prev page",
  bulletMessage: "Go to page {{count}}",
  firstPageMessage: "This is first page",
  lastPageMessage: "This is last page",

  // Function
  onPageChange: (current: number) => {
    console.log("current page is", current)
  },
  onClickNext: () => {
    // next page button clicked
  },
  onClickPrev: () => {
    // prev page button clicked
  },
  onBeforeMount: () => {
    // before mount
  },
  onMounted: () => {
    // after mount
  },
})

License

Released under the MIT license.

MIT: http://rem.mit-license.org, See LICENSE

paginize's Issues

[console.Error] onClickPrev option Error

update around ellipsis

TODO

• 省略記号を生成する際にliでラップする
• 省略記号の読み上げ対応をする（aria-label？）