[Summary view] [Print] [Text view]

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