updated jquery-infieldlabel from 0.1.2 to 0.2.1
Source: https://github.com/instanceofme/jquery-infieldlabels/
This commit is contained in:
Mikael Nordfeldth
parent
4f065d6483
commit
0731207186
|
|
@ -0,0 +1,168 @@
|
|||
/**
|
||||
* @license In-Field Label jQuery Plugin
|
||||
* http://fuelyourcoding.com/scripts/infield.html
|
||||
* http://github.com/streetpc/jquery-infieldlabels
|
||||
*
|
||||
* Copyright (c) 2009 Doug Neiner, Adrien Lavoillotte
|
||||
* Dual licensed under the MIT and GPL licenses, see:
|
||||
* http://docs.jquery.com/License
|
||||
*
|
||||
* @version 0.2.1
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
// private constants
|
||||
// - states
|
||||
var BLUR = 0, // field is empty & unfocused
|
||||
FOCUS = 1, // field is empty & focused
|
||||
NOT_EMPTY = 2, // field is not empty
|
||||
// - accepted input type
|
||||
INPUT_TYPE = /^(?:text|password|search|number|tel|url|email|date(?:time(?:-local)?)?|time|month|week)?$/,
|
||||
// - state transitions
|
||||
T = function(from, to) { return (from << 3) | to; },
|
||||
TRANSITIONS = {};
|
||||
|
||||
// init transitions
|
||||
TRANSITIONS[T( FOCUS, BLUR )] = function(base) { base.fadeTo(1.0); };
|
||||
TRANSITIONS[T( NOT_EMPTY, BLUR )] = function(base) { base.$label.css({opacity: 1.0}).show(); base.emptied(true); };
|
||||
TRANSITIONS[T( BLUR, FOCUS )] = function(base) { base.fadeTo(base.options.fadeOpacity); };
|
||||
TRANSITIONS[T( NOT_EMPTY, FOCUS )] = function(base) { base.$label.css({opacity: base.options.fadeOpacity}).show(); base.emptied(true); };
|
||||
TRANSITIONS[T( BLUR, NOT_EMPTY )] = function(base) { base.$label.hide(); base.emptied(false); };
|
||||
TRANSITIONS[T( FOCUS, NOT_EMPTY )] = TRANSITIONS[T( BLUR, NOT_EMPTY )];
|
||||
|
||||
$.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.state = BLUR;
|
||||
|
||||
base.init = function () {
|
||||
// Merge supplied options with default options
|
||||
base.options = $.extend({}, $.InFieldLabels.defaultOptions, options);
|
||||
|
||||
if (base.options.labelClass) {
|
||||
base.$label.addClass(base.options.labelClass);
|
||||
}
|
||||
if (base.options.disableAutocomplete) {
|
||||
base.$field.attr('autocomplete', 'off');
|
||||
}
|
||||
|
||||
base.$field
|
||||
.bind('blur focus change keyup.infield cut', base.updateState)
|
||||
// paste cannot be empty
|
||||
.bind('paste', function(e){ base.setState(NOT_EMPTY); });
|
||||
|
||||
base.updateState();
|
||||
};
|
||||
|
||||
base.emptied = function(empty) {
|
||||
if (!base.options.emptyWatch) {
|
||||
if (empty) {
|
||||
// namespace ensures we unbind only our handler
|
||||
base.$field.bind('keyup.infield', base.updateState);
|
||||
} else {
|
||||
// save CPU but won't detect empty until blur
|
||||
base.$field.unbind('keyup.infield', base.updateState);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
base.fadeTo = function (opacity) {
|
||||
if (!base.options.fadeDuration) {
|
||||
base.$label.css({ opacity: opacity });
|
||||
} else {
|
||||
base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
|
||||
}
|
||||
};
|
||||
|
||||
base.updateState = function (e, nl) {
|
||||
var state = NOT_EMPTY;
|
||||
if (base.field.value === '') {
|
||||
var focus = e && e.type;
|
||||
if (focus === 'focus' || focus === 'keyup') {
|
||||
focus = true;
|
||||
} else if (focus === 'blur' || focus === 'change') {
|
||||
focus = false;
|
||||
} else { // last resort because slowest
|
||||
focus = base.$field.is(':focus');
|
||||
}
|
||||
state = focus ? FOCUS : BLUR;
|
||||
}
|
||||
base.setState(state, nl);
|
||||
};
|
||||
|
||||
base.setState = function (state, nl) {
|
||||
if (state === base.state) {
|
||||
return;
|
||||
}
|
||||
|
||||
var transition = TRANSITIONS[T(base.state, state)];
|
||||
if (typeof transition === 'function') {
|
||||
transition(base);
|
||||
base.state = state;
|
||||
} else { // unkown transition - shouldn't happen
|
||||
// nl avoids looping
|
||||
nl || base.updateState(null, true);
|
||||
}
|
||||
};
|
||||
|
||||
// Run the initialization method
|
||||
base.init();
|
||||
};
|
||||
|
||||
$.InFieldLabels.defaultOptions = {
|
||||
emptyWatch: true, // Keep watching the field as the user types (slower but brings back the label immediately when the field is emptied)
|
||||
disableAutocomplete: true, // Disable autocomplete on the matched fields
|
||||
fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
|
||||
fadeDuration: 300, // How long should it take to animate from 1.0 opacity to the fadeOpacity
|
||||
labelClass: 'in-field' // CSS class to apply to the label when it gets in-field
|
||||
};
|
||||
|
||||
|
||||
$.fn.inFieldLabels = function (options) {
|
||||
return this.each(function () {
|
||||
if (this.tagName !== 'LABEL') {
|
||||
return;
|
||||
}
|
||||
// Find input or textarea based on for= attribute
|
||||
// The for attribute on the label must contain the ID
|
||||
// of the input or textarea element
|
||||
var for_attr = this.getAttribute('for') || this.htmlFor,
|
||||
field, valid = true;
|
||||
if (!for_attr) {
|
||||
return; // Nothing to attach, since the for field wasn't used
|
||||
}
|
||||
|
||||
// Find the referenced input or textarea element
|
||||
field = document.getElementById(for_attr);
|
||||
if (!field) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (field.tagName === 'INPUT') {
|
||||
valid = INPUT_TYPE.test(field.type.toLowerCase());
|
||||
} else if (field.tagName !== 'TEXTAREA') {
|
||||
valid = false;
|
||||
}
|
||||
|
||||
valid = valid && !field.getAttribute('placeholder');
|
||||
|
||||
if (!valid) {
|
||||
return; // Again, nothing to attach
|
||||
}
|
||||
|
||||
// Only create object for input[text], input[password], or textarea
|
||||
(new $.InFieldLabels(this, field, options));
|
||||
});
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/**
|
||||
* In-Field Label jQuery Plugin v0.2.1
|
||||
* http://fuelyourcoding.com/scripts/infield.html
|
||||
* http://github.com/streetpc/jquery-infieldlabels
|
||||
*
|
||||
* Copyright (c) 2009 Doug Neiner, Adrien Lavoillotte
|
||||
* Dual licensed under the MIT and GPL licenses, see:
|
||||
* http://docs.jquery.com/License
|
||||
*/
|
||||
(function(f){var d=0,a=1,b=2,g=/^(?:text|password|search|number|tel|url|email|date(?:time(?:-local)?)?|time|month|week)?$/,c=function(i,h){return(i<<3)|h},e={};e[c(a,d)]=function(h){h.fadeTo(1)};e[c(b,d)]=function(h){h.$label.css({opacity:1}).show();h.emptied(true)};e[c(d,a)]=function(h){h.fadeTo(h.options.fadeOpacity)};e[c(b,a)]=function(h){h.$label.css({opacity:h.options.fadeOpacity}).show();h.emptied(true)};e[c(d,b)]=function(h){h.$label.hide();h.emptied(false)};e[c(a,b)]=e[c(d,b)];f.InFieldLabels=function(i,k,h){var j=this;j.$label=f(i);j.label=i;j.$field=f(k);j.field=k;j.$label.data("InFieldLabels",j);j.state=d;j.init=function(){j.options=f.extend({},f.InFieldLabels.defaultOptions,h);if(j.options.labelClass){j.$label.addClass(j.options.labelClass)}if(j.options.disableAutocomplete){j.$field.attr("autocomplete","off")}j.$field.bind("blur focus change keyup.infield cut",j.updateState).bind("paste",function(l){j.setState(b)});j.updateState()};j.emptied=function(l){if(!j.options.emptyWatch){if(l){j.$field.bind("keyup.infield",j.updateState)}else{j.$field.unbind("keyup.infield",j.updateState)}}};j.fadeTo=function(l){if(!j.options.fadeDuration){j.$label.css({opacity:l})}else{j.$label.stop().animate({opacity:l},j.options.fadeDuration)}};j.updateState=function(o,m){var n=b;if(j.field.value===""){var l=o&&o.type;if(l==="focus"||l==="keyup"){l=true}else{if(l==="blur"||l==="change"){l=false}else{l=j.$field.is(":focus")}}n=l?a:d}j.setState(n,m)};j.setState=function(m,l){if(m===j.state){return}var n=e[c(j.state,m)];if(typeof n==="function"){n(j);j.state=m}else{l||j.updateState(null,true)}};j.init()};f.InFieldLabels.defaultOptions={emptyWatch:true,disableAutocomplete:true,fadeOpacity:0.5,fadeDuration:300,labelClass:"in-field"};f.fn.inFieldLabels=function(h){return this.each(function(){if(this.tagName!=="LABEL"){return}var k=this.getAttribute("for")||this.htmlFor,j,i=true;if(!k){return}j=document.getElementById(k);if(!j){return}if(j.tagName==="INPUT"){i=g.test(j.type.toLowerCase())}else{if(j.tagName!=="TEXTAREA"){i=false}}i=i&&!j.getAttribute("placeholder");if(!i){return}(new f.InFieldLabels(this,j,h))})}}(jQuery));
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
/**
|
||||
* @license In-Field Label jQuery Plugin
|
||||
* http://fuelyourcoding.com/scripts/infield.html
|
||||
*
|
||||
* Copyright (c) 2009-2010 Doug Neiner
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* Uses the same license as jQuery, see:
|
||||
* http://docs.jquery.com/License
|
||||
*
|
||||
* @version 0.1.2
|
||||
*/
|
||||
(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 () {
|
||||
// Merge supplied options with default options
|
||||
base.options = $.extend({}, $.InFieldLabels.defaultOptions, options);
|
||||
|
||||
// Check if the field is already filled in
|
||||
if (base.$field.val() !== "") {
|
||||
base.$label.hide();
|
||||
base.showing = false;
|
||||
}
|
||||
|
||||
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);
|
||||
}).bind('paste', function (e) {
|
||||
// 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);
|
||||
}).change(function (e) {
|
||||
base.checkForEmpty();
|
||||
}).bind('onPropertyChange', function () {
|
||||
base.checkForEmpty();
|
||||
});
|
||||
};
|
||||
|
||||
// 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);
|
||||
}
|
||||
};
|
||||
|
||||
base.prepForShow = function (e) {
|
||||
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
|
||||
fadeDuration: 300 // How long should it take to animate from 1.0 opacity to the fadeOpacity
|
||||
};
|
||||
|
||||
|
||||
$.fn.inFieldLabels = function (options) {
|
||||
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
|
||||
var for_attr = $(this).attr('for'), $field;
|
||||
if (!for_attr) {
|
||||
return; // Nothing to attach, since the for field wasn't used
|
||||
}
|
||||
|
||||
// Find the referenced input or textarea element
|
||||
$field = $(
|
||||
"input#" + for_attr + "[type='text']," +
|
||||
"input#" + for_attr + "[type='search']," +
|
||||
"input#" + for_attr + "[type='tel']," +
|
||||
"input#" + for_attr + "[type='url']," +
|
||||
"input#" + for_attr + "[type='email']," +
|
||||
"input#" + for_attr + "[type='password']," +
|
||||
"textarea#" + for_attr
|
||||
);
|
||||
|
||||
if ($field.length === 0) {
|
||||
return; // Again, nothing to attach
|
||||
}
|
||||
|
||||
// Only create object for input[text], input[password], or textarea
|
||||
(new $.InFieldLabels(this, $field[0], options));
|
||||
});
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
/*
|
||||
In-Field Label jQuery Plugin
|
||||
http://fuelyourcoding.com/scripts/infield.html
|
||||
|
||||
Copyright (c) 2009 Doug Neiner
|
||||
Dual licensed under the MIT and GPL licenses.
|
||||
Uses the same license as jQuery, see:
|
||||
http://docs.jquery.com/License
|
||||
|
||||
*/
|
||||
(function(d){d.InFieldLabels=function(e,b,f){var a=this;a.$label=d(e);a.label=e;a.$field=d(b);a.field=b;a.$label.data("InFieldLabels",a);a.showing=true;a.init=function(){a.options=d.extend({},d.InFieldLabels.defaultOptions,f);if(a.$field.val()!==""){a.$label.hide();a.showing=false}a.$field.focus(function(){a.fadeOnFocus()}).blur(function(){a.checkForEmpty(true)}).bind("keydown.infieldlabel",function(c){a.hideOnChange(c)}).bind("paste",function(){a.setOpacity(0)}).change(function(){a.checkForEmpty()}).bind("onPropertyChange",
|
||||
function(){a.checkForEmpty()})};a.fadeOnFocus=function(){a.showing&&a.setOpacity(a.options.fadeOpacity)};a.setOpacity=function(c){a.$label.stop().animate({opacity:c},a.options.fadeDuration);a.showing=c>0};a.checkForEmpty=function(c){if(a.$field.val()===""){a.prepForShow();a.setOpacity(c?1:a.options.fadeOpacity)}else a.setOpacity(0)};a.prepForShow=function(){if(!a.showing){a.$label.css({opacity:0}).show();a.$field.bind("keydown.infieldlabel",function(c){a.hideOnChange(c)})}};a.hideOnChange=function(c){if(!(c.keyCode===
|
||||
16||c.keyCode===9)){if(a.showing){a.$label.hide();a.showing=false}a.$field.unbind("keydown.infieldlabel")}};a.init()};d.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300};d.fn.inFieldLabels=function(e){return this.each(function(){var b=d(this).attr("for");if(b){b=d("input#"+b+"[type='text'],input#"+b+"[type='search'],input#"+b+"[type='tel'],input#"+b+"[type='url'],input#"+b+"[type='email'],input#"+b+"[type='password'],textarea#"+b);b.length!==0&&new d.InFieldLabels(this,b[0],e)}})}})(jQuery);
|
||||
|
|
@ -364,14 +364,14 @@ class Action extends HTMLOutputter // lawsuit
|
|||
$this->script('extlib/jquery-ui/jquery-ui.min.js');
|
||||
$this->script('jquery.cookie.min.js');
|
||||
$this->inlineScript('if (typeof window.JSON !== "object") { $.getScript("'.common_path('js/extlib/json2.min.js', StatusNet::isHTTPS()).'"); }');
|
||||
$this->script('jquery.infieldlabel.min.js');
|
||||
$this->script('extlib/jquery.infieldlabel.min.js');
|
||||
} else {
|
||||
$this->script('extlib/jquery.js');
|
||||
$this->script('extlib/jquery.form.js');
|
||||
$this->script('extlib/jquery-ui/jquery-ui.js');
|
||||
$this->script('jquery.cookie.js');
|
||||
$this->inlineScript('if (typeof window.JSON !== "object") { $.getScript("'.common_path('js/extlib/json2.js', StatusNet::isHTTPS()).'"); }');
|
||||
$this->script('jquery.infieldlabel.js');
|
||||
$this->script('extlib/jquery.infieldlabel.js');
|
||||
}
|
||||
|
||||
Event::handle('EndShowJQueryScripts', array($this));
|
||||
|
|
|
|||
Loading…
Reference in New Issue