all repos — h3 @ 68daa6a4f7e8660bb651e52e6d2a171984f568ad

A tiny, extremely minimalist JavaScript microframework.

docs/example/assets/js/components/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, h } from "../h3.js";

export default function Paginator() {
    const hash = window.location.hash;
    let { page, pagesize, filteredTodos } = h3.state;
    let total = filteredTodos.length;
    if (h3.route.params.page) {
        page = parseInt(h3.route.params.page);
    }
    // Recalculate page in case data is filtered.
    page = Math.min(Math.ceil(filteredTodos.length / pagesize), page) || 1;
    h3.dispatch("pages/set", page);
    const pages = Math.ceil(total / pagesize) || 1;
    const previousClass = page > 1 ? ".link" : ".disabled";
    const nextClass = page < pages ? ".link" : ".disabled";
    const setPage = (value) => {
        const page = h3.state.page;
        const newPage = page + value;
        h3.dispatch("pages/set", newPage);
        h3.navigateTo("/", { page: newPage });
    };
    return h("div.paginator", [
        h(
            `span.previous-page${previousClass}`,
            {
                onclick: () => setPage(-1),
            },
            ["←"]
        ),
        h("span.current-page", [`${String(page)}/${String(pages)}`]),
        h(
            `span.next-page${nextClass}`,
            {
                onclick: () => setPage(+1),
            },
            ["→"]
        ),
    ]);
}