progressbar.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /*!
  2. * jQuery UI Progressbar 1.14.1
  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. //>>label: Progressbar
  10. //>>group: Widgets
  11. /* eslint-disable max-len */
  12. //>>description: Displays a status indicator for loading state, standard percentage, and other progress indicators.
  13. /* eslint-enable max-len */
  14. //>>docs: https://api.jqueryui.com/progressbar/
  15. //>>demos: https://jqueryui.com/progressbar/
  16. //>>css.structure: ../../themes/base/core.css
  17. //>>css.structure: ../../themes/base/progressbar.css
  18. //>>css.theme: ../../themes/base/theme.css
  19. ( function( factory ) {
  20. "use strict";
  21. if ( typeof define === "function" && define.amd ) {
  22. // AMD. Register as an anonymous module.
  23. define( [
  24. "jquery",
  25. "../version",
  26. "../widget"
  27. ], factory );
  28. } else {
  29. // Browser globals
  30. factory( jQuery );
  31. }
  32. } )( function( $ ) {
  33. "use strict";
  34. return $.widget( "ui.progressbar", {
  35. version: "1.14.1",
  36. options: {
  37. classes: {
  38. "ui-progressbar": "ui-corner-all",
  39. "ui-progressbar-value": "ui-corner-left",
  40. "ui-progressbar-complete": "ui-corner-right"
  41. },
  42. max: 100,
  43. value: 0,
  44. change: null,
  45. complete: null
  46. },
  47. min: 0,
  48. _create: function() {
  49. // Constrain initial value
  50. this.oldValue = this.options.value = this._constrainedValue();
  51. this.element.attr( {
  52. // Only set static values; aria-valuenow and aria-valuemax are
  53. // set inside _refreshValue()
  54. role: "progressbar",
  55. "aria-valuemin": this.min
  56. } );
  57. this._addClass( "ui-progressbar", "ui-widget ui-widget-content" );
  58. this.valueDiv = $( "<div>" ).appendTo( this.element );
  59. this._addClass( this.valueDiv, "ui-progressbar-value", "ui-widget-header" );
  60. this._refreshValue();
  61. },
  62. _destroy: function() {
  63. this.element.removeAttr( "role aria-valuemin aria-valuemax aria-valuenow" );
  64. this.valueDiv.remove();
  65. },
  66. value: function( newValue ) {
  67. if ( newValue === undefined ) {
  68. return this.options.value;
  69. }
  70. this.options.value = this._constrainedValue( newValue );
  71. this._refreshValue();
  72. },
  73. _constrainedValue: function( newValue ) {
  74. if ( newValue === undefined ) {
  75. newValue = this.options.value;
  76. }
  77. this.indeterminate = newValue === false;
  78. // Sanitize value
  79. if ( typeof newValue !== "number" ) {
  80. newValue = 0;
  81. }
  82. return this.indeterminate ? false :
  83. Math.min( this.options.max, Math.max( this.min, newValue ) );
  84. },
  85. _setOptions: function( options ) {
  86. // Ensure "value" option is set after other values (like max)
  87. var value = options.value;
  88. delete options.value;
  89. this._super( options );
  90. this.options.value = this._constrainedValue( value );
  91. this._refreshValue();
  92. },
  93. _setOption: function( key, value ) {
  94. if ( key === "max" ) {
  95. // Don't allow a max less than min
  96. value = Math.max( this.min, value );
  97. }
  98. this._super( key, value );
  99. },
  100. _setOptionDisabled: function( value ) {
  101. this._super( value );
  102. this.element.attr( "aria-disabled", value );
  103. this._toggleClass( null, "ui-state-disabled", !!value );
  104. },
  105. _percentage: function() {
  106. return this.indeterminate ?
  107. 100 :
  108. 100 * ( this.options.value - this.min ) / ( this.options.max - this.min );
  109. },
  110. _refreshValue: function() {
  111. var value = this.options.value,
  112. percentage = this._percentage();
  113. this.valueDiv
  114. .toggle( this.indeterminate || value > this.min )
  115. .width( percentage.toFixed( 0 ) + "%" );
  116. this
  117. ._toggleClass( this.valueDiv, "ui-progressbar-complete", null,
  118. value === this.options.max )
  119. ._toggleClass( "ui-progressbar-indeterminate", null, this.indeterminate );
  120. if ( this.indeterminate ) {
  121. this.element.removeAttr( "aria-valuenow" );
  122. if ( !this.overlayDiv ) {
  123. this.overlayDiv = $( "<div>" ).appendTo( this.valueDiv );
  124. this._addClass( this.overlayDiv, "ui-progressbar-overlay" );
  125. }
  126. } else {
  127. this.element.attr( {
  128. "aria-valuemax": this.options.max,
  129. "aria-valuenow": value
  130. } );
  131. if ( this.overlayDiv ) {
  132. this.overlayDiv.remove();
  133. this.overlayDiv = null;
  134. }
  135. }
  136. if ( this.oldValue !== value ) {
  137. this.oldValue = value;
  138. this._trigger( "change" );
  139. }
  140. if ( value === this.options.max ) {
  141. this._trigger( "complete" );
  142. }
  143. }
  144. } );
  145. } );