code.grnet.gr Git - astakos/blob - snf-astakos-app/astakos/im/static/im/js/jquery.infieldlabel.js

   1 /*
   2  * In-Field Label jQuery Plugin
   3  * http://fuelyourcoding.com/scripts/infield.html
   4  *
   5  * Copyright (c) 2009 Doug Neiner
   6  * Dual licensed under the MIT and GPL licenses.
   7  * Uses the same license as jQuery, see:
   8  * http://docs.jquery.com/License
   9  *
  10  * @version 0.1
  11  */
  12 (function($){
  13
  14     $.InFieldLabels = function(label,field, options){
  15         // To avoid scope issues, use 'base' instead of 'this'
  16         // to reference this class from internal events and functions.
  17         var base = this;
  18
  19         // Access to jQuery and DOM versions of each element
  20         base.$label = $(label);
  21         base.label = label;
  22
  23                 base.$field = $(field);
  24                 base.field = field;
  25
  26                 base.$label.data("InFieldLabels", base);
  27                 base.showing = true;
  28
  29         base.init = function(){
  30                         // Merge supplied options with default options
  31             base.options = $.extend({},$.InFieldLabels.defaultOptions, options);
  32
  33                         // Check if the field is already filled in
  34                         if(base.$field.val() != ""){
  35                                 base.$label.hide();
  36                                 base.showing = false;
  37                         };
  38                         base.$field.focus(function(){
  39                                 base.fadeOnFocus();
  40                         }).blur(function(){
  41                                 base.checkForEmpty(true);
  42                         }).bind('keydown.infieldlabel',function(e){
  43                                 // Use of a namespace (.infieldlabel) allows us to
  44                                 // unbind just this method later
  45                                 base.hideOnChange(e);
  46                         }).change(function(e){
  47                                 base.checkForEmpty();
  48                         }).bind('onPropertyChange', function(){
  49                                 base.checkForEmpty();
  50                         });
  51         };
  52
  53                 // If the label is currently showing
  54                 // then fade it down to the amount
  55                 // specified in the settings
  56                 base.fadeOnFocus = function(){
  57                         if(base.showing){
  58                                 base.setOpacity(base.options.fadeOpacity);
  59                         };
  60                 };
  61
  62                 base.setOpacity = function(opacity){
  63                         base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
  64                         base.showing = (opacity > 0.0);
  65                 };
  66
  67                 // Checks for empty as a fail safe
  68                 // set blur to true when passing from
  69                 // the blur event
  70                 base.checkForEmpty = function(blur){
  71                         if(base.$field.val() == ""){
  72                                 base.prepForShow();
  73                                 base.setOpacity( blur ? 1.0 : base.options.fadeOpacity );
  74                         } else {
  75                                 base.setOpacity(0.0);
  76                         };
  77                 };
  78
  79                 base.prepForShow = function(e){
  80                         if(!base.showing) {
  81                                 // Prepare for a animate in...
  82                                 base.$label.css({opacity: 0.0}).show();
  83
  84                                 // Reattach the keydown event
  85                                 base.$field.bind('keydown.infieldlabel',function(e){
  86                                         base.hideOnChange(e);
  87                                 });
  88                         };
  89                 };
  90
  91                 base.hideOnChange = function(e){
  92                         if(
  93                                 (e.keyCode == 16) || // Skip Shift
  94                                 (e.keyCode == 9) // Skip Tab
  95                           ) return;
  96
  97                         if(base.showing){
  98                                 base.$label.hide();
  99                                 base.showing = false;
 100                         };
 101
 102                         // Remove keydown event to save on CPU processing
 103                         base.$field.unbind('keydown.infieldlabel');
 104
 105             // ff3.5 fix, forces key to be written in input field
 106             base.$field.val('');
 107                 };
 108
 109                 // Run the initialization method
 110         base.init();
 111     };
 112
 113     $.InFieldLabels.defaultOptions = {
 114         fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
 115                 fadeDuration: 300 // How long should it take to animate from 1.0 opacity to the fadeOpacity
 116     };
 117
 118
 119     $.fn.inFieldLabels = function(options){
 120         return this.each(function(){
 121                         // Find input or textarea based on for= attribute
 122                         // The for attribute on the label must contain the ID
 123                         // of the input or textarea element
 124                         var for_attr = $(this).attr('for');
 125                         if( !for_attr ) return; // Nothing to attach, since the for field wasn't used
 126
 127
 128                         // Find the referenced input or textarea element
 129                         var $field = $(
 130                                 "input#" + for_attr + "[type='text']," +
 131                                 "input#" + for_attr + "[type='password']," +
 132                                 "textarea#" + for_attr
 133                                 );
 134
 135                         if( $field.length == 0) return; // Again, nothing to attach
 136
 137                         // Only create object for input[text], input[password], or textarea
 138             (new $.InFieldLabels(this, $field[0], options));
 139         });
 140     };
 141
 142 })(jQuery);