From 849db2f34bf8c1c158f6e2df6b00944110ffeed7 Mon Sep 17 00:00:00 2001 From: Florian Staudacher Date: Wed, 18 Jan 2012 01:15:12 +0100 Subject: [PATCH] started moving from infieldlabel to (html5) placeholders --- .../javascripts/jquery.infieldlabel-custom.js | 156 ------------------ .../javascripts/vendor/jquery.placeholder.js | 104 ++++++++++++ 2 files changed, 104 insertions(+), 156 deletions(-) delete mode 100644 public/javascripts/jquery.infieldlabel-custom.js create mode 100644 public/javascripts/vendor/jquery.placeholder.js diff --git a/public/javascripts/jquery.infieldlabel-custom.js b/public/javascripts/jquery.infieldlabel-custom.js deleted file mode 100644 index ce1b67ff1..000000000 --- a/public/javascripts/jquery.infieldlabel-custom.js +++ /dev/null @@ -1,156 +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 - // This fucking for_attr thing is some seriously dumb shit. - // - // It must be dealt with - $field = $(this).siblings( - "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)); diff --git a/public/javascripts/vendor/jquery.placeholder.js b/public/javascripts/vendor/jquery.placeholder.js new file mode 100644 index 000000000..b4bbc7cbe --- /dev/null +++ b/public/javascripts/vendor/jquery.placeholder.js @@ -0,0 +1,104 @@ +/*! http://mths.be/placeholder v1.8.7 by @mathias */ +;(function(window, document, $) { + + var isInputSupported = 'placeholder' in document.createElement('input'), + isTextareaSupported = 'placeholder' in document.createElement('textarea'), + prototype = $.fn, + placeholder; + + if (isInputSupported && isTextareaSupported) { + + placeholder = prototype.placeholder = function() { + return this; + }; + + placeholder.input = placeholder.textarea = true; + + } else { + + placeholder = prototype.placeholder = function() { + return this + .filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]') + .not('.placeholder') + .bind('focus.placeholder', clearPlaceholder) + .bind('blur.placeholder', setPlaceholder) + .trigger('blur.placeholder').end(); + }; + + placeholder.input = isInputSupported; + placeholder.textarea = isTextareaSupported; + + $(function() { + // Look for forms + $(document).delegate('form', 'submit.placeholder', function() { + // Clear the placeholder values so they don’t get submitted + var $inputs = $('.placeholder', this).each(clearPlaceholder); + setTimeout(function() { + $inputs.each(setPlaceholder); + }, 10); + }); + }); + + // Clear placeholder values upon page reload + $(window).bind('unload.placeholder', function() { + $('.placeholder').val(''); + }); + + } + + function args(elem) { + // Return an object of element attributes + var newAttrs = {}, + rinlinejQuery = /^jQuery\d+$/; + $.each(elem.attributes, function(i, attr) { + if (attr.specified && !rinlinejQuery.test(attr.name)) { + newAttrs[attr.name] = attr.value; + } + }); + return newAttrs; + } + + function clearPlaceholder() { + var $input = $(this); + if ($input.val() === $input.attr('placeholder') && $input.hasClass('placeholder')) { + if ($input.data('placeholder-password')) { + $input.hide().next().show().focus().attr('id', $input.removeAttr('id').data('placeholder-id')); + } else { + $input.val('').removeClass('placeholder'); + } + } + } + + function setPlaceholder() { + var $replacement, + $input = $(this), + $origInput = $input, + id = this.id; + if ($input.val() === '') { + if ($input.is(':password')) { + if (!$input.data('placeholder-textinput')) { + try { + $replacement = $input.clone().attr({ 'type': 'text' }); + } catch(e) { + $replacement = $('').attr($.extend(args(this), { 'type': 'text' })); + } + $replacement + .removeAttr('name') + // We could just use the `.data(obj)` syntax here, but that wouldn’t work in pre-1.4.3 jQueries + .data('placeholder-password', true) + .data('placeholder-id', id) + .bind('focus.placeholder', clearPlaceholder); + $input + .data('placeholder-textinput', $replacement) + .data('placeholder-id', id) + .before($replacement); + } + $input = $input.removeAttr('id').hide().prev().attr('id', id).show(); + } + $input.addClass('placeholder').val($input.attr('placeholder')); + } else { + $input.removeClass('placeholder'); + } + } + +}(this, document, jQuery)); \ No newline at end of file