Scrollable

class webix.Scrollable()

Scrollable mixin

References

mixins

EventSystem(), MouseEvents(), Touch().

components

SingleRender().

helpers

_event(), animate(), breakLine(), formLine(), bind(), delay(), extend(), protoUI(), template(), ui().

views

view().

Referenced by

views

dataview(), list(), property(), scrollview(), template(), toolbar(), tree().

External references

Official documentation page.

Code

webix.Scrollable = {
    $init:function(config){
        //do not spam unwanted scroll containers for templates
        if (config && !config.scroll && this._one_time_scroll)
            return (this._dataobj = (this._dataobj||this._contentobj));

        (this._dataobj||this._contentobj).appendChild(webix.html.create("DIV",{ "class" : "webix_scroll_cont" },""));
        this._dataobj=(this._dataobj||this._contentobj).firstChild;

        if(!webix.env.touch)
            webix._event(this._viewobj,"scroll", webix.bind(function(e){
                if(this.callEvent)
                    webix.delay(function(){
                        this.callEvent("onAfterScroll", []);
                    }, this);
            },this));
    },
    /*defaults:{
        scroll:true
    },*/
    scroll_setter:function(value){
        if (!value) return false;
        var marker =  (value=="x"?"x":(value=="xy"?"xy":(value=="a"?"xy":"y")));
        if (webix.Touch && webix.Touch.$active){
            this._dataobj.setAttribute("touch_scroll",marker);
            if (this.attachEvent)
                this.attachEvent("onAfterRender", webix.bind(this._refresh_scroll,this));
            this._touch_scroll = true;
        } else {
            if (webix.env.$customScroll){
                webix.CustomScroll.enable(this, marker);
            } else {
                var node = this._dataobj.parentNode.style;
                if (value.toString().indexOf("a")!=-1){
                    node.overflowX = node.overflowY = "auto";
                } else {
                    if (marker.indexOf("x")!=-1){
                        this._scroll_x = true;
                        node.overflowX = "scroll";
                    }
                    if (marker.indexOf("y")!=-1){
                        this._scroll_y = true;
                        node.overflowY = "scroll";
                    }
                }
            }
        }
        return marker;
    },
    _onoff_scroll:function(mode){
        if (!!this._settings.scroll == !!mode) return;

        if (!webix.env.$customScroll){
            var style = this._dataobj.parentNode.style;
            style.overflowX = style.overflowY = mode?"auto":"hidden";
        }

        this._scroll_x = this._scroll_y = !!mode;
        this._settings.scroll = !!mode;
    },
    getScrollState:function(){
        if (webix.Touch && webix.Touch.$active){
            var temp = webix.Touch._get_matrix(this._dataobj);
            return { x : -temp.e, y : -temp.f };
        } else
            return { x : this._dataobj.parentNode.scrollLeft, y : this._dataobj.parentNode.scrollTop };
    },
    scrollTo:function(x,y){
        if (webix.Touch && webix.Touch.$active){
            y = Math.max(0, Math.min(y, this._dataobj.offsetHeight - this._content_height));
            x = Math.max(0, Math.min(x, this._dataobj.offsetWidth - this._content_width));
            webix.Touch._set_matrix(this._dataobj, -x, -y, this._settings.scrollSpeed||"100ms");
        } else {
            this._dataobj.parentNode.scrollLeft=x;
            this._dataobj.parentNode.scrollTop=y;
        }
    },
    _refresh_scroll:function(){
        if (this._settings.scroll.toString().indexOf("x")!=-1){
            var x =  this._dataobj.scrollWidth;
            if (x){ //in hidden state we will have a Zero scrollWidth
                this._dataobj.style.width = "100%";
                this._dataobj.style.width = this._dataobj.scrollWidth + "px";
            }
        }

        if(webix.Touch && webix.Touch.$active && this._touch_scroll){
            webix.Touch._clear_artefacts();
            webix.Touch._scroll_end();
            var s = this.getScrollState();
            var dx = this._dataobj.offsetWidth - this.$width - s.x;
            var dy = this._dataobj.offsetHeight - this.$height - s.y;

            //if current scroll is outside of data area
            if(dx<0 || dy < 0){
                //scroll to the end of data area
                var x = (dx<0?Math.min(-dx - s.x,0):- s.x);
                var y = (dy<0?Math.min(-dy - s.y,0):- s.y);
                webix.Touch._set_matrix(this._dataobj, x, y, 0);
            }
        }
    }
};

/*
    UI:paging control
*/



