Requires

Provides

Spinner.js

Adds a semi-transparent overlay over a dom element with a spinnin ajax icon.

License:
MIT-style license
Authors:
Aaron Newton
  1. 27
  2. 28
  3. 29
  4. 30
  5. 31
var Spinner = new Class({ Extends: Mask, options: {

message: false,

  1. 33
  2. 34
  3. 35
  4. 36
  5. 37
  6. 38
  7. 39
  8. 40
  9. 41
  10. 42
  11. 43
  12. 44
  13. 45
  14. 46
  15. 47
  16. 48
  17. 49
  18. 50
  19. 51
'class':'spinner', containerPosition: {}, content: { 'class':'spinner-content' }, messageContainer: { 'class':'spinner-msg' }, img: { 'class':'spinner-img' }, fxOptions: { link: 'chain' } }, initialize: function(){ this.parent.apply(this, arguments); this.target.store('spinner', this);

add this to events for when noFx is true; parent methods handle hide/show

  1. 54
  2. 55
  3. 56
  4. 57
  5. 58
  6. 59
  7. 60
  8. 61
  9. 62
  10. 63
  11. 64
  12. 65
  13. 66
  14. 67
  15. 68
  16. 69
  17. 70
  18. 71
  19. 72
  20. 73
  21. 74
  22. 75
  23. 76
  24. 77
  25. 78
  26. 79
  27. 80
  28. 81
  29. 82
  30. 83
  31. 84
  32. 85
  33. 86
  34. 87
  35. 88
  36. 89
  37. 90
  38. 91
  39. 92
  40. 93
  41. 94
  42. 95
  43. 96
  44. 97
  45. 98
  46. 99
  47. 100
  48. 101
  49. 102
  50. 103
  51. 104
  52. 105
  53. 106
  54. 107
  55. 108
  56. 109
  57. 110
  58. 111
  59. 112
  60. 113
  61. 114
  62. 115
  63. 116
  64. 117
  65. 118
  66. 119
  67. 120
  68. 121
  69. 122
  70. 123
  71. 124
  72. 125
  73. 126
  74. 127
  75. 128
  76. 129
  77. 130
  78. 131
  79. 132
  80. 133
  81. 134
  82. 135
  83. 136
  84. 137
  85. 138
  86. 139
  87. 140
  88. 141
  89. 142
  90. 143
  91. 144
  92. 145
  93. 146
  94. 147
  95. 148
  96. 149
  97. 150
  98. 151
  99. 152
  100. 153
  101. 154
  102. 155
  103. 156
  104. 157
  105. 158
  106. 159
  107. 160
  108. 161
  109. 162
  110. 163
  111. 164
  112. 165
  113. 166
  114. 167
  115. 168
  116. 169
  117. 170
  118. 171
  119. 172
  120. 173
  121. 174
  122. 175
  123. 176
  124. 177
  125. 178
  126. 179
  127. 180
  128. 181
  129. 182
  130. 183
  131. 184
  132. 185
  133. 186
  134. 187
  135. 188
  136. 189
  137. 190
  138. 191
  139. 192
  140. 193
  141. 194
  142. 195
  143. 196
  144. 197
  145. 198
  146. 199
  147. 200
  148. 201
  149. 202
  150. 203
  151. 204
  152. 205
var deactivate = function(){ this.active = false; }.bind(this); this.addEvents({ hide: deactivate, show: deactivate }); }, render: function(){ this.parent(); this.element.set('id', this.options.id || 'spinner-'+Date.now()); this.content = document.id(this.options.content) || new Element('div', this.options.content); this.content.inject(this.element); if (this.options.message){ this.msg = document.id(this.options.message) || new Element('p', this.options.messageContainer).appendText(this.options.message); this.msg.inject(this.content); } if (this.options.img){ this.img = document.id(this.options.img) || new Element('div', this.options.img); this.img.inject(this.content); } this.element.set('tween', this.options.fxOptions); }, show: function(noFx){ if (this.active) return this.chain(this.show.bind(this)); if (!this.hidden){ this.callChain.delay(20, this); return this; } this.active = true; return this.parent(noFx); }, showMask: function(noFx){ var pos = function(){ this.content.position(Object.merge({ relativeTo: this.element }, this.options.containerPosition)); }.bind(this); if (noFx){ this.parent(); pos(); } else { this.element.setStyles({ display: 'block', opacity: 0 }).tween('opacity', this.options.style.opacity || 0.9); pos(); this.hidden = false; this.fireEvent('show'); this.callChain(); } }, hide: function(noFx){ if (this.active) return this.chain(this.hide.bind(this)); if (this.hidden){ this.callChain.delay(20, this); return this; } this.active = true; return this.parent(noFx); }, hideMask: function(noFx){ if (noFx) return this.parent(); this.element.tween('opacity', 0).get('tween').chain(function(){ this.element.setStyle('display', 'none'); this.hidden = true; this.fireEvent('hide'); this.callChain(); }.bind(this)); }, destroy: function(){ this.content.destroy(); this.parent(); this.target.eliminate('spinner'); } }); Spinner.implement(new Chain); Request = Class.refactor(Request, { options: { useSpinner: false, spinnerOptions: {}, spinnerTarget: false }, initialize: function(options){ this._send = this.send; this.send = function(options){ var spinner = this.getSpinner(); if (spinner) spinner.chain(this._send.bind(this, options)).show(); else this._send(options); return this; }; this.previous(options); }, getSpinner: function(){ if (!this.spinner) { var update = document.id(this.options.spinnerTarget) || document.id(this.options.update); if (this.options.useSpinner && update) { this.spinner = update.get('spinner', this.options.spinnerOptions); ['onComplete', 'onException', 'onCancel'].each(function(event){ this.addEvent(event, this.spinner.hide.bind(this.spinner)); }, this); } } return this.spinner; } }); Element.Properties.spinner = { set: function(options){ var spinner = this.retrieve('spinner'); spinner.setOptions(options); return this; }, get: function(){ var spinner = this.retrieve('spinner') if (!spinner){ spinner = new Spinner(this); this.store('spinner', spinner); } return spinner; } }; Element.implement({ spin: function(options){ this.get('spinner', options).show(); return this; }, unspin: function(){ var opt = Array.link(arguments, {options: Type.isObject, callback: Type.isFunction}); this.get('spinner', opt.options).hide(opt.callback); return this; } });