Skip to content

Commit

Permalink
feat: material theme
Browse files Browse the repository at this point in the history
  • Loading branch information
wenqing committed Jul 24, 2023
1 parent b6dd0d1 commit 402e351
Show file tree
Hide file tree
Showing 20 changed files with 455 additions and 67 deletions.
8 changes: 5 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,14 @@ $ npm i paginationbar
1. Import the style for themes.

```ts
// Include all themes
// Include all themes (Not recommended)
import 'paginationbar/lib/style.css'

// Alternatively, you can import only a certain theme style.
// Alternatively, you can import only a certain theme style (Recommended).

// material theme
import 'paginationbar/lib/themes/material/index.css'

// element theme
import 'paginationbar/lib/themes/element/index.css'
```
Expand All @@ -68,7 +70,7 @@ const paginationBar = createPaginationBar({
| Prop | Type | Default value | Available values | Description |
| :---: | :---: | :---: | :---: | :---: |
| `container` | `string` <br /> `HTMLElement` | `#pagination-bar-container` | - | Specify this to change the container. |
| `theme` | `string` | `element` | - | Specify this to change the theme. |
| `theme` | `string` | `material` | - | Specify this to change the theme. |
| `prevText` | `string` | `''` | - | Replace **prev icon** with custom text. |
| `nextText` | `string` | `''` | - | Replace **next icon** with custom text. |
| `jumperPrefixText` | `string` | `'Go to'` | - | Specify this to change the prefix text of the **jumper control**. |
Expand Down
4 changes: 3 additions & 1 deletion lib/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ type PaginationThemes = 'element' | 'material'
interface PaginationBarOptions {
container: string | HTMLElement

theme?: PaginationThemes
theme?: PaginationThemes | string

firstPageNumber?: number

Expand Down Expand Up @@ -97,6 +97,8 @@ interface PaginationBarInstance {

setOptions(opts: PaginationBarOptions, reRender?: boolean): void

setTheme(themeName: string): void

getLayout(): string[]

getLayoutHTML(): string
Expand Down
4 changes: 2 additions & 2 deletions lib/paginationbar.cjs
View file

Large diffs are not rendered by default.

77 changes: 45 additions & 32 deletions lib/paginationbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
var h = Object.defineProperty;
var l = (s, e, t) => e in s ? h(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
var o = (s, e, t) => (l(s, typeof e != "symbol" ? e + "" : e, t), t);
var p = /* @__PURE__ */ ((s) => (s.getContainerElError = "Can not find container element.", s))(p || {}), n = /* @__PURE__ */ ((s) => (s.containerClassName = "pagination-bar-container", s.pagerWrapperClassName = "pagination-bar__pager", s.pagerItemClassName = "pagination-bar__pager__number", s.prevButtonClassName = "pagination-bar__prev", s.nextButtonClassName = "pagination-bar__next", s.totalClassName = "pagination-bar__total", s.jumperClassName = "pagination-bar__jumper", s.sizesClassName = "pagination-bar__sizes", s))(n || {});
function g(s, e) {
var l = (i, e, t) => e in i ? h(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
var o = (i, e, t) => (l(i, typeof e != "symbol" ? e + "" : e, t), t);
var u = /* @__PURE__ */ ((i) => (i.getContainerElError = "Can not find container element.", i))(u || {}), n = /* @__PURE__ */ ((i) => (i.containerClassName = "pagination-bar-container", i.pagerWrapperClassName = "pagination-bar__pager", i.pagerItemClassName = "pagination-bar__pager__number", i.prevButtonClassName = "pagination-bar__prev", i.nextButtonClassName = "pagination-bar__next", i.totalClassName = "pagination-bar__total", i.jumperClassName = "pagination-bar__jumper", i.sizesClassName = "pagination-bar__sizes", i.themeClassNamePrefix = "theme--", i))(n || {});
function g(i, e) {
const t = typeof e == "string" ? [e] : e;
s.classList.add(...t);
i.classList.add(...t);
}
const c = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" fill="#707070" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M650.721 191.69c-8.782 0-17.565 3.237-24.268 9.709L328.968 488.573c-13.408 12.933-13.408 33.923 0 46.856L626.454 822.6c13.408 12.944 35.13 12.944 48.538 0 13.409-12.932 13.409-33.923 0-46.855L401.775 512 674.99 248.253c13.409-12.932 13.409-33.923 0-46.855-6.704-6.471-15.486-9.708-24.269-9.707z"/></svg>', m = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" fill="#707070" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M372.68 191.69c8.782 0 17.565 3.237 24.269 9.709l297.484 287.175c13.408 12.933 13.408 33.923 0 46.856L396.948 822.602c-13.409 12.944-35.13 12.944-48.538 0-13.408-12.932-13.408-33.923 0-46.855l273.216-263.745L348.41 248.253c-13.408-12.932-13.408-33.923 0-46.855 6.704-6.471 15.487-9.708 24.269-9.707z"/></svg>', b = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" fill="#515151" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M197.031 417.342c-52.237 0-94.615 42.398-94.615 94.638 0 52.256 42.378 94.634 94.615 94.634 52.24 0 94.637-42.378 94.637-94.634 0-52.24-42.397-94.638-94.637-94.638zM512 417.342c-52.259 0-94.615 42.398-94.615 94.638 0 52.256 42.356 94.634 94.614 94.634 52.238 0 94.595-42.378 94.595-94.634 0-52.24-42.357-94.638-94.595-94.638zM826.926 417.342c-52.198 0-94.594 42.398-94.594 94.638 0 52.256 42.397 94.634 94.594 94.634 52.26 0 94.657-42.378 94.657-94.634 0-52.24-42.398-94.638-94.657-94.638z"/></svg>';
function c(i, e) {
const t = typeof e == "string" ? [e] : e;
i.classList.remove(...t);
}
const m = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" fill="#707070" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M650.721 191.69c-8.782 0-17.565 3.237-24.268 9.709L328.968 488.573c-13.408 12.933-13.408 33.923 0 46.856L626.454 822.6c13.408 12.944 35.13 12.944 48.538 0 13.409-12.932 13.409-33.923 0-46.855L401.775 512 674.99 248.253c13.409-12.932 13.409-33.923 0-46.855-6.704-6.471-15.486-9.708-24.269-9.707z"/></svg>', b = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" fill="#707070" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M372.68 191.69c8.782 0 17.565 3.237 24.269 9.709l297.484 287.175c13.408 12.933 13.408 33.923 0 46.856L396.948 822.602c-13.409 12.944-35.13 12.944-48.538 0-13.408-12.932-13.408-33.923 0-46.855l273.216-263.745L348.41 248.253c-13.408-12.932-13.408-33.923 0-46.855 6.704-6.471 15.487-9.708 24.269-9.707z"/></svg>', P = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" fill="#515151" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M197.031 417.342c-52.237 0-94.615 42.398-94.615 94.638 0 52.256 42.378 94.634 94.615 94.634 52.24 0 94.637-42.378 94.637-94.634 0-52.24-42.397-94.638-94.637-94.638zM512 417.342c-52.259 0-94.615 42.398-94.615 94.638 0 52.256 42.356 94.634 94.614 94.634 52.238 0 94.595-42.378 94.595-94.634 0-52.24-42.357-94.638-94.595-94.638zM826.926 417.342c-52.198 0-94.594 42.398-94.594 94.638 0 52.256 42.397 94.634 94.594 94.634 52.26 0 94.657-42.378 94.657-94.634 0-52.24-42.398-94.638-94.657-94.638z"/></svg>';
class d {
constructor(e) {
o(this, "options", {
container: "#pagination-bar-container",
theme: "element",
theme: "material",
firstPageNumber: 1,
pagerCount: 7,
currentPage: 1,
Expand All @@ -35,24 +39,33 @@ class d {
o(this, "selectedPageSize", this.options.pageSize);
this.options = Object.assign(this.options, e), this.selectedPageSize = this.options.pageSize, this.pagerListener = this.pagerListener.bind(this), this.prevBtnListener = this.prevBtnListener.bind(this), this.nextBtnListener = this.nextBtnListener.bind(this), this.jumperListener = this.jumperListener.bind(this), this.sizesListener = this.sizesListener.bind(this);
const t = this.getContainerEl();
g(t, n.containerClassName), g(t, `theme--${this.options.theme}`), this.render();
g(t, n.containerClassName), g(
t,
`${n.themeClassNamePrefix}${this.options.theme}`
), this.render();
}
setCurrentPage(e, t = !0) {
var r;
let i = e;
return i < this.options.firstPageNumber ? i = this.options.firstPageNumber : i > this.lastPageNumber && (i = this.lastPageNumber), this.options.currentPage = i, (r = this.options) == null || r.onCurrentPageChange(this.options.currentPage), t && this.render(), i;
let s = e;
return s < this.options.firstPageNumber ? s = this.options.firstPageNumber : s > this.lastPageNumber && (s = this.lastPageNumber), this.options.currentPage = s, (r = this.options) == null || r.onCurrentPageChange(this.options.currentPage), t && this.render(), s;
}
setPageSize(e, t = !0) {
var r;
let i = e;
return i > this.options.total && (i = this.options.total), this.selectedPageSize = i, this.options.pageSize = i, (r = this.options) == null || r.onPageSizeChange(this.options.pageSize), t && this.render(), i;
let s = e;
return s > this.options.total && (s = this.options.total), this.selectedPageSize = s, this.options.pageSize = s, (r = this.options) == null || r.onPageSizeChange(this.options.pageSize), t && this.render(), s;
}
setTotal(e, t = !0) {
this.options.total = e || 0, t && this.render();
}
setOptions(e, t = !1) {
this.options = Object.assign(this.options, e), t && this.render();
}
setTheme(e) {
const t = this.getContainerEl();
for (const s of t.classList.values())
s.startsWith(n.themeClassNamePrefix) && c(t, s);
g(t, `${n.themeClassNamePrefix}${e}`);
}
get pageCount() {
return Math.ceil(this.options.total / this.options.pageSize);
}
Expand All @@ -70,15 +83,15 @@ class d {
let e = this.mainPagerGap;
const t = this.lastPageNumber - this.options.currentPage;
t <= this.mainPagerGap && (e += this.mainPagerGap - t + 1);
const i = this.options.currentPage - e;
return i < this.options.firstPageNumber ? this.options.firstPageNumber : i;
const s = this.options.currentPage - e;
return s < this.options.firstPageNumber ? this.options.firstPageNumber : s;
}
get mainPagerEnd() {
let e = this.mainPagerCount % 2 === 0 ? this.mainPagerGap - 1 : this.mainPagerGap;
const t = this.options.currentPage - 1;
t <= this.mainPagerGap && (e += this.mainPagerGap - t + 1);
const i = this.options.currentPage + e;
return i > this.pageCount ? this.pageCount : i;
const s = this.options.currentPage + e;
return s > this.pageCount ? this.pageCount : s;
}
get mainPager() {
const e = [];
Expand Down Expand Up @@ -122,7 +135,7 @@ class d {
if (typeof this.options.container == "string") {
const e = document.querySelector(this.options.container);
if (!e)
throw new Error(p.getContainerElError);
throw new Error(u.getContainerElError);
return e;
}
return this.options.container;
Expand All @@ -131,24 +144,24 @@ class d {
return e && !["prev-ellipsis", "next-ellipsis"].includes(e);
}
generatePager() {
const e = this.finalPager.reduce((t, i) => {
const r = this.isPagerNumberType(i.type) ? i.pageNumber : b, a = this.options.currentPage === i.pageNumber ? "active" : "", u = this.isPagerNumberType(i.type) ? "pager-number" : "pager-quick-btn";
return t += `<li class="${n.pagerItemClassName} ${a}" data-number="${i.pageNumber}" data-type="${i.type}" role="${u}">${r}</li>`, t;
const e = this.finalPager.reduce((t, s) => {
const r = this.isPagerNumberType(s.type) ? s.pageNumber : P, a = this.options.currentPage === s.pageNumber ? "active" : "", p = this.isPagerNumberType(s.type) ? "pager-number" : "pager-quick-btn";
return t += `<li class="${n.pagerItemClassName} ${a} ${p}" data-number="${s.pageNumber}" data-type="${s.type}" role="${p}">${r}</li>`, t;
}, "");
return `<ul class="${n.pagerWrapperClassName}">${e}</ul>`;
}
generatePrev() {
const e = this.options.currentPage <= this.options.firstPageNumber ? 'disabled="disabled"' : "", t = e ? "disabled" : "", i = this.options.prevText ? this.options.prevText : c;
return `<button type="button" class="${n.prevButtonClassName} ${t}" ${e} role="prev-btn">${i}</button>`;
const e = this.options.currentPage <= this.options.firstPageNumber ? 'disabled="disabled"' : "", t = e ? "disabled" : "", s = this.options.prevText ? this.options.prevText : m;
return `<button type="button" class="${n.prevButtonClassName} ${t}" ${e} role="prev-btn">${s}</button>`;
}
generateNext() {
const e = this.options.currentPage >= this.lastPageNumber ? 'disabled="disabled"' : "", t = e ? "disabled" : "", i = this.options.nextText ? this.options.nextText : m;
return `<button type="button" class="${n.nextButtonClassName} ${t}" ${e} role="next-btn">${i}</button>`;
const e = this.options.currentPage >= this.lastPageNumber ? 'disabled="disabled"' : "", t = e ? "disabled" : "", s = this.options.nextText ? this.options.nextText : b;
return `<button type="button" class="${n.nextButtonClassName} ${t}" ${e} role="next-btn">${s}</button>`;
}
generateSizes() {
const e = this.options.pageSizes.map((t) => {
const i = this.selectedPageSize === t ? "selected" : "";
return `<option value="${t}" ${i}>${this.options.sizesOptionLabel(
const s = this.selectedPageSize === t ? "selected" : "";
return `<option value="${t}" ${s}>${this.options.sizesOptionLabel(
t
)}</option>`;
}).join("");
Expand Down Expand Up @@ -202,15 +215,15 @@ class d {
this.selectedPageSize = this.setPageSize(Number(t.value), !1), this.render();
}
registerListeners() {
var t, i, r, a;
var t, s, r, a;
this.removeListeners();
const e = this.getContainerEl();
e.addEventListener("click", this.pagerListener), (t = e.querySelector('button[role="prev-btn"]')) == null || t.addEventListener("click", this.prevBtnListener), (i = e.querySelector('button[role="next-btn"]')) == null || i.addEventListener("click", this.nextBtnListener), (r = e.querySelector(`.${n.jumperClassName}__input-inner`)) == null || r.addEventListener("change", this.jumperListener), (a = e.querySelector(`.${n.sizesClassName}__select`)) == null || a.addEventListener("change", this.sizesListener);
e.addEventListener("click", this.pagerListener), (t = e.querySelector('button[role="prev-btn"]')) == null || t.addEventListener("click", this.prevBtnListener), (s = e.querySelector('button[role="next-btn"]')) == null || s.addEventListener("click", this.nextBtnListener), (r = e.querySelector(`.${n.jumperClassName}__input-inner`)) == null || r.addEventListener("change", this.jumperListener), (a = e.querySelector(`.${n.sizesClassName}__select`)) == null || a.addEventListener("change", this.sizesListener);
}
removeListeners() {
var t, i, r, a;
var t, s, r, a;
const e = this.getContainerEl();
e.removeEventListener("click", this.pagerListener), (t = e.querySelector('button[role="prev-btn"]')) == null || t.removeEventListener("click", this.prevBtnListener), (i = e.querySelector('button[role="next-btn"]')) == null || i.removeEventListener("click", this.nextBtnListener), (r = e.querySelector(`.${n.jumperClassName}__input-inner`)) == null || r.removeEventListener("change", this.jumperListener), (a = e.querySelector(`.${n.sizesClassName}__select`)) == null || a.removeEventListener("change", this.sizesListener);
e.removeEventListener("click", this.pagerListener), (t = e.querySelector('button[role="prev-btn"]')) == null || t.removeEventListener("click", this.prevBtnListener), (s = e.querySelector('button[role="next-btn"]')) == null || s.removeEventListener("click", this.nextBtnListener), (r = e.querySelector(`.${n.jumperClassName}__input-inner`)) == null || r.removeEventListener("change", this.jumperListener), (a = e.querySelector(`.${n.sizesClassName}__select`)) == null || a.removeEventListener("change", this.sizesListener);
}
render() {
const e = this.getContainerEl(), t = this.getLayoutHTML();
Expand All @@ -220,8 +233,8 @@ class d {
this.removeListeners();
}
}
const v = (s) => new d(s);
const f = (i) => new d(i);
export {
d as PaginationBar,
v as createPaginationBar
f as createPaginationBar
};

0 comments on commit 402e351

Please sign in to comment.