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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
define.class('$ui/view', function(require, $ui$, view, icon) {
this.attributes = {
rows:-1,
columns:-1,
sections:1,
justifysection: Config({group:"layout", type: Enum('','flex-start','center','flex-end','space-between','space-around'), value: ""}),
alignsection: Config({group:"layout", type: Enum('flex-start','center','flex-end','stretch'), value:"stretch"}),
};
this.onrows = function(ev,v,o) {
this._columns = -1;
this.flexdirection = "column";
this.sections = v;
this.relayout();
};
this.oncolumns = function(ev,v,o) {
this._rows = -1;
this.flexdirection = "row";
this.sections = v;
this.relayout();
};
this.render = function() {
var rows = [];
for (var i=0; i < this.sections; i++) {
var views = [];
for (var j = (i % this.sections); j < this.constructor_children.length; j+=this.sections) {
var child = this.constructor_children[j];
if (child) {
views.push(child)
}
}
var sectionflex = this.flexdirection === "column" ? "row" : "column";
var sectionname = sectionflex + i;
rows.push(
this.rowcol({
flex:1,
name:sectionname,
class:sectionname,
alignitems:this.alignsection,
justifycontent:this.justifysection,
flexdirection: sectionflex
}, views)
)
}
return rows;
}
define.class(this, "rowcol", "$ui/view", function() {
})
var table = this.constructor;
this.constructor.examples = {
Usage:function() {
return [
table({
width:200,
columns:3,
alignsection:"center",
style:{
rowcol: {
borderwidth:vec4(0,1,0,0),
bordercolor:"white"
}
}
},
icon({icon:"facebook"}),
icon({icon:"digg"}),
icon({icon:"cc"}),
icon({icon:"envelope"}),
icon({icon:"empire"}),
icon({icon:"eye"}),
icon({icon:"circle"}),
icon({icon:"circle-o"}),
icon({icon:"star"}),
icon({icon:"star-o"})
)
]
}
}
});
|