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