/modules/mod_base/lib/js/modules/z.inputoverlay.js

  1/* inputoverlay js
  2----------------------------------------------------------
  3
  4@package:	Zotonic 2010	
  5@Author: 	Marc Worrell <marc@worrell.nl>
  6
  7Copyright 2010 Marc Worrell
  8
  9Licensed under the Apache License, Version 2.0 (the "License");
 10you may not use this file except in compliance with the License.
 11You may obtain a copy of the License at
 12 
 13http://www.apache.org/licenses/LICENSE-2.0
 14 
 15Unless required by applicable law or agreed to in writing, software
 16distributed under the License is distributed on an "AS IS" BASIS,
 17WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 18See the License for the specific language governing permissions and
 19limitations under the License.
 20
 21---------------------------------------------------------- */
 22
 23/*
 24This widget overlays a label field with an input field.  When the input
 25is empty the label is visible.  When there is content then the label is hidden.
 26
 27HTML:
 28
 29<p class="do_inputoverlay">
 30	<span>Username</span>
 31	<input type="text" id="username" name="username" value="" />
 32</p>
 33
 34CSS:
 35
 36p.do_inputoverlay {
 37	margin: 0px;
 38	padding: 0px;
 39	position: relative;
 40	height: 40px;
 41	font-size: 18px;
 42}
 43
 44p.do_inputoverlay input {
 45	position: absolute;
 46	left: 0px;
 47	background: none;
 48	font-size: 18px;
 49}
 50
 51p.do_inputoverlay span {
 52	position: absolute;
 53	left: 8px;
 54	top: 5px;
 55	color: #aaa;
 56}
 57
 58p.do_inputoverlay span.focus {
 59	color: #d8d8d8;
 60}
 61
 62p.do_inputoverlay span.hidden {
 63	display: none;
 64}
 65
 66*/
 67
 68$.widget("ui.inputoverlay", 
 69{
 70	_init: function() 
 71	{
 72		var self = this;
 73		var obj  = this.element;
 74		var input = $('input', obj);
 75		var span = $('span', obj);
 76		
 77		if (!input.length) {
 78			input = $('textarea', obj);
 79		}
 80
 81	    var func = function(focus) {
 82		    if ($(input).val() == "") {
 83		        if (focus) {
 84    		        $(span).removeClass('hidden').addClass('focus');
 85		        } else {
 86    		        $(span).removeClass('hidden').removeClass('focus');
 87		        }
 88		    } else {
 89		        $(span).removeClass('focus').addClass('hidden');
 90		    }
 91		};
 92		
 93		input.change(function() {
 94		    func(true);
 95		}).focus(function() {
 96		    func(true);
 97		}).blur(function() {
 98		    func(false);
 99		}).keydown(function() {
100		    setTimeout(function(){func(true);},10);
101		}).keyup(function() {
102		    func(true);
103		});
104		
105		input.closest("form").bind("reset", function() {
106		    setTimeout(function(){func(true);},10);
107		});
108		
109		span.click(function() {
110			input.focus();
111		});
112		
113		if (input.attr('autocomplete') == 'on') {
114    	    setInterval(function() {
115    		    if ($(input).val() == "") {
116    		        $(span).removeClass('hidden');
117    		    } else {
118    		        $(span).addClass('hidden');
119    		    }
120    		}, 100);
121		}
122    }    
123});