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 |
}
|