Loader.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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["dojox.widget.Loader"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.widget.Loader"] = true;
  8. dojo.provide("dojox.widget.Loader");
  9. dojo.deprecated("dojox.widget.Loader", "", "2.0");
  10. dojo.require("dijit._Widget");
  11. dojo.require("dijit._Templated");
  12. dojo.declare("dojox.widget.Loader", [dijit._Widget,dijit._Templated], {
  13. // summary: a configurable global xhr-listener to display
  14. // a loading message during running xhr's or to simply provide
  15. // base-level topic to subscribe to for custom loading messages
  16. //
  17. // loadIcon: String
  18. // location to the icon used.
  19. loadIcon: dojo.moduleUrl("dojox.widget.Loader","icons/loading.gif"),
  20. // loadMessage: String
  21. // string to use for progress loading
  22. loadMessage: 'Loading ...',
  23. // hasVisuals: Boolean
  24. // true to display a fixed loading message in TR cornder, false to unly provide
  25. // "Loader" topic to subscribe to for your own custom loading message.
  26. hasVisuals: true,
  27. // attachToPointer
  28. // true to use visual indicator where cursor is
  29. attachToPointer: true,
  30. // duration: Integer
  31. // time in ms to toggle in/out the visual load indicator
  32. duration: 125,
  33. // _offset: Integer
  34. // distance in px from the mouse pointer to show attachToPointer avatar
  35. _offset: 16,
  36. // holder for mousemove connection
  37. _pointerConnect: null,
  38. _xhrStart: null,
  39. _xhrEnd: null,
  40. templateString: '<div dojoAttachPoint="loadNode" class="dojoxLoader">'
  41. +'<img src="${loadIcon}" class="dojoxLoaderIcon"> <span dojoAttachPoint="loadMessageNode" class="dojoxLoaderMessage"></span>'
  42. +'</div>',
  43. postCreate: function(){
  44. // summary: setup the loader
  45. if(!this.hasVisuals){
  46. this.loadNode.style.display = "none"; // _destroy()?
  47. }else{
  48. if(this.attachToPointer){
  49. dojo.removeClass(this.loadNode,"dojoxLoader");
  50. dojo.addClass(this.loadNode,"dojoxLoaderPointer");
  51. }
  52. this._hide();
  53. }
  54. this._setMessage(this.loadMessage);
  55. // FIXME: create our connections. would be easier, and this might be redundant
  56. // if Deferred published something. XHR published stuff. FIXME to use that.
  57. this._xhrStart = this.connect(dojo,"_ioSetArgs","_show");
  58. this._xhrEnd = this.connect(dojo.Deferred.prototype,"_fire","_hide");
  59. },
  60. _setMessage: function(/* String */ message){
  61. // summary: set's the message in the loader
  62. this.loadMessageNode.innerHTML = message;
  63. },
  64. _putLoader: function(/* Event */ e){
  65. // summary: place the floating loading element based on mousemove connection position
  66. dijit.placeOnScreen(this.loadNode,{ x: e.clientX+this._offset, y:e.clientY+this._offset }, ["TL","BR"]);
  67. },
  68. _show: function(){
  69. // summary: publish and show progress indicator
  70. dojo.publish("Loader",[{ message: 'started' }]);
  71. if(this.hasVisuals){
  72. if(this.attachToPointer){
  73. this._pointerConnect = this.connect(document,"onmousemove","_putLoader");
  74. }
  75. dojo.style(this.loadNode, {
  76. opacity:0, display:""
  77. });
  78. dojo.fadeIn({ node: this.loadNode, duration:this.duration }).play();
  79. }
  80. },
  81. _hide: function(){
  82. // summary: publish "xhr ended" and hide progress indicator
  83. dojo.publish("Loader",[{ message: 'ended' }]);
  84. if(this.hasVisuals){
  85. if(this.attachToPointer){
  86. this.disconnect(this._pointerConnect);
  87. }
  88. dojo.fadeOut({
  89. node: this.loadNode,
  90. duration:this.duration,
  91. onEnd: dojo.partial(dojo.style, this.loadNode, "display", "none")
  92. }).play();
  93. }
  94. }
  95. });
  96. }