Guest User

Untitled

a guest
Nov 15th, 2014
176
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.11 KB | None | 0 0
  1. /*!
  2. * jQuery UI Slider @VERSION
  3. * http://jqueryui.com
  4. *
  5. * Copyright 2014 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.  
  16. (function( factory ) {
  17. if ( typeof define === "function" && define.amd ) {
  18.  
  19. // AMD. Register as an anonymous module.
  20. define([
  21. "jquery",
  22. "./core",
  23. "./mouse",
  24. "./widget"
  25. ], factory );
  26. } else {
  27.  
  28. // Browser globals
  29. factory( jQuery );
  30. }
  31. }(function( $ ) {
  32.  
  33. return $.widget( "ui.slider", $.ui.mouse, {
  34. version: "@VERSION",
  35. widgetEventPrefix: "slide",
  36.  
  37. options: {
  38. animate: false,
  39. distance: 0,
  40. max: 100,
  41. min: 0,
  42. orientation: "horizontal",
  43. range: false,
  44. step: 1,
  45. value: 0,
  46. values: null,
  47.  
  48. // callbacks
  49. change: null,
  50. slide: null,
  51. start: null,
  52. stop: null
  53. },
  54.  
  55. // number of pages in a slider
  56. // (how many times can you page up/down to go through the whole range)
  57. numPages: 5,
  58.  
  59. _create: function() {
  60. this._keySliding = false;
  61. this._mouseSliding = false;
  62. this._animateOff = true;
  63. this._handleIndex = null;
  64. this._detectOrientation();
  65. this._mouseInit();
  66. this._calculateNewMax();
  67.  
  68. this.element
  69. .addClass( "ui-slider" +
  70. " ui-slider-" + this.orientation +
  71. " ui-widget" +
  72. " ui-widget-content" +
  73. " ui-corner-all");
  74.  
  75. this._refresh();
  76. this._setOption( "disabled", this.options.disabled );
  77.  
  78. this._animateOff = false;
  79. },
  80.  
  81. _refresh: function() {
  82. this._createRange();
  83. this._createHandles();
  84. this._setupEvents();
  85. this._refreshValue();
  86. },
  87.  
  88. _createHandles: function() {
  89. var i, handleCount,
  90. options = this.options,
  91. existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
  92. handle = "<span class='ui-slider-handle ui-state-default ui-corner-all' tabindex='0'></span>",
  93. handles = [];
  94.  
  95. handleCount = ( options.values && options.values.length ) || 1;
  96.  
  97. if ( existingHandles.length > handleCount ) {
  98. existingHandles.slice( handleCount ).remove();
  99. existingHandles = existingHandles.slice( 0, handleCount );
  100. }
  101.  
  102. for ( i = existingHandles.length; i < handleCount; i++ ) {
  103. handles.push( handle );
  104. }
  105.  
  106. this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) );
  107.  
  108. this.handle = this.handles.eq( 0 );
  109.  
  110. this.handles.each(function( i ) {
  111. $( this ).data( "ui-slider-handle-index", i );
  112. });
  113. },
  114.  
  115. _createRange: function() {
  116. var options = this.options,
  117. classes = "";
  118.  
  119. if ( options.range ) {
  120. if ( options.range === true ) {
  121. if ( !options.values ) {
  122. options.values = [ this._valueMin(), this._valueMin() ];
  123. } else if ( options.values.length && options.values.length !== 2 ) {
  124. options.values = [ options.values[0], options.values[0] ];
  125. } else if ( $.isArray( options.values ) ) {
  126. options.values = options.values.slice(0);
  127. }
  128. }
  129.  
  130. if ( !this.range || !this.range.length ) {
  131. this.range = $( "<div></div>" )
  132. .appendTo( this.element );
  133.  
  134. classes = "ui-slider-range" +
  135. // note: this isn't the most fittingly semantic framework class for this element,
  136. // but worked best visually with a variety of themes
  137. " ui-widget-header ui-corner-all";
  138. } else {
  139. this.range.removeClass( "ui-slider-range-min ui-slider-range-max" )
  140. // Handle range switching from true to min/max
  141. .css({
  142. "left": "",
  143. "bottom": ""
  144. });
  145. }
  146.  
  147. this.range.addClass( classes +
  148. ( ( options.range === "min" || options.range === "max" ) ? " ui-slider-range-" + options.range : "" ) );
  149. } else {
  150. if ( this.range ) {
  151. this.range.remove();
  152. }
  153. this.range = null;
  154. }
  155. },
  156.  
  157. _setupEvents: function() {
  158. this._off( this.handles );
  159. this._on( this.handles, this._handleEvents );
  160. this._hoverable( this.handles );
  161. this._focusable( this.handles );
  162. },
  163.  
  164. _destroy: function() {
  165. this.handles.remove();
  166. if ( this.range ) {
  167. this.range.remove();
  168. }
  169.  
  170. this.element
  171. .removeClass( "ui-slider" +
  172. " ui-slider-horizontal" +
  173. " ui-slider-vertical" +
  174. " ui-widget" +
  175. " ui-widget-content" +
  176. " ui-corner-all" );
  177.  
  178. this._mouseDestroy();
  179. },
  180.  
  181. _mouseCapture: function( event ) {
  182. var position, normValue, distance, closestHandle, index, allowed, offset, mouseOverHandle,
  183. that = this,
  184. o = this.options;
  185.  
  186. if ( o.disabled ) {
  187. return false;
  188. }
  189.  
  190. this.elementSize = {
  191. width: this.element.outerWidth(),
  192. height: this.element.outerHeight()
  193. };
  194. this.elementOffset = this.element.offset();
  195.  
  196. position = { x: event.pageX, y: event.pageY };
  197. normValue = this._normValueFromMouse( position );
  198. distance = this._valueMax() - this._valueMin() + 1;
  199. this.handles.each(function( i ) {
  200. var thisDistance = Math.abs( normValue - that.values(i) );
  201. if (( distance > thisDistance ) ||
  202. ( distance === thisDistance &&
  203. (i === that._lastChangedValue || that.values(i) === o.min ))) {
  204. distance = thisDistance;
  205. closestHandle = $( this );
  206. index = i;
  207. }
  208. });
  209.  
  210. allowed = this._start( event, index );
  211. if ( allowed === false ) {
  212. return false;
  213. }
  214. this._mouseSliding = true;
  215.  
  216. this._handleIndex = index;
  217.  
  218. closestHandle
  219. .addClass( "ui-state-active" )
  220. .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.handles.removeClass( "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 - ( this._clickOffset ? this._clickOffset.left : 0 );
  281. } else {
  282. pixelTotal = this.elementSize.height;
  283. pixelMouse = position.y - this.elementOffset.top - ( this._clickOffset ? this._clickOffset.top : 0 );
  284. }
  285.  
  286. percentMouse = ( pixelMouse / pixelTotal );
  287. if ( percentMouse > 1 ) {
  288. percentMouse = 1;
  289. }
  290. if ( percentMouse < 0 ) {
  291. percentMouse = 0;
  292. }
  293. if ( this.orientation === "vertical" ) {
  294. percentMouse = 1 - percentMouse;
  295. }
  296.  
  297. valueTotal = this._valueMax() - this._valueMin();
  298. valueMouse = this._valueMin() + percentMouse * valueTotal;
  299.  
  300. return this._trimAlignValue( valueMouse );
  301. },
  302.  
  303. _start: function( event, index ) {
  304. var uiHash = {
  305. handle: this.handles[ index ],
  306. value: this.value()
  307. };
  308. if ( this.options.values && this.options.values.length ) {
  309. uiHash.value = this.values( index );
  310. uiHash.values = this.values();
  311. }
  312. return this._trigger( "start", event, uiHash );
  313. },
  314.  
  315. _slide: function( event, index, newVal ) {
  316. var otherVal,
  317. newValues,
  318. allowed;
  319.  
  320. if ( this.options.values && this.options.values.length ) {
  321. otherVal = this.values( index ? 0 : 1 );
  322.  
  323. if ( ( this.options.values.length === 2 && this.options.range === true ) &&
  324. ( ( index === 0 && newVal > otherVal) || ( index === 1 && newVal < otherVal ) )
  325. ) {
  326. newVal = otherVal;
  327. }
  328.  
  329. if ( newVal !== this.values( index ) ) {
  330. newValues = this.values();
  331. newValues[ index ] = newVal;
  332. // A slide can be canceled by returning false from the slide callback
  333. allowed = this._trigger( "slide", event, {
  334. handle: this.handles[ index ],
  335. value: newVal,
  336. values: newValues
  337. } );
  338. otherVal = this.values( index ? 0 : 1 );
  339. if ( allowed !== false ) {
  340. this.values( index, newVal );
  341. }
  342. }
  343. } else {
  344. if ( newVal !== this.value() ) {
  345. // A slide can be canceled by returning false from the slide callback
  346. allowed = this._trigger( "slide", event, {
  347. handle: this.handles[ index ],
  348. value: newVal
  349. } );
  350. if ( allowed !== false ) {
  351. this.value( newVal );
  352. }
  353. }
  354. }
  355. },
  356.  
  357. _stop: function( event, index ) {
  358. var uiHash = {
  359. handle: this.handles[ index ],
  360. value: this.value()
  361. };
  362. if ( this.options.values && this.options.values.length ) {
  363. uiHash.value = this.values( index );
  364. uiHash.values = this.values();
  365. }
  366.  
  367. this._trigger( "stop", event, uiHash );
  368. },
  369.  
  370. _change: function( event, index ) {
  371. if ( !this._keySliding && !this._mouseSliding ) {
  372. var uiHash = {
  373. handle: this.handles[ index ],
  374. value: this.value()
  375. };
  376. if ( this.options.values && this.options.values.length ) {
  377. uiHash.value = this.values( index );
  378. uiHash.values = this.values();
  379. }
  380.  
  381. //store the last changed value index for reference when handles overlap
  382. this._lastChangedValue = index;
  383.  
  384. this._trigger( "change", event, uiHash );
  385. }
  386. },
  387.  
  388. value: function( newValue ) {
  389. if ( arguments.length ) {
  390. this.options.value = this._trimAlignValue( newValue );
  391. this._refreshValue();
  392. this._change( null, 0 );
  393. return;
  394. }
  395.  
  396. return this._value();
  397. },
  398.  
  399. values: function( index, newValue ) {
  400. var vals,
  401. newValues,
  402. i;
  403.  
  404. if ( arguments.length > 1 ) {
  405. this.options.values[ index ] = this._trimAlignValue( newValue );
  406. this._refreshValue();
  407. this._change( null, index );
  408. return;
  409. }
  410.  
  411. if ( arguments.length ) {
  412. if ( $.isArray( arguments[ 0 ] ) ) {
  413. vals = this.options.values;
  414. newValues = arguments[ 0 ];
  415. for ( i = 0; i < vals.length; i += 1 ) {
  416. vals[ i ] = this._trimAlignValue( newValues[ i ] );
  417. this._change( null, i );
  418. }
  419. this._refreshValue();
  420. } else {
  421. if ( this.options.values && this.options.values.length ) {
  422. return this._values( index );
  423. } else {
  424. return this.value();
  425. }
  426. }
  427. } else {
  428. return this._values();
  429. }
  430. },
  431.  
  432. _setOption: function( key, value ) {
  433. var i,
  434. valsLength = 0;
  435.  
  436. if ( key === "range" && this.options.range === true ) {
  437. if ( value === "min" ) {
  438. this.options.value = this._values( 0 );
  439. this.options.values = null;
  440. } else if ( value === "max" ) {
  441. this.options.value = this._values( this.options.values.length - 1 );
  442. this.options.values = null;
  443. }
  444. }
  445.  
  446. if ( $.isArray( this.options.values ) ) {
  447. valsLength = this.options.values.length;
  448. }
  449.  
  450. if ( key === "disabled" ) {
  451. this.element.toggleClass( "ui-state-disabled", !!value );
  452. }
  453.  
  454. this._super( key, value );
  455.  
  456. switch ( key ) {
  457. case "orientation":
  458. this._detectOrientation();
  459. this.element
  460. .removeClass( "ui-slider-horizontal ui-slider-vertical" )
  461. .addClass( "ui-slider-" + this.orientation );
  462. this._refreshValue();
  463.  
  464. // Reset positioning from previous orientation
  465. this.handles.css( value === "horizontal" ? "bottom" : "left", "" );
  466. break;
  467. case "value":
  468. this._animateOff = true;
  469. this._refreshValue();
  470. this._change( null, 0 );
  471. this._animateOff = false;
  472. break;
  473. case "values":
  474. this._animateOff = true;
  475. this._refreshValue();
  476. for ( i = 0; i < valsLength; i += 1 ) {
  477. this._change( null, i );
  478. }
  479. this._animateOff = false;
  480. break;
  481. case "step":
  482. case "min":
  483. case "max":
  484. this._animateOff = true;
  485. this._calculateNewMax();
  486. this._refreshValue();
  487. this._animateOff = false;
  488. break;
  489. case "range":
  490. this._animateOff = true;
  491. this._refresh();
  492. this._animateOff = false;
  493. break;
  494. }
  495. },
  496.  
  497. //internal value getter
  498. // _value() returns value trimmed by min and max, aligned by step
  499. _value: function() {
  500. var val = this.options.value;
  501. val = this._trimAlignValue( val );
  502.  
  503. return val;
  504. },
  505.  
  506. //internal values getter
  507. // _values() returns array of values trimmed by min and max, aligned by step
  508. // _values( index ) returns single value trimmed by min and max, aligned by step
  509. _values: function( index ) {
  510. var val,
  511. vals,
  512. i;
  513.  
  514. if ( arguments.length ) {
  515. val = this.options.values[ index ];
  516. val = this._trimAlignValue( val );
  517.  
  518. return val;
  519. } else if ( this.options.values && this.options.values.length ) {
  520. // .slice() creates a copy of the array
  521. // this copy gets trimmed by min and max and then returned
  522. vals = this.options.values.slice();
  523. for ( i = 0; i < vals.length; i += 1) {
  524. vals[ i ] = this._trimAlignValue( vals[ i ] );
  525. }
  526.  
  527. return vals;
  528. } else {
  529. return [];
  530. }
  531. },
  532.  
  533. // returns the step-aligned value that val is closest to, between (inclusive) min and max
  534. _trimAlignValue: function( val ) {
  535. if ( val <= this._valueMin() ) {
  536. return this._valueMin();
  537. }
  538. if ( val >= this._valueMax() ) {
  539. return this._valueMax();
  540. }
  541. var step = ( this.options.step > 0 ) ? this.options.step : 1,
  542. valModStep = (val - this._valueMin()) % step,
  543. alignValue = val - valModStep;
  544.  
  545. if ( Math.abs(valModStep) * 2 >= step ) {
  546. alignValue += ( valModStep > 0 ) ? step : ( -step );
  547. }
  548.  
  549. // Since JavaScript has problems with large floats, round
  550. // the final value to 5 digits after the decimal point (see #4124)
  551. return parseFloat( alignValue.toFixed(5) );
  552. },
  553.  
  554. _calculateNewMax: function() {
  555. var remainder = ( this.options.max - this._valueMin() ) % this.options.step;
  556. this.max = this.options.max - remainder;
  557. },
  558.  
  559. _valueMin: function() {
  560. return this.options.min;
  561. },
  562.  
  563. _valueMax: function() {
  564. return this.max;
  565. },
  566.  
  567. _refreshValue: function() {
  568. var lastValPercent, valPercent, value, valueMin, valueMax,
  569. oRange = this.options.range,
  570. o = this.options,
  571. that = this,
  572. animate = ( !this._animateOff ) ? o.animate : false,
  573. _set = {};
  574.  
  575. if ( this.options.values && this.options.values.length ) {
  576. this.handles.each(function( i ) {
  577. valPercent = ( that.values(i) - that._valueMin() ) / ( that._valueMax() - that._valueMin() ) * 100;
  578. _set[ that.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
  579. $( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
  580. if ( that.options.range === true ) {
  581. if ( that.orientation === "horizontal" ) {
  582. if ( i === 0 ) {
  583. that.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { left: valPercent + "%" }, o.animate );
  584. }
  585. if ( i === 1 ) {
  586. that.range[ animate ? "animate" : "css" ]( { width: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
  587. }
  588. } else {
  589. if ( i === 0 ) {
  590. that.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { bottom: ( valPercent ) + "%" }, o.animate );
  591. }
  592. if ( i === 1 ) {
  593. that.range[ animate ? "animate" : "css" ]( { height: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
  594. }
  595. }
  596. }
  597. lastValPercent = valPercent;
  598. });
  599. } else {
  600. value = this.value();
  601. valueMin = this._valueMin();
  602. valueMax = this._valueMax();
  603. valPercent = ( valueMax !== valueMin ) ?
  604. ( value - valueMin ) / ( valueMax - valueMin ) * 100 :
  605. 0;
  606. _set[ this.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
  607. this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
  608.  
  609. if ( oRange === "min" && this.orientation === "horizontal" ) {
  610. this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: valPercent + "%" }, o.animate );
  611. }
  612. if ( oRange === "max" && this.orientation === "horizontal" ) {
  613. this.range[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
  614. }
  615. if ( oRange === "min" && this.orientation === "vertical" ) {
  616. this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: valPercent + "%" }, o.animate );
  617. }
  618. if ( oRange === "max" && this.orientation === "vertical" ) {
  619. this.range[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
  620. }
  621. }
  622. },
  623.  
  624. _handleEvents: {
  625. keydown: function( event ) {
  626. var allowed, curVal, newVal, step,
  627. index = $( event.target ).data( "ui-slider-handle-index" );
  628.  
  629. switch ( event.keyCode ) {
  630. case $.ui.keyCode.HOME:
  631. case $.ui.keyCode.END:
  632. case $.ui.keyCode.PAGE_UP:
  633. case $.ui.keyCode.PAGE_DOWN:
  634. case $.ui.keyCode.UP:
  635. case $.ui.keyCode.RIGHT:
  636. case $.ui.keyCode.DOWN:
  637. case $.ui.keyCode.LEFT:
  638. event.preventDefault();
  639. if ( !this._keySliding ) {
  640. this._keySliding = true;
  641. $( event.target ).addClass( "ui-state-active" );
  642. allowed = this._start( event, index );
  643. if ( allowed === false ) {
  644. return;
  645. }
  646. }
  647. break;
  648. }
  649.  
  650. step = this.options.step;
  651. if ( this.options.values && this.options.values.length ) {
  652. curVal = newVal = this.values( index );
  653. } else {
  654. curVal = newVal = this.value();
  655. }
  656.  
  657. switch ( event.keyCode ) {
  658. case $.ui.keyCode.HOME:
  659. newVal = this._valueMin();
  660. break;
  661. case $.ui.keyCode.END:
  662. newVal = this._valueMax();
  663. break;
  664. case $.ui.keyCode.PAGE_UP:
  665. newVal = this._trimAlignValue(
  666. curVal + ( ( this._valueMax() - this._valueMin() ) / this.numPages )
  667. );
  668. break;
  669. case $.ui.keyCode.PAGE_DOWN:
  670. newVal = this._trimAlignValue(
  671. curVal - ( (this._valueMax() - this._valueMin()) / this.numPages ) );
  672. break;
  673. case $.ui.keyCode.UP:
  674. case $.ui.keyCode.RIGHT:
  675. if ( curVal === this._valueMax() ) {
  676. return;
  677. }
  678. newVal = this._trimAlignValue( curVal + step );
  679. break;
  680. case $.ui.keyCode.DOWN:
  681. case $.ui.keyCode.LEFT:
  682. if ( curVal === this._valueMin() ) {
  683. return;
  684. }
  685. newVal = this._trimAlignValue( curVal - step );
  686. break;
  687. }
  688.  
  689. this._slide( event, index, newVal );
  690. },
  691. keyup: function( event ) {
  692. var index = $( event.target ).data( "ui-slider-handle-index" );
  693.  
  694. if ( this._keySliding ) {
  695. this._keySliding = false;
  696. this._stop( event, index );
  697. this._change( event, index );
  698. $( event.target ).removeClass( "ui-state-active" );
  699. }
  700. }
  701. }
  702. });
  703.  
  704. }));
Advertisement
Add Comment
Please, Sign In to add comment