4 || |
4 || |
5 class SliderWidget extends Widget{ |
5 class SliderWidget extends Widget{ |
6 frequency = 5; |
6 frequency = 5; |
7 range = undefined; |
7 range = undefined; |
8 handle_orig = undefined; |
8 handle_orig = undefined; |
9 scroll_size = 10; |
9 scroll_size = undefined; |
|
10 scroll_range = 0; |
|
11 scroll_visible = 7; |
10 min_size = 0.07; |
12 min_size = 0.07; |
11 fi = undefined; |
13 fi = undefined; |
12 curr_value = 0; |
14 curr_value = 0; |
13 drag = false; |
15 drag = false; |
14 enTimer = false; |
16 enTimer = false; |
15 handle_click = undefined; |
17 handle_click = undefined; |
16 last_drag = false; |
18 last_drag = false; |
17 |
19 |
18 dispatch(value) { |
20 dispatch(value,oldval, index) { |
19 //save current value inside widget |
21 if (index == 0){ |
20 this.curr_value = value; |
22 let [min,max,start,totallength] = this.range; |
21 |
23 //save current value inside widget |
22 if(this.value_elt) |
24 this.curr_value = value; |
23 this.value_elt.textContent = String(value); |
25 |
|
26 //check if in range |
|
27 if (this.curr_value > max){ |
|
28 this.curr_value = max; |
|
29 this.apply_hmi_value(0, this.curr_value); |
|
30 } |
|
31 else if (this.curr_value < min){ |
|
32 this.curr_value = min; |
|
33 this.apply_hmi_value(0, this.curr_value); |
|
34 } |
|
35 |
|
36 if(this.value_elt) |
|
37 this.value_elt.textContent = String(value); |
|
38 } |
|
39 else if(index == 1){ |
|
40 this.scroll_range = value; |
|
41 this.set_scroll(); |
|
42 } |
|
43 else if(index == 2){ |
|
44 this.scroll_visible = value; |
|
45 this.set_scroll(); |
|
46 } |
24 |
47 |
25 //don't update if draging and setpoint ghost doesn't exist |
48 //don't update if draging and setpoint ghost doesn't exist |
26 if(!this.drag || (this.setpoint_elt != undefined)){ |
49 if(!this.drag || (this.setpoint_elt != undefined)){ |
27 this.update_DOM(value, this.handle_elt); |
50 this.update_DOM(this.curr_value, this.handle_elt); |
|
51 } |
|
52 } |
|
53 |
|
54 set_scroll(){ |
|
55 //check if range is bigger than visible and set scroll size |
|
56 if(this.scroll_range > this.scroll_visible){ |
|
57 this.scroll_size = this.scroll_range - this.scroll_visible; |
|
58 this.range[0] = 0; |
|
59 this.range[1] = this.scroll_size; |
|
60 } |
|
61 else{ |
|
62 this.scroll_size = 1; |
|
63 this.range[0] = 0; |
|
64 this.range[1] = 1; |
28 } |
65 } |
29 } |
66 } |
30 |
67 |
31 update_DOM(value, elt){ |
68 update_DOM(value, elt){ |
32 let [min,max,start,totallength] = this.range; |
69 let [min,max,start,totallength] = this.range; |
99 on_release(evt) { |
136 on_release(evt) { |
100 //unbind events |
137 //unbind events |
101 window.removeEventListener("touchmove", this.on_bound_drag, true); |
138 window.removeEventListener("touchmove", this.on_bound_drag, true); |
102 window.removeEventListener("mousemove", this.on_bound_drag, true); |
139 window.removeEventListener("mousemove", this.on_bound_drag, true); |
103 |
140 |
104 window.removeEventListener("mouseup", this.bound_on_release, true) |
141 window.removeEventListener("mouseup", this.bound_on_release, true); |
105 window.removeEventListener("touchend", this.bound_on_release, true); |
142 window.removeEventListener("touchend", this.bound_on_release, true); |
106 window.removeEventListener("touchcancel", this.bound_on_release, true); |
143 window.removeEventListener("touchcancel", this.bound_on_release, true); |
107 |
144 |
108 //reset drag flag |
145 //reset drag flag |
109 if(this.drag){ |
146 if(this.drag){ |
195 } |
232 } |
196 //calculate distance |
233 //calculate distance |
197 this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]); |
234 this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]); |
198 } |
235 } |
199 |
236 |
200 //check if in range |
237 //check if in range and apply |
201 if (this.curr_value > max){ |
238 if (this.curr_value > max){ |
202 this.curr_value = max; |
239 this.curr_value = max; |
203 } |
240 } |
204 else if (this.curr_value < min){ |
241 else if (this.curr_value < min){ |
205 this.curr_value = min; |
242 this.curr_value = min; |
206 } |
243 } |
207 |
|
208 this.apply_hmi_value(0, this.curr_value); |
244 this.apply_hmi_value(0, this.curr_value); |
209 |
245 |
210 //redraw handle |
246 //redraw handle |
211 this.request_animate(); |
247 this.request_animate(); |
212 |
248 |
230 |
266 |
231 //bind events |
267 //bind events |
232 window.addEventListener("touchmove", this.on_bound_drag, true); |
268 window.addEventListener("touchmove", this.on_bound_drag, true); |
233 window.addEventListener("mousemove", this.on_bound_drag, true); |
269 window.addEventListener("mousemove", this.on_bound_drag, true); |
234 |
270 |
235 window.addEventListener("mouseup", this.bound_on_release, true) |
271 window.addEventListener("mouseup", this.bound_on_release, true); |
236 window.addEventListener("touchend", this.bound_on_release, true); |
272 window.addEventListener("touchend", this.bound_on_release, true); |
237 window.addEventListener("touchcancel", this.bound_on_release, true); |
273 window.addEventListener("touchcancel", this.bound_on_release, true); |
238 |
274 |
239 // check if handle was pressed |
275 // check if handle was pressed |
240 if (evt.currentTarget == this.handle_elt){ |
276 if (evt.currentTarget == this.handle_elt){ |
258 this.update_position(evt); |
294 this.update_position(evt); |
259 } |
295 } |
260 |
296 |
261 //prevent next events |
297 //prevent next events |
262 evt.stopPropagation(); |
298 evt.stopPropagation(); |
263 } |
299 |
|
300 } |
|
301 |
264 |
302 |
265 init() { |
303 init() { |
266 //set min max value if not defined |
304 //set min max value if not defined |
267 let min = this.min_elt ? |
305 let min = this.min_elt ? |
268 Number(this.min_elt.textContent) : |
306 Number(this.min_elt.textContent) : |
269 this.args.length >= 1 ? this.args[0] : 0; |
307 this.args.length >= 1 ? this.args[0] : 0; |
270 let max = this.max_elt ? |
308 let max = this.max_elt ? |
271 Number(this.max_elt.textContent) : |
309 Number(this.max_elt.textContent) : |
272 this.args.length >= 2 ? this.args[1] : 100; |
310 this.args.length >= 2 ? this.args[1] : 100; |
273 |
311 |
|
312 |
274 // save initial parameters |
313 // save initial parameters |
275 this.range_elt.style.strokeMiterlimit="0"; |
314 this.range_elt.style.strokeMiterlimit="0"; |
276 this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
315 this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
277 let start = this.range_elt.getPointAtLength(0); |
316 let start = this.range_elt.getPointAtLength(0); |
278 let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
317 let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
285 this.on_bound_drag = this.on_drag.bind(this); |
324 this.on_bound_drag = this.on_drag.bind(this); |
286 |
325 |
287 this.handle_elt.addEventListener("mousedown", this.bound_on_select); |
326 this.handle_elt.addEventListener("mousedown", this.bound_on_select); |
288 this.element.addEventListener("mousedown", this.bound_on_select); |
327 this.element.addEventListener("mousedown", this.bound_on_select); |
289 this.element.addEventListener("touchstart", this.bound_on_select); |
328 this.element.addEventListener("touchstart", this.bound_on_select); |
290 |
329 //touch recognised as page drag without next command |
|
330 document.body.addEventListener("touchstart", function(e){}, false); |
|
331 |
|
332 //save ghost style |
291 if(this.setpoint_elt != undefined){ |
333 if(this.setpoint_elt != undefined){ |
292 this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
334 this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
293 this.setpoint_elt.setAttribute("style", "display:none"); |
335 this.setpoint_elt.setAttribute("style", "display:none"); |
294 } |
336 } |
295 |
337 |