Shows text over an input that disappears when the user clicks into it. The text remains hidden if the user adds a value.
var OverText = new Class({
Implements: [Options, Events, Class.Occlude],
Binds: ['reposition', 'assert', 'focus', 'hide'],
options: {/*
textOverride: null,
onFocus: function(){},
onTextHide: function(textEl, inputEl){},
onTextShow: function(textEl, inputEl){}, */
element: 'label',
positionOptions: {
position: 'upperLeft',
edge: 'upperLeft',
offset: {
x: 4,
y: 2
}
},
poll: false,
pollInterval: 250,
wrap: false
},
property: 'OverText',
initialize: function(element, options){
this.element = document.id(element);
if (this.occlude()) return this.occluded;
this.setOptions(options);
this.attach(this.element);
OverText.instances.push(this);
if (this.options.poll) this.poll();
return this;
},
toElement: function(){
return this.element;
},
attach: function(){
var val = this.options.textOverride || this.element.get('alt') || this.element.get('title');
if (!val) return;
this.text = new Element(this.options.element, {
'class': 'overTxtLabel',
styles: {
lineHeight: 'normal',
position: 'absolute',
cursor: 'text'
},
html: val,
events: {
click: this.hide.pass(this.options.element == 'label', this)
}
}).inject(this.element, 'after');
if (this.options.element == 'label'){
if (!this.element.get('id')) this.element.set('id', 'input_' + new Date().getTime());
this.text.set('for', this.element.get('id'));
}
if (this.options.wrap){
this.textHolder = new Element('div', {
styles: {
lineHeight: 'normal',
position: 'relative'
},
'class':'overTxtWrapper'
}).adopt(this.text).inject(this.element, 'before');
}
return this.enable();
},
destroy: function(){
this.element.eliminate('OverTextDiv').eliminate('OverText');
this.disable();
if (this.text) this.text.destroy();
if (this.textHolder) this.textHolder.destroy();
return this;
},
disable: function(){
this.element.removeEvents({
focus: this.focus,
blur: this.assert,
change: this.assert
});
window.removeEvent('resize', this.reposition);
this.hide(true, true);
return this;
},
enable: function(){
this.element.addEvents({
focus: this.focus,
blur: this.assert,
change: this.assert
});
window.addEvent('resize', this.reposition);
this.assert(true);
this.reposition();
return this;
},
wrap: function(){
if (this.options.element == 'label'){
if (!this.element.get('id')) this.element.set('id', 'input_' + new Date().getTime());
this.text.set('for', this.element.get('id'));
}
},
startPolling: function(){
this.pollingPaused = false;
return this.poll();
},
poll: function(stop){
start immediately pause on focus resumeon blur
if (this.poller && !stop) return this;
var test = function(){
if (!this.pollingPaused) this.assert(true);
}.bind(this);
if (stop) clearInterval(this.poller);
else this.poller = test.periodical(this.options.pollInterval, this);
return this;
},
stopPolling: function(){
this.pollingPaused = true;
return this.poll(true);
},
focus: function(){
if (this.text && (!this.text.isDisplayed() || this.element.get('disabled'))) return;
this.hide();
},
hide: function(suppressFocus, force){
if (this.text && (this.text.isDisplayed() && (!this.element.get('disabled') || force))){
this.text.hide();
this.fireEvent('textHide', [this.text, this.element]);
this.pollingPaused = true;
if (!suppressFocus){
try {
this.element.fireEvent('focus');
this.element.focus();
} catch(e){} //IE barfs if you call focus on hidden elements
}
}
return this;
},
show: function(){
if (this.text && !this.text.isDisplayed()){
this.text.show();
this.reposition();
this.fireEvent('textShow', [this.text, this.element]);
this.pollingPaused = false;
}
return this;
},
assert: function(suppressFocus){
this[this.test() ? 'show' : 'hide'](suppressFocus);
},
test: function(){
var v = this.element.get('value');
return !v;
},
reposition: function(){
this.assert(true);
if (!this.element.isVisible()) return this.stopPolling().hide();
if (this.text && this.test()) this.text.position(Object.merge(this.options.positionOptions, {relativeTo: this.element}));
return this;
}
});
OverText.instances = [];
Object.append(OverText, {
each: function(fn){
return OverText.instances.map(function(ot, i){
if (ot.element && ot.text) return fn.apply(OverText, [ot, i]);
return null; //the input or the text was destroyed
});
},
update: function(){
return OverText.each(function(ot){
return ot.reposition();
});
},
hideAll: function(){
return OverText.each(function(ot){
return ot.hide(true, true);
});
},
showAll: function(){
return OverText.each(function(ot){
return ot.show();
});
}
});
if (window.Fx && Fx.Reveal){
Fx.Reveal.implement({
hideInputs: Browser.ie ? 'select, input, textarea, object, embed, .overTxtLabel' : false
});
}