all repos — h3 @ d3af11eb2d542073ec7c2dd3fc7b3d60ec84e500

A tiny, extremely minimalist JavaScript microframework.

example/assets/js/paginator.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
import h3 from './h3.js';

export default function Paginator(app) {
  return function(data) {
    let page = data.page;
    const size = data.size;
    const total = data.total;
    const pages = Math.ceil(total / size) || 1;
    const previousClass = page > 1 ? ".link" : ".disabled";
    const nextClass = page < pages ? ".link" : ".disabled";
    function setPreviousPage() {
      page = page - 1;
      window.location.hash = `/?page=${page}`;
      app.update();
    }
    function setNextPage() {
      page = page + 1;
      window.location.hash = `/?page=${page}`;
      app.update();
    }
    return h3("div.paginator", [
      h3(`span.previous-page.fas.fa-arrow-left${previousClass}`, {
        onclick: setPreviousPage,
      }),
      h3("span.current-page", [`${String(page)}/${String(pages)}`]),
      h3(`span.next-page.fas.fa-arrow-right${nextClass}`, {
        onclick: setNextPage,
      }),
    ]);
  };
}