| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 /*! 2 * jQuery UI Slider 1.13.2 3 * http://jqueryui.com 4 * 5 * Copyright jQuery Foundation and other contributors 6 * Released under the MIT license. 7 * http://jquery.org/license 8 */ 9 10 //>>label: Slider 11 //>>group: Widgets 12 //>>description: Displays a flexible slider with ranges and accessibility via keyboard. 13 //>>docs: http://api.jqueryui.com/slider/ 14 //>>demos: http://jqueryui.com/slider/ 15 //>>css.structure: ../../themes/base/core.css 16 //>>css.structure: ../../themes/base/slider.css 17 //>>css.theme: ../../themes/base/theme.css 18 19 ( function( factory ) { 20 "use strict"; 21 22 if ( typeof define === "function" && define.amd ) { 23 24 // AMD. Register as an anonymous module. 25 define( [ 26 "jquery", 27 "./mouse", 28 "./core" 29 ], factory ); 30 } else { 31 32 // Browser globals 33 factory( jQuery ); 34 } 35 } )( function( $ ) { 36 "use strict"; 37 38 return $.widget( "ui.slider", $.ui.mouse, { 39 version: "1.13.2", 40 widgetEventPrefix: "slide", 41 42 options: { 43 animate: false, 44 classes: { 45 "ui-slider": "ui-corner-all", 46 "ui-slider-handle": "ui-corner-all", 47 48 // Note: ui-widget-header isn't the most fittingly semantic framework class for this 49 // element, but worked best visually with a variety of themes 50 "ui-slider-range": "ui-corner-all ui-widget-header" 51 }, 52 distance: 0, 53 max: 100, 54 min: 0, 55 orientation: "horizontal", 56 range: false, 57 step: 1, 58 value: 0, 59 values: null, 60 61 // Callbacks 62 change: null, 63 slide: null, 64 start: null, 65 stop: null 66 }, 67 68 // Number of pages in a slider 69 // (how many times can you page up/down to go through the whole range) 70 numPages: 5, 71 72 _create: function() { 73 this._keySliding = false; 74 this._mouseSliding = false; 75 this._animateOff = true; 76 this._handleIndex = null; 77 this._detectOrientation(); 78 this._mouseInit(); 79 this._calculateNewMax(); 80 81 this._addClass( "ui-slider ui-slider-" + this.orientation, 82 "ui-widget ui-widget-content" ); 83 84 this._refresh(); 85 86 this._animateOff = false; 87 }, 88 89 _refresh: function() { 90 this._createRange(); 91 this._createHandles(); 92 this._setupEvents(); 93 this._refreshValue(); 94 }, 95 96 _createHandles: function() { 97 var i, handleCount, 98 options = this.options, 99 existingHandles = this.element.find( ".ui-slider-handle" ), 100 handle = "<span tabindex='0'></span>", 101 handles = []; 102 103 handleCount = ( options.values && options.values.length ) || 1; 104 105 if ( existingHandles.length > handleCount ) { 106 existingHandles.slice( handleCount ).remove(); 107 existingHandles = existingHandles.slice( 0, handleCount ); 108 } 109 110 for ( i = existingHandles.length; i < handleCount; i++ ) { 111 handles.push( handle ); 112 } 113 114 this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) ); 115 116 this._addClass( this.handles, "ui-slider-handle", "ui-state-default" ); 117 118 this.handle = this.handles.eq( 0 ); 119 120 this.handles.each( function( i ) { 121 $( this ) 122 .data( "ui-slider-handle-index", i ) 123 .attr( "tabIndex", 0 ); 124 } ); 125 }, 126 127 _createRange: function() { 128 var options = this.options; 129 130 if ( options.range ) { 131 if ( options.range === true ) { 132 if ( !options.values ) { 133 options.values = [ this._valueMin(), this._valueMin() ]; 134 } else if ( options.values.length && options.values.length !== 2 ) { 135 options.values = [ options.values[ 0 ], options.values[ 0 ] ]; 136 } else if ( Array.isArray( options.values ) ) { 137 options.values = options.values.slice( 0 ); 138 } 139 } 140 141 if ( !this.range || !this.range.length ) { 142 this.range = $( "<div>" ) 143 .appendTo( this.element ); 144 145 this._addClass( this.range, "ui-slider-range" ); 146 } else { 147 this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" ); 148 149 // Handle range switching from true to min/max 150 this.range.css( { 151 "left": "", 152 "bottom": "" 153 } ); 154 } 155 if ( options.range === "min" || options.range === "max" ) { 156 this._addClass( this.range, "ui-slider-range-" + options.range ); 157 } 158 } else { 159 if ( this.range ) { 160 this.range.remove(); 161 } 162 this.range = null; 163 } 164 }, 165 166 _setupEvents: function() { 167 this._off( this.handles ); 168 this._on( this.handles, this._handleEvents ); 169 this._hoverable( this.handles ); 170 this._focusable( this.handles ); 171 }, 172 173 _destroy: function() { 174 this.handles.remove(); 175 if ( this.range ) { 176 this.range.remove(); 177 } 178 179 this._mouseDestroy(); 180 }, 181 182 _mouseCapture: function( event ) { 183 var position, normValue, distance, closestHandle, index, allowed, offset, mouseOverHandle, 184 that = this, 185 o = this.options; 186 187 if ( o.disabled ) { 188 return false; 189 } 190 191 this.elementSize = { 192 width: this.element.outerWidth(), 193 height: this.element.outerHeight() 194 }; 195 this.elementOffset = this.element.offset(); 196 197 position = { x: event.pageX, y: event.pageY }; 198 normValue = this._normValueFromMouse( position ); 199 distance = this._valueMax() - this._valueMin() + 1; 200 this.handles.each( function( i ) { 201 var thisDistance = Math.abs( normValue - that.values( i ) ); 202 if ( ( distance > thisDistance ) || 203 ( distance === thisDistance && 204 ( i === that._lastChangedValue || that.values( i ) === o.min ) ) ) { 205 distance = thisDistance; 206 closestHandle = $( this ); 207 index = i; 208 } 209 } ); 210 211 allowed = this._start( event, index ); 212 if ( allowed === false ) { 213 return false; 214 } 215 this._mouseSliding = true; 216 217 this._handleIndex = index; 218 219 this._addClass( closestHandle, null, "ui-state-active" ); 220 closestHandle.trigger( "focus" ); 221 222 offset = closestHandle.offset(); 223 mouseOverHandle = !$( event.target ).parents().addBack().is( ".ui-slider-handle" ); 224 this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : { 225 left: event.pageX - offset.left - ( closestHandle.width() / 2 ), 226 top: event.pageY - offset.top - 227 ( closestHandle.height() / 2 ) - 228 ( parseInt( closestHandle.css( "borderTopWidth" ), 10 ) || 0 ) - 229 ( parseInt( closestHandle.css( "borderBottomWidth" ), 10 ) || 0 ) + 230 ( parseInt( closestHandle.css( "marginTop" ), 10 ) || 0 ) 231 }; 232 233 if ( !this.handles.hasClass( "ui-state-hover" ) ) { 234 this._slide( event, index, normValue ); 235 } 236 this._animateOff = true; 237 return true; 238 }, 239 240 _mouseStart: function() { 241 return true; 242 }, 243 244 _mouseDrag: function( event ) { 245 var position = { x: event.pageX, y: event.pageY }, 246 normValue = this._normValueFromMouse( position ); 247 248 this._slide( event, this._handleIndex, normValue ); 249 250 return false; 251 }, 252 253 _mouseStop: function( event ) { 254 this._removeClass( this.handles, null, "ui-state-active" ); 255 this._mouseSliding = false; 256 257 this._stop( event, this._handleIndex ); 258 this._change( event, this._handleIndex ); 259 260 this._handleIndex = null; 261 this._clickOffset = null; 262 this._animateOff = false; 263 264 return false; 265 }, 266 267 _detectOrientation: function() { 268 this.orientation = ( this.options.orientation === "vertical" ) ? "vertical" : "horizontal"; 269 }, 270 271 _normValueFromMouse: function( position ) { 272 var pixelTotal, 273 pixelMouse, 274 percentMouse, 275 valueTotal, 276 valueMouse; 277 278 if ( this.orientation === "horizontal" ) { 279 pixelTotal = this.elementSize.width; 280 pixelMouse = position.x - this.elementOffset.left - 281 ( this._clickOffset ? this._clickOffset.left : 0 ); 282 } else { 283 pixelTotal = this.elementSize.height; 284 pixelMouse = position.y - this.elementOffset.top - 285 ( this._clickOffset ? this._clickOffset.top : 0 ); 286 } 287 288 percentMouse = ( pixelMouse / pixelTotal ); 289 if ( percentMouse > 1 ) { 290 percentMouse = 1; 291 } 292 if ( percentMouse < 0 ) { 293 percentMouse = 0; 294 } 295 if ( this.orientation === "vertical" ) { 296 percentMouse = 1 - percentMouse; 297 } 298 299 valueTotal = this._valueMax() - this._valueMin(); 300 valueMouse = this._valueMin() + percentMouse * valueTotal; 301 302 return this._trimAlignValue( valueMouse ); 303 }, 304 305 _uiHash: function( index, value, values ) { 306 var uiHash = { 307 handle: this.handles[ index ], 308 handleIndex: index, 309 value: value !== undefined ? value : this.value() 310 }; 311 312 if ( this._hasMultipleValues() ) { 313 uiHash.value = value !== undefined ? value : this.values( index ); 314 uiHash.values = values || this.values(); 315 } 316 317 return uiHash; 318 }, 319 320 _hasMultipleValues: function() { 321 return this.options.values && this.options.values.length; 322 }, 323 324 _start: function( event, index ) { 325 return this._trigger( "start", event, this._uiHash( index ) ); 326 }, 327 328 _slide: function( event, index, newVal ) { 329 var allowed, otherVal, 330 currentValue = this.value(), 331 newValues = this.values(); 332 333 if ( this._hasMultipleValues() ) { 334 otherVal = this.values( index ? 0 : 1 ); 335 currentValue = this.values( index ); 336 337 if ( this.options.values.length === 2 && this.options.range === true ) { 338 newVal = index === 0 ? Math.min( otherVal, newVal ) : Math.max( otherVal, newVal ); 339 } 340 341 newValues[ index ] = newVal; 342 } 343 344 if ( newVal === currentValue ) { 345 return; 346 } 347 348 allowed = this._trigger( "slide", event, this._uiHash( index, newVal, newValues ) ); 349 350 // A slide can be canceled by returning false from the slide callback 351 if ( allowed === false ) { 352 return; 353 } 354 355 if ( this._hasMultipleValues() ) { 356 this.values( index, newVal ); 357 } else { 358 this.value( newVal ); 359 } 360 }, 361 362 _stop: function( event, index ) { 363 this._trigger( "stop", event, this._uiHash( index ) ); 364 }, 365 366 _change: function( event, index ) { 367 if ( !this._keySliding && !this._mouseSliding ) { 368 369 //store the last changed value index for reference when handles overlap 370 this._lastChangedValue = index; 371 this._trigger( "change", event, this._uiHash( index ) ); 372 } 373 }, 374 375 value: function( newValue ) { 376 if ( arguments.length ) { 377 this.options.value = this._trimAlignValue( newValue ); 378 this._refreshValue(); 379 this._change( null, 0 ); 380 return; 381 } 382 383 return this._value(); 384 }, 385 386 values: function( index, newValue ) { 387 var vals, 388 newValues, 389 i; 390 391 if ( arguments.length > 1 ) { 392 this.options.values[ index ] = this._trimAlignValue( newValue ); 393 this._refreshValue(); 394 this._change( null, index ); 395 return; 396 } 397 398 if ( arguments.length ) { 399 if ( Array.isArray( arguments[ 0 ] ) ) { 400 vals = this.options.values; 401 newValues = arguments[ 0 ]; 402 for ( i = 0; i < vals.length; i += 1 ) { 403 vals[ i ] = this._trimAlignValue( newValues[ i ] ); 404 this._change( null, i ); 405 } 406 this._refreshValue(); 407 } else { 408 if ( this._hasMultipleValues() ) { 409 return this._values( index ); 410 } else { 411 return this.value(); 412 } 413 } 414 } else { 415 return this._values(); 416 } 417 }, 418 419 _setOption: function( key, value ) { 420 var i, 421 valsLength = 0; 422 423 if ( key === "range" && this.options.range === true ) { 424 if ( value === "min" ) { 425 this.options.value = this._values( 0 ); 426 this.options.values = null; 427 } else if ( value === "max" ) { 428 this.options.value = this._values( this.options.values.length - 1 ); 429 this.options.values = null; 430 } 431 } 432 433 if ( Array.isArray( this.options.values ) ) { 434 valsLength = this.options.values.length; 435 } 436 437 this._super( key, value ); 438 439 switch ( key ) { 440 case "orientation": 441 this._detectOrientation(); 442 this._removeClass( "ui-slider-horizontal ui-slider-vertical" ) 443 ._addClass( "ui-slider-" + this.orientation ); 444 this._refreshValue(); 445 if ( this.options.range ) { 446 this._refreshRange( value ); 447 } 448 449 // Reset positioning from previous orientation 450 this.handles.css( value === "horizontal" ? "bottom" : "left", "" ); 451 break; 452 case "value": 453 this._animateOff = true; 454 this._refreshValue(); 455 this._change( null, 0 ); 456 this._animateOff = false; 457 break; 458 case "values": 459 this._animateOff = true; 460 this._refreshValue(); 461 462 // Start from the last handle to prevent unreachable handles (#9046) 463 for ( i = valsLength - 1; i >= 0; i-- ) { 464 this._change( null, i ); 465 } 466 this._animateOff = false; 467 break; 468 case "step": 469 case "min": 470 case "max": 471 this._animateOff = true; 472 this._calculateNewMax(); 473 this._refreshValue(); 474 this._animateOff = false; 475 break; 476 case "range": 477 this._animateOff = true; 478 this._refresh(); 479 this._animateOff = false; 480 break; 481 } 482 }, 483 484 _setOptionDisabled: function( value ) { 485 this._super( value ); 486 487 this._toggleClass( null, "ui-state-disabled", !!value ); 488 }, 489 490 //internal value getter 491 // _value() returns value trimmed by min and max, aligned by step 492 _value: function() { 493 var val = this.options.value; 494 val = this._trimAlignValue( val ); 495 496 return val; 497 }, 498 499 //internal values getter 500 // _values() returns array of values trimmed by min and max, aligned by step 501 // _values( index ) returns single value trimmed by min and max, aligned by step 502 _values: function( index ) { 503 var val, 504 vals, 505 i; 506 507 if ( arguments.length ) { 508 val = this.options.values[ index ]; 509 val = this._trimAlignValue( val ); 510 511 return val; 512 } else if ( this._hasMultipleValues() ) { 513 514 // .slice() creates a copy of the array 515 // this copy gets trimmed by min and max and then returned 516 vals = this.options.values.slice(); 517 for ( i = 0; i < vals.length; i += 1 ) { 518 vals[ i ] = this._trimAlignValue( vals[ i ] ); 519 } 520 521 return vals; 522 } else { 523 return []; 524 } 525 }, 526 527 // Returns the step-aligned value that val is closest to, between (inclusive) min and max 528 _trimAlignValue: function( val ) { 529 if ( val <= this._valueMin() ) { 530 return this._valueMin(); 531 } 532 if ( val >= this._valueMax() ) { 533 return this._valueMax(); 534 } 535 var step = ( this.options.step > 0 ) ? this.options.step : 1, 536 valModStep = ( val - this._valueMin() ) % step, 537 alignValue = val - valModStep; 538 539 if ( Math.abs( valModStep ) * 2 >= step ) { 540 alignValue += ( valModStep > 0 ) ? step : ( -step ); 541 } 542 543 // Since JavaScript has problems with large floats, round 544 // the final value to 5 digits after the decimal point (see #4124) 545 return parseFloat( alignValue.toFixed( 5 ) ); 546 }, 547 548 _calculateNewMax: function() { 549 var max = this.options.max, 550 min = this._valueMin(), 551 step = this.options.step, 552 aboveMin = Math.round( ( max - min ) / step ) * step; 553 max = aboveMin + min; 554 if ( max > this.options.max ) { 555 556 //If max is not divisible by step, rounding off may increase its value 557 max -= step; 558 } 559 this.max = parseFloat( max.toFixed( this._precision() ) ); 560 }, 561 562 _precision: function() { 563 var precision = this._precisionOf( this.options.step ); 564 if ( this.options.min !== null ) { 565 precision = Math.max( precision, this._precisionOf( this.options.min ) ); 566 } 567 return precision; 568 }, 569 570 _precisionOf: function( num ) { 571 var str = num.toString(), 572 decimal = str.indexOf( "." ); 573 return decimal === -1 ? 0 : str.length - decimal - 1; 574 }, 575 576 _valueMin: function() { 577 return this.options.min; 578 }, 579 580 _valueMax: function() { 581 return this.max; 582 }, 583 584 _refreshRange: function( orientation ) { 585 if ( orientation === "vertical" ) { 586 this.range.css( { "width": "", "left": "" } ); 587 } 588 if ( orientation === "horizontal" ) { 589 this.range.css( { "height": "", "bottom": "" } ); 590 } 591 }, 592 593 _refreshValue: function() { 594 var lastValPercent, valPercent, value, valueMin, valueMax, 595 oRange = this.options.range, 596 o = this.options, 597 that = this, 598 animate = ( !this._animateOff ) ? o.animate : false, 599 _set = {}; 600 601 if ( this._hasMultipleValues() ) { 602 this.handles.each( function( i ) { 603 valPercent = ( that.values( i ) - that._valueMin() ) / ( that._valueMax() - 604 that._valueMin() ) * 100; 605 _set[ that.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; 606 $( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate ); 607 if ( that.options.range === true ) { 608 if ( that.orientation === "horizontal" ) { 609 if ( i === 0 ) { 610 that.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { 611 left: valPercent + "%" 612 }, o.animate ); 613 } 614 if ( i === 1 ) { 615 that.range[ animate ? "animate" : "css" ]( { 616 width: ( valPercent - lastValPercent ) + "%" 617 }, { 618 queue: false, 619 duration: o.animate 620 } ); 621 } 622 } else { 623 if ( i === 0 ) { 624 that.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { 625 bottom: ( valPercent ) + "%" 626 }, o.animate ); 627 } 628 if ( i === 1 ) { 629 that.range[ animate ? "animate" : "css" ]( { 630 height: ( valPercent - lastValPercent ) + "%" 631 }, { 632 queue: false, 633 duration: o.animate 634 } ); 635 } 636 } 637 } 638 lastValPercent = valPercent; 639 } ); 640 } else { 641 value = this.value(); 642 valueMin = this._valueMin(); 643 valueMax = this._valueMax(); 644 valPercent = ( valueMax !== valueMin ) ? 645 ( value - valueMin ) / ( valueMax - valueMin ) * 100 : 646 0; 647 _set[ this.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; 648 this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate ); 649 650 if ( oRange === "min" && this.orientation === "horizontal" ) { 651 this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { 652 width: valPercent + "%" 653 }, o.animate ); 654 } 655 if ( oRange === "max" && this.orientation === "horizontal" ) { 656 this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { 657 width: ( 100 - valPercent ) + "%" 658 }, o.animate ); 659 } 660 if ( oRange === "min" && this.orientation === "vertical" ) { 661 this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { 662 height: valPercent + "%" 663 }, o.animate ); 664 } 665 if ( oRange === "max" && this.orientation === "vertical" ) { 666 this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { 667 height: ( 100 - valPercent ) + "%" 668 }, o.animate ); 669 } 670 } 671 }, 672 673 _handleEvents: { 674 keydown: function( event ) { 675 var allowed, curVal, newVal, step, 676 index = $( event.target ).data( "ui-slider-handle-index" ); 677 678 switch ( event.keyCode ) { 679 case $.ui.keyCode.HOME: 680 case $.ui.keyCode.END: 681 case $.ui.keyCode.PAGE_UP: 682 case $.ui.keyCode.PAGE_DOWN: 683 case $.ui.keyCode.UP: 684 case $.ui.keyCode.RIGHT: 685 case $.ui.keyCode.DOWN: 686 case $.ui.keyCode.LEFT: 687 event.preventDefault(); 688 if ( !this._keySliding ) { 689 this._keySliding = true; 690 this._addClass( $( event.target ), null, "ui-state-active" ); 691 allowed = this._start( event, index ); 692 if ( allowed === false ) { 693 return; 694 } 695 } 696 break; 697 } 698 699 step = this.options.step; 700 if ( this._hasMultipleValues() ) { 701 curVal = newVal = this.values( index ); 702 } else { 703 curVal = newVal = this.value(); 704 } 705 706 switch ( event.keyCode ) { 707 case $.ui.keyCode.HOME: 708 newVal = this._valueMin(); 709 break; 710 case $.ui.keyCode.END: 711 newVal = this._valueMax(); 712 break; 713 case $.ui.keyCode.PAGE_UP: 714 newVal = this._trimAlignValue( 715 curVal + ( ( this._valueMax() - this._valueMin() ) / this.numPages ) 716 ); 717 break; 718 case $.ui.keyCode.PAGE_DOWN: 719 newVal = this._trimAlignValue( 720 curVal - ( ( this._valueMax() - this._valueMin() ) / this.numPages ) ); 721 break; 722 case $.ui.keyCode.UP: 723 case $.ui.keyCode.RIGHT: 724 if ( curVal === this._valueMax() ) { 725 return; 726 } 727 newVal = this._trimAlignValue( curVal + step ); 728 break; 729 case $.ui.keyCode.DOWN: 730 case $.ui.keyCode.LEFT: 731 if ( curVal === this._valueMin() ) { 732 return; 733 } 734 newVal = this._trimAlignValue( curVal - step ); 735 break; 736 } 737 738 this._slide( event, index, newVal ); 739 }, 740 keyup: function( event ) { 741 var index = $( event.target ).data( "ui-slider-handle-index" ); 742 743 if ( this._keySliding ) { 744 this._keySliding = false; 745 this._stop( event, index ); 746 this._change( event, index ); 747 this._removeClass( $( event.target ), null, "ui-state-active" ); 748 } 749 } 750 } 751 } ); 752 753 } );
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Thu Apr 18 08:20:02 2024 | Cross-referenced by PHPXref |