accordion

class webix.ui.accordion(data)
Arguments:
  • data (object) – A configuration object

Accordion view.

References

views
layout().
helpers
isUndefined(), protoUI(), each().

Referenced by

views
headerlayout().

External references

Official documentation page.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
webix.protoUI({
    name:"accordion",
    defaults:{
        panelClass:"accordionitem",
        multi:false,
        collapsed:false
    },
    $init:function(){
        this._viewobj.setAttribute("role", "tablist");
        this._viewobj.setAttribute("aria-multiselectable", "true");
    },
    addView:function(view){
        //adding view to the accordion
        var id = webix.ui.layout.prototype.addView.apply(this, arguments);
        var child = webix.$$(id);
        //repainting sub-panels in the accordion
        if (child.collapsed_setter && child.refresh) child.refresh();
        return id;
    },
    _parse_cells:function(){
        var panel = this._settings.panelClass;
        var cells = this._collection;

        for (var i=0; i<cells.length; i++){
            if ((cells[i].body || cells[i].header)&& !cells[i].view && !cells[i].align)
                cells[i].view = panel;
            if (webix.isUndefined(cells[i].collapsed))
                cells[i].collapsed = this._settings.collapsed;

        }


        this._skin_render_collapse = true;
        webix.ui.layout.prototype._parse_cells.call(this);
        this._skin_render_collapse = false;

        for (var i=0; i < this._cells.length; i++){
            if (this._cells[i].name == panel)
                this._cells[i].refresh();
            this._cells[i]._accLastChild = false;
        }
        var found = false;
        for (var i= this._cells.length-1; i>=0 &&!found; i--){
            if(!this._cells[i]._settings.hidden){
                this._cells[i]._accLastChild = true;
                found = true;
            }
        }

    },
    _afterOpen:function(view){
        if (this._settings.multi === false && this._skin_render_collapse !== true){
            for (var i=0; i < this._cells.length; i++) {
                if (view != this._cells[i] && !this._cells[i]._settings.collapsed && this._cells[i].collapse)
                    this._cells[i].collapse();
            }
        }
        if (view.callEvent){
            view.callEvent("onViewShow",[]);
            webix.ui.each(view, this._signal_hidden_cells);
        }
    },
    _canCollapse:function(view){
        if (this._settings.multi === true || this._skin_render_collapse) return true;
        //can collapse only if you have other item to open
        for (var i=0; i < this._cells.length; i++)
            if (view != this._cells[i] && !this._cells[i]._settings.collapsed && this._cells[i].isVisible() && !this._cells[i].$nospace)
                return true;
        return false;
    },
    $skin:function(){
        var defaults = this.defaults;
        if(webix.skin.$active.accordionType)
            defaults.type = webix.skin.$active.accordionType;
    }
}, webix.ui.layout);