/lenasys/0.1

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/0.1
9.3.2 by Erik Wikström
Updated slider library and created a new demo
1
/* 
2
3
Widget Code!
4
5
*/
6
7
// Recursive Pos of div in document - should work in most browsers
8
function findPos(obj) {
9
	var curLeft = curTop = 0;
10
	if(obj.offsetParent) {
11
		curLeft = obj.offsetLeft
12
		curTop = obj.offsetTop
13
		while(obj = obj.offsetParent) {
14
			curLeft += obj.offsetLeft
15
			curTop += obj.offsetTop
16
		}
17
	}
18
	return {
19
		x:curLeft,
20
		y:curTop
21
	}
22
}
23
24
/*
25
26
ui read widget functions
27
28
*/
29
30
function readSlider(sliderId) {
31
	var value = parseFloat(document.getElementById(sliderId + "box").value);
32
	if(isNaN(value)) {
33
		value = 0.0;
34
	}
35
	return value;
36
}
37
38
function readBinary(binaryId) {
39
	lf = document.getElementById(binaryId + "marker").style.left;
40
	if(lf == "2px") {
41
		return 0;
42
	} else {
43
		return 1;
44
	}
45
}
46
47
/*
48
49
ui change widget functions
50
51
*/
52
53
// The idea is to have a few functions like this one and minimum javascript intervention		
54
function updateBinary(event, binaryId) {
55
	if(mb) {
56
		coords = findPos(event.currentTarget);
57
		coords.x = event.clientX - coords.x;
58
		coords.y = event.clientY - coords.y;
59
		if(coords.x > 24) {
60
			document.getElementById(binaryId + "marker").style.left = 20 + "px";										
61
			document.getElementById(binaryId).style.backgroundColor = "#ddd";										
62
		}else if(coords.x < 16) {
63
			document.getElementById(binaryId + "marker").style.left = 2 + "px";																		
64
			document.getElementById(binaryId).style.backgroundColor = "#777";										
65
		}
66
	}
67
}
68
69
// The idea is to have a few functions like this one and minimum javascript intervention		
70
function updateSlider(event, kind, min, max, length, sliderId, boxId) {
71
	if(mb) {
72
		coords = findPos(event.currentTarget);
73
		coords.x = event.clientX - coords.x;
74
		coords.y = event.clientY - coords.y;
75
		cx = coords.x / length;
76
		sd = max - min;
77
		value = min + (sd * cx);	
78
		if(value > max) value = max;
79
		if(kind == 0) {
80
			value = Math.round(value);
81
		}
82
		if(kind == 1) {
83
			value = Math.round(value * 10.0) / 10.0;
84
		}
85
		if(kind == 2) {
86
			value = Math.round(value * 100.0) / 100.0;
87
		}
88
		if(kind == 3) {
89
			value = Math.round(value * 1000.0) / 1000.0;
90
		}
91
		document.getElementById(boxId).value = value;				
92
		document.getElementById(sliderId).style.left = Math.ceil((length) * ((value - min) / sd)) + "px";
93
	}
94
}
95
		
96
function sliderPosition(value, min, max, length) {
97
		if(value < min) {
98
			value = min;
99
		}
100
		if(value > max) {
101
			value = max;
102
		}
103
		pos = Math.round(((value - min) / (max - min)) * length);
104
		return pos;
105
}
106
107
function changeSlider(value, sliderId, kind, min, max, length) {
108
		value = parseFloat(value);		
109
		if(isNaN(value)) {
110
			value = 0.0;
111
		}
112
		if(value < min) {
113
			value = min;
114
		}
115
		if(value > max) {
116
			value = max;
117
		}
118
		if(kind == 0) {
119
			value = Math.round(value);
120
		}
121
		if(kind == 1) {
122
			value = Math.round(value * 10.0) / 10.0;
123
		}
124
		if(kind == 2) {
125
			value = Math.round(value * 100.0) / 100.0;
126
		}
127
		if(kind == 3) {
128
			value = Math.round(value * 1000.0) / 1000.0;
129
		}
130
		pos = sliderPosition(value, min, max, length);
131
		document.getElementById(sliderId + "box").value = value;
132
		document.getElementById(sliderId + "marker").style.left = pos + "px";										
133
}
134
135
/*
136
137
ui make widget functions
138
139
*/
140
141
function makeLabel(name) {
142
	s = "";
143
	s += "<div class='label'>" + name + "</div>";
144
	return s;		
145
}
146
147
function makePanel(width, height) {
148
	s = "";		
149
	s += "<div class='panel' style='height: " + height + "px; width: " + width + "px;'>";
150
	return s;
151
}
152
153
function makePanelEnd() {
154
	s = "</div>";
155
	return s;		
156
}
157
158
function makeSlider(sliderId, kind, minValue, maxValue, midValue, sliderWidth, defaultValue) {
159
	s = "";
160
	defaultPosition = sliderPosition(defaultValue, minValue, maxValue, sliderWidth);
161
	if(defaultValue < minValue) {
162
		defaultValue = minValue;
163
	}
164
	if(defaultValue > maxValue) {
165
		defaultValue = maxValue;
166
	}					
167
	s += "<input id='" + sliderId + "box' value='" + defaultValue + "' type='text' class='sliderBox' onBlur='changeSlider(this.value,\"" + sliderId + "\"," + kind + "," + minValue + "," + maxValue + "," + sliderWidth + ");'>";
168
	s += "<div id='" + sliderId + "' class='sliderLine' style='width:" + sliderWidth + "px;'";
169
	s += " onmousemove='updateSlider(event," + kind + "," + minValue + "," + maxValue + "," + sliderWidth + ",\"" + sliderId + "marker\",\"" + sliderId + "box\");'";
170
	s += " onmouseup='updateSlider(event," + kind + "," + minValue + "," + maxValue + "," + sliderWidth + ",\"" + sliderId + "marker\",\"" + sliderId + "box\");'>";
171
	s += " <div id='" + sliderId + "marker' class='sliderMarker' style='left:" + defaultPosition + "px;'></div>";
172
	s += "</div>";
173
	s += "<div class='slidermidValue' style='width:" + sliderWidth + "px;'>" + midValue;
174
	s += "<div class='sliderminValue'>" + minValue + "</div>";
175
	s += "<div class='slidermaxValue'>" + maxValue + "</div></div>";
176
	return s;
177
}
178
179
function makeBinary(binaryId, defaultValue) {
180
	s = "";
181
	if(defaultValue == 1) {
182
		defaultPosition = 20;
183
		defaultColor = "#ddd";
184
	} else {
185
		defaultPosition = 2;
186
		defaultColor = "#777";
187
	}
188
	s += "<div id='" + binaryId + "' class='binaryLine' style='background-color:" + defaultColor + ";' onmousemove='updateBinary(event,\"" + binaryId + "\");' onmouseup='updateBinary(event,\"" + binaryId + "\");'>";
189
	s += "<div id='" + binaryId + "marker' class='binaryMarker' style='left:" + defaultPosition + "px;'></div>";
190
	s += "</div>";
191
	return s;
192
}
193
194
var mb = 0;
195
196
function mbPress(event) {
197
	mb = 1;
198
}
199
200
function mbRelease(event) {
201
	mb = 0;
202
}