export default class APaging extends window.AObject { constructor(pEle) { super(); this.con = pEle; this.activePage = 1; this.bucket = 3; this.listActive = []; this.InitStructure(); } SetPaging(maxR) { this.maxRow = maxR; this.numPage = Math.ceil(maxR / this.pageSize); this.lbNum.innerHTML = this.numPage; this.RefreshPaging(this.activePage); } RefreshPaging(page) { this.inpN.value = page; this.activePage = page; this.conPageLinks.innerHTML = ""; if (page <= this.bucket - 1) { var length = (this.bucket < this.numPage) ? this.bucket : this.numPage; this.CreatePaging(1, length); } else if (this.numPage - this.activePage <= this.bucket - 2) { this.CreatePaging(this.numPage - this.bucket + 1, this.numPage); } else { this.CreatePaging(this.activePage - 1, this.activePage + this.bucket - 2); } } CreatePaging(start, end) { for (var i = start; i <= end; i++) { var m = this.CreatePageNum(i, "page-link"); this.listActive.push(m); this.conPageLinks.appendChild(m); this.CheckActivePage(i, m); } } CheckActivePage(i, m) { if (i == this.activePage) { this.elActice = m; this.elActice.classList.add("active"); } } InitStructure() { var d = document.createElement("div"); d.classList.add("d-f", "f-wrap", "con-paging"); var d1 = document.createElement("div"); d1.classList.add("d-f", "a-i-center"); var d2 = document.createElement("span"); d2.innerHTML = "Page "; d1.appendChild(d2); var inpNum = document.createElement("input"); inpNum.setAttribute("type", "input"); inpNum.classList.add("ml-1", "inpNum"); d1.appendChild(inpNum); this.inpN = inpNum; var sp = document.createElement("span"); sp.innerHTML = " / "; var sp1 = document.createElement("span"); sp1.innerHTML = "5"; d1.appendChild(sp); d1.appendChild(sp1); this.lbNum = sp1; d.appendChild(d1); d1 = document.createElement("div"); d1.classList.add("paging", "d-f", "ml-auto"); d1.appendChild(this.CreatePageNum("", "item-less", "atg-less")); d2 = document.createElement("div"); d2.classList.add("d-f", "c-page-link"); this.conPageLinks = d2; d1.appendChild(d2); d1.appendChild(this.CreatePageNum("", "item-more", "atg-more")); d.appendChild(d1); this.conPaging = d1; this.con.appendChild(d); var f = function (evt) { this.ItemClick.call(this, evt); }.bind(this); this.conPaging.addEventListener("click", f, false); f = function (evt) { /*if (this.aOverlay.IsActive) return;*/ var selection = window.getSelection().toString(); if (selection !== '') { return; } var arr = [38, 40, 37, 39]; if (arr.includes(evt.keyCode)) { return; } var input = evt.currentTarget.value; input = input.replace(/[^0-9\.]+/g, ""); if (input != "") { input = parseInt(input); if (input >= 1 && input <= this.numPage && input != this.activePage) { this.activePage = input; this.trigger("PagingChange", { "numPage": this.numPage, "pageSize": this.pageSize, "activePage": this.activePage }); this.RefreshPaging(this.activePage); } else { input = this.activePage; } } evt.currentTarget.value = input; }.bind(this); this.inpN.addEventListener("keyup", f, false); f = function (evt) { if (evt.currentTarget.value == "") evt.currentTarget.value = this.activePage; }.bind(this); this.inpN.addEventListener("blur", f, false); } ItemClick(e) { if (e.target.classList.contains("page-link") && e.target.classList.contains("active")) { return; } var clst = e.target.closest(".item-less"); if (clst) { if (this.elActice.previousSibling != null) { this.elActice.previousSibling.click(); } } var clst1 = e.target.closest(".item-more"); if (clst1) { if (this.elActice.nextSibling != null) { this.elActice.nextSibling.click(); } } if (e.target.classList.contains("page-link")) { this.RefreshPaging(parseInt(e.target.innerHTML)); this.trigger("PagingChange", { "numPage": this.numPage, "pageSize": this.pageSize, "activePage": this.activePage }); } } CreatePageNum(i, c = null, icon = null) { var d = document.createElement("a"); d.setAttribute("href", "javascript:void(0)"); d.classList.add("item", "d-f", "j-c-center", "a-i-center", c); d.innerHTML = i; if (icon != null) { var ic = document.createElement("span"); ic.classList.add("atg", icon); d.appendChild(ic); } return d; } }