Blame view

sources/core/js/jquery.infieldlabel.js 5.36 KB
31b7f2792   Kload   Upgrade to ownclo...
1
2
3
4
5
6
7
8
9
  /*
   * jquery.infieldlabel
   * A simple jQuery plugin for adding labels that sit over a form field and fade away when the fields are populated.
   * 
   * Copyright (c) 2009 - 2013 Doug Neiner <doug@dougneiner.com> (http://code.dougneiner.com)
   * Source: https://github.com/dcneiner/In-Field-Labels-jQuery-Plugin
   * Dual licensed MIT or GPL
   *   MIT (http://www.opensource.org/licenses/mit-license)
   *   GPL (http://www.opensource.org/licenses/gpl-license)
03e52840d   Kload   Init
10
   *
31b7f2792   Kload   Upgrade to ownclo...
11
   * @version 0.1.3
03e52840d   Kload   Init
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   */
  (function ($) {
  
    $.InFieldLabels = function (label, field, options) {
      // To avoid scope issues, use 'base' instead of 'this'
      // to reference this class from internal events and functions.
      var base = this;
    
      // Access to jQuery and DOM versions of each element
      base.$label = $(label);
      base.label  = label;
  
      base.$field = $(field);
      base.field  = field;
  
      base.$label.data("InFieldLabels", base);
      base.showing = true;
  
      base.init = function () {
31b7f2792   Kload   Upgrade to ownclo...
31
        var initialSet;
03e52840d   Kload   Init
32
33
        // Merge supplied options with default options
        base.options = $.extend({}, $.InFieldLabels.defaultOptions, options);
31b7f2792   Kload   Upgrade to ownclo...
34
        // Check if the field is already filled in 
03e52840d   Kload   Init
35
36
37
38
39
        // add a short delay to handle autocomplete
        setTimeout(function() {
          if (base.$field.val() !== "") {
            base.$label.hide();
            base.showing = false;
31b7f2792   Kload   Upgrade to ownclo...
40
41
42
          } else {
            base.$label.show();
            base.showing = true;
03e52840d   Kload   Init
43
44
45
46
47
48
49
50
51
52
53
          }
        }, 200);
  
        base.$field.focus(function () {
          base.fadeOnFocus();
        }).blur(function () {
          base.checkForEmpty(true);
        }).bind('keydown.infieldlabel', function (e) {
          // Use of a namespace (.infieldlabel) allows us to
          // unbind just this method later
          base.hideOnChange(e);
31b7f2792   Kload   Upgrade to ownclo...
54
        }).bind('paste', function () {
03e52840d   Kload   Init
55
56
57
          // Since you can not paste an empty string we can assume
          // that the fieldis not empty and the label can be cleared.
          base.setOpacity(0.0);
31b7f2792   Kload   Upgrade to ownclo...
58
        }).change(function () {
03e52840d   Kload   Init
59
60
61
62
          base.checkForEmpty();
        }).bind('onPropertyChange', function () {
          base.checkForEmpty();
        }).bind('keyup.infieldlabel', function () {
31b7f2792   Kload   Upgrade to ownclo...
63
          base.checkForEmpty();
03e52840d   Kload   Init
64
        });
31b7f2792   Kload   Upgrade to ownclo...
65
66
67
68
69
70
71
72
73
74
75
  
        if ( base.options.pollDuration > 0 ) {
          initialSet = setInterval( function () {
          if (base.$field.val() !== "") {
            base.$label.hide();
            base.showing = false;
            clearInterval( initialSet );
          }
        }, base.options.pollDuration );
  
        }
03e52840d   Kload   Init
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
      };
  
      // If the label is currently showing
      // then fade it down to the amount
      // specified in the settings
      base.fadeOnFocus = function () {
        if (base.showing) {
          base.setOpacity(base.options.fadeOpacity);
        }
      };
  
      base.setOpacity = function (opacity) {
        base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
        base.showing = (opacity > 0.0);
      };
  
      // Checks for empty as a fail safe
      // set blur to true when passing from
      // the blur event
      base.checkForEmpty = function (blur) {
        if (base.$field.val() === "") {
          base.prepForShow();
          base.setOpacity(blur ? 1.0 : base.options.fadeOpacity);
        } else {
          base.setOpacity(0.0);
        }
      };
31b7f2792   Kload   Upgrade to ownclo...
103
      base.prepForShow = function () {
03e52840d   Kload   Init
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
        if (!base.showing) {
          // Prepare for a animate in...
          base.$label.css({opacity: 0.0}).show();
  
          // Reattach the keydown event
          base.$field.bind('keydown.infieldlabel', function (e) {
            base.hideOnChange(e);
          });
        }
      };
  
      base.hideOnChange = function (e) {
        if (
            (e.keyCode === 16) || // Skip Shift
            (e.keyCode === 9) // Skip Tab
          ) {
          return; 
        }
  
        if (base.showing) {
          base.$label.hide();
          base.showing = false;
        }
  
        // Remove keydown event to save on CPU processing
        base.$field.unbind('keydown.infieldlabel');
      };
  
      // Run the initialization method
      base.init();
    };
  
    $.InFieldLabels.defaultOptions = {
      fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
31b7f2792   Kload   Upgrade to ownclo...
138
139
140
      fadeDuration: 300, // How long should it take to animate from 1.0 opacity to the fadeOpacity
      pollDuration: 0, // If set to a number greater than zero, this will poll until content is detected in a field
      enabledInputTypes: [ "text", "search", "tel", "url", "email", "password", "number", "textarea" ]
03e52840d   Kload   Init
141
142
143
144
    };
  
  
    $.fn.inFieldLabels = function (options) {
31b7f2792   Kload   Upgrade to ownclo...
145
      var allowed_types = options && options.enabledInputTypes || $.InFieldLabels.defaultOptions.enabledInputTypes;
03e52840d   Kload   Init
146
147
148
149
      return this.each(function () {
        // Find input or textarea based on for= attribute
        // The for attribute on the label must contain the ID
        // of the input or textarea element
31b7f2792   Kload   Upgrade to ownclo...
150
        var for_attr = $(this).attr('for'), field, restrict_type;
03e52840d   Kload   Init
151
152
153
154
155
        if (!for_attr) {
          return; // Nothing to attach, since the for field wasn't used
        }
  
        // Find the referenced input or textarea element
31b7f2792   Kload   Upgrade to ownclo...
156
157
158
159
160
161
162
163
164
        field = document.getElementById( for_attr );
        if ( !field ) {
          return; // No element found
        }
  
        // Restrict input type
        restrict_type = $.inArray( field.type, allowed_types );
  
        if ( restrict_type === -1 && field.nodeName !== "TEXTAREA" ) {
03e52840d   Kload   Init
165
166
          return; // Again, nothing to attach
        } 
31b7f2792   Kload   Upgrade to ownclo...
167
168
        // Only create object for matched input types and textarea
        (new $.InFieldLabels(this, field, options));
03e52840d   Kload   Init
169
170
      });
    };
31b7f2792   Kload   Upgrade to ownclo...
171
  }(jQuery));