public/assets/jquery-ui-1-12-1/ui/widgets/spinner.js

   1 /*!
   2  * jQuery UI Spinner 1.12.1
   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: Spinner
  11 //>>group: Widgets
  12 //>>description: Displays buttons to easily input numbers via the keyboard or mouse.
  13 //>>docs: http://api.jqueryui.com/spinner/
  14 //>>demos: http://jqueryui.com/spinner/
  15 //>>css.structure: ../../themes/base/core.css
  16 //>>css.structure: ../../themes/base/spinner.css
  17 //>>css.theme: ../../themes/base/theme.css
  18
  19 ( function( factory ) {
  20         if ( typeof define === "function" && define.amd ) {
  21
  22                 // AMD. Register as an anonymous module.
  23                 define( [
  24                         "jquery",
  25                         "./button",
  26                         "../version",
  27                         "../keycode",
  28                         "../safe-active-element",
  29                         "../widget"
  30                 ], factory );
  31         } else {
  32
  33                 // Browser globals
  34                 factory( jQuery );
  35         }
  36 }( function( $ ) {
  37
  38 function spinnerModifer( fn ) {
  39         return function() {
  40                 var previous = this.element.val();
  41                 fn.apply( this, arguments );
  42                 this._refresh();
  43                 if ( previous !== this.element.val() ) {
  44                         this._trigger( "change" );
  45                 }
  46         };
  47 }
  48
  49 $.widget( "ui.spinner", {
  50         version: "1.12.1",
  51         defaultElement: "<input>",
  52         widgetEventPrefix: "spin",
  53         options: {
  54                 classes: {
  55                         "ui-spinner": "ui-corner-all",
  56                         "ui-spinner-down": "ui-corner-br",
  57                         "ui-spinner-up": "ui-corner-tr"
  58                 },
  59                 culture: null,
  60                 icons: {
  61                         down: "ui-icon-triangle-1-s",
  62                         up: "ui-icon-triangle-1-n"
  63                 },
  64                 incremental: true,
  65                 max: null,
  66                 min: null,
  67                 numberFormat: null,
  68                 page: 10,
  69                 step: 1,
  70
  71                 change: null,
  72                 spin: null,
  73                 start: null,
  74                 stop: null
  75         },
  76
  77         _create: function() {
  78
  79                 // handle string values that need to be parsed
  80                 this._setOption( "max", this.options.max );
  81                 this._setOption( "min", this.options.min );
  82                 this._setOption( "step", this.options.step );
  83
  84                 // Only format if there is a value, prevents the field from being marked
  85                 // as invalid in Firefox, see #9573.
  86                 if ( this.value() !== "" ) {
  87
  88                         // Format the value, but don't constrain.
  89                         this._value( this.element.val(), true );
  90                 }
  91
  92                 this._draw();
  93                 this._on( this._events );
  94                 this._refresh();
  95
  96                 // Turning off autocomplete prevents the browser from remembering the
  97                 // value when navigating through history, so we re-enable autocomplete
  98                 // if the page is unloaded before the widget is destroyed. #7790
  99                 this._on( this.window, {
 100                         beforeunload: function() {
 101                                 this.element.removeAttr( "autocomplete" );
 102                         }
 103                 } );
 104         },
 105
 106         _getCreateOptions: function() {
 107                 var options = this._super();
 108                 var element = this.element;
 109
 110                 $.each( [ "min", "max", "step" ], function( i, option ) {
 111                         var value = element.attr( option );
 112                         if ( value != null && value.length ) {
 113                                 options[ option ] = value;
 114                         }
 115                 } );
 116
 117                 return options;
 118         },
 119
 120         _events: {
 121                 keydown: function( event ) {
 122                         if ( this._start( event ) && this._keydown( event ) ) {
 123                                 event.preventDefault();
 124                         }
 125                 },
 126                 keyup: "_stop",
 127                 focus: function() {
 128                         this.previous = this.element.val();
 129                 },
 130                 blur: function( event ) {
 131                         if ( this.cancelBlur ) {
 132                                 delete this.cancelBlur;
 133                                 return;
 134                         }
 135
 136                         this._stop();
 137                         this._refresh();
 138                         if ( this.previous !== this.element.val() ) {
 139                                 this._trigger( "change", event );
 140                         }
 141                 },
 142                 mousewheel: function( event, delta ) {
 143                         if ( !delta ) {
 144                                 return;
 145                         }
 146                         if ( !this.spinning && !this._start( event ) ) {
 147                                 return false;
 148                         }
 149
 150                         this._spin( ( delta > 0 ? 1 : -1 ) * this.options.step, event );
 151                         clearTimeout( this.mousewheelTimer );
 152                         this.mousewheelTimer = this._delay( function() {
 153                                 if ( this.spinning ) {
 154                                         this._stop( event );
 155                                 }
 156                         }, 100 );
 157                         event.preventDefault();
 158                 },
 159                 "mousedown .ui-spinner-button": function( event ) {
 160                         var previous;
 161
 162                         // We never want the buttons to have focus; whenever the user is
 163                         // interacting with the spinner, the focus should be on the input.
 164                         // If the input is focused then this.previous is properly set from
 165                         // when the input first received focus. If the input is not focused
 166                         // then we need to set this.previous based on the value before spinning.
 167                         previous = this.element[ 0 ] === $.ui.safeActiveElement( this.document[ 0 ] ) ?
 168                                 this.previous : this.element.val();
 169                         function checkFocus() {
 170                                 var isActive = this.element[ 0 ] === $.ui.safeActiveElement( this.document[ 0 ] );
 171                                 if ( !isActive ) {
 172                                         this.element.trigger( "focus" );
 173                                         this.previous = previous;
 174
 175                                         // support: IE
 176                                         // IE sets focus asynchronously, so we need to check if focus
 177                                         // moved off of the input because the user clicked on the button.
 178                                         this._delay( function() {
 179                                                 this.previous = previous;
 180                                         } );
 181                                 }
 182                         }
 183
 184                         // Ensure focus is on (or stays on) the text field
 185                         event.preventDefault();
 186                         checkFocus.call( this );
 187
 188                         // Support: IE
 189                         // IE doesn't prevent moving focus even with event.preventDefault()
 190                         // so we set a flag to know when we should ignore the blur event
 191                         // and check (again) if focus moved off of the input.
 192                         this.cancelBlur = true;
 193                         this._delay( function() {
 194                                 delete this.cancelBlur;
 195                                 checkFocus.call( this );
 196                         } );
 197
 198                         if ( this._start( event ) === false ) {
 199                                 return;
 200                         }
 201
 202                         this._repeat( null, $( event.currentTarget )
 203                                 .hasClass( "ui-spinner-up" ) ? 1 : -1, event );
 204                 },
 205                 "mouseup .ui-spinner-button": "_stop",
 206                 "mouseenter .ui-spinner-button": function( event ) {
 207
 208                         // button will add ui-state-active if mouse was down while mouseleave and kept down
 209                         if ( !$( event.currentTarget ).hasClass( "ui-state-active" ) ) {
 210                                 return;
 211                         }
 212
 213                         if ( this._start( event ) === false ) {
 214                                 return false;
 215                         }
 216                         this._repeat( null, $( event.currentTarget )
 217                                 .hasClass( "ui-spinner-up" ) ? 1 : -1, event );
 218                 },
 219
 220                 // TODO: do we really want to consider this a stop?
 221                 // shouldn't we just stop the repeater and wait until mouseup before
 222                 // we trigger the stop event?
 223                 "mouseleave .ui-spinner-button": "_stop"
 224         },
 225
 226         // Support mobile enhanced option and make backcompat more sane
 227         _enhance: function() {
 228                 this.uiSpinner = this.element
 229                         .attr( "autocomplete", "off" )
 230                         .wrap( "<span>" )
 231                         .parent()
 232
 233                                 // Add buttons
 234                                 .append(
 235                                         "<a></a><a></a>"
 236                                 );
 237         },
 238
 239         _draw: function() {
 240                 this._enhance();
 241
 242                 this._addClass( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" );
 243                 this._addClass( "ui-spinner-input" );
 244
 245                 this.element.attr( "role", "spinbutton" );
 246
 247                 // Button bindings
 248                 this.buttons = this.uiSpinner.children( "a" )
 249                         .attr( "tabIndex", -1 )
 250                         .attr( "aria-hidden", true )
 251                         .button( {
 252                                 classes: {
 253                                         "ui-button": ""
 254                                 }
 255                         } );
 256
 257                 // TODO: Right now button does not support classes this is already updated in button PR
 258                 this._removeClass( this.buttons, "ui-corner-all" );
 259
 260                 this._addClass( this.buttons.first(), "ui-spinner-button ui-spinner-up" );
 261                 this._addClass( this.buttons.last(), "ui-spinner-button ui-spinner-down" );
 262                 this.buttons.first().button( {
 263                         "icon": this.options.icons.up,
 264                         "showLabel": false
 265                 } );
 266                 this.buttons.last().button( {
 267                         "icon": this.options.icons.down,
 268                         "showLabel": false
 269                 } );
 270
 271                 // IE 6 doesn't understand height: 50% for the buttons
 272                 // unless the wrapper has an explicit height
 273                 if ( this.buttons.height() > Math.ceil( this.uiSpinner.height() * 0.5 ) &&
 274                                 this.uiSpinner.height() > 0 ) {
 275                         this.uiSpinner.height( this.uiSpinner.height() );
 276                 }
 277         },
 278
 279         _keydown: function( event ) {
 280                 var options = this.options,
 281                         keyCode = $.ui.keyCode;
 282
 283                 switch ( event.keyCode ) {
 284                 case keyCode.UP:
 285                         this._repeat( null, 1, event );
 286                         return true;
 287                 case keyCode.DOWN:
 288                         this._repeat( null, -1, event );
 289                         return true;
 290                 case keyCode.PAGE_UP:
 291                         this._repeat( null, options.page, event );
 292                         return true;
 293                 case keyCode.PAGE_DOWN:
 294                         this._repeat( null, -options.page, event );
 295                         return true;
 296                 }
 297
 298                 return false;
 299         },
 300
 301         _start: function( event ) {
 302                 if ( !this.spinning && this._trigger( "start", event ) === false ) {
 303                         return false;
 304                 }
 305
 306                 if ( !this.counter ) {
 307                         this.counter = 1;
 308                 }
 309                 this.spinning = true;
 310                 return true;
 311         },
 312
 313         _repeat: function( i, steps, event ) {
 314                 i = i || 500;
 315
 316                 clearTimeout( this.timer );
 317                 this.timer = this._delay( function() {
 318                         this._repeat( 40, steps, event );
 319                 }, i );
 320
 321                 this._spin( steps * this.options.step, event );
 322         },
 323
 324         _spin: function( step, event ) {
 325                 var value = this.value() || 0;
 326
 327                 if ( !this.counter ) {
 328                         this.counter = 1;
 329                 }
 330
 331                 value = this._adjustValue( value + step * this._increment( this.counter ) );
 332
 333                 if ( !this.spinning || this._trigger( "spin", event, { value: value } ) !== false ) {
 334                         this._value( value );
 335                         this.counter++;
 336                 }
 337         },
 338
 339         _increment: function( i ) {
 340                 var incremental = this.options.incremental;
 341
 342                 if ( incremental ) {
 343                         return $.isFunction( incremental ) ?
 344                                 incremental( i ) :
 345                                 Math.floor( i * i * i / 50000 - i * i / 500 + 17 * i / 200 + 1 );
 346                 }
 347
 348                 return 1;
 349         },
 350
 351         _precision: function() {
 352                 var precision = this._precisionOf( this.options.step );
 353                 if ( this.options.min !== null ) {
 354                         precision = Math.max( precision, this._precisionOf( this.options.min ) );
 355                 }
 356                 return precision;
 357         },
 358
 359         _precisionOf: function( num ) {
 360                 var str = num.toString(),
 361                         decimal = str.indexOf( "." );
 362                 return decimal === -1 ? 0 : str.length - decimal - 1;
 363         },
 364
 365         _adjustValue: function( value ) {
 366                 var base, aboveMin,
 367                         options = this.options;
 368
 369                 // Make sure we're at a valid step
 370                 // - find out where we are relative to the base (min or 0)
 371                 base = options.min !== null ? options.min : 0;
 372                 aboveMin = value - base;
 373
 374                 // - round to the nearest step
 375                 aboveMin = Math.round( aboveMin / options.step ) * options.step;
 376
 377                 // - rounding is based on 0, so adjust back to our base
 378                 value = base + aboveMin;
 379
 380                 // Fix precision from bad JS floating point math
 381                 value = parseFloat( value.toFixed( this._precision() ) );
 382
 383                 // Clamp the value
 384                 if ( options.max !== null && value > options.max ) {
 385                         return options.max;
 386                 }
 387                 if ( options.min !== null && value < options.min ) {
 388                         return options.min;
 389                 }
 390
 391                 return value;
 392         },
 393
 394         _stop: function( event ) {
 395                 if ( !this.spinning ) {
 396                         return;
 397                 }
 398
 399                 clearTimeout( this.timer );
 400                 clearTimeout( this.mousewheelTimer );
 401                 this.counter = 0;
 402                 this.spinning = false;
 403                 this._trigger( "stop", event );
 404         },
 405
 406         _setOption: function( key, value ) {
 407                 var prevValue, first, last;
 408
 409                 if ( key === "culture" || key === "numberFormat" ) {
 410                         prevValue = this._parse( this.element.val() );
 411                         this.options[ key ] = value;
 412                         this.element.val( this._format( prevValue ) );
 413                         return;
 414                 }
 415
 416                 if ( key === "max" || key === "min" || key === "step" ) {
 417                         if ( typeof value === "string" ) {
 418                                 value = this._parse( value );
 419                         }
 420                 }
 421                 if ( key === "icons" ) {
 422                         first = this.buttons.first().find( ".ui-icon" );
 423                         this._removeClass( first, null, this.options.icons.up );
 424                         this._addClass( first, null, value.up );
 425                         last = this.buttons.last().find( ".ui-icon" );
 426                         this._removeClass( last, null, this.options.icons.down );
 427                         this._addClass( last, null, value.down );
 428                 }
 429
 430                 this._super( key, value );
 431         },
 432
 433         _setOptionDisabled: function( value ) {
 434                 this._super( value );
 435
 436                 this._toggleClass( this.uiSpinner, null, "ui-state-disabled", !!value );
 437                 this.element.prop( "disabled", !!value );
 438                 this.buttons.button( value ? "disable" : "enable" );
 439         },
 440
 441         _setOptions: spinnerModifer( function( options ) {
 442                 this._super( options );
 443         } ),
 444
 445         _parse: function( val ) {
 446                 if ( typeof val === "string" && val !== "" ) {
 447                         val = window.Globalize && this.options.numberFormat ?
 448                                 Globalize.parseFloat( val, 10, this.options.culture ) : +val;
 449                 }
 450                 return val === "" || isNaN( val ) ? null : val;
 451         },
 452
 453         _format: function( value ) {
 454                 if ( value === "" ) {
 455                         return "";
 456                 }
 457                 return window.Globalize && this.options.numberFormat ?
 458                         Globalize.format( value, this.options.numberFormat, this.options.culture ) :
 459                         value;
 460         },
 461
 462         _refresh: function() {
 463                 this.element.attr( {
 464                         "aria-valuemin": this.options.min,
 465                         "aria-valuemax": this.options.max,
 466
 467                         // TODO: what should we do with values that can't be parsed?
 468                         "aria-valuenow": this._parse( this.element.val() )
 469                 } );
 470         },
 471
 472         isValid: function() {
 473                 var value = this.value();
 474
 475                 // Null is invalid
 476                 if ( value === null ) {
 477                         return false;
 478                 }
 479
 480                 // If value gets adjusted, it's invalid
 481                 return value === this._adjustValue( value );
 482         },
 483
 484         // Update the value without triggering change
 485         _value: function( value, allowAny ) {
 486                 var parsed;
 487                 if ( value !== "" ) {
 488                         parsed = this._parse( value );
 489                         if ( parsed !== null ) {
 490                                 if ( !allowAny ) {
 491                                         parsed = this._adjustValue( parsed );
 492                                 }
 493                                 value = this._format( parsed );
 494                         }
 495                 }
 496                 this.element.val( value );
 497                 this._refresh();
 498         },
 499
 500         _destroy: function() {
 501                 this.element
 502                         .prop( "disabled", false )
 503                         .removeAttr( "autocomplete role aria-valuemin aria-valuemax aria-valuenow" );
 504
 505                 this.uiSpinner.replaceWith( this.element );
 506         },
 507
 508         stepUp: spinnerModifer( function( steps ) {
 509                 this._stepUp( steps );
 510         } ),
 511         _stepUp: function( steps ) {
 512                 if ( this._start() ) {
 513                         this._spin( ( steps || 1 ) * this.options.step );
 514                         this._stop();
 515                 }
 516         },
 517
 518         stepDown: spinnerModifer( function( steps ) {
 519                 this._stepDown( steps );
 520         } ),
 521         _stepDown: function( steps ) {
 522                 if ( this._start() ) {
 523                         this._spin( ( steps || 1 ) * -this.options.step );
 524                         this._stop();
 525                 }
 526         },
 527
 528         pageUp: spinnerModifer( function( pages ) {
 529                 this._stepUp( ( pages || 1 ) * this.options.page );
 530         } ),
 531
 532         pageDown: spinnerModifer( function( pages ) {
 533                 this._stepDown( ( pages || 1 ) * this.options.page );
 534         } ),
 535
 536         value: function( newVal ) {
 537                 if ( !arguments.length ) {
 538                         return this._parse( this.element.val() );
 539                 }
 540                 spinnerModifer( this._value ).call( this, newVal );
 541         },
 542
 543         widget: function() {
 544                 return this.uiSpinner;
 545         }
 546 } );
 547
 548 // DEPRECATED
 549 // TODO: switch return back to widget declaration at top of file when this is removed
 550 if ( $.uiBackCompat !== false ) {
 551
 552         // Backcompat for spinner html extension points
 553         $.widget( "ui.spinner", $.ui.spinner, {
 554                 _enhance: function() {
 555                         this.uiSpinner = this.element
 556                                 .attr( "autocomplete", "off" )
 557                                 .wrap( this._uiSpinnerHtml() )
 558                                 .parent()
 559
 560                                         // Add buttons
 561                                         .append( this._buttonHtml() );
 562                 },
 563                 _uiSpinnerHtml: function() {
 564                         return "<span>";
 565                 },
 566
 567                 _buttonHtml: function() {
 568                         return "<a></a><a></a>";
 569                 }
 570         } );
 571 }
 572
 573 return $.ui.spinner;
 574
 575 } ) );