@whitesev/data-paging 0.0.4 → 0.0.5

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.
Files changed (21) hide show
  1. package/README.md +48 -48
  2. package/dist/index.amd.js +61 -61
  3. package/dist/index.amd.min.js +1 -1
  4. package/dist/index.cjs.js +61 -61
  5. package/dist/index.cjs.min.js +1 -1
  6. package/dist/index.esm.js +61 -61
  7. package/dist/index.esm.min.js +1 -1
  8. package/dist/index.iife.js +61 -61
  9. package/dist/index.iife.min.js +1 -1
  10. package/dist/index.system.js +61 -61
  11. package/dist/index.system.min.js +1 -1
  12. package/dist/index.umd.js +61 -61
  13. package/dist/index.umd.min.js +1 -1
  14. package/dist/types/index.d.ts +1 -1
  15. package/dist/types/src/types/config.d.ts +58 -58
  16. package/index.ts +5 -4
  17. package/package.json +33 -30
  18. package/src/config.ts +27 -27
  19. package/src/index.ts +648 -648
  20. package/src/types/config.d.ts +58 -58
  21. package/src/utils.ts +22 -22
package/dist/index.esm.js CHANGED
@@ -34,9 +34,9 @@ const PagingUtils = {
34
34
  $el.innerHTML = text;
35
35
  }
36
36
  catch {
37
- // @ts-ignore
37
+ // @ts-expect-error
38
38
  if (globalThis.trustedTypes) {
39
- // @ts-ignore
39
+ // @ts-expect-error
40
40
  const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
41
41
  createHTML: (html) => html,
42
42
  });
@@ -49,7 +49,7 @@ const PagingUtils = {
49
49
  },
50
50
  };
51
51
 
52
- const version = "0.0.4";
52
+ const version = "0.0.5";
53
53
 
