ProgressIndicator.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. define("dojox/mobile/ProgressIndicator", [
  2. "dojo/_base/config",
  3. "dojo/_base/declare",
  4. "dojo/dom-construct",
  5. "dojo/dom-style",
  6. "dojo/has"
  7. ], function(config, declare, domConstruct, domStyle, has){
  8. // module:
  9. // dojox/mobile/ProgressIndicator
  10. // summary:
  11. // A progress indication widget.
  12. var cls = declare("dojox.mobile.ProgressIndicator", null, {
  13. // summary:
  14. // A progress indication widget.
  15. // description:
  16. // ProgressIndicator is a round spinning graphical representation
  17. // that indicates the current task is on-going.
  18. // interval: Number
  19. // The time interval in milliseconds for updating the spinning
  20. // indicator.
  21. interval: 100,
  22. // colors: Array
  23. // An array of indicator colors.
  24. colors: [
  25. "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0",
  26. "#C0C0C0", "#C0C0C0", "#B8B9B8", "#AEAFAE",
  27. "#A4A5A4", "#9A9A9A", "#8E8E8E", "#838383"
  28. ],
  29. constructor: function(){
  30. this._bars = [];
  31. this.domNode = domConstruct.create("DIV");
  32. this.domNode.className = "mblProgContainer";
  33. if(config["mblAndroidWorkaround"] !== false && has("android") >= 2.2 && has("android") < 3){
  34. // workaround to avoid the side effects of the fixes for android screen flicker problem
  35. domStyle.set(this.domNode, "webkitTransform", "translate3d(0,0,0)");
  36. }
  37. this.spinnerNode = domConstruct.create("DIV", null, this.domNode);
  38. for(var i = 0; i < this.colors.length; i++){
  39. var div = domConstruct.create("DIV", {className:"mblProg mblProg"+i}, this.spinnerNode);
  40. this._bars.push(div);
  41. }
  42. },
  43. start: function(){
  44. // summary:
  45. // Starts the ProgressIndicator spinning.
  46. if(this.imageNode){
  47. var img = this.imageNode;
  48. var l = Math.round((this.domNode.offsetWidth - img.offsetWidth) / 2);
  49. var t = Math.round((this.domNode.offsetHeight - img.offsetHeight) / 2);
  50. img.style.margin = t+"px "+l+"px";
  51. return;
  52. }
  53. var cntr = 0;
  54. var _this = this;
  55. var n = this.colors.length;
  56. this.timer = setInterval(function(){
  57. cntr--;
  58. cntr = cntr < 0 ? n - 1 : cntr;
  59. var c = _this.colors;
  60. for(var i = 0; i < n; i++){
  61. var idx = (cntr + i) % n;
  62. _this._bars[i].style.backgroundColor = c[idx];
  63. }
  64. }, this.interval);
  65. },
  66. stop: function(){
  67. // summary:
  68. // Stops the ProgressIndicator spinning.
  69. if(this.timer){
  70. clearInterval(this.timer);
  71. }
  72. this.timer = null;
  73. if(this.domNode.parentNode){
  74. this.domNode.parentNode.removeChild(this.domNode);
  75. }
  76. },
  77. setImage: function(/*String*/file){
  78. // summary:
  79. // Sets an indicator icon image file (typically animated GIF).
  80. // If null is specified, restores the default spinner.
  81. if(file){
  82. this.imageNode = domConstruct.create("IMG", {src:file}, this.domNode);
  83. this.spinnerNode.style.display = "none";
  84. }else{
  85. if(this.imageNode){
  86. this.domNode.removeChild(this.imageNode);
  87. this.imageNode = null;
  88. }
  89. this.spinnerNode.style.display = "";
  90. }
  91. }
  92. });
  93. cls._instance = null;
  94. cls.getInstance = function(){
  95. if(!cls._instance){
  96. cls._instance = new cls();
  97. }
  98. return cls._instance;
  99. };
  100. return cls;
  101. });