]> git.mxchange.org Git - quix0rs-gnu-social.git/blob - js/jquery.infieldlabel.js
Merge remote-tracking branch 'origin/1.0.x' into 1.0.x
[quix0rs-gnu-social.git] / js / jquery.infieldlabel.js
1 /**
2  * @license In-Field Label jQuery Plugin
3  * http://fuelyourcoding.com/scripts/infield.html
4  *
5  * Copyright (c) 2009-2010 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.2
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
39       base.$field.focus(function () {
40         base.fadeOnFocus();
41       }).blur(function () {
42         base.checkForEmpty(true);
43       }).bind('keydown.infieldlabel', function (e) {
44         // Use of a namespace (.infieldlabel) allows us to
45         // unbind just this method later
46         base.hideOnChange(e);
47       }).bind('paste', function (e) {
48         // Since you can not paste an empty string we can assume
49         // that the fieldis not empty and the label can be cleared.
50         base.setOpacity(0.0);
51       }).change(function (e) {
52         base.checkForEmpty();
53       }).bind('onPropertyChange', function () {
54         base.checkForEmpty();
55       });
56     };
57
58     // If the label is currently showing
59     // then fade it down to the amount
60     // specified in the settings
61     base.fadeOnFocus = function () {
62       if (base.showing) {
63         base.setOpacity(base.options.fadeOpacity);
64       }
65     };
66
67     base.setOpacity = function (opacity) {
68       base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
69       base.showing = (opacity > 0.0);
70     };
71
72     // Checks for empty as a fail safe
73     // set blur to true when passing from
74     // the blur event
75     base.checkForEmpty = function (blur) {
76       if (base.$field.val() === "") {
77         base.prepForShow();
78         base.setOpacity(blur ? 1.0 : base.options.fadeOpacity);
79       } else {
80         base.setOpacity(0.0);
81       }
82     };
83
84     base.prepForShow = function (e) {
85       if (!base.showing) {
86         // Prepare for a animate in...
87         base.$label.css({opacity: 0.0}).show();
88
89         // Reattach the keydown event
90         base.$field.bind('keydown.infieldlabel', function (e) {
91           base.hideOnChange(e);
92         });
93       }
94     };
95
96     base.hideOnChange = function (e) {
97       if (
98           (e.keyCode === 16) || // Skip Shift
99           (e.keyCode === 9) // Skip Tab
100         ) {
101         return; 
102       }
103
104       if (base.showing) {
105         base.$label.hide();
106         base.showing = false;
107       }
108
109       // Remove keydown event to save on CPU processing
110       base.$field.unbind('keydown.infieldlabel');
111     };
112
113     // Run the initialization method
114     base.init();
115   };
116
117   $.InFieldLabels.defaultOptions = {
118     fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
119     fadeDuration: 300 // How long should it take to animate from 1.0 opacity to the fadeOpacity
120   };
121
122
123   $.fn.inFieldLabels = function (options) {
124     return this.each(function () {
125       // Find input or textarea based on for= attribute
126       // The for attribute on the label must contain the ID
127       // of the input or textarea element
128       var for_attr = $(this).attr('for'), $field;
129       if (!for_attr) {
130         return; // Nothing to attach, since the for field wasn't used
131       }
132
133       // Find the referenced input or textarea element
134       $field = $(
135         "input#" + for_attr + "[type='text']," + 
136         "input#" + for_attr + "[type='search']," + 
137         "input#" + for_attr + "[type='tel']," + 
138         "input#" + for_attr + "[type='url']," + 
139         "input#" + for_attr + "[type='email']," + 
140         "input#" + for_attr + "[type='password']," + 
141         "textarea#" + for_attr
142       );
143
144       if ($field.length === 0) {
145         return; // Again, nothing to attach
146       } 
147
148       // Only create object for input[text], input[password], or textarea
149       (new $.InFieldLabels(this, $field[0], options));
150     });
151   };
152
153 }(jQuery));