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
112
|
define.class('$ui/button', function(exports, $ui$, icon, label) {
exports.groups = {};
exports.clearSelection = function(group) {
if (group) {
var current = this.groups[group];
if (current) {
delete this.groups[group]
current.selected = false;
}
} else {
this.groups = {}
}
};
exports.select = function(group, value) {
this.clearSelection(group);
this.groups[group] = value;
value.selected = true;
};
this.attributes = {
group:"default",
selected:false,
textselectedcolor: Config({meta:"color", type: vec4, value: vec4("yellow")}),
selectedcolor1: Config({meta:"color", type: vec4, value: vec4("#888")}),
selectedcolor2: Config({meta:"color", type: vec4, value: vec4("#AAA")})
}
this.buildIconRes = function() {
return icon({
drawtarget:"color",
fgcolor:this.selected ? this.textselectedcolor : this.textcolor,
fontsize: this.fontsize,
icon: this.icon
})
};
this.buildButtonRes = function(iconres) {
return label({
drawtarget:"color",
marginleft:iconres ? this.iconmargin : 0,
fontsize: this.fontsize,
fgcolor:this.selected ? this.textselectedcolor : this.textcolor,
text: this.text
})
};
this.init = function() {
if (this.selected) {
this.constructor.select(this.group, this)
}
}
this.onselected = function() {
this.statenormal()
}
this.statehover = function(){
this.shadowopacity = 1.0;
this.col1 = this.hovercolor1;
this.col2 = this.hovercolor2;
this.setTextColor(this.selected ? this.textselectedcolor : this.textactivecolor)
}
this.statenormal = function(first) {
this.shadowopacity = 0.0;
this.col1 = Mark(this.selected ? this.selectedcolor1 : this.buttoncolor1, first);
this.col2 = Mark(this.selected ? this.selectedcolor2 : this.buttoncolor2, first);
this.setTextColor(this.selected ? this.textselectedcolor : this.textcolor)
}
this.click = function() {
this.constructor.select(this.group, this)
}
var radiobutton = this.constructor;
this.constructor.examples = {
Usage:function(){
return [
radiobutton({group:"a", text:"Group A - Press me!", selected:true}),
radiobutton({group:"a", text:"Group A - Colored!", buttoncolor1: "red", buttoncolor2: "blue", labelcolor: "white" }),
radiobutton({group:"a", text:"Group A - With an icon!", icon:"flask" }),
radiobutton({group:"b", text:"Group B - Press me!", selected:true, margintop:20}),
radiobutton({group:"b", text:"Group B - Colored!", buttoncolor1: "red", buttoncolor2: "blue", labelcolor: "white" }),
radiobutton({group:"b", text:"Group B - With an icon!", icon:"flask" })
]
}
}
});
|