[Summary view] [Print] [Text view]

   1  /*
   2  ---
   3  
   4  script: OverText.js
   5  
   6  name: OverText
   7  
   8  description: Shows text over an input that disappears when the user clicks into it. The text remains hidden if the user adds a value.
   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    - /Class.Occlude
  21    - /Element.Position
  22    - /Element.Shortcuts
  23  
  24  provides: [OverText]
  25  
  26  ...
  27  */
  28  
  29  var OverText = new Class({
  30  
  31      Implements: [Options, Events, Class.Occlude],
  32  
  33      Binds: ['reposition', 'assert', 'focus', 'hide'],
  34  
  35      options: {/*
  36          textOverride: null,
  37          onFocus: $empty()
  38          onTextHide: $empty(textEl, inputEl),
  39          onTextShow: $empty(textEl, inputEl), */
  40          element: 'label',
  41          positionOptions: {
  42              position: 'upperLeft',
  43              edge: 'upperLeft',
  44              offset: {
  45                  x: 4,
  46                  y: 2
  47              }
  48          },
  49          poll: false,
  50          pollInterval: 250,
  51          wrap: false
  52      },
  53  
  54      property: 'OverText',
  55  
  56      initialize: function(element, options){
  57          this.element = document.id(element);
  58          if (this.occlude()) return this.occluded;
  59          this.setOptions(options);
  60          this.attach(this.element);
  61          OverText.instances.push(this);
  62          if (this.options.poll) this.poll();
  63          return this;
  64      },
  65  
  66      toElement: function(){
  67          return this.element;
  68      },
  69  
  70      attach: function(){
  71          var val = this.options.textOverride || this.element.get('alt') || this.element.get('title');
  72          if (!val) return;
  73          this.text = new Element(this.options.element, {
  74              'class': 'overTxtLabel',
  75              styles: {
  76                  lineHeight: 'normal',
  77                  position: 'absolute',
  78                  cursor: 'text'
  79              },
  80              html: val,
  81              events: {
  82                  click: this.hide.pass(this.options.element == 'label', this)
  83              }
  84          }).inject(this.element, 'after');
  85          if (this.options.element == 'label') {
  86              if (!this.element.get('id')) this.element.set('id', 'input_' + new Date().getTime());
  87              this.text.set('for', this.element.get('id'));
  88          }
  89  
  90          if (this.options.wrap) {
  91              this.textHolder = new Element('div', {
  92                  styles: {
  93                      lineHeight: 'normal',
  94                      position: 'relative'
  95                  },
  96                  'class':'overTxtWrapper'
  97              }).adopt(this.text).inject(this.element, 'before');
  98          }
  99  
 100          return this.enable();
 101      },
 102  
 103      destroy: function(){
 104          this.element.eliminate('OverTextDiv').eliminate('OverText');
 105          this.disable();
 106          if (this.text) this.text.destroy();
 107          if (this.textHolder) this.textHolder.destroy();
 108          return this;
 109      },
 110  
 111      disable: function(){
 112          this.element.removeEvents({
 113              focus: this.focus,
 114              blur: this.assert,
 115              change: this.assert
 116          });
 117          window.removeEvent('resize', this.reposition);
 118          this.hide(true, true);
 119          return this;
 120      },
 121  
 122      enable: function(){
 123          this.element.addEvents({
 124              focus: this.focus,
 125              blur: this.assert,
 126              change: this.assert
 127          });
 128          window.addEvent('resize', this.reposition);
 129          this.assert(true);
 130          this.reposition();
 131          return this;
 132      },
 133  
 134      wrap: function(){
 135          if (this.options.element == 'label') {
 136              if (!this.element.get('id')) this.element.set('id', 'input_' + new Date().getTime());
 137              this.text.set('for', this.element.get('id'));
 138          }
 139      },
 140  
 141      startPolling: function(){
 142          this.pollingPaused = false;
 143          return this.poll();
 144      },
 145  
 146      poll: function(stop){
 147          //start immediately
 148          //pause on focus
 149          //resumeon blur
 150          if (this.poller && !stop) return this;
 151          var test = function(){
 152              if (!this.pollingPaused) this.assert(true);
 153          }.bind(this);
 154          if (stop) $clear(this.poller);
 155          else this.poller = test.periodical(this.options.pollInterval, this);
 156          return this;
 157      },
 158  
 159      stopPolling: function(){
 160          this.pollingPaused = true;
 161          return this.poll(true);
 162      },
 163  
 164      focus: function(){
 165          if (this.text && (!this.text.isDisplayed() || this.element.get('disabled'))) return;
 166          this.hide();
 167      },
 168  
 169      hide: function(suppressFocus, force){
 170          if (this.text && (this.text.isDisplayed() && (!this.element.get('disabled') || force))){
 171              this.text.hide();
 172              this.fireEvent('textHide', [this.text, this.element]);
 173              this.pollingPaused = true;
 174              if (!suppressFocus){
 175                  try {
 176                      this.element.fireEvent('focus');
 177                      this.element.focus();
 178                  } catch(e){} //IE barfs if you call focus on hidden elements
 179              }
 180          }
 181          return this;
 182      },
 183  
 184      show: function(){
 185          if (this.text && !this.text.isDisplayed()){
 186              this.text.show();
 187              this.reposition();
 188              this.fireEvent('textShow', [this.text, this.element]);
 189              this.pollingPaused = false;
 190          }
 191          return this;
 192      },
 193  
 194      assert: function(suppressFocus){
 195          this[this.test() ? 'show' : 'hide'](suppressFocus);
 196      },
 197  
 198      test: function(){
 199          var v = this.element.get('value');
 200          return !v;
 201      },
 202  
 203      reposition: function(){
 204          this.assert(true);
 205          if (!this.element.isVisible()) return this.stopPolling().hide();
 206          if (this.text && this.test()) this.text.position($merge(this.options.positionOptions, {relativeTo: this.element}));
 207          return this;
 208      }
 209  
 210  });
 211  
 212  OverText.instances = [];
 213  
 214  $extend(OverText, {
 215  
 216      each: function(fn) {
 217          return OverText.instances.map(function(ot, i){
 218              if (ot.element && ot.text) return fn.apply(OverText, [ot, i]);
 219              return null; //the input or the text was destroyed
 220          });
 221      },
 222      
 223      update: function(){
 224  
 225          return OverText.each(function(ot){
 226              return ot.reposition();
 227          });
 228  
 229      },
 230  
 231      hideAll: function(){
 232  
 233          return OverText.each(function(ot){
 234              return ot.hide(true, true);
 235          });
 236  
 237      },
 238  
 239      showAll: function(){
 240          return OverText.each(function(ot) {
 241              return ot.show();
 242          });
 243      }
 244  
 245  });
 246  
 247  if (window.Fx && Fx.Reveal) {
 248      Fx.Reveal.implement({
 249          hideInputs: Browser.Engine.trident ? 'select, input, textarea, object, embed, .overTxtLabel' : false
 250      });
 251  }