/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-04-24 11:22:57 UTC
  • mfrom: (36.4.17 lenasys)
  • Revision ID: gustav.hartvigsson@gmail.com-20130424112257-3jb8m6z9d1geff64
merge db changes... \n Contain criss-cross, but should work....

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'