ProgressBar.js 5.8 KB

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