/lenasys/trunk

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/trunk

« back to all changes in this revision

Viewing changes to Widget Library/sliders.js

  • Committer: Gustav Hatvigsson
  • Date: 2013-05-30 13:27:57 UTC
  • mfrom: (85.1.29 lenasys)
  • Revision ID: gustav.hartvigsson@gmail.com-20130530132757-i82v9rzr950a5fcl
Merged Ohlson:s changes:

edited the forms fo an autofocused field and changed password fields
to password instead of plaintext.

Show diffs side-by-side

added added

removed removed

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