Project

General

Profile

1
/*
2
 * jQuery UI Slider 1.8.6
3
 *
4
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
5
 * Dual licensed under the MIT or GPL Version 2 licenses.
6
 * http://jquery.org/license
7
 *
8
 * http://docs.jquery.com/UI/Slider
9
 *
10
 * Depends:
11
 *	jquery.ui.core.js
12
 *	jquery.ui.mouse.js
13
 *	jquery.ui.widget.js
14
 */
15
(function( $, undefined ) {
16

    
17
// number of pages in a slider
18
// (how many times can you page up/down to go through the whole range)
19
var numPages = 5;
20

    
21
$.widget( "ui.slider", $.ui.mouse, {
22

    
23
	widgetEventPrefix: "slide",
24

    
25
	options: {
26
		animate: false,
27
		distance: 0,
28
		max: 100,
29
		min: 0,
30
		orientation: "horizontal",
31
		range: false,
32
		step: 1,
33
		value: 0,
34
		values: null
35
	},
36

    
37
	_create: function() {
38
		var self = this,
39
			o = this.options;
40

    
41
		this._keySliding = false;
42
		this._mouseSliding = false;
43
		this._animateOff = true;
44
		this._handleIndex = null;
45
		this._detectOrientation();
46
		this._mouseInit();
47

    
48
		this.element
49
			.addClass( "ui-slider" +
50
				" ui-slider-" + this.orientation +
51
				" ui-widget" +
52
				" ui-widget-content" +
53
				" ui-corner-all" );
54
		
55
		if ( o.disabled ) {
56
			this.element.addClass( "ui-slider-disabled ui-disabled" );
57
		}
58

    
59
		this.range = $([]);
60

    
61
		if ( o.range ) {
62
			if ( o.range === true ) {
63
				this.range = $( "<div></div>" );
64
				if ( !o.values ) {
65
					o.values = [ this._valueMin(), this._valueMin() ];
66
				}
67
				if ( o.values.length && o.values.length !== 2 ) {
68
					o.values = [ o.values[0], o.values[0] ];
69
				}
70
			} else {
71
				this.range = $( "<div></div>" );
72
			}
73

    
74
			this.range
75
				.appendTo( this.element )
76
				.addClass( "ui-slider-range" );
77

    
78
			if ( o.range === "min" || o.range === "max" ) {
79
				this.range.addClass( "ui-slider-range-" + o.range );
80
			}
81

    
82
			// note: this isn't the most fittingly semantic framework class for this element,
83
			// but worked best visually with a variety of themes
84
			this.range.addClass( "ui-widget-header" );
85
		}
86

    
87
		if ( $( ".ui-slider-handle", this.element ).length === 0 ) {
88
			$( "<a href='#'></a>" )
89
				.appendTo( this.element )
90
				.addClass( "ui-slider-handle" );
91
		}
92

    
93
		if ( o.values && o.values.length ) {
94
			while ( $(".ui-slider-handle", this.element).length < o.values.length ) {
95
				$( "<a href='#'></a>" )
96
					.appendTo( this.element )
97
					.addClass( "ui-slider-handle" );
98
			}
99
		}
100

    
101
		this.handles = $( ".ui-slider-handle", this.element )
102
			.addClass( "ui-state-default" +
103
				" ui-corner-all" );
104

    
105
		this.handle = this.handles.eq( 0 );
106

    
107
		this.handles.add( this.range ).filter( "a" )
108
			.click(function( event ) {
109
				event.preventDefault();
110
			})
111
			.hover(function() {
112
				if ( !o.disabled ) {
113
					$( this ).addClass( "ui-state-hover" );
114
				}
115
			}, function() {
116
				$( this ).removeClass( "ui-state-hover" );
117
			})
118
			.focus(function() {
119
				if ( !o.disabled ) {
120
					$( ".ui-slider .ui-state-focus" ).removeClass( "ui-state-focus" );
121
					$( this ).addClass( "ui-state-focus" );
122
				} else {
123
					$( this ).blur();
124
				}
125
			})
126
			.blur(function() {
127
				$( this ).removeClass( "ui-state-focus" );
128
			});
129

    
130
		this.handles.each(function( i ) {
131
			$( this ).data( "index.ui-slider-handle", i );
132
		});
133

    
134
		this.handles
135
			.keydown(function( event ) {
136
				var ret = true,
137
					index = $( this ).data( "index.ui-slider-handle" ),
138
					allowed,
139
					curVal,
140
					newVal,
141
					step;
142
	
143
				if ( self.options.disabled ) {
144
					return;
145
				}
146
	
147
				switch ( event.keyCode ) {
148
					case $.ui.keyCode.HOME:
149
					case $.ui.keyCode.END:
150
					case $.ui.keyCode.PAGE_UP:
151
					case $.ui.keyCode.PAGE_DOWN:
152
					case $.ui.keyCode.UP:
153
					case $.ui.keyCode.RIGHT:
154
					case $.ui.keyCode.DOWN:
155
					case $.ui.keyCode.LEFT:
156
						ret = false;
157
						if ( !self._keySliding ) {
158
							self._keySliding = true;
159
							$( this ).addClass( "ui-state-active" );
160
							allowed = self._start( event, index );
161
							if ( allowed === false ) {
162
								return;
163
							}
164
						}
165
						break;
166
				}
167
	
168
				step = self.options.step;
169
				if ( self.options.values && self.options.values.length ) {
170
					curVal = newVal = self.values( index );
171
				} else {
172
					curVal = newVal = self.value();
173
				}
174
	
175
				switch ( event.keyCode ) {
176
					case $.ui.keyCode.HOME:
177
						newVal = self._valueMin();
178
						break;
179
					case $.ui.keyCode.END:
180
						newVal = self._valueMax();
181
						break;
182
					case $.ui.keyCode.PAGE_UP:
183
						newVal = self._trimAlignValue( curVal + ( (self._valueMax() - self._valueMin()) / numPages ) );
184
						break;
185
					case $.ui.keyCode.PAGE_DOWN:
186
						newVal = self._trimAlignValue( curVal - ( (self._valueMax() - self._valueMin()) / numPages ) );
187
						break;
188
					case $.ui.keyCode.UP:
189
					case $.ui.keyCode.RIGHT:
190
						if ( curVal === self._valueMax() ) {
191
							return;
192
						}
193
						newVal = self._trimAlignValue( curVal + step );
194
						break;
195
					case $.ui.keyCode.DOWN:
196
					case $.ui.keyCode.LEFT:
197
						if ( curVal === self._valueMin() ) {
198
							return;
199
						}
200
						newVal = self._trimAlignValue( curVal - step );
201
						break;
202
				}
203
	
204
				self._slide( event, index, newVal );
205
	
206
				return ret;
207
	
208
			})
209
			.keyup(function( event ) {
210
				var index = $( this ).data( "index.ui-slider-handle" );
211
	
212
				if ( self._keySliding ) {
213
					self._keySliding = false;
214
					self._stop( event, index );
215
					self._change( event, index );
216
					$( this ).removeClass( "ui-state-active" );
217
				}
218
	
219
			});
220

    
221
		this._refreshValue();
222

    
223
		this._animateOff = false;
224
	},
225

    
226
	destroy: function() {
227
		this.handles.remove();
228
		this.range.remove();
229

    
230
		this.element
231
			.removeClass( "ui-slider" +
232
				" ui-slider-horizontal" +
233
				" ui-slider-vertical" +
234
				" ui-slider-disabled" +
235
				" ui-widget" +
236
				" ui-widget-content" +
237
				" ui-corner-all" )
238
			.removeData( "slider" )
239
			.unbind( ".slider" );
240

    
241
		this._mouseDestroy();
242

    
243
		return this;
244
	},
245

    
246
	_mouseCapture: function( event ) {
247
		var o = this.options,
248
			position,
249
			normValue,
250
			distance,
251
			closestHandle,
252
			self,
253
			index,
254
			allowed,
255
			offset,
256
			mouseOverHandle;
257

    
258
		if ( o.disabled ) {
259
			return false;
260
		}
261

    
262
		this.elementSize = {
263
			width: this.element.outerWidth(),
264
			height: this.element.outerHeight()
265
		};
266
		this.elementOffset = this.element.offset();
267

    
268
		position = { x: event.pageX, y: event.pageY };
269
		normValue = this._normValueFromMouse( position );
270
		distance = this._valueMax() - this._valueMin() + 1;
271
		self = this;
272
		this.handles.each(function( i ) {
273
			var thisDistance = Math.abs( normValue - self.values(i) );
274
			if ( distance > thisDistance ) {
275
				distance = thisDistance;
276
				closestHandle = $( this );
277
				index = i;
278
			}
279
		});
280

    
281
		// workaround for bug #3736 (if both handles of a range are at 0,
282
		// the first is always used as the one with least distance,
283
		// and moving it is obviously prevented by preventing negative ranges)
284
		if( o.range === true && this.values(1) === o.min ) {
285
			index += 1;
286
			closestHandle = $( this.handles[index] );
287
		}
288

    
289
		allowed = this._start( event, index );
290
		if ( allowed === false ) {
291
			return false;
292
		}
293
		this._mouseSliding = true;
294

    
295
		self._handleIndex = index;
296

    
297
		closestHandle
298
			.addClass( "ui-state-active" )
299
			.focus();
300
		
301
		offset = closestHandle.offset();
302
		mouseOverHandle = !$( event.target ).parents().andSelf().is( ".ui-slider-handle" );
303
		this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : {
304
			left: event.pageX - offset.left - ( closestHandle.width() / 2 ),
305
			top: event.pageY - offset.top -
306
				( closestHandle.height() / 2 ) -
307
				( parseInt( closestHandle.css("borderTopWidth"), 10 ) || 0 ) -
308
				( parseInt( closestHandle.css("borderBottomWidth"), 10 ) || 0) +
309
				( parseInt( closestHandle.css("marginTop"), 10 ) || 0)
310
		};
311

    
312
		this._slide( event, index, normValue );
313
		this._animateOff = true;
314
		return true;
315
	},
316

    
317
	_mouseStart: function( event ) {
318
		return true;
319
	},
320

    
321
	_mouseDrag: function( event ) {
322
		var position = { x: event.pageX, y: event.pageY },
323
			normValue = this._normValueFromMouse( position );
324
		
325
		this._slide( event, this._handleIndex, normValue );
326

    
327
		return false;
328
	},
329

    
330
	_mouseStop: function( event ) {
331
		this.handles.removeClass( "ui-state-active" );
332
		this._mouseSliding = false;
333

    
334
		this._stop( event, this._handleIndex );
335
		this._change( event, this._handleIndex );
336

    
337
		this._handleIndex = null;
338
		this._clickOffset = null;
339
		this._animateOff = false;
340

    
341
		return false;
342
	},
343
	
344
	_detectOrientation: function() {
345
		this.orientation = ( this.options.orientation === "vertical" ) ? "vertical" : "horizontal";
346
	},
347

    
348
	_normValueFromMouse: function( position ) {
349
		var pixelTotal,
350
			pixelMouse,
351
			percentMouse,
352
			valueTotal,
353
			valueMouse;
354

    
355
		if ( this.orientation === "horizontal" ) {
356
			pixelTotal = this.elementSize.width;
357
			pixelMouse = position.x - this.elementOffset.left - ( this._clickOffset ? this._clickOffset.left : 0 );
358
		} else {
359
			pixelTotal = this.elementSize.height;
360
			pixelMouse = position.y - this.elementOffset.top - ( this._clickOffset ? this._clickOffset.top : 0 );
361
		}
362

    
363
		percentMouse = ( pixelMouse / pixelTotal );
364
		if ( percentMouse > 1 ) {
365
			percentMouse = 1;
366
		}
367
		if ( percentMouse < 0 ) {
368
			percentMouse = 0;
369
		}
370
		if ( this.orientation === "vertical" ) {
371
			percentMouse = 1 - percentMouse;
372
		}
373

    
374
		valueTotal = this._valueMax() - this._valueMin();
375
		valueMouse = this._valueMin() + percentMouse * valueTotal;
376

    
377
		return this._trimAlignValue( valueMouse );
378
	},
379

    
380
	_start: function( event, index ) {
381
		var uiHash = {
382
			handle: this.handles[ index ],
383
			value: this.value()
384
		};
385
		if ( this.options.values && this.options.values.length ) {
386
			uiHash.value = this.values( index );
387
			uiHash.values = this.values();
388
		}
389
		return this._trigger( "start", event, uiHash );
390
	},
391

    
392
	_slide: function( event, index, newVal ) {
393
		var otherVal,
394
			newValues,
395
			allowed;
396

    
397
		if ( this.options.values && this.options.values.length ) {
398
			otherVal = this.values( index ? 0 : 1 );
399

    
400
			if ( ( this.options.values.length === 2 && this.options.range === true ) && 
401
					( ( index === 0 && newVal > otherVal) || ( index === 1 && newVal < otherVal ) )
402
				) {
403
				newVal = otherVal;
404
			}
405

    
406
			if ( newVal !== this.values( index ) ) {
407
				newValues = this.values();
408
				newValues[ index ] = newVal;
409
				// A slide can be canceled by returning false from the slide callback
410
				allowed = this._trigger( "slide", event, {
411
					handle: this.handles[ index ],
412
					value: newVal,
413
					values: newValues
414
				} );
415
				otherVal = this.values( index ? 0 : 1 );
416
				if ( allowed !== false ) {
417
					this.values( index, newVal, true );
418
				}
419
			}
420
		} else {
421
			if ( newVal !== this.value() ) {
422
				// A slide can be canceled by returning false from the slide callback
423
				allowed = this._trigger( "slide", event, {
424
					handle: this.handles[ index ],
425
					value: newVal
426
				} );
427
				if ( allowed !== false ) {
428
					this.value( newVal );
429
				}
430
			}
431
		}
432
	},
433

    
434
	_stop: function( event, index ) {
435
		var uiHash = {
436
			handle: this.handles[ index ],
437
			value: this.value()
438
		};
439
		if ( this.options.values && this.options.values.length ) {
440
			uiHash.value = this.values( index );
441
			uiHash.values = this.values();
442
		}
443

    
444
		this._trigger( "stop", event, uiHash );
445
	},
446

    
447
	_change: function( event, index ) {
448
		if ( !this._keySliding && !this._mouseSliding ) {
449
			var uiHash = {
450
				handle: this.handles[ index ],
451
				value: this.value()
452
			};
453
			if ( this.options.values && this.options.values.length ) {
454
				uiHash.value = this.values( index );
455
				uiHash.values = this.values();
456
			}
457

    
458
			this._trigger( "change", event, uiHash );
459
		}
460
	},
461

    
462
	value: function( newValue ) {
463
		if ( arguments.length ) {
464
			this.options.value = this._trimAlignValue( newValue );
465
			this._refreshValue();
466
			this._change( null, 0 );
467
		}
468

    
469
		return this._value();
470
	},
471

    
472
	values: function( index, newValue ) {
473
		var vals,
474
			newValues,
475
			i;
476

    
477
		if ( arguments.length > 1 ) {
478
			this.options.values[ index ] = this._trimAlignValue( newValue );
479
			this._refreshValue();
480
			this._change( null, index );
481
		}
482

    
483
		if ( arguments.length ) {
484
			if ( $.isArray( arguments[ 0 ] ) ) {
485
				vals = this.options.values;
486
				newValues = arguments[ 0 ];
487
				for ( i = 0; i < vals.length; i += 1 ) {
488
					vals[ i ] = this._trimAlignValue( newValues[ i ] );
489
					this._change( null, i );
490
				}
491
				this._refreshValue();
492
			} else {
493
				if ( this.options.values && this.options.values.length ) {
494
					return this._values( index );
495
				} else {
496
					return this.value();
497
				}
498
			}
499
		} else {
500
			return this._values();
501
		}
502
	},
503

    
504
	_setOption: function( key, value ) {
505
		var i,
506
			valsLength = 0;
507

    
508
		if ( $.isArray( this.options.values ) ) {
509
			valsLength = this.options.values.length;
510
		}
511

    
512
		$.Widget.prototype._setOption.apply( this, arguments );
513

    
514
		switch ( key ) {
515
			case "disabled":
516
				if ( value ) {
517
					this.handles.filter( ".ui-state-focus" ).blur();
518
					this.handles.removeClass( "ui-state-hover" );
519
					this.handles.attr( "disabled", "disabled" );
520
					this.element.addClass( "ui-disabled" );
521
				} else {
522
					this.handles.removeAttr( "disabled" );
523
					this.element.removeClass( "ui-disabled" );
524
				}
525
				break;
526
			case "orientation":
527
				this._detectOrientation();
528
				this.element
529
					.removeClass( "ui-slider-horizontal ui-slider-vertical" )
530
					.addClass( "ui-slider-" + this.orientation );
531
				this._refreshValue();
532
				break;
533
			case "value":
534
				this._animateOff = true;
535
				this._refreshValue();
536
				this._change( null, 0 );
537
				this._animateOff = false;
538
				break;
539
			case "values":
540
				this._animateOff = true;
541
				this._refreshValue();
542
				for ( i = 0; i < valsLength; i += 1 ) {
543
					this._change( null, i );
544
				}
545
				this._animateOff = false;
546
				break;
547
		}
548
	},
549

    
550
	//internal value getter
551
	// _value() returns value trimmed by min and max, aligned by step
552
	_value: function() {
553
		var val = this.options.value;
554
		val = this._trimAlignValue( val );
555

    
556
		return val;
557
	},
558

    
559
	//internal values getter
560
	// _values() returns array of values trimmed by min and max, aligned by step
561
	// _values( index ) returns single value trimmed by min and max, aligned by step
562
	_values: function( index ) {
563
		var val,
564
			vals,
565
			i;
566

    
567
		if ( arguments.length ) {
568
			val = this.options.values[ index ];
569
			val = this._trimAlignValue( val );
570

    
571
			return val;
572
		} else {
573
			// .slice() creates a copy of the array
574
			// this copy gets trimmed by min and max and then returned
575
			vals = this.options.values.slice();
576
			for ( i = 0; i < vals.length; i+= 1) {
577
				vals[ i ] = this._trimAlignValue( vals[ i ] );
578
			}
579

    
580
			return vals;
581
		}
582
	},
583
	
584
	// returns the step-aligned value that val is closest to, between (inclusive) min and max
585
	_trimAlignValue: function( val ) {
586
		if ( val < this._valueMin() ) {
587
			return this._valueMin();
588
		}
589
		if ( val > this._valueMax() ) {
590
			return this._valueMax();
591
		}
592
		var step = ( this.options.step > 0 ) ? this.options.step : 1,
593
			valModStep = val % step,
594
			alignValue = val - valModStep;
595

    
596
		if ( Math.abs(valModStep) * 2 >= step ) {
597
			alignValue += ( valModStep > 0 ) ? step : ( -step );
598
		}
599

    
600
		// Since JavaScript has problems with large floats, round
601
		// the final value to 5 digits after the decimal point (see #4124)
602
		return parseFloat( alignValue.toFixed(5) );
603
	},
604

    
605
	_valueMin: function() {
606
		return this.options.min;
607
	},
608

    
609
	_valueMax: function() {
610
		return this.options.max;
611
	},
612
	
613
	_refreshValue: function() {
614
		var oRange = this.options.range,
615
			o = this.options,
616
			self = this,
617
			animate = ( !this._animateOff ) ? o.animate : false,
618
			valPercent,
619
			_set = {},
620
			lastValPercent,
621
			value,
622
			valueMin,
623
			valueMax;
624

    
625
		if ( this.options.values && this.options.values.length ) {
626
			this.handles.each(function( i, j ) {
627
				valPercent = ( self.values(i) - self._valueMin() ) / ( self._valueMax() - self._valueMin() ) * 100;
628
				_set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
629
				$( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
630
				if ( self.options.range === true ) {
631
					if ( self.orientation === "horizontal" ) {
632
						if ( i === 0 ) {
633
							self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { left: valPercent + "%" }, o.animate );
634
						}
635
						if ( i === 1 ) {
636
							self.range[ animate ? "animate" : "css" ]( { width: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
637
						}
638
					} else {
639
						if ( i === 0 ) {
640
							self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { bottom: ( valPercent ) + "%" }, o.animate );
641
						}
642
						if ( i === 1 ) {
643
							self.range[ animate ? "animate" : "css" ]( { height: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
644
						}
645
					}
646
				}
647
				lastValPercent = valPercent;
648
			});
649
		} else {
650
			value = this.value();
651
			valueMin = this._valueMin();
652
			valueMax = this._valueMax();
653
			valPercent = ( valueMax !== valueMin ) ?
654
					( value - valueMin ) / ( valueMax - valueMin ) * 100 :
655
					0;
656
			_set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
657
			this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
658

    
659
			if ( oRange === "min" && this.orientation === "horizontal" ) {
660
				this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: valPercent + "%" }, o.animate );
661
			}
662
			if ( oRange === "max" && this.orientation === "horizontal" ) {
663
				this.range[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
664
			}
665
			if ( oRange === "min" && this.orientation === "vertical" ) {
666
				this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: valPercent + "%" }, o.animate );
667
			}
668
			if ( oRange === "max" && this.orientation === "vertical" ) {
669
				this.range[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
670
			}
671
		}
672
	}
673

    
674
});
675

    
676
$.extend( $.ui.slider, {
677
	version: "1.8.6"
678
});
679

    
680
}(jQuery));
(29-29/32)