Merge branch 'input-placeholders' of https://github.com/Raven24/diaspora into Raven24-input-placeholders

app/views/invitations/new.html.haml

@@ -13,7 +13,7 @@
       = form_for User.new, :url => invitation_path(User) do |invite|
         %h4
           = t('email')
-        = invite.text_field :email, :title => t('.comma_seperated_plz')
+        = invite.text_field :email, :title => t('.comma_seperated_plz'), :placeholder => 'foo@bar.com, max@foo.com...'
         %br
 
         %h4
@@ -32,7 +32,7 @@
 
         %h4
           = t('.personal_message')
-        = invite.text_area :invite_messages, :rows => 3, :value => ""
+        = invite.text_area :invite_messages, :rows => 3, :value => t('.check_out_diaspora')
 
         %p
           = invite.submit t('.send_an_invitation')

app/views/profiles/_edit_public.haml

@@ -40,17 +40,18 @@
 
 %h4
   = t('profiles.edit.your_name')
-= text_field_tag 'profile[first_name]', profile.first_name, :placeholder => t('profiles.edit.first_name')
-= text_field_tag 'profile[last_name]', profile.last_name, :placeholder => t('profiles.edit.last_name')
+= label_tag 'profile[first_name]', t('profiles.edit.first_name')
+= text_field_tag 'profile[first_name]', profile.first_name, :placeholder => "Raphael"
+
+= label_tag 'profile[first_name]', t('profiles.edit.last_name')
+= text_field_tag 'profile[last_name]', profile.last_name, :placeholder => "Sofaer"
 
 %br
 
 %h4
   = t('profiles.edit.your_tags')
 
-= text_field_tag 'profile[tag_string]', ""
-%p{:style => "color:#777;font-style:italic"}
-  = t('profiles.edit.your_tags_placeholder')
+= text_field_tag 'profile[tag_string]', "", :placeholder => t('profiles.edit.your_tags_placeholder')
 
 %br
 

app/views/sessions/new.haml

@@ -1,4 +1,4 @@
--#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+-#   Copyright (c) 2010-2012, Diaspora Inc.  This file is
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
@@ -27,18 +27,18 @@
 
       %p
         = f.label :username , t('username')
-        = f.text_field :username, :tabindex => 1, :value => prefilled_username
+        = f.text_field :username, :tabindex => 1, :value => prefilled_username, :placeholder => t('username')
       %br
 
       %p
         = f.label :password , t('password')
-        = f.password_field :password, :tabindex => 2
+        = f.password_field :password, :tabindex => 2, :placeholder => t('password')
 
         - if display_password_reset_link?
           = link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), :id => "forgot_password_link", :tabindex => 5
 
       %br
-      %p#controls
+      %p#controls.checkbox_select
         %span#remember_me
           - if devise_mapping.rememberable?
             = f.check_box :remember_me, :tabindex => 3

app/views/users/edit.html.haml

@@ -38,16 +38,15 @@
     = t('.change_password')
   = form_for 'user', :url => user_path, :html => { :method => :put } do |f|
     = f.error_messages
-
     %p
       = f.label :current_password, t('.current_password')
-      = f.password_field :current_password
+      = f.password_field :current_password, :placeholder => "the one you sign in with..."
     %p
       = f.label :password, t('.new_password')
-      = f.password_field :password
+      = f.password_field :password, :placeholder => 'must be at least six charaters'
     %p
       = f.label :password_confirmation, t('password_confirmation')
-      = f.password_field :password_confirmation
+      = f.password_field :password_confirmation, :placeholder => 'must be at least six charaters'
 
     .submit_block
       = link_to t('cancel'), edit_user_path

config/assets.yml

@@ -28,6 +28,7 @@ javascripts:
     - public/javascripts/vendor/jquery-ui-1.8.9.custom.min.js
     - public/javascripts/vendor/jquery.charcount.js
     - public/javascripts/vendor/jquery.expander.js
+    - public/javascripts/vendor/jquery.placeholder.js
     - public/javascripts/vendor/timeago.js
     - public/javascripts/vendor/facebox.js
     - public/javascripts/vendor/underscore.js
@@ -36,7 +37,6 @@ javascripts:
     - public/javascripts/vendor/jquery.mentionsInput.js
     - public/javascripts/jquery.infinitescroll-custom.js
     - public/javascripts/jquery.autocomplete-custom.js
-    - public/javascripts/jquery.infieldlabel-custom.js
     - public/javascripts/keycodes.js
     - public/javascripts/fileuploader-custom.js
 

public/javascripts/jquery.infieldlabel-custom.js

@@ -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));

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 = $('<input>').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));

public/javascripts/view.js

@@ -7,11 +7,8 @@ var View = {
     /* Buttons */
     $("input:submit").addClass("button");
 
-    /* In field labels */
-    $("label").inFieldLabels();
-    $(document).bind('afterReveal.facebox', function() {
-      jQuery("#facebox label").inFieldLabels();
-    });
+    /* label placeholders */
+    $("input, textarea").placeholder();
 
     /* "Toggling" the search input */
     $(this.search.selector)

public/stylesheets/sass/application.sass

@@ -853,6 +853,7 @@ form.new_comment
 input:not([type='submit']):not([type='reset']):not([type='hidden']):not(.as-input),
 textarea
   @include border-radius(2px)
+  :margin-top 1px
 
   :font
     :family 'Arial', 'Helvetica', sans-serif
@@ -881,19 +882,36 @@ form p.checkbox_select
   label
     :left 25px
     :top 3px
+    :position absolute
+    :font-size 1em
   img
     :position relative
     :top 6px
 
-label:not(.bootstrapped)
-  :font
-    :weight normal
+@mixin placeholder_styles
   :color #999
-  :position absolute
-  :top 3px
-  :left 0.48em
-  :text
-    :shadow 0 1px 1px #eee
+  :text-shadow 0 1px 1px #eee
+  :font-weight normal
+    
+//label:not(.bootstrapped)
+  //:position absolute
+  //:top 3px
+  //:left 0.48em
+label
+  :font
+    :size .96em
+    :weight normal
+  
+  
+.placeholder
+  @include placeholder_styles
+
+/* those can't be combined, see: http://stackoverflow.com/questions/2610497 */
+*::-webkit-input-placeholder
+  @include placeholder_styles
+  
+*:-moz-placeholder
+  @include placeholder_styles
 
 #file-upload
   input
@@ -1204,6 +1222,12 @@ header #global_search
       :width 220px
       :padding 5px
 
+      &::-webkit-input-placeholder
+        :text-shadow none
+
+      &:-moz-placeholder
+        :text-shadow none
+
 .aspect
   h3
     :display inline-block

public/stylesheets/sass/login.scss

@@ -15,9 +15,6 @@
   form {
     input,
     label {
-      font: {
-        size: 14px;
-      };
       display: inline;
     }
 
@@ -34,6 +31,7 @@
       box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
       width: 180px;
       max-width: 180px;
+      font-size: 14px;
     }
 
     p {
@@ -68,7 +66,7 @@
       text-align: left;
       position: absolute;
       left: 205px;
-      top: 12px;
+      top: 2em;
       width: 150px;
       color: #aaa;
     }