author | Giulio Cesare Solaroli <giulio.cesare@solaroli.it> | 2011-10-03 16:04:12 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@solaroli.it> | 2011-10-03 16:04:12 (UTC) |
commit | 541bb378ddece2eab135a8066a16994e94436dea (patch) (unidiff) | |
tree | ff160ea3e26f7fe07fcfd401387c5a0232ca715e /frontend/beta/js/YUI/slider.js | |
parent | 1bf431fd3d45cbdf4afa3e12afefe5d24f4d3bc7 (diff) | |
parent | ecad5e895831337216544e81f1a467e0c68c4a6a (diff) | |
download | clipperz-541bb378ddece2eab135a8066a16994e94436dea.zip clipperz-541bb378ddece2eab135a8066a16994e94436dea.tar.gz clipperz-541bb378ddece2eab135a8066a16994e94436dea.tar.bz2 |
Merge pull request #1 from gcsolaroli/master
First version of the restructured repository
Diffstat (limited to 'frontend/beta/js/YUI/slider.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI/slider.js | 1113 |
1 files changed, 1113 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI/slider.js b/frontend/beta/js/YUI/slider.js new file mode 100644 index 0000000..8d3cd62 --- a/dev/null +++ b/frontend/beta/js/YUI/slider.js | |||
@@ -0,0 +1,1113 @@ | |||
1 | /* | ||
2 | Copyright (c) 2006, Yahoo! Inc. All rights reserved. | ||
3 | Code licensed under the BSD License: | ||
4 | http://developer.yahoo.net/yui/license.txt | ||
5 | version: 0.12.0 | ||
6 | */ | ||
7 | |||
8 | /** | ||
9 | * The Slider component is a UI control that enables the user to adjust | ||
10 | * values in a finite range along one or two axes. Typically, the Slider | ||
11 | * control is used in a web application as a rich, visual replacement | ||
12 | * for an input box that takes a number as input. The Slider control can | ||
13 | * also easily accommodate a second dimension, providing x,y output for | ||
14 | * a selection point chosen from a rectangular region. | ||
15 | * | ||
16 | * @module slider | ||
17 | * @title Slider Widget | ||
18 | * @namespace YAHOO.widget | ||
19 | * @requires yahoo,dom,dragdrop,event | ||
20 | * @optional animation | ||
21 | */ | ||
22 | |||
23 | /** | ||
24 | * A DragDrop implementation that can be used as a background for a | ||
25 | * slider. It takes a reference to the thumb instance | ||
26 | * so it can delegate some of the events to it. The goal is to make the | ||
27 | * thumb jump to the location on the background when the background is | ||
28 | * clicked. | ||
29 | * | ||
30 | * @class Slider | ||
31 | * @extends YAHOO.util.DragDrop | ||
32 | * @constructor | ||
33 | * @param {String} id The id of the element linked to this instance | ||
34 | * @param {String} sGroup The group of related DragDrop items | ||
35 | * @param {String} sType The type of slider (horiz, vert, region) | ||
36 | */ | ||
37 | YAHOO.widget.Slider = function(sElementId, sGroup, oThumb, sType) { | ||
38 | if (sElementId) { | ||
39 | |||
40 | /** | ||
41 | * The type of the slider (horiz, vert, region) | ||
42 | * @property type | ||
43 | * @type string | ||
44 | */ | ||
45 | this.type = sType; | ||
46 | |||
47 | this.init(sElementId, sGroup, true); | ||
48 | |||
49 | //this.removeInvalidHandleType("A"); | ||
50 | |||
51 | |||
52 | var self = this; | ||
53 | |||
54 | /** | ||
55 | * Event the fires when the value of the control changes. If | ||
56 | * the control is animated the event will fire every point | ||
57 | * along the way. | ||
58 | * @event change | ||
59 | * @param {int} new | ||
60 | * @param {int} firstOffset the number of pixels the thumb has moved | ||
61 | * from its start position. Normal horizontal and vertical sliders will only | ||
62 | * have the firstOffset. Regions will have both, the first is the horizontal | ||
63 | * offset, the second the vertical. | ||
64 | * @param {int} secondOffset the y offset for region sliders | ||
65 | */ | ||
66 | this.createEvent("change", this); | ||
67 | |||
68 | /** | ||
69 | * Event that fires at the end of a slider thumb move. | ||
70 | * @event slideStart | ||
71 | */ | ||
72 | this.createEvent("slideStart", this); | ||
73 | |||
74 | /** | ||
75 | * Event that fires at the end of a slider thumb move | ||
76 | * @event slideEnd | ||
77 | */ | ||
78 | this.createEvent("slideEnd", this); | ||
79 | |||
80 | /** | ||
81 | * A YAHOO.widget.SliderThumb instance that we will use to | ||
82 | * reposition the thumb when the background is clicked | ||
83 | * @property thumb | ||
84 | * @type YAHOO.widget.SliderThumb | ||
85 | */ | ||
86 | this.thumb = oThumb; | ||
87 | |||
88 | // add handler for the handle onchange event | ||
89 | oThumb.onChange = function() { | ||
90 | self.handleThumbChange(); | ||
91 | }; | ||
92 | |||
93 | /** | ||
94 | * Overrides the isTarget property in YAHOO.util.DragDrop | ||
95 | * @property isTarget | ||
96 | * @private | ||
97 | */ | ||
98 | this.isTarget = false; | ||
99 | |||
100 | /** | ||
101 | * Flag that determines if the thumb will animate when moved | ||
102 | * @property animate | ||
103 | * @type boolean | ||
104 | */ | ||
105 | this.animate = YAHOO.widget.Slider.ANIM_AVAIL; | ||
106 | |||
107 | /** | ||
108 | * Set to false to disable a background click thumb move | ||
109 | * @property backgroundEnabled | ||
110 | * @type boolean | ||
111 | */ | ||
112 | this.backgroundEnabled = true; | ||
113 | |||
114 | /** | ||
115 | * Adjustment factor for tick animation, the more ticks, the | ||
116 | * faster the animation (by default) | ||
117 | * @property tickPause | ||
118 | * @type int | ||
119 | */ | ||
120 | this.tickPause = 40; | ||
121 | |||
122 | /** | ||
123 | * Enables the arrow, home and end keys, defaults to true. | ||
124 | * @property enableKeys | ||
125 | * @type boolean | ||
126 | */ | ||
127 | this.enableKeys = true; | ||
128 | |||
129 | /** | ||
130 | * Specifies the number of pixels the arrow keys will move the slider. | ||
131 | * Default is 25. | ||
132 | * @property keyIncrement | ||
133 | * @type int | ||
134 | */ | ||
135 | this.keyIncrement = 20; | ||
136 | |||
137 | /** | ||
138 | * moveComplete is set to true when the slider has moved to its final | ||
139 | * destination. For animated slider, this value can be checked in | ||
140 | * the onChange handler to make it possible to execute logic only | ||
141 | * when the move is complete rather than at all points along the way. | ||
142 | * | ||
143 | * @property moveComplete | ||
144 | * @type Boolean | ||
145 | */ | ||
146 | this.moveComplete = true; | ||
147 | |||
148 | /** | ||
149 | * If animation is configured, specifies the length of the animation | ||
150 | * in seconds. | ||
151 | * @property animationDuration | ||
152 | * @type int | ||
153 | * @default 0.2 | ||
154 | */ | ||
155 | this.animationDuration = 0.2; | ||
156 | |||
157 | if (oThumb._isHoriz && oThumb.xTicks && oThumb.xTicks.length) { | ||
158 | this.tickPause = Math.round(360 / oThumb.xTicks.length); | ||
159 | } else if (oThumb.yTicks && oThumb.yTicks.length) { | ||
160 | this.tickPause = Math.round(360 / oThumb.yTicks.length); | ||
161 | } | ||
162 | |||
163 | |||
164 | // delegate thumb methods | ||
165 | oThumb.onMouseDown = function () { return self.focus(); }; | ||
166 | //oThumb.b4MouseDown = function () { return self.b4MouseDown(); }; | ||
167 | // oThumb.lock = function() { self.lock(); }; | ||
168 | // oThumb.unlock = function() { self.unlock(); }; | ||
169 | oThumb.onMouseUp = function() { self.thumbMouseUp(); }; | ||
170 | oThumb.onDrag = function() { self.fireEvents(); }; | ||
171 | oThumb.onAvailable = function() { return self.setStartSliderState(); }; | ||
172 | } | ||
173 | }; | ||
174 | |||
175 | /** | ||
176 | * Factory method for creating a horizontal slider | ||
177 | * @method YAHOO.widget.Slider.getHorizSlider | ||
178 | * @static | ||
179 | * @param {String} sBGElId the id of the slider's background element | ||
180 | * @param {String} sHandleElId the id of the thumb element | ||
181 | * @param {int} iLeft the number of pixels the element can move left | ||
182 | * @param {int} iRight the number of pixels the element can move right | ||
183 | * @param {int} iTickSize optional parameter for specifying that the element | ||
184 | * should move a certain number pixels at a time. | ||
185 | * @return {Slider} a horizontal slider control | ||
186 | */ | ||
187 | YAHOO.widget.Slider.getHorizSlider = | ||
188 | function (sBGElId, sHandleElId, iLeft, iRight, iTickSize) { | ||
189 | return new YAHOO.widget.Slider(sBGElId, sBGElId, | ||
190 | new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, | ||
191 | iLeft, iRight, 0, 0, iTickSize), "horiz"); | ||
192 | }; | ||
193 | |||
194 | /** | ||
195 | * Factory method for creating a vertical slider | ||
196 | * @method YAHOO.widget.Slider.getVertSlider | ||
197 | * @static | ||
198 | * @param {String} sBGElId the id of the slider's background element | ||
199 | * @param {String} sHandleElId the id of the thumb element | ||
200 | * @param {int} iUp the number of pixels the element can move up | ||
201 | * @param {int} iDown the number of pixels the element can move down | ||
202 | * @param {int} iTickSize optional parameter for specifying that the element | ||
203 | * should move a certain number pixels at a time. | ||
204 | * @return {Slider} a vertical slider control | ||
205 | */ | ||
206 | YAHOO.widget.Slider.getVertSlider = | ||
207 | function (sBGElId, sHandleElId, iUp, iDown, iTickSize) { | ||
208 | return new YAHOO.widget.Slider(sBGElId, sBGElId, | ||
209 | new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, 0, 0, | ||
210 | iUp, iDown, iTickSize), "vert"); | ||
211 | }; | ||
212 | |||
213 | /** | ||
214 | * Factory method for creating a slider region like the one in the color | ||
215 | * picker example | ||
216 | * @method YAHOO.widget.Slider.getSliderRegion | ||
217 | * @static | ||
218 | * @param {String} sBGElId the id of the slider's background element | ||
219 | * @param {String} sHandleElId the id of the thumb element | ||
220 | * @param {int} iLeft the number of pixels the element can move left | ||
221 | * @param {int} iRight the number of pixels the element can move right | ||
222 | * @param {int} iUp the number of pixels the element can move up | ||
223 | * @param {int} iDown the number of pixels the element can move down | ||
224 | * @param {int} iTickSize optional parameter for specifying that the element | ||
225 | * should move a certain number pixels at a time. | ||
226 | * @return {Slider} a slider region control | ||
227 | */ | ||
228 | YAHOO.widget.Slider.getSliderRegion = | ||
229 | function (sBGElId, sHandleElId, iLeft, iRight, iUp, iDown, iTickSize) { | ||
230 | return new YAHOO.widget.Slider(sBGElId, sBGElId, | ||
231 | new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, iLeft, iRight, | ||
232 | iUp, iDown, iTickSize), "region"); | ||
233 | }; | ||
234 | |||
235 | /** | ||
236 | * By default, animation is available if the animation library is detected. | ||
237 | * @property YAHOO.widget.Slider.ANIM_AVAIL | ||
238 | * @static | ||
239 | * @type boolean | ||
240 | */ | ||
241 | YAHOO.widget.Slider.ANIM_AVAIL = true; | ||
242 | |||
243 | YAHOO.extend(YAHOO.widget.Slider, YAHOO.util.DragDrop, { | ||
244 | |||
245 | onAvailable: function() { | ||
246 | var Event = YAHOO.util.Event; | ||
247 | Event.on(this.id, "keydown", this.handleKeyDown, this, true); | ||
248 | Event.on(this.id, "keypress", this.handleKeyPress, this, true); | ||
249 | }, | ||
250 | |||
251 | handleKeyPress: function(e) { | ||
252 | if (this.enableKeys) { | ||
253 | var Event = YAHOO.util.Event; | ||
254 | var kc = Event.getCharCode(e); | ||
255 | switch (kc) { | ||
256 | case 0x25: // left | ||
257 | case 0x26: // up | ||
258 | case 0x27: // right | ||
259 | case 0x28: // down | ||
260 | case 0x24: // home | ||
261 | case 0x23: // end | ||
262 | Event.preventDefault(e); | ||
263 | break; | ||
264 | default: | ||
265 | } | ||
266 | } | ||
267 | }, | ||
268 | |||
269 | handleKeyDown: function(e) { | ||
270 | if (this.enableKeys) { | ||
271 | var Event = YAHOO.util.Event; | ||
272 | |||
273 | var kc = Event.getCharCode(e), t=this.thumb; | ||
274 | var h=this.getXValue(),v=this.getYValue(); | ||
275 | |||
276 | var horiz = false; | ||
277 | var changeValue = true; | ||
278 | switch (kc) { | ||
279 | |||
280 | // left | ||
281 | case 0x25: h -= this.keyIncrement; break; | ||
282 | |||
283 | // up | ||
284 | case 0x26: v -= this.keyIncrement; break; | ||
285 | |||
286 | // right | ||
287 | case 0x27: h += this.keyIncrement; break; | ||
288 | |||
289 | // down | ||
290 | case 0x28: v += this.keyIncrement; break; | ||
291 | |||
292 | // home | ||
293 | case 0x24: h = t.leftConstraint; | ||
294 | v = t.topConstraint; | ||
295 | break; | ||
296 | |||
297 | // end | ||
298 | case 0x23: h = t.rightConstraint; | ||
299 | v = t.bottomConstraint; | ||
300 | break; | ||
301 | |||
302 | default: changeValue = false; | ||
303 | } | ||
304 | |||
305 | if (changeValue) { | ||
306 | if (t._isRegion) { | ||
307 | this.setRegionValue(h, v, true); | ||
308 | } else { | ||
309 | var newVal = (t._isHoriz) ? h : v; | ||
310 | this.setValue(newVal, true); | ||
311 | } | ||
312 | Event.stopEvent(e); | ||
313 | } | ||
314 | |||
315 | } | ||
316 | }, | ||
317 | |||
318 | /** | ||
319 | * Initialization that sets up the value offsets once the elements are ready | ||
320 | * @method setSliderStartState | ||
321 | */ | ||
322 | setStartSliderState: function() { | ||
323 | |||
324 | |||
325 | this.setThumbCenterPoint(); | ||
326 | |||
327 | /** | ||
328 | * The basline position of the background element, used | ||
329 | * to determine if the background has moved since the last | ||
330 | * operation. | ||
331 | * @property baselinePos | ||
332 | * @type [int, int] | ||
333 | */ | ||
334 | this.baselinePos = YAHOO.util.Dom.getXY(this.getEl()); | ||
335 | |||
336 | this.thumb.startOffset = this.thumb.getOffsetFromParent(this.baselinePos); | ||
337 | |||
338 | if (this.thumb._isRegion) { | ||
339 | if (this.deferredSetRegionValue) { | ||
340 | this.setRegionValue.apply(this, this.deferredSetRegionValue, true); | ||
341 | this.deferredSetRegionValue = null; | ||
342 | } else { | ||
343 | this.setRegionValue(0, 0, true); | ||
344 | } | ||
345 | } else { | ||
346 | if (this.deferredSetValue) { | ||
347 | this.setValue.apply(this, this.deferredSetValue, true); | ||
348 | this.deferredSetValue = null; | ||
349 | } else { | ||
350 | this.setValue(0, true, true); | ||
351 | } | ||
352 | } | ||
353 | }, | ||
354 | |||
355 | /** | ||
356 | * When the thumb is available, we cache the centerpoint of the element so | ||
357 | * we can position the element correctly when the background is clicked | ||
358 | * @method setThumbCenterPoint | ||
359 | */ | ||
360 | setThumbCenterPoint: function() { | ||
361 | |||
362 | var el = this.thumb.getEl(); | ||
363 | |||
364 | if (el) { | ||
365 | /** | ||
366 | * The center of the slider element is stored so we can position | ||
367 | * place it in the correct position when the background is clicked | ||
368 | * @property thumbCenterPoint | ||
369 | * @type {"x": int, "y": int} | ||
370 | */ | ||
371 | this.thumbCenterPoint = { | ||
372 | x: parseInt(el.offsetWidth/2, 10), | ||
373 | y: parseInt(el.offsetHeight/2, 10) | ||
374 | }; | ||
375 | } | ||
376 | |||
377 | }, | ||
378 | |||
379 | /** | ||
380 | * Locks the slider, overrides YAHOO.util.DragDrop | ||
381 | * @method lock | ||
382 | */ | ||
383 | lock: function() { | ||
384 | this.thumb.lock(); | ||
385 | this.locked = true; | ||
386 | }, | ||
387 | |||
388 | /** | ||
389 | * Unlocks the slider, overrides YAHOO.util.DragDrop | ||
390 | * @method unlock | ||
391 | */ | ||
392 | unlock: function() { | ||
393 | this.thumb.unlock(); | ||
394 | this.locked = false; | ||
395 | }, | ||
396 | |||
397 | /** | ||
398 | * Handles mouseup event on the slider background | ||
399 | * @method thumbMouseUp | ||
400 | * @private | ||
401 | */ | ||
402 | thumbMouseUp: function() { | ||
403 | if (!this.isLocked() && !this.moveComplete) { | ||
404 | this.endMove(); | ||
405 | } | ||
406 | |||
407 | }, | ||
408 | |||
409 | /** | ||
410 | * Returns a reference to this slider's thumb | ||
411 | * @method getThumb | ||
412 | * @return {SliderThumb} this slider's thumb | ||
413 | */ | ||
414 | getThumb: function() { | ||
415 | return this.thumb; | ||
416 | }, | ||
417 | |||
418 | /** | ||
419 | * Try to focus the element when clicked so we can add | ||
420 | * accessibility features | ||
421 | * @method focus | ||
422 | * @private | ||
423 | */ | ||
424 | focus: function() { | ||
425 | |||
426 | // Focus the background element if possible | ||
427 | var el = this.getEl(); | ||
428 | |||
429 | if (el.focus) { | ||
430 | try { | ||
431 | el.focus(); | ||
432 | } catch(e) { | ||
433 | // Prevent permission denied unhandled exception in FF that can | ||
434 | // happen when setting focus while another element is handling | ||
435 | // the blur. @TODO this is still writing to the error log | ||
436 | // (unhandled error) in FF1.5 with strict error checking on. | ||
437 | } | ||
438 | } | ||
439 | |||
440 | this.verifyOffset(); | ||
441 | |||
442 | if (this.isLocked()) { | ||
443 | return false; | ||
444 | } else { | ||
445 | this.onSlideStart(); | ||
446 | return true; | ||
447 | } | ||
448 | }, | ||
449 | |||
450 | /** | ||
451 | * Event that fires when the value of the slider has changed | ||
452 | * @method onChange | ||
453 | * @param {int} firstOffset the number of pixels the thumb has moved | ||
454 | * from its start position. Normal horizontal and vertical sliders will only | ||
455 | * have the firstOffset. Regions will have both, the first is the horizontal | ||
456 | * offset, the second the vertical. | ||
457 | * @param {int} secondOffset the y offset for region sliders | ||
458 | * @deprecated use instance.subscribe("change") instead | ||
459 | */ | ||
460 | onChange: function (firstOffset, secondOffset) { | ||
461 | /* override me */ | ||
462 | }, | ||
463 | |||
464 | /** | ||
465 | * Event that fires when the at the beginning of the slider thumb move | ||
466 | * @method onSlideStart | ||
467 | * @deprecated use instance.subscribe("slideStart") instead | ||
468 | */ | ||
469 | onSlideStart: function () { | ||
470 | /* override me */ | ||
471 | }, | ||
472 | |||
473 | /** | ||
474 | * Event that fires at the end of a slider thumb move | ||
475 | * @method onSliderEnd | ||
476 | * @deprecated use instance.subscribe("slideEnd") instead | ||
477 | */ | ||
478 | onSlideEnd: function () { | ||
479 | /* override me */ | ||
480 | }, | ||
481 | |||
482 | /** | ||
483 | * Returns the slider's thumb offset from the start position | ||
484 | * @method getValue | ||
485 | * @return {int} the current value | ||
486 | */ | ||
487 | getValue: function () { | ||
488 | return this.thumb.getValue(); | ||
489 | }, | ||
490 | |||
491 | /** | ||
492 | * Returns the slider's thumb X offset from the start position | ||
493 | * @method getXValue | ||
494 | * @return {int} the current horizontal offset | ||
495 | */ | ||
496 | getXValue: function () { | ||
497 | return this.thumb.getXValue(); | ||
498 | }, | ||
499 | |||
500 | /** | ||
501 | * Returns the slider's thumb Y offset from the start position | ||
502 | * @method getYValue | ||
503 | * @return {int} the current vertical offset | ||
504 | */ | ||
505 | getYValue: function () { | ||
506 | return this.thumb.getYValue(); | ||
507 | }, | ||
508 | |||
509 | /** | ||
510 | * Internal handler for the slider thumb's onChange event | ||
511 | * @method handleThumbChange | ||
512 | * @private | ||
513 | */ | ||
514 | handleThumbChange: function () { | ||
515 | var t = this.thumb; | ||
516 | if (t._isRegion) { | ||
517 | t.onChange(t.getXValue(), t.getYValue()); | ||
518 | this.fireEvent("change", { x: t.getXValue(), y: t.getYValue() } ); | ||
519 | } else { | ||
520 | t.onChange(t.getValue()); | ||
521 | this.fireEvent("change", t.getValue()); | ||
522 | } | ||
523 | |||
524 | }, | ||
525 | |||
526 | /** | ||
527 | * Provides a way to set the value of the slider in code. | ||
528 | * @method setValue | ||
529 | * @param {int} newOffset the number of pixels the thumb should be | ||
530 | * positioned away from the initial start point | ||
531 | * @param {boolean} skipAnim set to true to disable the animation | ||
532 | * for this move action (but not others). | ||
533 | * @param {boolean} force ignore the locked setting and set value anyway | ||
534 | * @return {boolean} true if the move was performed, false if it failed | ||
535 | */ | ||
536 | setValue: function(newOffset, skipAnim, force) { | ||
537 | |||
538 | if (!this.thumb.available) { | ||
539 | this.deferredSetValue = arguments; | ||
540 | return false; | ||
541 | } | ||
542 | |||
543 | if (this.isLocked() && !force) { | ||
544 | return false; | ||
545 | } | ||
546 | |||
547 | if ( isNaN(newOffset) ) { | ||
548 | return false; | ||
549 | } | ||
550 | |||
551 | var t = this.thumb; | ||
552 | var newX, newY; | ||
553 | this.verifyOffset(); | ||
554 | if (t._isRegion) { | ||
555 | return false; | ||
556 | } else if (t._isHoriz) { | ||
557 | this.onSlideStart(); | ||
558 | // this.fireEvent("slideStart"); | ||
559 | newX = t.initPageX + newOffset + this.thumbCenterPoint.x; | ||
560 | this.moveThumb(newX, t.initPageY, skipAnim); | ||
561 | } else { | ||
562 | this.onSlideStart(); | ||
563 | // this.fireEvent("slideStart"); | ||
564 | newY = t.initPageY + newOffset + this.thumbCenterPoint.y; | ||
565 | this.moveThumb(t.initPageX, newY, skipAnim); | ||
566 | } | ||
567 | |||
568 | return true; | ||
569 | }, | ||
570 | |||
571 | /** | ||
572 | * Provides a way to set the value of the region slider in code. | ||
573 | * @method setRegionValue | ||
574 | * @param {int} newOffset the number of pixels the thumb should be | ||
575 | * positioned away from the initial start point (x axis for region) | ||
576 | * @param {int} newOffset2 the number of pixels the thumb should be | ||
577 | * positioned away from the initial start point (y axis for region) | ||
578 | * @param {boolean} skipAnim set to true to disable the animation | ||
579 | * for this move action (but not others). | ||
580 | * @param {boolean} force ignore the locked setting and set value anyway | ||
581 | * @return {boolean} true if the move was performed, false if it failed | ||
582 | */ | ||
583 | setRegionValue: function(newOffset, newOffset2, skipAnim) { | ||
584 | |||
585 | if (!this.thumb.available) { | ||
586 | this.deferredSetRegionValue = arguments; | ||
587 | return false; | ||
588 | } | ||
589 | |||
590 | if (this.isLocked() && !force) { | ||
591 | return false; | ||
592 | } | ||
593 | |||
594 | if ( isNaN(newOffset) ) { | ||
595 | return false; | ||
596 | } | ||
597 | |||
598 | var t = this.thumb; | ||
599 | if (t._isRegion) { | ||
600 | this.onSlideStart(); | ||
601 | var newX = t.initPageX + newOffset + this.thumbCenterPoint.x; | ||
602 | var newY = t.initPageY + newOffset2 + this.thumbCenterPoint.y; | ||
603 | this.moveThumb(newX, newY, skipAnim); | ||
604 | return true; | ||
605 | } | ||
606 | |||
607 | return false; | ||
608 | |||
609 | }, | ||
610 | |||
611 | /** | ||
612 | * Checks the background position element position. If it has moved from the | ||
613 | * baseline position, the constraints for the thumb are reset | ||
614 | * @method verifyOffset | ||
615 | * @return {boolean} True if the offset is the same as the baseline. | ||
616 | */ | ||
617 | verifyOffset: function() { | ||
618 | |||
619 | var newPos = YAHOO.util.Dom.getXY(this.getEl()); | ||
620 | |||
621 | if (newPos[0] != this.baselinePos[0] || newPos[1] != this.baselinePos[1]) { | ||
622 | this.thumb.resetConstraints(); | ||
623 | this.baselinePos = newPos; | ||
624 | return false; | ||
625 | } | ||
626 | |||
627 | return true; | ||
628 | }, | ||
629 | |||
630 | /** | ||
631 | * Move the associated slider moved to a timeout to try to get around the | ||
632 | * mousedown stealing moz does when I move the slider element between the | ||
633 | * cursor and the background during the mouseup event | ||
634 | * @method moveThumb | ||
635 | * @param {int} x the X coordinate of the click | ||
636 | * @param {int} y the Y coordinate of the click | ||
637 | * @param {boolean} skipAnim don't animate if the move happend onDrag | ||
638 | * @private | ||
639 | */ | ||
640 | moveThumb: function(x, y, skipAnim) { | ||
641 | |||
642 | |||
643 | var t = this.thumb; | ||
644 | var self = this; | ||
645 | |||
646 | if (!t.available) { | ||
647 | return; | ||
648 | } | ||
649 | |||
650 | |||
651 | // this.verifyOffset(); | ||
652 | |||
653 | t.setDelta(this.thumbCenterPoint.x, this.thumbCenterPoint.y); | ||
654 | |||
655 | var _p = t.getTargetCoord(x, y); | ||
656 | var p = [_p.x, _p.y]; | ||
657 | |||
658 | this.fireEvent("slideStart"); | ||
659 | |||
660 | if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && t._graduated && !skipAnim) { | ||
661 | // this.thumb._animating = true; | ||
662 | this.lock(); | ||
663 | |||
664 | setTimeout( function() { self.moveOneTick(p); }, this.tickPause ); | ||
665 | |||
666 | } else if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && !skipAnim) { | ||
667 | |||
668 | // this.thumb._animating = true; | ||
669 | this.lock(); | ||
670 | |||
671 | var oAnim = new YAHOO.util.Motion( | ||
672 | t.id, { points: { to: p } }, | ||
673 | this.animationDuration, | ||
674 | YAHOO.util.Easing.easeOut ); | ||
675 | |||
676 | oAnim.onComplete.subscribe( function() { self.endMove(); } ); | ||
677 | oAnim.animate(); | ||
678 | } else { | ||
679 | t.setDragElPos(x, y); | ||
680 | // this.fireEvents(); | ||
681 | this.endMove(); | ||
682 | } | ||
683 | }, | ||
684 | |||
685 | /** | ||
686 | * Move the slider one tick mark towards its final coordinate. Used | ||
687 | * for the animation when tick marks are defined | ||
688 | * @method moveOneTick | ||
689 | * @param {int[]} the destination coordinate | ||
690 | * @private | ||
691 | */ | ||
692 | moveOneTick: function(finalCoord) { | ||
693 | |||
694 | var t = this.thumb; | ||
695 | var curCoord = YAHOO.util.Dom.getXY(t.getEl()); | ||
696 | var tmp; | ||
697 | |||
698 | // var thresh = Math.min(t.tickSize + (Math.floor(t.tickSize/2)), 10); | ||
699 | // var thresh = 10; | ||
700 | // var thresh = t.tickSize + (Math.floor(t.tickSize/2)); | ||
701 | |||
702 | var nextCoord = null; | ||
703 | |||
704 | if (t._isRegion) { | ||
705 | nextCoord = this._getNextX(curCoord, finalCoord); | ||
706 | var tmpX = (nextCoord) ? nextCoord[0] : curCoord[0]; | ||
707 | nextCoord = this._getNextY([tmpX, curCoord[1]], finalCoord); | ||
708 | |||
709 | } else if (t._isHoriz) { | ||
710 | nextCoord = this._getNextX(curCoord, finalCoord); | ||
711 | } else { | ||
712 | nextCoord = this._getNextY(curCoord, finalCoord); | ||
713 | } | ||
714 | |||
715 | |||
716 | if (nextCoord) { | ||
717 | |||
718 | // move to the next coord | ||
719 | // YAHOO.util.Dom.setXY(t.getEl(), nextCoord); | ||
720 | |||
721 | // var el = t.getEl(); | ||
722 | // YAHOO.util.Dom.setStyle(el, "left", (nextCoord[0] + this.thumb.deltaSetXY[0]) + "px"); | ||
723 | // YAHOO.util.Dom.setStyle(el, "top", (nextCoord[1] + this.thumb.deltaSetXY[1]) + "px"); | ||
724 | |||
725 | this.thumb.alignElWithMouse(t.getEl(), nextCoord[0], nextCoord[1]); | ||
726 | |||
727 | // check if we are in the final position, if not make a recursive call | ||
728 | if (!(nextCoord[0] == finalCoord[0] && nextCoord[1] == finalCoord[1])) { | ||
729 | var self = this; | ||
730 | setTimeout(function() { self.moveOneTick(finalCoord); }, | ||
731 | this.tickPause); | ||
732 | } else { | ||
733 | this.endMove(); | ||
734 | } | ||
735 | } else { | ||
736 | this.endMove(); | ||
737 | } | ||
738 | |||
739 | //this.tickPause = Math.round(this.tickPause/2); | ||
740 | }, | ||
741 | |||
742 | /** | ||
743 | * Returns the next X tick value based on the current coord and the target coord. | ||
744 | * @method _getNextX | ||
745 | * @private | ||
746 | */ | ||
747 | _getNextX: function(curCoord, finalCoord) { | ||
748 | var t = this.thumb; | ||
749 | var thresh; | ||
750 | var tmp = []; | ||
751 | var nextCoord = null; | ||
752 | if (curCoord[0] > finalCoord[0]) { | ||
753 | thresh = t.tickSize - this.thumbCenterPoint.x; | ||
754 | tmp = t.getTargetCoord( curCoord[0] - thresh, curCoord[1] ); | ||
755 | nextCoord = [tmp.x, tmp.y]; | ||
756 | } else if (curCoord[0] < finalCoord[0]) { | ||
757 | thresh = t.tickSize + this.thumbCenterPoint.x; | ||
758 | tmp = t.getTargetCoord( curCoord[0] + thresh, curCoord[1] ); | ||
759 | nextCoord = [tmp.x, tmp.y]; | ||
760 | } else { | ||
761 | // equal, do nothing | ||
762 | } | ||
763 | |||
764 | return nextCoord; | ||
765 | }, | ||
766 | |||
767 | /** | ||
768 | * Returns the next Y tick value based on the current coord and the target coord. | ||
769 | * @method _getNextY | ||
770 | * @private | ||
771 | */ | ||
772 | _getNextY: function(curCoord, finalCoord) { | ||
773 | var t = this.thumb; | ||
774 | var thresh; | ||
775 | var tmp = []; | ||
776 | var nextCoord = null; | ||
777 | |||
778 | if (curCoord[1] > finalCoord[1]) { | ||
779 | thresh = t.tickSize - this.thumbCenterPoint.y; | ||
780 | tmp = t.getTargetCoord( curCoord[0], curCoord[1] - thresh ); | ||
781 | nextCoord = [tmp.x, tmp.y]; | ||
782 | } else if (curCoord[1] < finalCoord[1]) { | ||
783 | thresh = t.tickSize + this.thumbCenterPoint.y; | ||
784 | tmp = t.getTargetCoord( curCoord[0], curCoord[1] + thresh ); | ||
785 | nextCoord = [tmp.x, tmp.y]; | ||
786 | } else { | ||
787 | // equal, do nothing | ||
788 | } | ||
789 | |||
790 | return nextCoord; | ||
791 | }, | ||
792 | |||
793 | /** | ||
794 | * Resets the constraints before moving the thumb. | ||
795 | * @method b4MouseDown | ||
796 | * @private | ||
797 | */ | ||
798 | b4MouseDown: function(e) { | ||
799 | this.thumb.autoOffset(); | ||
800 | this.thumb.resetConstraints(); | ||
801 | }, | ||
802 | |||
803 | /** | ||
804 | * Handles the mousedown event for the slider background | ||
805 | * @method onMouseDown | ||
806 | * @private | ||
807 | */ | ||
808 | onMouseDown: function(e) { | ||
809 | // this.resetConstraints(true); | ||
810 | // this.thumb.resetConstraints(true); | ||
811 | |||
812 | if (! this.isLocked() && this.backgroundEnabled) { | ||
813 | var x = YAHOO.util.Event.getPageX(e); | ||
814 | var y = YAHOO.util.Event.getPageY(e); | ||
815 | |||
816 | this.focus(); | ||
817 | this.moveThumb(x, y); | ||
818 | } | ||
819 | |||
820 | }, | ||
821 | |||
822 | /** | ||
823 | * Handles the onDrag event for the slider background | ||
824 | * @method onDrag | ||
825 | * @private | ||
826 | */ | ||
827 | onDrag: function(e) { | ||
828 | if (! this.isLocked()) { | ||
829 | var x = YAHOO.util.Event.getPageX(e); | ||
830 | var y = YAHOO.util.Event.getPageY(e); | ||
831 | this.moveThumb(x, y, true); | ||
832 | } | ||
833 | }, | ||
834 | |||
835 | /** | ||
836 | * Fired when the slider movement ends | ||
837 | * @method endMove | ||
838 | * @private | ||
839 | */ | ||
840 | endMove: function () { | ||
841 | // this._animating = false; | ||
842 | this.unlock(); | ||
843 | this.moveComplete = true; | ||
844 | this.fireEvents(); | ||
845 | }, | ||
846 | |||
847 | /** | ||
848 | * Fires the change event if the value has been changed. Ignored if we are in | ||
849 | * the middle of an animation as the event will fire when the animation is | ||
850 | * complete | ||
851 | * @method fireEvents | ||
852 | * @private | ||
853 | */ | ||
854 | fireEvents: function () { | ||
855 | |||
856 | var t = this.thumb; | ||
857 | |||
858 | t.cachePosition(); | ||
859 | |||
860 | if (! this.isLocked()) { | ||
861 | if (t._isRegion) { | ||
862 | var newX = t.getXValue(); | ||
863 | var newY = t.getYValue(); | ||
864 | |||
865 | if (newX != this.previousX || newY != this.previousY) { | ||
866 | this.onChange(newX, newY); | ||
867 | this.fireEvent("change", { x: newX, y: newY }); | ||
868 | } | ||
869 | |||
870 | this.previousX = newX; | ||
871 | this.previousY = newY; | ||
872 | |||
873 | } else { | ||
874 | var newVal = t.getValue(); | ||
875 | if (newVal != this.previousVal) { | ||
876 | this.onChange( newVal ); | ||
877 | this.fireEvent("change", newVal); | ||
878 | } | ||
879 | this.previousVal = newVal; | ||
880 | } | ||
881 | |||
882 | if (this.moveComplete) { | ||
883 | this.onSlideEnd(); | ||
884 | this.fireEvent("slideEnd"); | ||
885 | this.moveComplete = false; | ||
886 | } | ||
887 | |||
888 | } | ||
889 | }, | ||
890 | |||
891 | /** | ||
892 | * Slider toString | ||
893 | * @method toString | ||
894 | * @return {string} string representation of the instance | ||
895 | */ | ||
896 | toString: function () { | ||
897 | return ("Slider (" + this.type +") " + this.id); | ||
898 | } | ||
899 | |||
900 | }); | ||
901 | |||
902 | YAHOO.augment(YAHOO.widget.Slider, YAHOO.util.EventProvider); | ||
903 | |||
904 | /** | ||
905 | * A drag and drop implementation to be used as the thumb of a slider. | ||
906 | * @class SliderThumb | ||
907 | * @extends YAHOO.util.DD | ||
908 | * @constructor | ||
909 | * @param {String} id the id of the slider html element | ||
910 | * @param {String} sGroup the group of related DragDrop items | ||
911 | * @param {int} iLeft the number of pixels the element can move left | ||
912 | * @param {int} iRight the number of pixels the element can move right | ||
913 | * @param {int} iUp the number of pixels the element can move up | ||
914 | * @param {int} iDown the number of pixels the element can move down | ||
915 | * @param {int} iTickSize optional parameter for specifying that the element | ||
916 | * should move a certain number pixels at a time. | ||
917 | */ | ||
918 | YAHOO.widget.SliderThumb = function(id, sGroup, iLeft, iRight, iUp, iDown, iTickSize) { | ||
919 | |||
920 | if (id) { | ||
921 | this.init(id, sGroup); | ||
922 | |||
923 | /** | ||
924 | * The id of the thumbs parent HTML element (the slider background | ||
925 | * element). | ||
926 | * @property parentElId | ||
927 | * @type string | ||
928 | */ | ||
929 | this.parentElId = sGroup; | ||
930 | } | ||
931 | |||
932 | //this.removeInvalidHandleType("A"); | ||
933 | |||
934 | |||
935 | /** | ||
936 | * Overrides the isTarget property in YAHOO.util.DragDrop | ||
937 | * @property isTarget | ||
938 | * @private | ||
939 | */ | ||
940 | this.isTarget = false; | ||
941 | |||
942 | /** | ||
943 | * The tick size for this slider | ||
944 | * @property tickSize | ||
945 | * @type int | ||
946 | * @private | ||
947 | */ | ||
948 | this.tickSize = iTickSize; | ||
949 | |||
950 | /** | ||
951 | * Informs the drag and drop util that the offsets should remain when | ||
952 | * resetting the constraints. This preserves the slider value when | ||
953 | * the constraints are reset | ||
954 | * @property maintainOffset | ||
955 | * @type boolean | ||
956 | * @private | ||
957 | */ | ||
958 | this.maintainOffset = true; | ||
959 | |||
960 | this.initSlider(iLeft, iRight, iUp, iDown, iTickSize); | ||
961 | |||
962 | /** | ||
963 | * Turns off the autoscroll feature in drag and drop | ||
964 | * @property scroll | ||
965 | * @private | ||
966 | */ | ||
967 | this.scroll = false; | ||
968 | |||
969 | }; | ||
970 | |||
971 | YAHOO.extend(YAHOO.widget.SliderThumb, YAHOO.util.DD, { | ||
972 | |||
973 | /** | ||
974 | * The (X and Y) difference between the thumb location and its parent | ||
975 | * (the slider background) when the control is instantiated. | ||
976 | * @property startOffset | ||
977 | * @type [int, int] | ||
978 | */ | ||
979 | startOffset: null, | ||
980 | |||
981 | /** | ||
982 | * Flag used to figure out if this is a horizontal or vertical slider | ||
983 | * @property _isHoriz | ||
984 | * @type boolean | ||
985 | * @private | ||
986 | */ | ||
987 | _isHoriz: false, | ||
988 | |||
989 | /** | ||
990 | * Cache the last value so we can check for change | ||
991 | * @property _prevVal | ||
992 | * @type int | ||
993 | * @private | ||
994 | */ | ||
995 | _prevVal: 0, | ||
996 | |||
997 | /** | ||
998 | * The slider is _graduated if there is a tick interval defined | ||
999 | * @property _graduated | ||
1000 | * @type boolean | ||
1001 | * @private | ||
1002 | */ | ||
1003 | _graduated: false, | ||
1004 | |||
1005 | /** | ||
1006 | * Returns the difference between the location of the thumb and its parent. | ||
1007 | * @method getOffsetFromParent | ||
1008 | * @param {[int, int]} parentPos Optionally accepts the position of the parent | ||
1009 | * @type [int, int] | ||
1010 | */ | ||
1011 | getOffsetFromParent: function(parentPos) { | ||
1012 | var myPos = YAHOO.util.Dom.getXY(this.getEl()); | ||
1013 | var ppos = parentPos || YAHOO.util.Dom.getXY(this.parentElId); | ||
1014 | |||
1015 | return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ]; | ||
1016 | }, | ||
1017 | |||
1018 | /** | ||
1019 | * Set up the slider, must be called in the constructor of all subclasses | ||
1020 | * @method initSlider | ||
1021 | * @param {int} iLeft the number of pixels the element can move left | ||
1022 | * @param {int} iRight the number of pixels the element can move right | ||
1023 | * @param {int} iUp the number of pixels the element can move up | ||
1024 | * @param {int} iDown the number of pixels the element can move down | ||
1025 | * @param {int} iTickSize the width of the tick interval. | ||
1026 | */ | ||
1027 | initSlider: function (iLeft, iRight, iUp, iDown, iTickSize) { | ||
1028 | |||
1029 | this.setXConstraint(iLeft, iRight, iTickSize); | ||
1030 | this.setYConstraint(iUp, iDown, iTickSize); | ||
1031 | |||
1032 | if (iTickSize && iTickSize > 1) { | ||
1033 | this._graduated = true; | ||
1034 | } | ||
1035 | |||
1036 | this._isHoriz = (iLeft || iRight); | ||
1037 | this._isVert = (iUp || iDown); | ||
1038 | this._isRegion = (this._isHoriz && this._isVert); | ||
1039 | |||
1040 | }, | ||
1041 | |||
1042 | /** | ||
1043 | * Clear's the slider's ticks | ||
1044 | * @method clearTicks | ||
1045 | */ | ||
1046 | clearTicks: function () { | ||
1047 | YAHOO.widget.SliderThumb.superclass.clearTicks.call(this); | ||
1048 | this._graduated = false; | ||
1049 | }, | ||
1050 | |||
1051 | /** | ||
1052 | * Gets the current offset from the element's start position in | ||
1053 | * pixels. | ||
1054 | * @method getValue | ||
1055 | * @return {int} the number of pixels (positive or negative) the | ||
1056 | * slider has moved from the start position. | ||
1057 | */ | ||
1058 | getValue: function () { | ||
1059 | if (!this.available) { return 0; } | ||
1060 | var val = (this._isHoriz) ? this.getXValue() : this.getYValue(); | ||
1061 | return val; | ||
1062 | }, | ||
1063 | |||
1064 | /** | ||
1065 | * Gets the current X offset from the element's start position in | ||
1066 | * pixels. | ||
1067 | * @method getXValue | ||
1068 | * @return {int} the number of pixels (positive or negative) the | ||
1069 | * slider has moved horizontally from the start position. | ||
1070 | */ | ||
1071 | getXValue: function () { | ||
1072 | if (!this.available) { return 0; } | ||
1073 | var newOffset = this.getOffsetFromParent(); | ||
1074 | return (newOffset[0] - this.startOffset[0]); | ||
1075 | }, | ||
1076 | |||
1077 | /** | ||
1078 | * Gets the current Y offset from the element's start position in | ||
1079 | * pixels. | ||
1080 | * @method getYValue | ||
1081 | * @return {int} the number of pixels (positive or negative) the | ||
1082 | * slider has moved vertically from the start position. | ||
1083 | */ | ||
1084 | getYValue: function () { | ||
1085 | if (!this.available) { return 0; } | ||
1086 | var newOffset = this.getOffsetFromParent(); | ||
1087 | return (newOffset[1] - this.startOffset[1]); | ||
1088 | }, | ||
1089 | |||
1090 | /** | ||
1091 | * Thumb toString | ||
1092 | * @method toString | ||
1093 | * @return {string} string representation of the instance | ||
1094 | */ | ||
1095 | toString: function () { | ||
1096 | return "SliderThumb " + this.id; | ||
1097 | }, | ||
1098 | |||
1099 | /** | ||
1100 | * The onchange event for the handle/thumb is delegated to the YAHOO.widget.Slider | ||
1101 | * instance it belongs to. | ||
1102 | * @method onChange | ||
1103 | * @private | ||
1104 | */ | ||
1105 | onChange: function (x, y) { | ||
1106 | } | ||
1107 | |||
1108 | }); | ||
1109 | |||
1110 | if ("undefined" == typeof YAHOO.util.Anim) { | ||
1111 | YAHOO.widget.Slider.ANIM_AVAIL = false; | ||
1112 | } | ||
1113 | |||