54
54
  class Paging {
55
55
  version = version;
@@ -253,64 +253,64 @@ class Paging {
253
253
  addCSS($parent = document.head) {
254
254
  const $style = document.createElement("style");
255
255
  $style.setAttribute("type", "text/css");
256
- const cssText = /*css*/ `@charset "utf-8";
257
- #${this.DOM_CONFIG.$pageWrapper.id} {
258
- text-align: center;
259
- display: inline-block;
260
- }
261
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.firstBtnNode.className},
262
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.prevBtnNode.className},
263
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.nextBtnNode.className},
264
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.lastBtnNode.className} {
265
- font-family: Arial, sans-serif;
266
- color: #333;
267
- font-size: 22px;
268
- fill: currentColor;
269
- display: inline-flex;
270
- justify-content: center;
271
- align-items: center;
272
- text-decoration: none;
273
- }
274
- #${this.DOM_CONFIG.$pageWrapper.id} a,
275
- #${this.DOM_CONFIG.$pageWrapper.id} span {
276
- width: 45px;
277
- height: 40px;
278
- border: 1px solid #ebebeb;
279
- margin-left: -1px;
280
- color: #000000;
281
- line-height: 40px;
282
- float: left;
283
- font-size: 15px;
284
- text-decoration: none;
285
- margin: 0 2px;
286
- border-radius: 6px;
287
- }
288
- #${this.DOM_CONFIG.$pageWrapper.id} a:hover,
289
- #${this.DOM_CONFIG.$pageWrapper.id} span:hover {
290
- border-color: #3897cd;
291
- color: #3897cd;
292
- position: relative;
293
- z-index: 1;
294
- }
295
- #${this.DOM_CONFIG.$pageWrapper.id} a {
296
- cursor: pointer;
297
- user-select: none;
298
- }
299
- #${this.DOM_CONFIG.$pageWrapper.id} a[data-current-page] {
300
- background-color: #222a35;
301
- color: #fff;
302
- border-color: #ebebeb;
303
- position: relative;
304
- z-index: 1;
305
- }
306
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.firstBtnNode.className}[disabled="true"],
307
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.prevBtnNode.className}[disabled="true"],
308
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.nextBtnNode.className}[disabled="true"],
309
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.lastBtnNode.className}[disabled="true"]{
310
- cursor: not-allowed;
311
- border: 1px solid transparent;
312
- color: #c9c9c9;
313
- }
256
+ const cssText = /*css*/ `@charset "utf-8";
257
+ #${this.DOM_CONFIG.$pageWrapper.id} {
258
+ text-align: center;
259
+ display: inline-block;
260
+ }
261
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.firstBtnNode.className},
262
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.prevBtnNode.className},
263
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.nextBtnNode.className},
264
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.lastBtnNode.className} {
265
+ font-family: Arial, sans-serif;
266
+ color: #333;
267
+ font-size: 22px;
268
+ fill: currentColor;
269
+ display: inline-flex;
270
+ justify-content: center;
271
+ align-items: center;
272
+ text-decoration: none;
273
+ }
274
+ #${this.DOM_CONFIG.$pageWrapper.id} a,
275
+ #${this.DOM_CONFIG.$pageWrapper.id} span {
276
+ width: 45px;
277
+ height: 40px;
278
+ border: 1px solid #ebebeb;
279
+ margin-left: -1px;
280
+ color: #000000;
281
+ line-height: 40px;
282
+ float: left;
283
+ font-size: 15px;
284
+ text-decoration: none;
285
+ margin: 0 2px;
286
+ border-radius: 6px;
287
+ }
288
+ #${this.DOM_CONFIG.$pageWrapper.id} a:hover,
289
+ #${this.DOM_CONFIG.$pageWrapper.id} span:hover {
290
+ border-color: #3897cd;
291
+ color: #3897cd;
292
+ position: relative;
293
+ z-index: 1;
294
+ }
295
+ #${this.DOM_CONFIG.$pageWrapper.id} a {
296
+ cursor: pointer;
297
+ user-select: none;
298
+ }
299
+ #${this.DOM_CONFIG.$pageWrapper.id} a[data-current-page] {
300
+ background-color: #222a35;
301
+ color: #fff;
302
+ border-color: #ebebeb;
303
+ position: relative;
304
+ z-index: 1;
305
+ }
306
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.firstBtnNode.className}[disabled="true"],
307
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.prevBtnNode.className}[disabled="true"],
308
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.nextBtnNode.className}[disabled="true"],
309
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.lastBtnNode.className}[disabled="true"]{
310
+ cursor: not-allowed;
311
+ border: 1px solid transparent;
312
+ color: #c9c9c9;
313
+ }
314
314
  `;
315
315
  PagingUtils.setSafeHTML($style, cssText);
316
316
  $parent.appendChild($style);
package/dist/index.esm.min.js CHANGED
@@ -1,2 +1,2 @@
1
- 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)}}}};const e=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)}};export{e as default};
1
+ 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)}}}};const e=class{version="0.0.5";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)}};export{e as default};
2
2
  //# sourceMappingURL=index.esm.min.js.map
package/dist/index.iife.js CHANGED
@@ -37,9 +37,9 @@ var DataPaging = (function () {
37
37
  $el.innerHTML = text;
38
38
  }
39
39
  catch {
40
- // @ts-ignore
40
+ // @ts-expect-error
41
41
  if (globalThis.trustedTypes) {
42
- // @ts-ignore
42
+ // @ts-expect-error
43
43
  const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
44
44
  createHTML: (html) => html,
45
45
  });
@@ -52,7 +52,7 @@ var DataPaging = (function () {
52
52
  },
53
53
  };
54
54
 
55
- const version = "0.0.4";
55
+ const version = "0.0.5";
56
56
 
57
57
  class Paging {
58
58
  version = version;
@@ -256,64 +256,64 @@ var DataPaging = (function () {
256
256
  addCSS($parent = document.head) {
257
257
  const $style = document.createElement("style");
258
258
  $style.setAttribute("type", "text/css");
259
- const cssText = /*css*/ `@charset "utf-8";
260
- #${this.DOM_CONFIG.$pageWrapper.id} {
261
- text-align: center;
262
- display: inline-block;
263
- }
264
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.firstBtnNode.className},
265
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.prevBtnNode.className},
266
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.nextBtnNode.className},
267
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.lastBtnNode.className} {
268
- font-family: Arial, sans-serif;
269
- color: #333;
270
- font-size: 22px;
271
- fill: currentColor;
272
- display: inline-flex;
273
- justify-content: center;
274
- align-items: center;
275
- text-decoration: none;
276
- }
277
- #${this.DOM_CONFIG.$pageWrapper.id} a,
278
- #${this.DOM_CONFIG.$pageWrapper.id} span {
279
- width: 45px;
280
- height: 40px;
281
- border: 1px solid #ebebeb;
282
- margin-left: -1px;
283
- color: #000000;
284
- line-height: 40px;
285
- float: left;
286
- font-size: 15px;
287
- text-decoration: none;
288
- margin: 0 2px;
289
- border-radius: 6px;
290
- }
291
- #${this.DOM_CONFIG.$pageWrapper.id} a:hover,
292
- #${this.DOM_CONFIG.$pageWrapper.id} span:hover {
293
- border-color: #3897cd;
294
- color: #3897cd;
295
- position: relative;
296
- z-index: 1;
297
- }
298
- #${this.DOM_CONFIG.$pageWrapper.id} a {
299
- cursor: pointer;
300
- user-select: none;
301
- }
302
- #${this.DOM_CONFIG.$pageWrapper.id} a[data-current-page] {
303
- background-color: #222a35;
304
- color: #fff;
305
- border-color: #ebebeb;
306
- position: relative;
307
- z-index: 1;
308
- }
309
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.firstBtnNode.className}[disabled="true"],
310
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.prevBtnNode.className}[disabled="true"],
311
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.nextBtnNode.className}[disabled="true"],
312
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.lastBtnNode.className}[disabled="true"]{
313
- cursor: not-allowed;
314
- border: 1px solid transparent;
315
- color: #c9c9c9;
316
- }
259
+ const cssText = /*css*/ `@charset "utf-8";
260
+ #${this.DOM_CONFIG.$pageWrapper.id} {
261
+ text-align: center;
262
+ display: inline-block;
263
+ }
264
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.firstBtnNode.className},
265
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.prevBtnNode.className},
266
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.nextBtnNode.className},
267
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.lastBtnNode.className} {
268
+ font-family: Arial, sans-serif;
269
+ color: #333;
270
+ font-size: 22px;
271
+ fill: currentColor;
272
+ display: inline-flex;
273
+ justify-content: center;
274
+ align-items: center;
275
+ text-decoration: none;
276
+ }
277
+ #${this.DOM_CONFIG.$pageWrapper.id} a,
278
+ #${this.DOM_CONFIG.$pageWrapper.id} span {
279
+ width: 45px;
280
+ height: 40px;
281
+ border: 1px solid #ebebeb;
282
+ margin-left: -1px;
283
+ color: #000000;
284
+ line-height: 40px;
285
+ float: left;
286
+ font-size: 15px;
287
+ text-decoration: none;
288
+ margin: 0 2px;
289
+ border-radius: 6px;
290
+ }
291
+ #${this.DOM_CONFIG.$pageWrapper.id} a:hover,
292
+ #${this.DOM_CONFIG.$pageWrapper.id} span:hover {
293
+ border-color: #3897cd;
294
+ color: #3897cd;
295
+ position: relative;
296
+ z-index: 1;
297
+ }
298
+ #${this.DOM_CONFIG.$pageWrapper.id} a {
299
+ cursor: pointer;
300
+ user-select: none;
301
+ }
302
+ #${this.DOM_CONFIG.$pageWrapper.id} a[data-current-page] {
303
+ background-color: #222a35;
304
+ color: #fff;
305
+ border-color: #ebebeb;
306
+ position: relative;
307
+ z-index: 1;
308
+ }
309
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.firstBtnNode.className}[disabled="true"],
310
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.prevBtnNode.className}[disabled="true"],
311
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.nextBtnNode.className}[disabled="true"],
312
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.lastBtnNode.className}[disabled="true"]{
313
+ cursor: not-allowed;
314
+ border: 1px solid transparent;
315
+ color: #c9c9c9;
316
+ }
317
317
  `;