webix.protoUI({
    defaults:{
        size:10,    //items on page
        page: 0,    //current page
        group:5,
        template:"{common.pages()}",
        maxWidth:100000,
        height:30,
        borderless:true
    },
    name:"pager",
    on_click:{
        //on paging button click
        "webix_pager_item":function(e,id){
            this.select(id);
        }
    },
    $init:function(config){
        this.data = this._settings;
        this._dataobj = this._viewobj;
        this._viewobj.className += " webix_pager";

        if(config.master===false||config.master === 0)
             this.$ready.push(this._remove_master);
    },
    _remove_master:function(){
        this.refresh();
        this.$master = { refresh:function(){}, select:function(){} };
    },
    select:function(id){
        if (this.$master && this.$master.name == "pager")
            return this.$master.select(id);

        //id - id of button, number for page buttons
        switch(id){
            case "next":
                id = this._settings.page+1;
                break;
            case "prev":
                id = this._settings.page-1;
                break;
            case "first":
                id = 0;
                break;
            case "last":
                id = this._settings.limit-1;
                break;
            default:
                //use incoming id
                break;
        }
        if (id<0) id=0;
        if (id>=this.data.limit) id=this.data.limit-1;

        var old = this.data.page;
        if (this.callEvent("onBeforePageChange",[id, old])){
            this.data.page = id*1; //must be int
            if (this.refresh()){
                if (!this._settings.animate || !this._animate(old, id*1, this._settings.animate))
                    this.$master.refresh();
            }
            this.callEvent("onAfterPageChange",[id]);
        }
    },
    _id:"webix_p_id",
    template_setter:webix.template,
    type:{
        template:function(a,b){ return a.template.call(this, a,b); },
        //list of page numbers
        pages:function(obj){
            var html="";
            //skip rendering if paging is not fully initialized
            if (obj.page == -1) return "";
            //current page taken as center of view, calculate bounds of group
            obj.$min = obj.page-Math.round((obj.group-1)/2);
            obj.$max = obj.$min + obj.group*1 - 1;
            if (obj.$min<0){
                obj.$max+=obj.$min*(-1);
                obj.$min=0;
            }
            if (obj.$max>=obj.limit){
                obj.$min -= Math.min(obj.$min,obj.$max-obj.limit+1);
                obj.$max = obj.limit-1;
            }
            //generate HTML code of buttons
            for (var i=(obj.$min||0); i<=obj.$max; i++)
                html+=this.button({id:i, index:(i+1), selected:(i == obj.page ?"_selected":""), label:webix.i18n.aria.page+" "+(i+1)});
            return html;
        },
        page:function(obj){
            return obj.page+1;
        },
        //go-to-first page button
        first:function(){
            return this.button({ id:"first", index:webix.locale.pager.first, selected:"", label:webix.i18n.aria.pages[0]});
        },
        //go-to-last page button
        last:function(){
            return this.button({ id:"last", index:webix.locale.pager.last, selected:"", label:webix.i18n.aria.pages[3]});
        },
        //go-to-prev page button
        prev:function(){
            return this.button({ id:"prev", index:webix.locale.pager.prev, selected:"", label:webix.i18n.aria.pages[1]});
        },
        //go-to-next page button
        next:function(){
            return this.button({ id:"next", index:webix.locale.pager.next, selected:"", label:webix.i18n.aria.pages[2]});
        },
        button:webix.template("<button type='button' webix_p_id='{obj.id}' class='webix_pager_item{obj.selected}' aria-label='{obj.label}'>{obj.index}</button>")
    },
    clone:function(pager){
        if (!pager.$view){
            pager.view = "pager";
            pager = webix.ui(pager);
        }

        this._clone = pager;
        pager.$master = this;
        this._refresh_clone();
    },
    refresh:function(){
        var s = this._settings;
        if (!s.count) return;

        //max page number
        s.limit = Math.ceil(s.count/s.size);

        var newPage = Math.min(s.limit-1, s.page);

        if (newPage != s.page)
            return this.$master.setPage(newPage);

        s.page = newPage;
        if (newPage>=0 && (newPage!=s.old_page) || (s.limit != s.old_limit) || (s.old_count != s.count)){
            //refresh self only if current page or total limit was changed
            this.render();
            this._refresh_clone();
            s.old_limit = s.limit;    //save for onchange check in next iteration
            s.old_page = s.page;
            s.old_count = s.count;
            return true;
        }
    },
    apiOnly_setter:function(value){
        return (this.$apiOnly=value);
    },
    _refresh_clone:function(){
        if (this._clone){
            this._clone._settings.count = this._settings.count;
            this._clone._settings.page = this._settings.page;
            this._clone.refresh();
        }
    },
    _animate:function(old, id, config){
        if (old == id) return false;
        if (this._pgInAnimation){
            if(this._pgAnimateTimeout){
                window.clearTimeout(this._pgAnimateTimeout);
            }
            return (this._pgAnimateTimeout = webix.delay(this._animate, this,[old, id, config],100));
        }
        var direction = id > old ? "left" : "right";
        if (config.direction == "top" || config.direction == "bottom")
            direction = id > old ? "top" : "bottom";
        if (config.flip)
            direction = "";



        //make copy of existing view
        var top = 0;
        var snode = this.$master._dataobj;
        if (this.$master._body){    //datatable
            snode = this.$master._body;
            top = snode.offsetTop;
            webix.html.addCss(this.$master.$view, "webix_animation");
        }

        var onode = snode.cloneNode(true);
        onode.style.width = snode.style.width = "100%";

        //redraw page
        this.$master.refresh();
        //append copy next to original
        webix.html.insertBefore(onode, snode.nextSibling, snode.parentNode);

        //animation config
        var line;
        var base = config !== true ? config : {};
        var aniset = webix.extend({
            direction:direction,
            callback:webix.bind(function(){
                aniset.callback = null;
                webix.animate.breakLine(line);
                this._pgInAnimation = false;
                if (this.$master._body)
                    webix.html.removeCss(this.$master.$view, "webix_animation");
            },this),
            top:top
        }, base);

        //run animation
        line = webix.animate.formLine(snode, onode, aniset);
        webix.animate([ snode, onode ], aniset );
        this._pgInAnimation = true;
    }
}, webix.MouseEvents, webix.SingleRender, webix.ui.view, webix.EventSystem);