Mercurial > hg > digilib-old

comparison client/digitallibrary/jquery/ui/jquery.ui.slider.js @ 756:ccf67eaf97ee jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added jQuery ui and svg javascripts
author hertzhaft
date Sun, 06 Feb 2011 22:17:41 +0100
parents
children
comparison
equal deleted inserted replaced
755:4c0cc97a6399 756:ccf67eaf97ee
1 /*
2 * jQuery UI Slider 1.8.9
3 *
4 * Copyright 2011, 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 if ( !this.handles.hasClass( "ui-state-hover" ) ) {
313 this._slide( event, index, normValue );
314 }
315 this._animateOff = true;
316 return true;
317 },
318
319 _mouseStart: function( event ) {
320 return true;
321 },
322
323 _mouseDrag: function( event ) {
324 var position = { x: event.pageX, y: event.pageY },
325 normValue = this._normValueFromMouse( position );
326
327 this._slide( event, this._handleIndex, normValue );
328
329 return false;
330 },
331
332 _mouseStop: function( event ) {
333 this.handles.removeClass( "ui-state-active" );
334 this._mouseSliding = false;
335
336 this._stop( event, this._handleIndex );
337 this._change( event, this._handleIndex );
338
339 this._handleIndex = null;
340 this._clickOffset = null;
341 this._animateOff = false;
342
343 return false;
344 },
345
346 _detectOrientation: function() {
347 this.orientation = ( this.options.orientation === "vertical" ) ? "vertical" : "horizontal";
348 },
349
350 _normValueFromMouse: function( position ) {
351 var pixelTotal,
352 pixelMouse,
353 percentMouse,
354 valueTotal,
355 valueMouse;
356
357 if ( this.orientation === "horizontal" ) {
358 pixelTotal = this.elementSize.width;
359 pixelMouse = position.x - this.elementOffset.left - ( this._clickOffset ? this._clickOffset.left : 0 );
360 } else {
361 pixelTotal = this.elementSize.height;
362 pixelMouse = position.y - this.elementOffset.top - ( this._clickOffset ? this._clickOffset.top : 0 );
363 }
364
365 percentMouse = ( pixelMouse / pixelTotal );
366 if ( percentMouse > 1 ) {
367 percentMouse = 1;
368 }
369 if ( percentMouse < 0 ) {
370 percentMouse = 0;
371 }
372 if ( this.orientation === "vertical" ) {
373 percentMouse = 1 - percentMouse;
374 }
375
376 valueTotal = this._valueMax() - this._valueMin();
377 valueMouse = this._valueMin() + percentMouse * valueTotal;
378
379 return this._trimAlignValue( valueMouse );
380 },
381
382 _start: function( event, index ) {
383 var uiHash = {
384 handle: this.handles[ index ],
385 value: this.value()
386 };
387 if ( this.options.values && this.options.values.length ) {
388 uiHash.value = this.values( index );
389 uiHash.values = this.values();
390 }
391 return this._trigger( "start", event, uiHash );
392 },
393
394 _slide: function( event, index, newVal ) {
395 var otherVal,
396 newValues,
397 allowed;
398
399 if ( this.options.values && this.options.values.length ) {
400 otherVal = this.values( index ? 0 : 1 );
401
402 if ( ( this.options.values.length === 2 && this.options.range === true ) &&
403 ( ( index === 0 && newVal > otherVal) || ( index === 1 && newVal < otherVal ) )
404 ) {
405 newVal = otherVal;
406 }
407
408 if ( newVal !== this.values( index ) ) {
409 newValues = this.values();
410 newValues[ index ] = newVal;
411 // A slide can be canceled by returning false from the slide callback
412 allowed = this._trigger( "slide", event, {
413 handle: this.handles[ index ],
414 value: newVal,
415 values: newValues
416 } );
417 otherVal = this.values( index ? 0 : 1 );
418 if ( allowed !== false ) {
419 this.values( index, newVal, true );
420 }
421 }
422 } else {
423 if ( newVal !== this.value() ) {
424 // A slide can be canceled by returning false from the slide callback
425 allowed = this._trigger( "slide", event, {
426 handle: this.handles[ index ],
427 value: newVal
428 } );
429 if ( allowed !== false ) {
430 this.value( newVal );
431 }
432 }
433 }
434 },
435
436 _stop: function( event, index ) {
437 var uiHash = {
438 handle: this.handles[ index ],
439 value: this.value()
440 };
441 if ( this.options.values && this.options.values.length ) {
442 uiHash.value = this.values( index );
443 uiHash.values = this.values();
444 }
445
446 this._trigger( "stop", event, uiHash );
447 },
448
449 _change: function( event, index ) {
450 if ( !this._keySliding && !this._mouseSliding ) {
451 var uiHash = {
452 handle: this.handles[ index ],
453 value: this.value()
454 };
455 if ( this.options.values && this.options.values.length ) {
456 uiHash.value = this.values( index );
457 uiHash.values = this.values();
458 }
459
460 this._trigger( "change", event, uiHash );
461 }
462 },
463
464 value: function( newValue ) {
465 if ( arguments.length ) {
466 this.options.value = this._trimAlignValue( newValue );
467 this._refreshValue();
468 this._change( null, 0 );
469 }
470
471 return this._value();
472 },
473
474 values: function( index, newValue ) {
475 var vals,
476 newValues,
477 i;
478
479 if ( arguments.length > 1 ) {
480 this.options.values[ index ] = this._trimAlignValue( newValue );
481 this._refreshValue();
482 this._change( null, index );
483 }
484
485 if ( arguments.length ) {
486 if ( $.isArray( arguments[ 0 ] ) ) {
487 vals = this.options.values;
488 newValues = arguments[ 0 ];
489 for ( i = 0; i < vals.length; i += 1 ) {
490 vals[ i ] = this._trimAlignValue( newValues[ i ] );
491 this._change( null, i );
492 }
493 this._refreshValue();
494 } else {
495 if ( this.options.values && this.options.values.length ) {
496 return this._values( index );
497 } else {
498 return this.value();
499 }
500 }
501 } else {
502 return this._values();
503 }
504 },
505
506 _setOption: function( key, value ) {
507 var i,
508 valsLength = 0;
509
510 if ( $.isArray( this.options.values ) ) {
511 valsLength = this.options.values.length;
512 }
513
514 $.Widget.prototype._setOption.apply( this, arguments );
515
516 switch ( key ) {
517 case "disabled":
518 if ( value ) {
519 this.handles.filter( ".ui-state-focus" ).blur();
520 this.handles.removeClass( "ui-state-hover" );
521 this.handles.attr( "disabled", "disabled" );
522 this.element.addClass( "ui-disabled" );
523 } else {
524 this.handles.removeAttr( "disabled" );
525 this.element.removeClass( "ui-disabled" );
526 }
527 break;
528 case "orientation":
529 this._detectOrientation();
530 this.element
531 .removeClass( "ui-slider-horizontal ui-slider-vertical" )
532 .addClass( "ui-slider-" + this.orientation );
533 this._refreshValue();
534 break;
535 case "value":
536 this._animateOff = true;
537 this._refreshValue();
538 this._change( null, 0 );
539 this._animateOff = false;
540 break;
541 case "values":
542 this._animateOff = true;
543 this._refreshValue();
544 for ( i = 0; i < valsLength; i += 1 ) {
545 this._change( null, i );
546 }
547 this._animateOff = false;
548 break;
549 }
550 },
551
552 //internal value getter
553 // _value() returns value trimmed by min and max, aligned by step
554 _value: function() {
555 var val = this.options.value;
556 val = this._trimAlignValue( val );
557
558 return val;
559 },
560
561 //internal values getter
562 // _values() returns array of values trimmed by min and max, aligned by step
563 // _values( index ) returns single value trimmed by min and max, aligned by step
564 _values: function( index ) {
565 var val,
566 vals,
567 i;
568
569 if ( arguments.length ) {
570 val = this.options.values[ index ];
571 val = this._trimAlignValue( val );
572
573 return val;
574 } else {
575 // .slice() creates a copy of the array
576 // this copy gets trimmed by min and max and then returned
577 vals = this.options.values.slice();
578 for ( i = 0; i < vals.length; i+= 1) {
579 vals[ i ] = this._trimAlignValue( vals[ i ] );
580 }
581
582 return vals;
583 }
584 },
585
586 // returns the step-aligned value that val is closest to, between (inclusive) min and max
587 _trimAlignValue: function( val ) {
588 if ( val <= this._valueMin() ) {
589 return this._valueMin();
590 }
591 if ( val >= this._valueMax() ) {
592 return this._valueMax();
593 }
594 var step = ( this.options.step > 0 ) ? this.options.step : 1,
595 valModStep = (val - this._valueMin()) % step;
596 alignValue = val - valModStep;
597
598 if ( Math.abs(valModStep) * 2 >= step ) {
599 alignValue += ( valModStep > 0 ) ? step : ( -step );
600 }
601
602 // Since JavaScript has problems with large floats, round
603 // the final value to 5 digits after the decimal point (see #4124)
604 return parseFloat( alignValue.toFixed(5) );
605 },
606
607 _valueMin: function() {
608 return this.options.min;
609 },
610
611 _valueMax: function() {
612 return this.options.max;
613 },
614
615 _refreshValue: function() {
616 var oRange = this.options.range,
617 o = this.options,
618 self = this,
619 animate = ( !this._animateOff ) ? o.animate : false,
620 valPercent,
621 _set = {},
622 lastValPercent,
623 value,
624 valueMin,
625 valueMax;
626
627 if ( this.options.values && this.options.values.length ) {
628 this.handles.each(function( i, j ) {
629 valPercent = ( self.values(i) - self._valueMin() ) / ( self._valueMax() - self._valueMin() ) * 100;
630 _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
631 $( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
632 if ( self.options.range === true ) {
633 if ( self.orientation === "horizontal" ) {
634 if ( i === 0 ) {
635 self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { left: valPercent + "%" }, o.animate );
636 }
637 if ( i === 1 ) {
638 self.range[ animate ? "animate" : "css" ]( { width: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
639 }
640 } else {
641 if ( i === 0 ) {
642 self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { bottom: ( valPercent ) + "%" }, o.animate );
643 }
644 if ( i === 1 ) {
645 self.range[ animate ? "animate" : "css" ]( { height: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
646 }
647 }
648 }
649 lastValPercent = valPercent;
650 });
651 } else {
652 value = this.value();
653 valueMin = this._valueMin();
654 valueMax = this._valueMax();
655 valPercent = ( valueMax !== valueMin ) ?
656 ( value - valueMin ) / ( valueMax - valueMin ) * 100 :
657 0;
658 _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
659 this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
660
661 if ( oRange === "min" && this.orientation === "horizontal" ) {
662 this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: valPercent + "%" }, o.animate );
663 }
664 if ( oRange === "max" && this.orientation === "horizontal" ) {
665 this.range[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
666 }
667 if ( oRange === "min" && this.orientation === "vertical" ) {
668 this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: valPercent + "%" }, o.animate );
669 }
670 if ( oRange === "max" && this.orientation === "vertical" ) {
671 this.range[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
672 }
673 }
674 }
675
676 });
677
678 $.extend( $.ui.slider, {
679 version: "1.8.9"
680 });
681
682 }(jQuery));