@whitesev/data-paging 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,351 +1,2 @@
1
- !(function (t, e) {
2
- "object" == typeof exports && "undefined" != typeof module
3
- ? (module.exports = e())
4
- : "function" == typeof define && define.amd
5
- ? define(e)
6
- : ((t = "undefined" != typeof globalThis ? globalThis : t || self).DataPaging = e());
7
- })(this, function () {
8
- "use strict";
9
- const t = {
10
- setSafeHTML(t, e) {
11
- try {
12
- t.innerHTML = e;
13
- } catch {
14
- if (!globalThis.trustedTypes) throw new Error("PagingUtils trustedTypes is not defined");
15
- {
16
- const i = globalThis.trustedTypes.createPolicy("safe-innerHTML", { createHTML: (t) => t });
17
- t.innerHTML = i.createHTML(e);
18
- }
19
- }
20
- },
21
- };
22
- return class {
23
- version = "0.0.3";
24
- CONFIG;
25
- PAGE_CONFIG = {
26
- currentPage: () => {
27
- const t = this.DOM_CONFIG.getAttributeWithCurrentPage();
28
- return this.DOM_CONFIG.getAttributeWithPageId(t) ?? 1;
29
- },
30
- maxPage: 1,
31
- };
32
- DOM_CONFIG = {
33
- $pageWrapper: { localName: "div", id: "data-paging-wrapper", dom: null },
34
- firstBtnNode: {
35
- localName: "a",
36
- className: "pg-first",
37
- svgHTML:
38
- '<svg t="1694497357294" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4758" width="20"><path d="M730.639277 211.376748l60.943177 60.943176-301.698894 301.698893L428.940384 513.075641z" p-id="4759"></path><path d="M730.496772 814.924547l60.943176-60.943176-301.698893-301.698893L428.797879 513.225654z" p-id="4760"></path><path d="M298.666667 213.333333h85.333333v597.333334H298.666667z" p-id="4761"></path></svg>',
39
- get: () =>
40
- this.DOM_CONFIG.$pageWrapper.dom.querySelector(
41
- `${this.DOM_CONFIG.firstBtnNode.localName}.${this.DOM_CONFIG.firstBtnNode.className}`
42
- ),
43
- },
44
- prevBtnNode: {
45
- localName: "a",
46
- className: "pg-prev",
47
- svgHTML:
48
- '<svg t="1694497840770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5272" width="20"><path d="M620.322607 151.04875l60.943176 60.943176-362.038672 362.038672L258.283935 513.087422z" p-id="5273"></path><path d="M620.180101 875.252545l60.943177-60.943176-362.038672-362.038672L258.141429 513.213873z" p-id="5274"></path></svg>',
49
- get: () =>
50
- this.DOM_CONFIG.$pageWrapper.dom.querySelector(
51
- `${this.DOM_CONFIG.prevBtnNode.localName}.${this.DOM_CONFIG.prevBtnNode.className}`
52
- ),
53
- },
54
- nextBtnNode: {
55
- localName: "a",
56
- className: "pg-next",
57
- svgHTML:
58
- '<svg t="1694497949481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5465" width="20"><path d="M403.399239 151.02258l-60.943177 60.943177 362.038672 362.038672L765.437911 513.061252z" p-id="5466"></path><path d="M403.576858 875.263008l-60.943176-60.943176 362.038672-362.038672L765.61553 513.224336z" p-id="5467"></path></svg>',
59
- get: () =>
60
- this.DOM_CONFIG.$pageWrapper.dom.querySelector(
61
- `${this.DOM_CONFIG.nextBtnNode.localName}.${this.DOM_CONFIG.nextBtnNode.className}`
62
- ),
63
- },
64
- lastBtnNode: {
65
- localName: "a",
66
- className: "pg-last",
67
- svgHTML:
68
- '<svg t="1694498035538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2299" width="20"><path d="M516.266667 490.666667L256 230.4 315.733333 170.666667l320 320L315.733333 810.666667 256 750.933333l260.266667-260.266666zM678.4 170.666667h85.333333v640h-85.333333V170.666667z" p-id="2300"></path></svg>',
69
- get: () =>
70
- this.DOM_CONFIG.$pageWrapper.dom.querySelector(
71
- `${this.DOM_CONFIG.lastBtnNode.localName}.${this.DOM_CONFIG.lastBtnNode.className}`
72
- ),
73
- },
74
- setAttributeWithPageId: (t, e) => {
75
- t.setAttribute("page-id", String(e));
76
- },
77
- getAttributeWithPageId: (t) => {
78
- const e = t?.getAttribute("page-id");
79
- return e ? parseInt(e) : null;
80
- },
81
- hasAttributeWithPageId: (t) => t.hasAttribute("page-id"),
82
- setAttributeWithCurrentPage: (t) => {
83
- t.setAttribute("data-current-page", "");
84
- },
85
- getAttributeWithCurrentPage: (t) => (t || this.DOM_CONFIG.$pageWrapper.dom).querySelector("a[data-current-page]"),
86
- hasAttributeWithCurrentPage: (t) => t.hasAttribute("data-current-page"),
87
- removeAttributeWithCurrentPage: (t) => {
88
- t.removeAttribute("data-current-page");
89
- },
90
- setAttributeWithDisabled: (t) => {
91
- t.setAttribute("disabled", "true");
92
- },
93
- removeAllAttributeWithDisabled: (t) => {
94
- (t || this.DOM_CONFIG.$pageWrapper.dom)?.querySelectorAll("a[class][disabled]").forEach((t) => {
95
- t.removeAttribute("disabled");
96
- });
97
- },
98
- getFirstPageNode: (t) => (t || this.DOM_CONFIG.$pageWrapper.dom).querySelector("a[page-id='1']"),
99
- getLastPageNode: (t) =>
100
- (t || this.DOM_CONFIG.$pageWrapper.dom).querySelector(`a[page-id='${this.PAGE_CONFIG.maxPage}']`),
101
- getAllPageNode: (t) => Array.from((t || this.DOM_CONFIG.$pageWrapper.dom).querySelectorAll("a[page-id]")),
102
- };
103
- constructor(t) {
104
- ((this.CONFIG = {
105
- data: [],
106
- pageShowDataMaxCount: 5,
107
- pageMaxStep: 3,
108
- currentPage: 1,
109
- pageChangeCallBack: function () {},
110
- prevBtn: { enable: !0, callBack: function () {} },
111
- nextBtn: { enable: !0, callBack: function () {} },
112
- firstBtn: { enable: !0, callBack: function () {} },
113
- lastBtn: { enable: !0, callBack: function () {} },
114
- }),
115
- this.changeConfig(t));
116
- }
117
- hide(t = this.DOM_CONFIG.$pageWrapper.dom) {
118
- t && (t.style.display = "none");
119
- }
120
- show(t = this.DOM_CONFIG.$pageWrapper.dom) {
121
- t && (t.style.display = "");
122
- }
123
- isHide(t = this.DOM_CONFIG.$pageWrapper.dom) {
124
- if (t) return t.style.display.includes("none");
125
- }
126
- destory() {
127
- const t = this.DOM_CONFIG.$pageWrapper.dom;
128
- if (!t) return;
129
- const e = t.parentElement;
130
- (e?.removeChild?.(t), (this.DOM_CONFIG.$pageWrapper.dom = null));
131
- }
132
- addCSS(e = document.head) {
133
- const i = document.createElement("style");
134
- i.setAttribute("type", "text/css");
135
- const a = `@charset "utf-8";\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} {\n\t\t\ttext-align: center;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.firstBtnNode.className},\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.prevBtnNode.className},\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.nextBtnNode.className},\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.lastBtnNode.className} {\n\t\t\tfont-family: Arial, sans-serif;\n\t\t\tcolor: #333;\n\t\t\tfont-size: 22px;\n\t\t\tfill: currentColor;\n\t\t\tdisplay: inline-flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a,\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} span {\n\t\t\twidth: 45px;\n\t\t\theight: 40px;\n\t\t\tborder: 1px solid #ebebeb;\n\t\t\tmargin-left: -1px;\n\t\t\tcolor: #000000;\n\t\t\tline-height: 40px;\n\t\t\tfloat: left;\n\t\t\tfont-size: 15px;\n\t\t\ttext-decoration: none;\n\t\t\tmargin: 0 2px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a:hover,\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} span:hover {\n\t\t\tborder-color: #3897cd;\n\t\t\tcolor: #3897cd;\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a {\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a[data-current-page] {\n\t\t\tbackground-color: #222a35;\n\t\t\tcolor: #fff;\n\t\t\tborder-color: #ebebeb;\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.firstBtnNode.className}[disabled="true"],\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.prevBtnNode.className}[disabled="true"],\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.nextBtnNode.className}[disabled="true"],\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.lastBtnNode.className}[disabled="true"]{\n\t\t\tcursor: not-allowed;\n\t\t\tborder: 1px solid transparent;\n\t\t\tcolor: #c9c9c9;\n\t\t}\n\t\t`;
136
- (t.setSafeHTML(i, a), e.appendChild(i));
137
- }
138
- createDataPagingWrapper() {
139
- const e = document.createElement(this.DOM_CONFIG.$pageWrapper.localName);
140
- ((this.DOM_CONFIG.$pageWrapper.dom = e), (e.id = this.DOM_CONFIG.$pageWrapper.id));
141
- const i = document.createElement(this.DOM_CONFIG.firstBtnNode.localName);
142
- t.setSafeHTML(i, this.DOM_CONFIG.firstBtnNode.svgHTML);
143
- const a = document.createElement(this.DOM_CONFIG.prevBtnNode.localName);
144
- t.setSafeHTML(a, this.DOM_CONFIG.prevBtnNode.svgHTML);
145
- const s = document.createElement(this.DOM_CONFIG.nextBtnNode.localName);
146
- t.setSafeHTML(s, this.DOM_CONFIG.nextBtnNode.svgHTML);
147
- const r = document.createElement(this.DOM_CONFIG.lastBtnNode.localName);
148
- if (
149
- (t.setSafeHTML(r, this.DOM_CONFIG.lastBtnNode.svgHTML),
150
- (i.className = this.DOM_CONFIG.firstBtnNode.className),
151
- (a.className = this.DOM_CONFIG.prevBtnNode.className),
152
- (s.className = this.DOM_CONFIG.nextBtnNode.className),
153
- (r.className = this.DOM_CONFIG.lastBtnNode.className),
154
- (this.PAGE_CONFIG.maxPage = Math.ceil(this.CONFIG.data.length / this.CONFIG.pageShowDataMaxCount)),
155
- this.CONFIG.currentPage < 1
156
- ? (this.CONFIG.currentPage = 1)
157
- : this.CONFIG.currentPage > this.PAGE_CONFIG.maxPage && (this.CONFIG.currentPage = this.PAGE_CONFIG.maxPage),
158
- this.PAGE_CONFIG.maxPage < 2)
159
- )
160
- return e;
161
- (this.CONFIG.firstBtn.enable && (this.setFirstBtnClickEvent(i, e), e.appendChild(i)),
162
- this.CONFIG.prevBtn.enable && (this.setPrevBtnClickEvent(a, e), e.appendChild(a)));
163
- let n = this.CONFIG.currentPage;
164
- if (this.CONFIG.pageMaxStep > this.PAGE_CONFIG.maxPage)
165
- for (let t = n; t <= this.PAGE_CONFIG.maxPage; t++) {
166
- const i = document.createElement("a");
167
- (this.DOM_CONFIG.setAttributeWithPageId(i, t),
168
- (i.innerText = String(t)),
169
- this.CONFIG.currentPage === t && this.DOM_CONFIG.setAttributeWithCurrentPage(i),
170
- this.setPageBtnClickEvent(i, e),
171
- e.appendChild(i));
172
- }
173
- else if (n + this.CONFIG.pageMaxStep > this.PAGE_CONFIG.maxPage) {
174
- n = this.PAGE_CONFIG.maxPage;
175
- const t = [];
176
- for (let i = 0; i < this.CONFIG.pageMaxStep; i++) {
177
- const i = document.createElement("a");
178
- (this.DOM_CONFIG.setAttributeWithPageId(i, n),
179
- (i.innerText = String(n)),
180
- this.CONFIG.currentPage === n && this.DOM_CONFIG.setAttributeWithCurrentPage(i),
181
- this.setPageBtnClickEvent(i, e),
182
- t.push(i),
183
- n--);
184
- }
185
- (t.reverse(),
186
- t.forEach((t) => {
187
- e.appendChild(t);
188
- }));
189
- } else
190
- for (let t = 0; t < this.CONFIG.pageMaxStep; t++) {
191
- const t = document.createElement("a");
192
- (this.DOM_CONFIG.setAttributeWithPageId(t, n),
193
- (t.innerText = String(n)),
194
- this.CONFIG.currentPage === n && this.DOM_CONFIG.setAttributeWithCurrentPage(t),
195
- this.setPageBtnClickEvent(t, e),
196
- e.appendChild(t),
197
- n++);
198
- }
199
- return (
200
- this.CONFIG.nextBtn.enable && (this.setNextBtnClickEvent(s, e), e.appendChild(s)),
201
- this.CONFIG.lastBtn.enable && (this.setLastBtnClickEvent(r, e), e.appendChild(r)),
202
- 1 === this.CONFIG.currentPage
203
- ? (this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.firstBtnNode.get()),
204
- this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.prevBtnNode.get()))
205
- : this.CONFIG.currentPage === this.PAGE_CONFIG.maxPage &&
206
- (this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.nextBtnNode.get()),
207
- this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.lastBtnNode.get())),
208
- e
209
- );
210
- }
211
- setFirstBtnClickEvent(t, e) {
212
- t.addEventListener("click", async (t) => {
213
- const i = this.DOM_CONFIG.getAttributeWithCurrentPage();
214
- if (1 === this.DOM_CONFIG.getAttributeWithPageId(i)) return;
215
- await this.CONFIG.firstBtn?.callBack?.(t);
216
- const a = this.DOM_CONFIG.getAllPageNode(e);
217
- for (let t = 0; t < this.CONFIG.pageMaxStep; t++) {
218
- const e = a[t];
219
- null != e &&
220
- (0 === t
221
- ? this.DOM_CONFIG.setAttributeWithCurrentPage(e)
222
- : this.DOM_CONFIG.removeAttributeWithCurrentPage(e),
223
- this.DOM_CONFIG.setAttributeWithPageId(e, t + 1),
224
- (e.innerText = String(t + 1)));
225
- }
226
- (this.DOM_CONFIG.removeAllAttributeWithDisabled(e),
227
- this.DOM_CONFIG.getFirstPageNode(e) &&
228
- (this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.firstBtnNode.get()),
229
- this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.prevBtnNode.get())),
230
- this.CONFIG.pageChangeCallBack(1));
231
- });
232
- }
233
- setPrevBtnClickEvent(t, e) {
234
- t.addEventListener("click", async (t) => {
235
- const i = this.DOM_CONFIG.getAttributeWithCurrentPage();
236
- if (1 === this.DOM_CONFIG.getAttributeWithPageId(i)) return;
237
- await this.CONFIG.prevBtn?.callBack?.(t);
238
- const a = i.previousElementSibling;
239
- if (a && this.DOM_CONFIG.hasAttributeWithPageId(a)) a.click();
240
- else {
241
- (this.DOM_CONFIG.getAllPageNode(e).forEach((t) => {
242
- let e = this.DOM_CONFIG.getAttributeWithPageId(t);
243
- (e--, this.DOM_CONFIG.setAttributeWithPageId(t, e), (t.innerText = String(e)));
244
- }),
245
- this.CONFIG.pageChangeCallBack(this.PAGE_CONFIG.currentPage()));
246
- }
247
- (this.DOM_CONFIG.removeAllAttributeWithDisabled(e),
248
- this.DOM_CONFIG.getFirstPageNode(e) &&
249
- 1 == this.PAGE_CONFIG.currentPage() &&
250
- (this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.firstBtnNode.get()),
251
- this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.prevBtnNode.get())));
252
- });
253
- }
254
- setNextBtnClickEvent(t, e) {
255
- t.addEventListener("click", async (t) => {
256
- const i = this.DOM_CONFIG.getAttributeWithCurrentPage();
257
- if (this.DOM_CONFIG.getAttributeWithPageId(i) === this.PAGE_CONFIG.maxPage) return;
258
- await this.CONFIG.nextBtn?.callBack?.(t);
259
- const a = i.nextElementSibling;
260
- if (a && this.DOM_CONFIG.hasAttributeWithPageId(a)) a.click();
261
- else {
262
- (this.DOM_CONFIG.getAllPageNode(e).forEach((t) => {
263
- let e = this.DOM_CONFIG.getAttributeWithPageId(t);
264
- (e++,
265
- e > this.PAGE_CONFIG.maxPage ||
266
- (this.DOM_CONFIG.setAttributeWithPageId(t, e), (t.innerText = String(e))));
267
- }),
268
- this.CONFIG.pageChangeCallBack(this.PAGE_CONFIG.currentPage()));
269
- }
270
- (this.DOM_CONFIG.removeAllAttributeWithDisabled(e),
271
- this.DOM_CONFIG.getLastPageNode() &&
272
- this.PAGE_CONFIG.currentPage() == this.PAGE_CONFIG.maxPage &&
273
- (this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.nextBtnNode.get()),
274
- this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.lastBtnNode.get())));
275
- });
276
- }
277
- setLastBtnClickEvent(t, e) {
278
- t.addEventListener("click", async (t) => {
279
- const i = this.DOM_CONFIG.getAttributeWithCurrentPage();
280
- if (this.DOM_CONFIG.getAttributeWithPageId(i) === this.PAGE_CONFIG.maxPage) return;
281
- await this.CONFIG.lastBtn?.callBack?.(t);
282
- const a = Array.from(this.DOM_CONFIG.getAllPageNode(e));
283
- a.reverse();
284
- let s = this.PAGE_CONFIG.maxPage,
285
- r = 0;
286
- for (; !(this.PAGE_CONFIG.maxPage - s > 3); ) {
287
- const t = a[r];
288
- if (null == t) break;
289
- (0 === r ? this.DOM_CONFIG.setAttributeWithCurrentPage(t) : this.DOM_CONFIG.removeAttributeWithCurrentPage(t),
290
- this.DOM_CONFIG.setAttributeWithPageId(t, s),
291
- (t.innerText = String(s)),
292
- s--,
293
- r++);
294
- }
295
- (this.DOM_CONFIG.removeAllAttributeWithDisabled(e),
296
- this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.nextBtnNode.get()),
297
- this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.lastBtnNode.get()),
298
- this.CONFIG.pageChangeCallBack(this.PAGE_CONFIG.maxPage));
299
- });
300
- }
301
- setPageBtnClickEvent(t, e) {
302
- t.addEventListener("click", async () => {
303
- const i = t,
304
- a = this.DOM_CONFIG.getAllPageNode(e);
305
- for (const t of a)
306
- if (t == i) {
307
- if (!this.DOM_CONFIG.hasAttributeWithCurrentPage(i)) {
308
- this.DOM_CONFIG.setAttributeWithCurrentPage(i);
309
- const t = this.PAGE_CONFIG.currentPage();
310
- await this.CONFIG?.pageChangeCallBack?.(t);
311
- }
312
- } else this.DOM_CONFIG.removeAttributeWithCurrentPage(t);
313
- (this.DOM_CONFIG.removeAllAttributeWithDisabled(e),
314
- this.DOM_CONFIG.getFirstPageNode(e) &&
315
- 1 == this.PAGE_CONFIG.currentPage() &&
316
- (this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.firstBtnNode.get()),
317
- this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.prevBtnNode.get())),
318
- this.DOM_CONFIG.getLastPageNode() &&
319
- this.PAGE_CONFIG.currentPage() == this.PAGE_CONFIG.maxPage &&
320
- (this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.nextBtnNode.get()),
321
- this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.lastBtnNode.get())));
322
- });
323
- }
324
- append(t) {
325
- const e = this.isHide();
326
- this.destory();
327
- const i = this.createDataPagingWrapper();
328
- (e && this.hide(i), t.appendChild(i));
329
- }
330
- after(t) {
331
- const e = this.isHide(),
332
- i = t.parentElement,
333
- a = t.nextSibling;
334
- this.destory();
335
- const s = this.createDataPagingWrapper();
336
- (e && this.hide(s), !i || a ? t.after(s) : i.insertBefore(s, a));
337
- }
338
- changeConfig(t) {
339
- Object.assign(this.CONFIG, t);
340
- }
341
- refresh(t) {
342
- ((this.CONFIG.data = []), (this.CONFIG.data = t));
343
- let e = this.PAGE_CONFIG.currentPage();
344
- const i = Math.ceil(t.length / this.CONFIG.pageShowDataMaxCount);
345
- (e > i && (e = i), (this.CONFIG.currentPage = e));
346
- const a = this.DOM_CONFIG.$pageWrapper.dom;
347
- a && this.after(a);
348
- }
349
- };
350
- });
1
+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).DataPaging=e()}(this,function(){"use strict";const t={setSafeHTML(t,e){try{t.innerHTML=e}catch{if(!globalThis.trustedTypes)throw new Error("PagingUtils trustedTypes is not defined");{const i=globalThis.trustedTypes.createPolicy("safe-innerHTML",{createHTML:t=>t});t.innerHTML=i.createHTML(e)}}}};return class{version="0.0.4";CONFIG;PAGE_CONFIG={currentPage:()=>{const t=this.DOM_CONFIG.getAttributeWithCurrentPage();return this.DOM_CONFIG.getAttributeWithPageId(t)??1},maxPage:1};DOM_CONFIG={$pageWrapper:{localName:"div",id:"data-paging-wrapper",dom:null},firstBtnNode:{localName:"a",className:"pg-first",svgHTML:'<svg t="1694497357294" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4758" width="20"><path d="M730.639277 211.376748l60.943177 60.943176-301.698894 301.698893L428.940384 513.075641z" p-id="4759"></path><path d="M730.496772 814.924547l60.943176-60.943176-301.698893-301.698893L428.797879 513.225654z" p-id="4760"></path><path d="M298.666667 213.333333h85.333333v597.333334H298.666667z" p-id="4761"></path></svg>',get:()=>this.DOM_CONFIG.$pageWrapper.dom.querySelector(`${this.DOM_CONFIG.firstBtnNode.localName}.${this.DOM_CONFIG.firstBtnNode.className}`)},prevBtnNode:{localName:"a",className:"pg-prev",svgHTML:'<svg t="1694497840770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5272" width="20"><path d="M620.322607 151.04875l60.943176 60.943176-362.038672 362.038672L258.283935 513.087422z" p-id="5273"></path><path d="M620.180101 875.252545l60.943177-60.943176-362.038672-362.038672L258.141429 513.213873z" p-id="5274"></path></svg>',get:()=>this.DOM_CONFIG.$pageWrapper.dom.querySelector(`${this.DOM_CONFIG.prevBtnNode.localName}.${this.DOM_CONFIG.prevBtnNode.className}`)},nextBtnNode:{localName:"a",className:"pg-next",svgHTML:'<svg t="1694497949481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5465" width="20"><path d="M403.399239 151.02258l-60.943177 60.943177 362.038672 362.038672L765.437911 513.061252z" p-id="5466"></path><path d="M403.576858 875.263008l-60.943176-60.943176 362.038672-362.038672L765.61553 513.224336z" p-id="5467"></path></svg>',get:()=>this.DOM_CONFIG.$pageWrapper.dom.querySelector(`${this.DOM_CONFIG.nextBtnNode.localName}.${this.DOM_CONFIG.nextBtnNode.className}`)},lastBtnNode:{localName:"a",className:"pg-last",svgHTML:'<svg t="1694498035538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2299" width="20"><path d="M516.266667 490.666667L256 230.4 315.733333 170.666667l320 320L315.733333 810.666667 256 750.933333l260.266667-260.266666zM678.4 170.666667h85.333333v640h-85.333333V170.666667z" p-id="2300"></path></svg>',get:()=>this.DOM_CONFIG.$pageWrapper.dom.querySelector(`${this.DOM_CONFIG.lastBtnNode.localName}.${this.DOM_CONFIG.lastBtnNode.className}`)},setAttributeWithPageId:(t,e)=>{t.setAttribute("page-id",String(e))},getAttributeWithPageId:t=>{const e=t?.getAttribute("page-id");return e?parseInt(e):null},hasAttributeWithPageId:t=>t.hasAttribute("page-id"),setAttributeWithCurrentPage:t=>{t.setAttribute("data-current-page","")},getAttributeWithCurrentPage:t=>(t||this.DOM_CONFIG.$pageWrapper.dom).querySelector("a[data-current-page]"),hasAttributeWithCurrentPage:t=>t.hasAttribute("data-current-page"),removeAttributeWithCurrentPage:t=>{t.removeAttribute("data-current-page")},setAttributeWithDisabled:t=>{t.setAttribute("disabled","true")},removeAllAttributeWithDisabled:t=>{(t||this.DOM_CONFIG.$pageWrapper.dom)?.querySelectorAll("a[class][disabled]").forEach(t=>{t.removeAttribute("disabled")})},getFirstPageNode:t=>(t||this.DOM_CONFIG.$pageWrapper.dom).querySelector("a[page-id='1']"),getLastPageNode:t=>(t||this.DOM_CONFIG.$pageWrapper.dom).querySelector(`a[page-id='${this.PAGE_CONFIG.maxPage}']`),getAllPageNode:t=>Array.from((t||this.DOM_CONFIG.$pageWrapper.dom).querySelectorAll("a[page-id]"))};constructor(t){this.CONFIG={data:[],pageShowDataMaxCount:5,pageMaxStep:3,currentPage:1,pageChangeCallBack:function(){},prevBtn:{enable:!0,callBack:function(){}},nextBtn:{enable:!0,callBack:function(){}},firstBtn:{enable:!0,callBack:function(){}},lastBtn:{enable:!0,callBack:function(){}}},this.changeConfig(t)}hide(t=this.DOM_CONFIG.$pageWrapper.dom){t&&(t.style.display="none")}show(t=this.DOM_CONFIG.$pageWrapper.dom){t&&(t.style.display="")}isHide(t=this.DOM_CONFIG.$pageWrapper.dom){if(t)return t.style.display.includes("none")}destory(){const t=this.DOM_CONFIG.$pageWrapper.dom;if(!t)return;const e=t.parentElement;e?.removeChild?.(t),this.DOM_CONFIG.$pageWrapper.dom=null}addCSS(e=document.head){const i=document.createElement("style");i.setAttribute("type","text/css");const a=`@charset "utf-8";\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} {\n\t\t\ttext-align: center;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.firstBtnNode.className},\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.prevBtnNode.className},\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.nextBtnNode.className},\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.lastBtnNode.className} {\n\t\t\tfont-family: Arial, sans-serif;\n\t\t\tcolor: #333;\n\t\t\tfont-size: 22px;\n\t\t\tfill: currentColor;\n\t\t\tdisplay: inline-flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a,\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} span {\n\t\t\twidth: 45px;\n\t\t\theight: 40px;\n\t\t\tborder: 1px solid #ebebeb;\n\t\t\tmargin-left: -1px;\n\t\t\tcolor: #000000;\n\t\t\tline-height: 40px;\n\t\t\tfloat: left;\n\t\t\tfont-size: 15px;\n\t\t\ttext-decoration: none;\n\t\t\tmargin: 0 2px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a:hover,\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} span:hover {\n\t\t\tborder-color: #3897cd;\n\t\t\tcolor: #3897cd;\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a {\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a[data-current-page] {\n\t\t\tbackground-color: #222a35;\n\t\t\tcolor: #fff;\n\t\t\tborder-color: #ebebeb;\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t}\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.firstBtnNode.className}[disabled="true"],\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.prevBtnNode.className}[disabled="true"],\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.nextBtnNode.className}[disabled="true"],\n\t\t#${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.lastBtnNode.className}[disabled="true"]{\n\t\t\tcursor: not-allowed;\n\t\t\tborder: 1px solid transparent;\n\t\t\tcolor: #c9c9c9;\n\t\t}\n\t\t`;t.setSafeHTML(i,a),e.appendChild(i)}createDataPagingWrapper(){const e=document.createElement(this.DOM_CONFIG.$pageWrapper.localName);this.DOM_CONFIG.$pageWrapper.dom=e,e.id=this.DOM_CONFIG.$pageWrapper.id;const i=document.createElement(this.DOM_CONFIG.firstBtnNode.localName);t.setSafeHTML(i,this.DOM_CONFIG.firstBtnNode.svgHTML);const a=document.createElement(this.DOM_CONFIG.prevBtnNode.localName);t.setSafeHTML(a,this.DOM_CONFIG.prevBtnNode.svgHTML);const s=document.createElement(this.DOM_CONFIG.nextBtnNode.localName);t.setSafeHTML(s,this.DOM_CONFIG.nextBtnNode.svgHTML);const r=document.createElement(this.DOM_CONFIG.lastBtnNode.localName);if(t.setSafeHTML(r,this.DOM_CONFIG.lastBtnNode.svgHTML),i.className=this.DOM_CONFIG.firstBtnNode.className,a.className=this.DOM_CONFIG.prevBtnNode.className,s.className=this.DOM_CONFIG.nextBtnNode.className,r.className=this.DOM_CONFIG.lastBtnNode.className,this.PAGE_CONFIG.maxPage=Math.ceil(this.CONFIG.data.length/this.CONFIG.pageShowDataMaxCount),this.CONFIG.currentPage<1?this.CONFIG.currentPage=1:this.CONFIG.currentPage>this.PAGE_CONFIG.maxPage&&(this.CONFIG.currentPage=this.PAGE_CONFIG.maxPage),this.PAGE_CONFIG.maxPage<2)return e;this.CONFIG.firstBtn.enable&&(this.setFirstBtnClickEvent(i,e),e.appendChild(i)),this.CONFIG.prevBtn.enable&&(this.setPrevBtnClickEvent(a,e),e.appendChild(a));let n=this.CONFIG.currentPage;if(this.CONFIG.pageMaxStep>this.PAGE_CONFIG.maxPage)for(let t=n;t<=this.PAGE_CONFIG.maxPage;t++){const i=document.createElement("a");this.DOM_CONFIG.setAttributeWithPageId(i,t),i.innerText=String(t),this.CONFIG.currentPage===t&&this.DOM_CONFIG.setAttributeWithCurrentPage(i),this.setPageBtnClickEvent(i,e),e.appendChild(i)}else if(n+this.CONFIG.pageMaxStep>this.PAGE_CONFIG.maxPage){n=this.PAGE_CONFIG.maxPage;const t=[];for(let i=0;i<this.CONFIG.pageMaxStep;i++){const i=document.createElement("a");this.DOM_CONFIG.setAttributeWithPageId(i,n),i.innerText=String(n),this.CONFIG.currentPage===n&&this.DOM_CONFIG.setAttributeWithCurrentPage(i),this.setPageBtnClickEvent(i,e),t.push(i),n--}t.reverse(),t.forEach(t=>{e.appendChild(t)})}else for(let t=0;t<this.CONFIG.pageMaxStep;t++){const t=document.createElement("a");this.DOM_CONFIG.setAttributeWithPageId(t,n),t.innerText=String(n),this.CONFIG.currentPage===n&&this.DOM_CONFIG.setAttributeWithCurrentPage(t),this.setPageBtnClickEvent(t,e),e.appendChild(t),n++}return this.CONFIG.nextBtn.enable&&(this.setNextBtnClickEvent(s,e),e.appendChild(s)),this.CONFIG.lastBtn.enable&&(this.setLastBtnClickEvent(r,e),e.appendChild(r)),1===this.CONFIG.currentPage?(this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.firstBtnNode.get()),this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.prevBtnNode.get())):this.CONFIG.currentPage===this.PAGE_CONFIG.maxPage&&(this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.nextBtnNode.get()),this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.lastBtnNode.get())),e}setFirstBtnClickEvent(t,e){t.addEventListener("click",async t=>{const i=this.DOM_CONFIG.getAttributeWithCurrentPage();if(1===this.DOM_CONFIG.getAttributeWithPageId(i))return;await(this.CONFIG.firstBtn?.callBack?.(t));const a=this.DOM_CONFIG.getAllPageNode(e);for(let t=0;t<this.CONFIG.pageMaxStep;t++){const e=a[t];null!=e&&(0===t?this.DOM_CONFIG.setAttributeWithCurrentPage(e):this.DOM_CONFIG.removeAttributeWithCurrentPage(e),this.DOM_CONFIG.setAttributeWithPageId(e,t+1),e.innerText=String(t+1))}this.DOM_CONFIG.removeAllAttributeWithDisabled(e),this.DOM_CONFIG.getFirstPageNode(e)&&(this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.firstBtnNode.get()),this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.prevBtnNode.get())),this.CONFIG.pageChangeCallBack(1)})}setPrevBtnClickEvent(t,e){t.addEventListener("click",async t=>{const i=this.DOM_CONFIG.getAttributeWithCurrentPage();if(1===this.DOM_CONFIG.getAttributeWithPageId(i))return;await(this.CONFIG.prevBtn?.callBack?.(t));const a=i.previousElementSibling;if(a&&this.DOM_CONFIG.hasAttributeWithPageId(a))a.click();else{this.DOM_CONFIG.getAllPageNode(e).forEach(t=>{let e=this.DOM_CONFIG.getAttributeWithPageId(t);e--,this.DOM_CONFIG.setAttributeWithPageId(t,e),t.innerText=String(e)}),this.CONFIG.pageChangeCallBack(this.PAGE_CONFIG.currentPage())}this.DOM_CONFIG.removeAllAttributeWithDisabled(e),this.DOM_CONFIG.getFirstPageNode(e)&&1==this.PAGE_CONFIG.currentPage()&&(this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.firstBtnNode.get()),this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.prevBtnNode.get()))})}setNextBtnClickEvent(t,e){t.addEventListener("click",async t=>{const i=this.DOM_CONFIG.getAttributeWithCurrentPage();if(this.DOM_CONFIG.getAttributeWithPageId(i)===this.PAGE_CONFIG.maxPage)return;await(this.CONFIG.nextBtn?.callBack?.(t));const a=i.nextElementSibling;if(a&&this.DOM_CONFIG.hasAttributeWithPageId(a))a.click();else{this.DOM_CONFIG.getAllPageNode(e).forEach(t=>{let e=this.DOM_CONFIG.getAttributeWithPageId(t);e++,e>this.PAGE_CONFIG.maxPage||(this.DOM_CONFIG.setAttributeWithPageId(t,e),t.innerText=String(e))}),this.CONFIG.pageChangeCallBack(this.PAGE_CONFIG.currentPage())}this.DOM_CONFIG.removeAllAttributeWithDisabled(e),this.DOM_CONFIG.getLastPageNode()&&this.PAGE_CONFIG.currentPage()==this.PAGE_CONFIG.maxPage&&(this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.nextBtnNode.get()),this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.lastBtnNode.get()))})}setLastBtnClickEvent(t,e){t.addEventListener("click",async t=>{const i=this.DOM_CONFIG.getAttributeWithCurrentPage();if(this.DOM_CONFIG.getAttributeWithPageId(i)===this.PAGE_CONFIG.maxPage)return;await(this.CONFIG.lastBtn?.callBack?.(t));const a=Array.from(this.DOM_CONFIG.getAllPageNode(e));a.reverse();let s=this.PAGE_CONFIG.maxPage,r=0;for(;!(this.PAGE_CONFIG.maxPage-s>3);){const t=a[r];if(null==t)break;0===r?this.DOM_CONFIG.setAttributeWithCurrentPage(t):this.DOM_CONFIG.removeAttributeWithCurrentPage(t),this.DOM_CONFIG.setAttributeWithPageId(t,s),t.innerText=String(s),s--,r++}this.DOM_CONFIG.removeAllAttributeWithDisabled(e),this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.nextBtnNode.get()),this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.lastBtnNode.get()),this.CONFIG.pageChangeCallBack(this.PAGE_CONFIG.maxPage)})}setPageBtnClickEvent(t,e){t.addEventListener("click",async()=>{const i=t,a=this.DOM_CONFIG.getAllPageNode(e);for(const t of a)if(t==i){if(!this.DOM_CONFIG.hasAttributeWithCurrentPage(i)){this.DOM_CONFIG.setAttributeWithCurrentPage(i);const t=this.PAGE_CONFIG.currentPage();await(this.CONFIG?.pageChangeCallBack?.(t))}}else this.DOM_CONFIG.removeAttributeWithCurrentPage(t);this.DOM_CONFIG.removeAllAttributeWithDisabled(e),this.DOM_CONFIG.getFirstPageNode(e)&&1==this.PAGE_CONFIG.currentPage()&&(this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.firstBtnNode.get()),this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.prevBtnNode.get())),this.DOM_CONFIG.getLastPageNode()&&this.PAGE_CONFIG.currentPage()==this.PAGE_CONFIG.maxPage&&(this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.nextBtnNode.get()),this.DOM_CONFIG.setAttributeWithDisabled(this.DOM_CONFIG.lastBtnNode.get()))})}append(t){const e=this.isHide();this.destory();const i=this.createDataPagingWrapper();e&&this.hide(i),t.appendChild(i)}after(t){const e=this.isHide(),i=t.parentElement,a=t.nextSibling;this.destory();const s=this.createDataPagingWrapper();e&&this.hide(s),!i||a?t.after(s):i.insertBefore(s,a)}changeConfig(t){Object.assign(this.CONFIG,t)}refresh(t){this.CONFIG.data=[],this.CONFIG.data=t;let e=this.PAGE_CONFIG.currentPage();const i=Math.ceil(t.length/this.CONFIG.pageShowDataMaxCount);e>i&&(e=i),this.CONFIG.currentPage=e;const a=this.DOM_CONFIG.$pageWrapper.dom;a&&this.after(a)}}});
351
2
  //# sourceMappingURL=index.umd.min.js.map
@@ -0,0 +1,2 @@
1
+ declare const _default: import("eslint/config").Config[];
2
+ export default _default;