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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
define.class(function(require,$ui$, view, textbox, label, button){
this.attributes = {
value: Config({type: float, value: 0}),
minvalue: Config({type: float, value: undefined}),
maxvalue: Config({type: float, value: undefined}),
stepvalue: Config({type: float, value: 1}),
bordercolor: Config({motion:"easeout", duration:0.1, value: "#262626", meta:"color" }),
draggingbordercolor: Config({type:vec4, value:vec4("#707070"), meta:"color"}),
focusbordercolor: Config({type:vec4, value:vec4("#606060"), meta:"color"}),
decimals: Config({type:int, value:0}),
fontsize: Config({type: float, value: 14, meta:"fontsize" }),
title: Config({type:String, value:""}),
textfocus:Config({type:boolean})
}
this.tabstop = 0;
this.bordercolor = "#262626" ;
this.borderradius = 4;
this.borderwidth = 2;
this.fgcolor="#f0f0f0";
this.bgcolor = "#3b3b3b"
this.alignself = "flex-end"
this.justifycontent = "center";
this.alignitems = "center";
this.onvalue = function() {
var expo = Math.pow(10, this.decimals);
this._value = Math.round(this.value * expo) / expo;
var tn = this.findChild("thenumber");
if (tn) {
tn.text = this._value.toString();
this.relayout();
}
}
this.keydownUparrow = function(){this.checkandset(this.value + this.stepvalue);}
this.keydownDownarrow =function(){this.checkandset(this.value - this.stepvalue);}
this.keydownRightarrow = function(){this.checkandset(this.value + this.stepvalue*100);}
this.keydownLeftarrow = function(){this.checkandset(this.value - this.stepvalue*100);}
this.keydownUparrowShift = function(){this.checkandset(this.value + this.stepvalue*10);}
this.keydownDownarrowShift =function(){this.checkandset(this.value - this.stepvalue*10);}
this.keydownRightarrowShift =function(){this.checkandset(this.value + this.stepvalue*1000);}
this.keydownLeftarrowShift =function(){this.checkandset(this.value - this.stepvalue*1000);}
this.init = function(){
this.neutralbordercolor = this.bordercolor;
}
this.keydown = function(v){
this.defaultKeyboardHandler(v);
}
this.focus = function(newfocus){
if (this._focus){
this.bordercolor = this.focusbordercolor;
}
else{
this.bordercolor = this.neutralbordercolor;
}
}
this.checkandset = function(newval){
if (isNaN(newval)) newval = 0;
if (this.maxvalue!=undefined && newval > this.maxvalue) newval = this.maxvalue;
if (this.minvalue!=undefined && newval < this.minvalue) newval = this.minvalue;
var expo = Math.pow(10, this.decimals);
this.value = Math.round(newval * expo) / expo;
nb = this.findChild("thenumber");
if (nb) nb.value = this.value.toString();
}
this.upclick = function(){
this.checkandset(this.value + this.stepvalue);
}
this.downclick = function(){
this.checkandset(this.value - this.stepvalue);
}
this.pointerstart = function(){
this.bordercolor = this.draggingbordercolor
this.checkandset(this.value)
this.basevalue = this.value
}
this.pointermove = function(event){
this.checkandset(this.basevalue + (Math.floor(event.delta[0] / 2) - Math.floor(event.delta[1] / 10)) * this.stepvalue)
}
this.pointerend = function(){
if (this._focus) {
this.bordercolor = this.focusbordercolor
} else {
this.bordercolor = this.neutralbordercolor
}
}
this.justifycontent = "space-around";
this.render = function(){
var res = [];
if (this.title && this.title.length > 0){
res.push(
view({alignitems:"center", justifycontent:"center", bgcolor:this.bordercolor,bordercolor:this.bordercolor , margin:0,borderradius:vec4(1,1,1,1),borderwidth:1, padding:0},
label({name:"thetitle", align:"right", alignself:"center", margin:vec4(5,0,5,0), bgcolor:NaN,text:this.title,flex:1, fontsize: this.fontsize, fgcolor:this.fgcolor})
)
)
}
res.push(button({margin:vec4(4,0,4,0),alignself:"center",bgcolor:this.bgcolor,fgcolor:this.fgcolor,borderwidth:0, icon:"chevron-left", bgcolor:"#3b3b3b", text:"", fontsize: this.fontsize*(2/3), padding:4, borderradius:0, click:function(){this.downclick()}.bind(this)}));
res.push(textbox({
margin:vec4(4,0,4,0),
alignself:"center",
padding:0,
bgcolor:"white",
hardrect:{pickonly:true},
name:"thenumber",
align:"right",
value:this._value.toString(),
flex:1,
fontsize:this.fontsize,
fgcolor:this.fgcolor,
multiline:false,
onfocus: function(ev,v,o) {
this.textfocus = v;
}.bind(this),
onvalue:function(ev,v,o) {
var txval = parseFloat(o.value);
if (!isNaN(txval)) {
if (Math.abs(this.value - txval) >= 0.01) {
this.value = txval;
}
}
}.bind(this)
}));
res.push(button({margin:vec4(4,0,4,0),alignself:"center",bgcolor:this.bgcolor,fgcolor:this.fgcolor,borderwidth:0,text:"", icon:"chevron-right", bgcolor:"#3b3b3b",fontsize: this.fontsize*(2/3), padding:4, borderradius:0, click:function(){this.upclick()}.bind(this)}));
return res;
}
var numberbox = this.constructor;
this.constructor.examples = {
Usage: function(){
return [
numberbox({alignself:'flex-start'})
]
}
}
});
|