[Jifty-commit] r1619 - in jifty/trunk: lib/Jifty/Web/Form share/web/static/js

[jifty-commit at lists.jifty.org]

Author: nelhage
Date: Wed Jul 19 16:57:34 2006
New Revision: 1619

Modified:
   jifty/trunk/lib/Jifty/Web/Form/Field.pm
   jifty/trunk/share/web/static/css/forms.css
   jifty/trunk/share/web/static/js/jifty.js

Log:
Adding support for placeholders, grayed-out text in form fields that is written in with JS and vanishes on focus

Modified: jifty/trunk/lib/Jifty/Web/Form/Field.pm
==============================================================================
--- jifty/trunk/lib/Jifty/Web/Form/Field.pm	(original)
+++ jifty/trunk/lib/Jifty/Web/Form/Field.pm	Wed Jul 19 16:57:34 2006
@@ -12,6 +12,7 @@
 render_as
 label
 hints
+placeholder
 length
 mandatory
 
@@ -100,8 +101,8 @@
 
 =cut
 
-sub accessors { shift->SUPER::accessors(), qw(name label input_name type sticky sticky_value default_value action mandatory ajax_validates ajax_canonicalizes autocompleter preamble hints render_mode length _element_id); }
-__PACKAGE__->mk_accessors(qw(name _label _input_name type sticky sticky_value default_value _action mandatory ajax_validates ajax_canonicalizes autocompleter preamble hints render_mode length _element_id));
+sub accessors { shift->SUPER::accessors(), qw(name label input_name type sticky sticky_value default_value action mandatory ajax_validates ajax_canonicalizes autocompleter preamble hints placeholder render_mode length _element_id); }
+__PACKAGE__->mk_accessors(qw(name _label _input_name type sticky sticky_value default_value _action mandatory ajax_validates ajax_canonicalizes autocompleter preamble hints placeholder render_mode length _element_id));
 
 =head2 name [VALUE]
 
@@ -309,6 +310,7 @@
     if ($self->render_mode eq 'update') { 
         $self->render_widget();
         $self->render_autocomplete();
+        $self->render_placeholder();
         $self->render_key_binding();
         $self->render_hints();
         $self->render_errors();
@@ -504,6 +506,27 @@
 
 }
 
+=head2 render_placeholder
+
+Renders the javascript necessary to insert a placeholder into this
+form field (greyed-out text that is written in using javascript, and
+vanishes when the user focuses the field). Returns an empty string.
+
+=cut
+
+sub render_placeholder {
+    my $self = shift;
+    return unless $self->placeholder;
+    my $placeholder = $self->placeholder;
+    $placeholder =~ s{(['\\])}{(\\$1)}g;
+    Jifty->web->out(
+qq!<script type="text/javascript">
+     new Jifty.Placeholder('@{[$self->element_id]}', '$placeholder');
+   </script>
+!
+        );
+}
+
 =head2 render_hints
 
 Renders any hints for using this input.  Defaults to nothing, though

Modified: jifty/trunk/share/web/static/css/forms.css
==============================================================================
--- jifty/trunk/share/web/static/css/forms.css	(original)
+++ jifty/trunk/share/web/static/css/forms.css	Wed Jul 19 16:57:34 2006
@@ -139,3 +139,7 @@
 .selected {
     background: #dddddd;
 }
+
+input.placeholder {
+    color: #666;
+}
\ No newline at end of file

Modified: jifty/trunk/share/web/static/js/jifty.js
==============================================================================
--- jifty/trunk/share/web/static/js/jifty.js	(original)
+++ jifty/trunk/share/web/static/js/jifty.js	Wed Jul 19 16:57:34 2006
@@ -700,6 +700,8 @@
         
         alert("Unable to connect to server.\n\nTry again in a few minutes.");
 
+	Jifty.failedRequest = transport;
+
         var keys = request["actions"].keys();
         for ( var i = 0; i < keys.length; i++ ) {
             var a = new Action( request["actions"][ keys[i] ].moniker );
@@ -894,6 +896,35 @@
 
 });
 
+Jifty.Placeholder = Class.create();
+Object.extend(Jifty.Placeholder.prototype, {
+  element: null,
+  text: null,
+
+  initialize: function(element, text) {
+     this.element = $(element);
+     this.text = text;
+     Event.observe(element, 'focus', this.onFocus.bind(this));
+     Event.observe(element, 'blur', this.onBlur.bind(this));
+     this.onBlur();
+  },
+
+  onBlur: function() {
+     if(this.element.value == '') {
+       this.element.value = this.text;
+       Element.addClassName(this.element, 'placeholder');
+     }
+  },
+
+  onFocus: function() {
+      if(Element.hasClassName(this.element, 'placeholder')) {
+        this.element.value = '';
+        Element.removeClassName(this.element, 'placeholder');
+      }
+  }
+	    
+});
+
 
 // Define hasOwnProperty for Safari
 if( !Object.prototype.hasOwnProperty ) {