ProgressBar.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dijit.ProgressBar"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dijit.ProgressBar"] = true;
  8. dojo.provide("dijit.ProgressBar");
  9. dojo.require("dojo.fx");
  10. dojo.require("dojo.number");
  11. dojo.require("dijit._Widget");
  12. dojo.require("dijit._Templated");
  13. dojo.declare("dijit.ProgressBar", [dijit._Widget, dijit._Templated], {
  14. // summary:
  15. // A progress indication widget, showing the amount completed
  16. // (often the percentage completed) of a task.
  17. //
  18. // example:
  19. // | <div dojoType="ProgressBar"
  20. // | places="0"
  21. // | value="..." maximum="...">
  22. // | </div>
  23. // progress: [const] String (Percentage or Number)
  24. // Number or percentage indicating amount of task completed.
  25. // Deprecated. Use "value" instead.
  26. progress: "0",
  27. // value: String (Percentage or Number)
  28. // Number or percentage indicating amount of task completed.
  29. // With "%": percentage value, 0% <= progress <= 100%, or
  30. // without "%": absolute value, 0 <= progress <= maximum.
  31. // Infinity means that the progress bar is indeterminate.
  32. value: "",
  33. // maximum: [const] Float
  34. // Max sample number
  35. maximum: 100,
  36. // places: [const] Number
  37. // Number of places to show in values; 0 by default
  38. places: 0,
  39. // indeterminate: [const] Boolean
  40. // If false: show progress value (number or percentage).
  41. // If true: show that a process is underway but that the amount completed is unknown.
  42. // Deprecated. Use "value" instead.
  43. indeterminate: false,
  44. // label: String?
  45. // Label on progress bar. Defaults to percentage for determinate progress bar and
  46. // blank for indeterminate progress bar.
  47. label:"",
  48. // name: String
  49. // this is the field name (for a form) if set. This needs to be set if you want to use
  50. // this widget in a dijit.form.Form widget (such as dijit.Dialog)
  51. name: '',
  52. templateString: dojo.cache("dijit", "templates/ProgressBar.html", "<div class=\"dijitProgressBar dijitProgressBarEmpty\" role=\"progressbar\"\n\t><div dojoAttachPoint=\"internalProgress\" class=\"dijitProgressBarFull\"\n\t\t><div class=\"dijitProgressBarTile\" role=\"presentation\"></div\n\t\t><span style=\"visibility:hidden\">&nbsp;</span\n\t></div\n\t><div dojoAttachPoint=\"labelNode\" class=\"dijitProgressBarLabel\" id=\"${id}_label\"></div\n\t><img dojoAttachPoint=\"indeterminateHighContrastImage\" class=\"dijitProgressBarIndeterminateHighContrastImage\" alt=\"\"\n/></div>\n"),
  53. // _indeterminateHighContrastImagePath: [private] dojo._URL
  54. // URL to image to use for indeterminate progress bar when display is in high contrast mode
  55. _indeterminateHighContrastImagePath:
  56. dojo.moduleUrl("dijit", "themes/a11y/indeterminate_progress.gif"),
  57. postMixInProperties: function(){
  58. this.inherited(arguments);
  59. if(!("value" in this.params)){
  60. this.value = this.indeterminate ? Infinity : this.progress;
  61. }
  62. },
  63. buildRendering: function(){
  64. this.inherited(arguments);
  65. this.indeterminateHighContrastImage.setAttribute("src",
  66. this._indeterminateHighContrastImagePath.toString());
  67. this.update();
  68. },
  69. update: function(/*Object?*/attributes){
  70. // summary:
  71. // Internal method to change attributes of ProgressBar, similar to set(hash). Users should call
  72. // set("value", ...) rather than calling this method directly.
  73. // attributes:
  74. // May provide progress and/or maximum properties on this parameter;
  75. // see attribute specs for details.
  76. // example:
  77. // | myProgressBar.update({'indeterminate': true});
  78. // | myProgressBar.update({'progress': 80});
  79. // | myProgressBar.update({'indeterminate': true, label:"Loading ..." })
  80. // tags:
  81. // private
  82. // TODO: deprecate this method and use set() instead
  83. dojo.mixin(this, attributes || {});
  84. var tip = this.internalProgress, ap = this.domNode;
  85. var percent = 1;
  86. if(this.indeterminate){
  87. dijit.removeWaiState(ap, "valuenow");
  88. dijit.removeWaiState(ap, "valuemin");
  89. dijit.removeWaiState(ap, "valuemax");
  90. }else{
  91. if(String(this.progress).indexOf("%") != -1){
  92. percent = Math.min(parseFloat(this.progress)/100, 1);
  93. this.progress = percent * this.maximum;
  94. }else{
  95. this.progress = Math.min(this.progress, this.maximum);
  96. percent = this.progress / this.maximum;
  97. }
  98. dijit.setWaiState(ap, "describedby", this.labelNode.id);
  99. dijit.setWaiState(ap, "valuenow", this.progress);
  100. dijit.setWaiState(ap, "valuemin", 0);
  101. dijit.setWaiState(ap, "valuemax", this.maximum);
  102. }
  103. this.labelNode.innerHTML = this.report(percent);
  104. dojo.toggleClass(this.domNode, "dijitProgressBarIndeterminate", this.indeterminate);
  105. tip.style.width = (percent * 100) + "%";
  106. this.onChange();
  107. },
  108. _setValueAttr: function(v){
  109. this._set("value", v);
  110. if(v == Infinity){
  111. this.update({indeterminate:true});
  112. }else{
  113. this.update({indeterminate:false, progress:v});
  114. }
  115. },
  116. _setLabelAttr: function(label){
  117. this._set("label", label);
  118. this.update();
  119. },
  120. _setIndeterminateAttr: function(indeterminate){
  121. // Deprecated, use set("value", ...) instead
  122. this.indeterminate = indeterminate;
  123. this.update();
  124. },
  125. report: function(/*float*/percent){
  126. // summary:
  127. // Generates message to show inside progress bar (normally indicating amount of task completed).
  128. // May be overridden.
  129. // tags:
  130. // extension
  131. return this.label ? this.label :
  132. (this.indeterminate ? "&nbsp;" : dojo.number.format(percent, { type: "percent", places: this.places, locale: this.lang }));
  133. },
  134. onChange: function(){
  135. // summary:
  136. // Callback fired when progress updates.
  137. // tags:
  138. // extension
  139. }
  140. });
  141. }