jquery.ui.progressbar.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /*!
  2. * jQuery UI Progressbar @VERSION
  3. * http://jqueryui.com
  4. *
  5. * Copyright 2013 jQuery Foundation and other contributors
  6. * Released under the MIT license.
  7. * http://jquery.org/license
  8. *
  9. * http://api.jqueryui.com/progressbar/
  10. *
  11. * Depends:
  12. * jquery.ui.core.js
  13. * jquery.ui.widget.js
  14. */
  15. (function( $, undefined ) {
  16. $.widget( "ui.progressbar", {
  17. version: "@VERSION",
  18. options: {
  19. max: 100,
  20. value: 0,
  21. change: null,
  22. complete: null
  23. },
  24. min: 0,
  25. _create: function() {
  26. // Constrain initial value
  27. this.oldValue = this.options.value = this._constrainedValue();
  28. this.element
  29. .addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
  30. .attr({
  31. // Only set static values, aria-valuenow and aria-valuemax are
  32. // set inside _refreshValue()
  33. role: "progressbar",
  34. "aria-valuemin": this.min
  35. });
  36. this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
  37. .appendTo( this.element );
  38. this._refreshValue();
  39. },
  40. _destroy: function() {
  41. this.element
  42. .removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
  43. .removeAttr( "role" )
  44. .removeAttr( "aria-valuemin" )
  45. .removeAttr( "aria-valuemax" )
  46. .removeAttr( "aria-valuenow" );
  47. this.valueDiv.remove();
  48. },
  49. value: function( newValue ) {
  50. if ( newValue === undefined ) {
  51. return this.options.value;
  52. }
  53. this.options.value = this._constrainedValue( newValue );
  54. this._refreshValue();
  55. },
  56. _constrainedValue: function( newValue ) {
  57. if ( newValue === undefined ) {
  58. newValue = this.options.value;
  59. }
  60. this.indeterminate = newValue === false;
  61. // sanitize value
  62. if ( typeof newValue !== "number" ) {
  63. newValue = 0;
  64. }
  65. return this.indeterminate ? false :
  66. Math.min( this.options.max, Math.max( this.min, newValue ) );
  67. },
  68. _setOptions: function( options ) {
  69. // Ensure "value" option is set after other values (like max)
  70. var value = options.value;
  71. delete options.value;
  72. this._super( options );
  73. this.options.value = this._constrainedValue( value );
  74. this._refreshValue();
  75. },
  76. _setOption: function( key, value ) {
  77. if ( key === "max" ) {
  78. // Don't allow a max less than min
  79. value = Math.max( this.min, value );
  80. }
  81. this._super( key, value );
  82. },
  83. _percentage: function() {
  84. return this.indeterminate ? 100 : 100 * ( this.options.value - this.min ) / ( this.options.max - this.min );
  85. },
  86. _refreshValue: function() {
  87. var value = this.options.value,
  88. percentage = this._percentage();
  89. this.valueDiv
  90. .toggle( this.indeterminate || value > this.min )
  91. .toggleClass( "ui-corner-right", value === this.options.max )
  92. .width( percentage.toFixed(0) + "%" );
  93. this.element.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
  94. if ( this.indeterminate ) {
  95. this.element.removeAttr( "aria-valuenow" );
  96. if ( !this.overlayDiv ) {
  97. this.overlayDiv = $( "<div class='ui-progressbar-overlay'></div>" ).appendTo( this.valueDiv );
  98. }
  99. } else {
  100. this.element.attr({
  101. "aria-valuemax": this.options.max,
  102. "aria-valuenow": value
  103. });
  104. if ( this.overlayDiv ) {
  105. this.overlayDiv.remove();
  106. this.overlayDiv = null;
  107. }
  108. }
  109. if ( this.oldValue !== value ) {
  110. this.oldValue = value;
  111. this._trigger( "change" );
  112. }
  113. if ( value === this.options.max ) {
  114. this._trigger( "complete" );
  115. }
  116. }
  117. });
  118. })( jQuery );