jquery.progressbar.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. /*
  2. * @ Dmitry Farafonov
  3. */
  4. (function($){
  5. $.ProgressBar = function(options) {
  6. this.element = $(options.boundingBox);
  7. if (options.on && options.on.complete){
  8. this.onComplete = options.on.complete;
  9. }
  10. if (options.on && options.on.valueChange){
  11. this.onValueChange = options.on.valueChange;
  12. }
  13. this._create();
  14. if (options.label)
  15. this.set("label", options.label);
  16. if (options.value)
  17. this.value(options.value);
  18. if (options.max)
  19. this.set("max", options.max);
  20. };
  21. $.ProgressBar.prototype = {
  22. options: {
  23. value: 0,
  24. max: 100
  25. },
  26. min: 0,
  27. _create: function() {
  28. this.element
  29. .addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
  30. .attr({
  31. role: "progressbar",
  32. "aria-valuemin": this.min,
  33. "aria-valuemax": this.options.max,
  34. "aria-valuenow": this._value()
  35. });
  36. this.valueDiv = $( "<div class='ui-progressbar-label'></div>" )
  37. .appendTo( this.element );
  38. this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
  39. .appendTo( this.element );
  40. this.oldValue = this._value();
  41. this._refreshValue();
  42. },
  43. _destroy: function() {
  44. this.element
  45. .removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
  46. .removeAttr( "role" )
  47. .removeAttr( "aria-valuemin" )
  48. .removeAttr( "aria-valuemax" )
  49. .removeAttr( "aria-valuenow" );
  50. this.valueDiv.remove();
  51. },
  52. value: function( newValue ) {
  53. if ( newValue === undefined ) {
  54. return this._value();
  55. }
  56. this._setOption( "value", newValue );
  57. return this;
  58. },
  59. _setOption: function( key, value ) {
  60. if ( key === "value" ) {
  61. //var oldVal = this.options.value;
  62. this.options.value = value;
  63. this._refreshValue();
  64. if (this.onValueChange)
  65. this.onValueChange.apply(this, [{oldVal: this.oldValue, newVal: value}]);
  66. if ( this._value() === this.options.max ) {
  67. //this._trigger( "complete" );
  68. if (this.onComplete)
  69. this.onComplete.apply(this);
  70. }
  71. } else if (key === "label") {
  72. $(this.element).find(".ui-progressbar-label").html(value);
  73. } else if (key === "max") {
  74. this.options.max = value;
  75. }
  76. //this._super( key, value );
  77. },
  78. _value: function() {
  79. var val = this.options.value;
  80. // normalize invalid value
  81. if ( typeof val !== "number" ) {
  82. val = 0;
  83. }
  84. return Math.min( this.options.max, Math.max( this.min, val ) );
  85. },
  86. _percentage: function() {
  87. return 100 * this._value() / this.options.max;
  88. },
  89. _refreshValue: function() {
  90. var value = this.value(),
  91. percentage = this._percentage();
  92. if ( this.oldValue !== value ) {
  93. this.oldValue = value;
  94. //this._trigger( "change" );
  95. }
  96. this.valueDiv
  97. .toggle( value > this.min )
  98. .toggleClass( "ui-corner-right", value === this.options.max )
  99. .width( percentage.toFixed(0) + "%" );
  100. this.element.attr( "aria-valuenow", value );
  101. //$(this.element).find(".ui-progressbar-label").html(value + "%");
  102. },
  103. set: function(key, value){
  104. this._setOption(key, value);
  105. }
  106. };
  107. })( jQuery );