O2OA/o2web/source/o2_core/o2/widget/Paging.js

o2.widget = o2.widget || {};
o2.require("o2.widget.Common", null, false);
o2.widget.Paging = new Class({
    Implements: [Options, Events],
    Extends: o2.widget.Common,
    options: {
        style : "default",
        countPerPage: 20,
        visiblePages: 10,
        currentPage: 1,
        itemSize: 0,
        pageSize: 0,
        hasNextPage: true,
        hasPrevPage: true,
        hasTruningBar: true,
        hasJumper: true,
        hiddenWithDisable: false,
        hiddenWithNoItem: true,
        text: {
            prePage: "",
            nextPage: "",
            firstPage: "",
            lastPage: ""
        }
    },
    initialize: function (node, options, css) {

        this.setOptions(options || {});
        this.container = $(node);

        this.path = o2.session.path + "/widget/$Paging/";
        this.cssPath = o2.session.path + "/widget/$Paging/" + this.options.style + "/css.wcss";
        this._loadCss();

        if (css) {
            this.css = Object.clone(this.css);
            this.css = Object.merge(this.css, css);
        }
    },
    load: function () {
        this.fireEvent("queryLoad", this);
        this.options.pageSize = Math.ceil(this.options.itemSize / this.options.countPerPage);

        if ( this.options.pageSize == 0 && this.options.hiddenWithNoItem) return;

        this.container.empty();
        this.createNode();

        this.fireEvent("postLoad", this);
    },
    createNode: function() {
        var _self = this;

        this.node = new Element("div.pagingBar", {styles: this.css.pagingBar}).inject(this.container);

        var i, max, min;

        var showWithDisable = !this.options.hiddenWithDisable;
        var pageSize = this.options.pageSize;
        var currentPage = this.options.currentPage;
        var visiblePages = this.options.visiblePages;

        var halfCount = Math.floor(visiblePages / 2);
        if (pageSize <= visiblePages) {
            min = 1;
            max = pageSize;
        } else if (currentPage + halfCount > pageSize) {
            min = pageSize - visiblePages;
            max = pageSize;
        } else if (currentPage - halfCount < 1) {
            min = 1;
            max = visiblePages;
        } else {
            min = currentPage - halfCount;
            max = currentPage + halfCount;
        }

        if  (min > 1 || !this.options.hiddenWithDisable )this.createFirst();

        if (this.options.hasPrevPage && ( currentPage != 1 || showWithDisable ) ){
            this.createPrev();
        }

        if( this.options.hasTruningBar ){
            this.pageTurnContainer = new Element("div", {
                styles : this.css.pageTurnContainer
            }).inject( this.node );
            this.pageTurnNodes = [];
            for (i = min; i <= max; i++) {
                if (currentPage == i) {
                    this.currentPage = new Element("div.currentPage", {
                        "styles": this.css.currentPage,
                        "text" : i
                    }).inject(this.pageTurnContainer);
                } else {
                    this.pageTurnNodes.push( this.createPageTurnNode(i) );
                }
            }
        }

        if (this.options.hasJumper) {
            this.createPageJumper();
        }

        if (this.options.hasNextPage && ( currentPage != pageSize || showWithDisable )){
            this.createNext();
        }

        if( max < pageSize || showWithDisable )this.createLast();
    },
    createFirst : function(){
        var firstPage = this.firstPage = new Element("div.firstPage", {
            styles: this.css.firstPage
        }).inject(this.node);
        if (this.options.text.firstPage) firstPage.set("text", this.options.text.firstPage);
        firstPage.addEvents({
            "mouseover": function (ev) {
                ev.target.setStyles(this.css.firstPage_over)
            }.bind(this),
            "mouseout": function (ev) {
                ev.target.setStyles(this.css.firstPage)
            }.bind(this),
            "click": function () {
                this.gotoPage(1)
            }.bind(this)
        })
    },
    createLast : function(){
        var lastPage = this.lastPage = new Element("div.lastPage", {
            styles: this.css.lastPage
        }).inject(this.node);
        if (this.options.text.lastPage) lastPage.set("text", this.options.text.lastPage);
        lastPage.addEvents({
            "mouseover": function (ev) {
                ev.target.setStyles(this.css.lastPage_over)
            }.bind(this),
            "mouseout": function (ev) {
                ev.target.setStyles(this.css.lastPage)
            }.bind(this),
            "click": function () {
                this.gotoPage( this.options.pageSize )
            }.bind(this)
        })
    },
    createPrev : function(){
        var prePage = this.prePage = new Element("div.prePage", {
            styles: this.css.prePage
        }).inject(this.node);
        if (this.options.text.prePage) prePage.set("text", this.options.text.prePage);
        prePage.addEvents({
            "mouseover": function (ev) {
                ev.target.setStyles(this.css.prePage_over)
            }.bind(this),
            "mouseout": function (ev) {
                ev.target.setStyles(this.css.prePage)
            }.bind(this),
            "click": function () {
                this.gotoPage(this.options.currentPage - 1)
            }.bind(this)
        });
    },
    createNext : function(){
        var nextPage = this.nextPage = new Element("div.nextPage", {
            styles: this.css.nextPage
        }).inject(this.node);
        if (this.options.text.nextPage) nextPage.set("text", this.options.text.nextPage);
        nextPage.addEvents({
            "mouseover": function (ev) {
                ev.target.setStyles(this.css.nextPage_over)
            }.bind(this),
            "mouseout": function (ev) {
                ev.target.setStyles(this.css.nextPage)
            }.bind(this),
            "click": function () {
                this.gotoPage(this.options.currentPage + 1)
            }.bind(this)
        });
    },
    createPageTurnNode: function(i){
        var pageTurnNode = new Element("div.pageItem", {
            "styles": this.css.pageItem,
            "text": i
        }).inject(this.pageTurnContainer);
        pageTurnNode.addEvents({
            "mouseover": function (ev) {
                ev.target.setStyles(this.css.pageItem_over)
            }.bind(this),
            "mouseout": function (ev) {
                ev.target.setStyles(this.css.pageItem)
            }.bind(this),
            "click": function () {
                this.obj.gotoPage(this.num)
            }.bind({obj: this, num: i})
        });
        return pageTurnNode;
    },
    createPageJumper : function(){
        var _self = this;
        var pageJumper = this.pageJumper = new Element("input.pageJumper", {
            "styles": this.css.pageJumper,
            "title": "输入页码，离开输入框或按回车跳转"
        }).inject(this.node);
        this.pageJumperText = new Element("div.pageText", {
            "styles": this.css.pageJumperText,
            "text": "/" + this.options.pageSize
        }).inject(this.node);
        pageJumper.addEvents({
            "focus": function (ev) {
                ev.target.setStyles(this.css.pageJumper_over)
            }.bind(this),
            "blur": function (ev) {
                if( this.value )_self.gotoPage(this.value);
                ev.target.setStyles(_self.css.pageJumper);
            },
            "keyup": function (e) {
                this.value = this.value.replace(/[^0-9_]/g, '');
            },
            "keydown": function (e) {
                if (e.code == 13 && this.value != "") {
                    _self.gotoPage(this.value);
                    e.stopPropagation();
                    //e.preventDefault();
                }
            }
        });
    },
    gotoPage: function (num) {
        if (num < 1 || num > this.options.pageSize) return;
        this.fireEvent("jumpingPage", [num]);
        this.options.currentPage = num;
        this.load();
    },
    gotoItem: function (itemNum) {
        var pageNum = Math.ceil(itemNum / this.options.countPerPage);
        var index = itemNum % this.options.countPerPage;
        this.fireEvent("jumpingPage", [pageNum, itemNum, index]);
        this.options.currentPage = pageNum;
        this.load();
    }
});