MikaltoResort/ManagementApp/wwwroot/js/libs/js-APaging.js

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&nbsp";
        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 = "&nbsp/&nbsp";
        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;
    }

}