all repos — h3 @ c7ba9f3fa54421ae1ef753ad8d49c793189f7440

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
 32
 33
 34
 35
 36
 37
 38
 39
 
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${previousClass}`,
        {
          onclick: setPreviousPage,
        },
        ["←"]
      ),
      h3("span.current-page", [`${String(page)}/${String(pages)}`]),
      h3(
        `span.next-page${nextClass}`,
        {
          onclick: setNextPage,
        },
        ["→"]
      ),
    ]);
  };
}