[Summary view] [Print] [Text view]

   1  /*
   2  ---
   3  
   4  script: Mask.js
   5  
   6  name: Mask
   7  
   8  description: Creates a mask element to cover another.
   9  
  10  license: MIT-style license
  11  
  12  authors:
  13    - Aaron Newton
  14  
  15  requires:
  16    - Core/Options
  17    - Core/Events
  18    - Core/Element.Event
  19    - /Class.Binds
  20    - /Element.Position
  21    - /IframeShim
  22  
  23  provides: [Mask]
  24  
  25  ...
  26  */
  27  
  28  var Mask = new Class({
  29  
  30      Implements: [Options, Events],
  31  
  32      Binds: ['position'],
  33  
  34      options: {
  35          // onShow: $empty,
  36          // onHide: $empty,
  37          // onDestroy: $empty,
  38          // onClick: $empty,
  39          //inject: {
  40          //  where: 'after',
  41          //  target: null,
  42          //},
  43          // hideOnClick: false,
  44          // id: null,
  45          // destroyOnHide: false,
  46          style: {},
  47          'class': 'mask',
  48          maskMargins: false,
  49          useIframeShim: true,
  50          iframeShimOptions: {}
  51      },
  52  
  53      initialize: function(target, options){
  54          this.target = document.id(target) || document.id(document.body);
  55          this.target.store('Mask', this);
  56          this.setOptions(options);
  57          this.render();
  58          this.inject();
  59      },
  60      
  61      render: function() {
  62          this.element = new Element('div', {
  63              'class': this.options['class'],
  64              id: this.options.id || 'mask-' + $time(),
  65              styles: $merge(this.options.style, {
  66                  display: 'none'
  67              }),
  68              events: {
  69                  click: function(){
  70                      this.fireEvent('click');
  71                      if (this.options.hideOnClick) this.hide();
  72                  }.bind(this)
  73              }
  74          });
  75          this.hidden = true;
  76      },
  77  
  78      toElement: function(){
  79          return this.element;
  80      },
  81  
  82      inject: function(target, where){
  83          where = where || this.options.inject ? this.options.inject.where : '' || this.target == document.body ? 'inside' : 'after';
  84          target = target || this.options.inject ? this.options.inject.target : '' || this.target;
  85          this.element.inject(target, where);
  86          if (this.options.useIframeShim) {
  87              this.shim = new IframeShim(this.element, this.options.iframeShimOptions);
  88              this.addEvents({
  89                  show: this.shim.show.bind(this.shim),
  90                  hide: this.shim.hide.bind(this.shim),
  91                  destroy: this.shim.destroy.bind(this.shim)
  92              });
  93          }
  94      },
  95  
  96      position: function(){
  97          this.resize(this.options.width, this.options.height);
  98          this.element.position({
  99              relativeTo: this.target,
 100              position: 'topLeft',
 101              ignoreMargins: !this.options.maskMargins,
 102              ignoreScroll: this.target == document.body
 103          });
 104          return this;
 105      },
 106  
 107      resize: function(x, y){
 108          var opt = {
 109              styles: ['padding', 'border']
 110          };
 111          if (this.options.maskMargins) opt.styles.push('margin');
 112          var dim = this.target.getComputedSize(opt);
 113          if (this.target == document.body) {
 114              var win = window.getScrollSize();
 115              if (dim.totalHeight < win.y) dim.totalHeight = win.y;
 116              if (dim.totalWidth < win.x) dim.totalWidth = win.x;
 117          }
 118          this.element.setStyles({
 119              width: $pick(x, dim.totalWidth, dim.x),
 120              height: $pick(y, dim.totalHeight, dim.y)
 121          });
 122          return this;
 123      },
 124  
 125      show: function(){
 126          if (!this.hidden) return this;
 127          window.addEvent('resize', this.position);
 128          this.position();
 129          this.showMask.apply(this, arguments);
 130          return this;
 131      },
 132  
 133      showMask: function(){
 134          this.element.setStyle('display', 'block');
 135          this.hidden = false;
 136          this.fireEvent('show');
 137      },
 138  
 139      hide: function(){
 140          if (this.hidden) return this;
 141          window.removeEvent('resize', this.position);
 142          this.hideMask.apply(this, arguments);
 143          if (this.options.destroyOnHide) return this.destroy();
 144          return this;
 145      },
 146  
 147      hideMask: function(){
 148          this.element.setStyle('display', 'none');
 149          this.hidden = true;
 150          this.fireEvent('hide');
 151      },
 152  
 153      toggle: function(){
 154          this[this.hidden ? 'show' : 'hide']();
 155      },
 156  
 157      destroy: function(){
 158          this.hide();
 159          this.element.destroy();
 160          this.fireEvent('destroy');
 161          this.target.eliminate('mask');
 162      }
 163  
 164  });
 165  
 166  Element.Properties.mask = {
 167  
 168      set: function(options){
 169          var mask = this.retrieve('mask');
 170          return this.eliminate('mask').store('mask:options', options);
 171      },
 172  
 173      get: function(options){
 174          if (options || !this.retrieve('mask')){
 175              if (this.retrieve('mask')) this.retrieve('mask').destroy();
 176              if (options || !this.retrieve('mask:options')) this.set('mask', options);
 177              this.store('mask', new Mask(this, this.retrieve('mask:options')));
 178          }
 179          return this.retrieve('mask');
 180      }
 181  
 182  };
 183  
 184  Element.implement({
 185  
 186      mask: function(options){
 187          this.get('mask', options).show();
 188          return this;
 189      },
 190  
 191      unmask: function(){
 192          this.get('mask').hide();
 193          return this;
 194      }
 195  
 196  });