fineui/src/case/pager/pager.direction.js

/**
 * 显示页码的分页控件
 *
 * Created by GUY on 2016/6/30.
 * @class BI.DirectionPager
 * @extends BI.Widget
 */

import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core";
import { Pager } from "@/base";
@shortcut()
export class DirectionPager extends Widget {
    static EVENT_CHANGE = "EVENT_CHANGE";
    static xtype = "bi.direction_pager";

    _defaultConfig () {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-direction-pager",
            height: 24,
            horizontal: {
                pages: false, // 总页数
                curr: 1, // 初始化当前页， pages为数字时可用

                hasPrev: emptyFn,
                hasNext: emptyFn,
                firstPage: 1,
                lastPage: emptyFn,
            },
            vertical: {
                pages: false, // 总页数
                curr: 1, // 初始化当前页， pages为数字时可用

                hasPrev: emptyFn,
                hasNext: emptyFn,
                firstPage: 1,
                lastPage: emptyFn,
            },
        });
    }
    _init () {
        super._init(...arguments);
        this._createVPager();
        this._createHPager();
        this.layout = createWidget({
            type: "bi.absolute",
            scrollable: false,
            element: this,
            items: [{
                el: this.vpager,
                top: 0,
                right: 86,
            }, {
                el: this.vlabel,
                top: 0,
                right: 110,
            }, {
                el: this.hpager,
                top: 0,
                right: 0,
            }, {
                el: this.hlabel,
                top: 0,
                right: 24,
            }],
        });
    }

    _createVPager () {
        const v = this.options.vertical;
        this.vlabel = createWidget({
            type: "bi.label",
            width: 24,
            height: 24,
            value: v.curr,
            title: v.curr,
            invisible: true,
        });
        this.vpager = createWidget({
            type: "bi.pager",
            width: 72,
            layouts: [{
                type: "bi.horizontal",
                scrollx: false,
                rgap: 24,
            }],
            invisible: true,

            dynamicShow: false,
            pages: v.pages,
            curr: v.curr,
            groups: 0,

            first: false,
            last: false,
            prev: {
                type: "bi.icon_button",
                value: "prev",
                title: BI.i18nText("BI-Up_Page"),
                warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
                height: 22,
                width: 22,
                cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2",
            },
            next: {
                type: "bi.icon_button",
                value: "next",
                title: BI.i18nText("BI-Down_Page"),
                warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
                height: 22,
                width: 22,
                cls: "bi-border bi-border-radius direction-pager-next column-next-page-h-font bi-list-item-select2",
            },

            hasPrev: v.hasPrev,
            hasNext: v.hasNext,
            firstPage: v.firstPage,
            lastPage: v.lastPage,
        });

        this.vpager.on(Pager.EVENT_CHANGE, () => {
            this.fireEvent(DirectionPager.EVENT_CHANGE);
        });
        this.vpager.on(Pager.EVENT_AFTER_POPULATE, () => {
            this.vlabel.setValue(this.vpager.getCurrentPage());
            this.vlabel.setTitle(this.vpager.getCurrentPage());
        });
    }
    _createHPager () {
        const h = this.options.horizontal;
        this.hlabel = createWidget({
            type: "bi.label",
            width: 24,
            height: 24,
            value: h.curr,
            title: h.curr,
            invisible: true,
        });
        this.hpager = createWidget({
            type: "bi.pager",
            width: 72,
            layouts: [{
                type: "bi.horizontal",
                scrollx: false,
                rgap: 24,
            }],
            invisible: true,

            dynamicShow: false,
            pages: h.pages,
            curr: h.curr,
            groups: 0,

            first: false,
            last: false,
            prev: {
                type: "bi.icon_button",
                value: "prev",
                title: BI.i18nText("BI-Left_Page"),
                warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
                height: 22,
                width: 22,
                cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2",
            },
            next: {
                type: "bi.icon_button",
                value: "next",
                title: BI.i18nText("BI-Right_Page"),
                warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
                height: 22,
                width: 22,
                cls: "bi-border bi-border-radius direction-pager-next row-next-page-h-font bi-list-item-select2",
            },

            hasPrev: h.hasPrev,
            hasNext: h.hasNext,
            firstPage: h.firstPage,
            lastPage: h.lastPage,
        });

        this.hpager.on(Pager.EVENT_CHANGE, () => {
            this.fireEvent(DirectionPager.EVENT_CHANGE);
        });
        this.hpager.on(Pager.EVENT_AFTER_POPULATE, () => {
            this.hlabel.setValue(this.hpager.getCurrentPage());
            this.hlabel.setTitle(this.hpager.getCurrentPage());
        });
    }

    getVPage () {
        return this.vpager.getCurrentPage();
    }

    getHPage () {
        return this.hpager.getCurrentPage();
    }

    setVPage (v) {
        this.vpager.setValue(v);
        this.vlabel.setValue(v);
        this.vlabel.setTitle(v);
    }

    setHPage (v) {
        this.hpager.setValue(v);
        this.hlabel.setValue(v);
        this.hlabel.setTitle(v);
    }

    hasVNext () {
        return this.vpager.hasNext();
    }

    hasHNext () {
        return this.hpager.hasNext();
    }

    hasVPrev () {
        return this.vpager.hasPrev();
    }

    hasHPrev () {
        return this.hpager.hasPrev();
    }

    setHPagerVisible (b) {
        this.hpager.setVisible(b);
        this.hlabel.setVisible(b);
    }

    setVPagerVisible (b) {
        this.vpager.setVisible(b);
        this.vlabel.setVisible(b);
    }

    populate () {
        this.vpager.populate();
        this.hpager.populate();
        let vShow = false, hShow = false;
        if (!this.hasHNext() && !this.hasHPrev()) {
            this.setHPagerVisible(false);
        } else {
            this.setHPagerVisible(true);
            hShow = true;
        }
        if (!this.hasVNext() && !this.hasVPrev()) {
            this.setVPagerVisible(false);
        } else {
            this.setVPagerVisible(true);
            vShow = true;
        }
        this.setVisible(hShow || vShow);
        const num = [86, 110, 0, 24];
        const items = this.layout.attr("items");

        if (vShow === true && hShow === true) {
            items[0].right = num[0];
            items[1].right = num[1];
            items[2].right = num[2];
            items[3].right = num[3];
        } else if (vShow === true) {
            items[0].right = num[2];
            items[1].right = num[3];
        } else if (hShow === true) {
            items[2].right = num[2];
            items[3].right = num[3];
        }
        this.layout.attr("items", items);
        this.layout.resize();
    }

    clear () {
        this.vpager.attr("curr", 1);
        this.hpager.attr("curr", 1);
    }
}