318
318
  PagingUtils.setSafeHTML($style, cssText);
319
319
  $parent.appendChild($style);
package/dist/index.iife.min.js CHANGED
@@ -1,2 +1,2 @@
1
- var DataPaging=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)}}}();
1
+ var DataPaging=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.5";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)}}}();
2
2
  //# sourceMappingURL=index.iife.min.js.map
package/dist/index.system.js CHANGED
@@ -39,9 +39,9 @@ System.register('DataPaging', [], (function (exports) {
39
39
  $el.innerHTML = text;
40
40
  }
41
41
  catch {
42
- // @ts-ignore
42
+ // @ts-expect-error
43
43
  if (globalThis.trustedTypes) {
44
- // @ts-ignore
44
+ // @ts-expect-error
45
45
  const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
46
46
  createHTML: (html) => html,
47
47
  });
@@ -54,7 +54,7 @@ System.register('DataPaging', [], (function (exports) {
54
54
  },
55
55
  };
56
56
 
57
- const version = "0.0.4";
57
+ const version = "0.0.5";
58
58
 
59
59
  class Paging {
60
60
  version = version;
@@ -258,64 +258,64 @@ System.register('DataPaging', [], (function (exports) {
258
258
  addCSS($parent = document.head) {
259
259
  const $style = document.createElement("style");
260
260
  $style.setAttribute("type", "text/css");
261
- const cssText = /*css*/ `@charset "utf-8";
262
- #${this.DOM_CONFIG.$pageWrapper.id} {
263
- text-align: center;
264
- display: inline-block;
265
- }
266
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.firstBtnNode.className},
267
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.prevBtnNode.className},
268
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.nextBtnNode.className},
269
- #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.lastBtnNode.className} {
270
- font-family: Arial, sans-serif;
271
- color: #333;
272
- font-size: 22px;
273
- fill: currentColor;
274
- display: inline-flex;
275
- justify-content: center;
276
- align-items: center;
277
- text-decoration: none;
278
- }
279
- #${this.DOM_CONFIG.$pageWrapper.id} a,
280
- #${this.DOM_CONFIG.$pageWrapper.id} span {
281
- width: 45px;
282
- height: 40px;
283
- border: 1px solid #ebebeb;
284
- margin-left: -1px;
285
- color: #000000;
286
- line-height: 40px;
287
- float: left;
288
- font-size: 15px;
289
- text-decoration: none;
290
- margin: 0 2px;
291
- border-radius: 6px;
292
- }
293
- #${this.DOM_CONFIG.$pageWrapper.id} a:hover,
294
- #${this.DOM_CONFIG.$pageWrapper.id} span:hover {
295
- border-color: #3897cd;
296
- color: #3897cd;
297
- position: relative;
298
- z-index: 1;
299
- }
300
- #${this.DOM_CONFIG.$pageWrapper.id} a {
301
- cursor: pointer;
302
- user-select: none;
303
- }
304
- #${this.DOM_CONFIG.$pageWrapper.id} a[data-current-page] {
305
- background-color: #222a35;
306
- color: #fff;
307
- border-color: #ebebeb;
308
- position: relative;
309
- z-index: 1;
310
- }
311
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.firstBtnNode.className}[disabled="true"],
312
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.prevBtnNode.className}[disabled="true"],
313
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.nextBtnNode.className}[disabled="true"],
314
- #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.lastBtnNode.className}[disabled="true"]{
315
- cursor: not-allowed;
316
- border: 1px solid transparent;
317
- color: #c9c9c9;
318
- }
261
+ const cssText = /*css*/ `@charset "utf-8";
262
+ #${this.DOM_CONFIG.$pageWrapper.id} {
263
+ text-align: center;
264
+ display: inline-block;
265
+ }
266
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.firstBtnNode.className},
267
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.prevBtnNode.className},
268
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.nextBtnNode.className},
269
+ #${this.DOM_CONFIG.$pageWrapper.id} .${this.DOM_CONFIG.lastBtnNode.className} {
270
+ font-family: Arial, sans-serif;
271
+ color: #333;
272
+ font-size: 22px;
273
+ fill: currentColor;
274
+ display: inline-flex;
275
+ justify-content: center;
276
+ align-items: center;
277
+ text-decoration: none;
278
+ }
279
+ #${this.DOM_CONFIG.$pageWrapper.id} a,
280
+ #${this.DOM_CONFIG.$pageWrapper.id} span {
281
+ width: 45px;
282
+ height: 40px;
283
+ border: 1px solid #ebebeb;
284
+ margin-left: -1px;
285
+ color: #000000;
286
+ line-height: 40px;
287
+ float: left;
288
+ font-size: 15px;
289
+ text-decoration: none;
290
+ margin: 0 2px;
291
+ border-radius: 6px;
292
+ }
293
+ #${this.DOM_CONFIG.$pageWrapper.id} a:hover,
294
+ #${this.DOM_CONFIG.$pageWrapper.id} span:hover {
295
+ border-color: #3897cd;
296
+ color: #3897cd;
297
+ position: relative;
298
+ z-index: 1;
299
+ }
300
+ #${this.DOM_CONFIG.$pageWrapper.id} a {
301
+ cursor: pointer;
302
+ user-select: none;
303
+ }
304
+ #${this.DOM_CONFIG.$pageWrapper.id} a[data-current-page] {
305
+ background-color: #222a35;
306
+ color: #fff;
307
+ border-color: #ebebeb;
308
+ position: relative;
309
+ z-index: 1;
310
+ }
311
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.firstBtnNode.className}[disabled="true"],
312
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.prevBtnNode.className}[disabled="true"],
313
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.nextBtnNode.className}[disabled="true"],
314
+ #${this.DOM_CONFIG.$pageWrapper.id} a.${this.DOM_CONFIG.lastBtnNode.className}[disabled="true"]{
315
+ cursor: not-allowed;
316
+ border: 1px solid transparent;
317
+ color: #c9c9c9;
318
+ }
319
319
  `;
320
320
  PagingUtils.setSafeHTML($style, cssText);
321
321
  $parent.appendChild($style);