pbootcms/template/en/statics/js/pagination.js

"use strict";
/**
 * @author cai
 * @date 2020-09-18
 */
var __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};
var Pagination = /** @class */ (function () {
    function Pagination(options) {
        // 布局可选参数
        this._layout = ['home', 'prev', 'pager', 'total', 'sizes', 'jumper', 'next', 'last'];
        this.options = {
            // 容器
            element: '',
            // 样式类型
            type: 1,
            // 当前页
            pageIndex: 1,
            // 每页显示数量
            pageSize: 0,
            // 每页显示几条
            pageSizes: [],
            // 按钮数量
            pageCount: 9,
            // 总条数
            total: 0,
            // 页面布局
            layout: '',
            // 上一页文字
            prevText: '',
            // 下一页文字
            nextText: '',
            // 页码显示省略
            ellipsis: false,
            // 单页隐藏
            singlePageHide: true,
            // 是否禁用
            disabled: false,
            /**
             * @description 页码变化事件回调
             * @param index [number] 当前页码
             * @param pageSize [number] 每页显示条数 TODO: 只有使用sizes才有返回值
             */
            currentChange: function (index, pageSize) { },
        };
        this.element = null;
        this.pageNum = 0;
        this.showSelector = false;
        this.selectedIndex = 0;
        this.uniqid = Math.random().toString(36).substr(2);
        if (this.validate(options)) {
            this.init(options);
        }
    }
    // 初始化
    Pagination.prototype.init = function (options) {
        // 参数赋值
        this.setOptions(options);
        // 渲染
        this.render();
    };
    // 渲染
    Pagination.prototype.render = function () {
        var _this_1 = this;
        // 切换每页显示条数重新替换每页条数参数
        if (this.options.layout.indexOf('sizes') !== -1 && this.options.pageSizes instanceof Array) {
            this.options.pageSizes.forEach(function (v, k) {
                if (v == _this_1.options.pageSize) {
                    _this_1.selectedIndex = k;
                }
            });
            if (!isNaN(this.options.pageSizes[this.selectedIndex])) {
                this.options.pageSize = this.options.pageSizes[this.selectedIndex];
            }
        }
        // 总页数
        this.pageNum = Math.ceil(this.options.total / this.options.pageSize);
        // 单页隐藏
        if (this.pageNum === 1 && this.options.singlePageHide) {
            // 清空元素
            this.element.innerHTML = '';
            return;
        }
        // 最大页码
        if (this.options.pageIndex > this.pageNum)
            this.options.pageIndex = this.pageNum;
        // 最小页码
        if (this.options.pageIndex <= 0)
            this.options.pageIndex = 1;
        var element = null;
        // 主体容器
        var container = this.createElement('div', '_page_container');
        // layout 渲染
        this.options.layout.split(',').forEach(function (v) {
            if (_this_1._layout.indexOf(v.trim()) !== -1) {
                element = _this_1[v.trim()]();
                element && container.appendChild(element);
            }
        });
        var old_container = document.querySelector(this.options.element + " ._page_container");
        if (old_container) {
            // 保存元素
            this.element.replaceChild(container, old_container);
        }
        else {
            // 保存元素
            this.element.appendChild(container);
        }
    };
    // 首页
    Pagination.prototype.home = function () {
        var _this_1 = this;
        // 禁用样式
        var disabled = this.options.pageIndex <= 1 ? ['_disabled_c'] : [];
        // 手势禁止
        if (this.options.pageIndex <= 1 && this.options.disabled)
            disabled.push('_disabled');
        var element = this.createElement('div', __spreadArrays(['_home', "_home_" + this.options.type], disabled));
        element.innerText = '首页';
        element.addEventListener('click', function () {
            if (_this_1.options.pageIndex > 1) {
                _this_1.handleChangePage(1);
            }
        });
        return element;
    };
    // 上一页
    Pagination.prototype.prev = function () {
        var _this_1 = this;
        // 禁用样式
        var disabled = this.options.pageIndex <= 1 ? ['_disabled_c'] : [];
        // 手势禁止
        if (this.options.pageIndex <= 1 && this.options.disabled)
            disabled.push('_disabled');
        var element = this.createElement('div', __spreadArrays(['_prev', "_prev_" + this.options.type], disabled, (this.options.prevText ? ['_prev_text'] : ['_iconfont', 'iconzuo'])));
        element.innerText = this.options.prevText || '';
        // 上一页事件
        element.addEventListener('click', function () {
            if (_this_1.options.pageIndex > 1) {
                _this_1.handleChangePage(_this_1.options.pageIndex - 1);
            }
        });
        return element;
    };
    // 页码
    Pagination.prototype.pager = function () {
        var _this_1 = this;
        var _this = this, li, active, attr;
        // 页码容器
        var ul = this.createElement('ul', ['_pages', "_pages_" + this.options.type]);
        // 区间值
        var between = this.getBetween();
        // 生成区间值
        var arrs = this.generateArray(between.min, between.max);
        // 显示省略页码
        if (this.options.ellipsis) {
            // 判断是否不存在最小页码
            if (arrs[0] > 1) {
                arrs.splice(1, 0, '...');
                arrs[0] = 1;
            }
            // 判断是否不存在最大页码
            if (arrs[arrs.length - 1] < this.pageNum) {
                arrs.splice(arrs.length - 1, 0, '...');
                arrs[arrs.length - 1] = this.pageNum;
            }
        }
        // 生成页码
        arrs.forEach(function (v, k) {
            active = v === _this_1.options.pageIndex ? ["_active_" + _this_1.options.type] : [];
            // 手势禁止
            if (v === _this_1.options.pageIndex && _this_1.options.disabled)
                active.push('_disabled');
            li = _this_1.createElement('li', __spreadArrays(["_pages_li_" + _this_1.options.type], active));
            if (isNaN(v)) {
                if (k <= 1) {
                    attr = 'prev';
                    li.classList.add('_pager_prev');
                }
                else {
                    attr = 'next';
                    li.classList.add('_pager_next');
                }
                li._id = attr;
            }
            else {
                li.innerText = v.toString();
            }
            li.addEventListener('click', function () {
                // 省略号向上跳转
                if (this._id === 'prev') {
                    var prevIndex = _this.options.pageIndex - _this.options.pageCount + 2;
                    _this.handleChangePage(prevIndex < 1 ? 1 : prevIndex);
                    return;
                }
                // 省略号向下跳转
                if (this._id === 'next') {
                    var nextIndex = _this.options.pageIndex + _this.options.pageCount - 2;
                    _this.handleChangePage(nextIndex > _this.pageNum ? _this.pageNum : nextIndex);
                    return;
                }
                if (v != _this.options.pageIndex) {
                    _this.handleChangePage(v);
                }
            });
            ul.appendChild(li);
        });
        return ul;
    };
    // 下一页
    Pagination.prototype.next = function () {
        var _this_1 = this;
        // 禁用下一页
        var disabled = this.options.pageIndex >= this.pageNum ? ['_disabled_c'] : [];
        // 手势禁止
        if (this.options.pageIndex >= this.pageNum && this.options.disabled)
            disabled.push('_disabled');
        // 下一页
        var element = this.createElement('div', __spreadArrays(['_next', "_next_" + this.options.type], disabled, (this.options.nextText ? ['_next_text'] : ['_iconfont', 'iconGroup-'])));
        // 下一页文字
        element.innerText = this.options.nextText || '';
        // 下一页事件
        element.addEventListener('click', function () {
            if (_this_1.options.pageIndex < _this_1.pageNum) {
                _this_1.handleChangePage(_this_1.options.pageIndex + 1);
            }
        });
        return element;
    };
    // 尾页
    Pagination.prototype.last = function () {
        var _this_1 = this;
        // 禁用下一页
        var disabled = this.options.pageIndex >= this.pageNum ? ['_disabled_c'] : [];
        // // 手势禁止
        if (this.options.pageIndex >= this.pageNum && this.options.disabled)
            disabled.push('_disabled');
        var element = this.createElement('div', __spreadArrays(['_last', "_last_" + this.options.type], disabled));
        element.innerText = '尾页';
        element.addEventListener('click', function () {
            if (_this_1.options.pageIndex < _this_1.pageNum) {
                _this_1.handleChangePage(_this_1.pageNum);
            }
        });
        return element;
    };
    // 输入框跳转
    Pagination.prototype.jumper = function () {
        var _this = this;
        // 容器
        var jumper = this.createElement('div', '_jumper');
        // 总页码
        var total = this.createElement('div', '_count');
        total.innerText = "\u5171 " + this.pageNum + " \u9875";
        jumper.appendChild(total);
        var text_1 = this.createElement('span');
        text_1.innerText = '前往';
        jumper.appendChild(text_1);
        var value = 0;
        // 输入框
        var input = this.createElement('input', ['_jumper_input', this.uniqid]);
        input.type = 'number';
        input.value = this.options.pageIndex.toString();
        input.setAttribute('min', '1');
        input.setAttribute('max', this.pageNum.toString());
        var handle = ['blur', 'keydown'];
        handle.forEach(function (v) {
            input.addEventListener(v, function (e) {
                if (e.type === 'keydown' && e.keyCode !== 13) {
                    return;
                }
                value = ~~this.value;
                if (value < 1)
                    value = 1;
                if (value > _this.pageNum)
                    value = _this.pageNum;
                // @ts-ignore
                this.value = value;
                if (value !== _this.options.pageIndex)
                    _this.handleChangePage(value);
                // 获取焦点
                if (e.keyCode == 13) {
                    setTimeout(function () {
                        document.querySelector("." + _this.uniqid).focus();
                    });
                }
            });
        });
        jumper.appendChild(input);
        var text_2 = this.createElement('span');
        text_2.innerText = '页';
        jumper.appendChild(text_2);
        return jumper;
    };
    // 选择页码
    Pagination.prototype.sizes = function () {
        var _this_1 = this;
        var _this = this;
        var success = false;
        var mode = '';
        var lis = null;
        var active = [];
        var element = this.createElement('div', '_sizes');
        // 选择框容器
        var box = this.createElement('div', '_sizes_select_container');
        // 每页条数选择框
        var ul = this.createElement('ul', '_sizes_select');
        if (this.options.pageSizes instanceof Array) {
            // 渲染选择框
            this.options.pageSizes.forEach(function (v, key) {
                if (!isNaN(v)) {
                    success = true;
                    active = _this_1.selectedIndex === key ? ['_sizes_select_active'] : [];
                    lis = _this_1.createElement('li', __spreadArrays(['_sizes_select_li'], active));
                    lis.innerText = v + "\u6761/\u9875";
                    lis.addEventListener('click', function () {
                        if (_this.selectedIndex !== key) {
                            _this.selectedIndex = key;
                            _this.handleChangePage(1);
                        }
                        else {
                            var mode_1 = _this.showSelector ? 'remove' : 'add';
                            i.classList[mode_1]('_sizes_icon_rotate');
                            box.classList[mode_1]('_sizes_select_container_show');
                            _this.showSelector = !_this.showSelector;
                        }
                    });
                    ul.appendChild(lis);
                }
            });
        }
        else {
            return false;
        }
        if (!success)
            return false;
        box.appendChild(ul);
        element.appendChild(box);
        var text = this.createElement('div', '_sizes_text');
        text.innerText = this.options.pageSizes[this.selectedIndex] + "\u6761/\u9875";
        // 显示选择框、旋转icon
        text.addEventListener('click', function () {
            this.classList.add('_sizes_active');
            mode = _this.showSelector ? 'remove' : 'add';
            _this.showSelector = !_this.showSelector;
            i.classList[mode]('_sizes_icon_rotate');
            box.classList[mode]('_sizes_select_container_show');
        });
        var i = this.createElement('i', ['icon_down', '_iconfont', 'iconGroup-1']);
        text.appendChild(i);
        element.appendChild(text);
        return element;
    };
    // 总页数
    Pagination.prototype.total = function () {
        var element = this.createElement('div', '_count');
        element.innerText = "\u5171 " + this.options.total + " \u6761";
        return element;
    };
    // 页码变化
    Pagination.prototype.handleChangePage = function (index) {
        this.options.pageIndex = index;
        this.showSelector = false;
        // 回调
        if (typeof this.options.currentChange === 'function') {
            if (this.options.pageSizes[this.selectedIndex])
                this.options.pageSize = this.options.pageSizes[this.selectedIndex];
            this.options.currentChange(index, this.options.pageSize);
        }
        // 重新渲染
        this.render();
    };
    // 计算区间值
    Pagination.prototype.getBetween = function () {
        // 最小下标
        var min = this.options.pageIndex - Math.floor(this.options.pageCount / 2);
        // 最小下标最大值
        if (min > this.pageNum - this.options.pageCount) {
            min = this.pageNum - this.options.pageCount + 1;
        }
        // 最小值
        if (min <= 1)
            min = 1;
        // 最大下标
        var max = this.options.pageIndex + Math.floor(this.options.pageCount / 2);
        // 最大下标最小值
        if (max < this.options.pageCount)
            max = this.options.pageCount;
        // 最大值
        if (max > this.pageNum)
            max = this.pageNum;
        return { min: min, max: max };
    };
    // 生成区间数组
    Pagination.prototype.generateArray = function (start, end) {
        var arr = [];
        for (var i = start; i <= end; i++) {
            arr.push(i);
        }
        return arr;
    };
    // 创建元素
    Pagination.prototype.createElement = function (tag, classList) {
        var dom = document.createElement(tag);
        if (classList) {
            if (classList instanceof Array) {
                classList.forEach(function (v) {
                    dom.classList.add(v);
                });
            }
            else {
                dom.classList.add(classList);
            }
        }
        return dom;
    };
    // 参数验证
    Pagination.prototype.validate = function (options) {
        if (!options)
            throw new Error('options of null');
        if (typeof options !== 'object')
            throw new Error('options not an object');
        if (!document.querySelector(options.element))
            throw new Error('element of null');
        if (!options.layout)
            throw new Error('layout of null');
        ['type', 'pageIndex', 'pageSize', 'pageCount', 'total'].forEach(function (v) {
            if (options[v]) {
                if (isNaN(options[v]))
                    throw new Error(v + " not an number");
                if (v === 'pageCount' && options[v] % 2 === 0)
                    throw new Error(v + " not an odd number");
                if (v === 'pageCount' && options[v] < 4)
                    throw new Error(v + " must be greater than four");
            }
        });
        return true;
    };
    // 参数赋值
    Pagination.prototype.setOptions = function (options) {
        // 容器
        this.element = document.querySelector(options.element);
        for (var name_1 in options) {
            if (options[name_1] !== void 0) {
                this.options[name_1] = isNaN(options[name_1]) ? options[name_1] : +options[name_1];
            }
        }
    };
    return Pagination;
}());