Moved the HTML5 placeholder attribute emulation in ext.vector.simpleSearch into it...

diff --git a/resources/Resources.php b/resources/Resources.php
index b86af7a..7d36f50 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -48,6 +48,9 @@ return array(
        'jquery.highlightText' => new ResourceLoaderFileModule(
                array( 'scripts' => 'resources/jquery/jquery.highlightText.js' )
        ),
+       'jquery.placeholder' => new ResourceLoaderFileModule(
+               array( 'scripts' => 'resources/jquery/jquery.placeholder.js' )
+       ),
        'jquery.suggestions' => new ResourceLoaderFileModule(
                array(
                        'scripts' => 'resources/jquery/jquery.suggestions.js',

diff --git a/resources/jquery/jquery.placeholder.js b/resources/jquery/jquery.placeholder.js
new file mode 100644 (file)
index 0000000..407b1a9
--- /dev/null
+++ b/resources/jquery/jquery.placeholder.js
@@ -0,0 +1,48 @@
+/**
+ * HTML5 placeholder emulation for jQuery plugin
+ * 
+ * This will automatically use the HTML5 placeholder attribute if supported, or emulate this behavior if not.
+ * 
+ * @author Trevor Parscal <tparscal@wikimedia.org>
+ * @version 0.1.0
+ * @license GPL v2
+ */
+
+jQuery.fn.placeholder = function( text ) {
+       // If the HTML5 placeholder attribute is supported, use it
+       if ( 'placeholder' in document.createElement( 'input' ) ) {
+               jQuery(this).attr( 'placeholder', text );
+       }
+       // Otherwise, use a combination of blur and focus event handlers and a placeholder class
+       else {
+               jQuery(this).each( function() {
+                       $input = jQuery(this);
+                       $input
+                               // Show on blur if empty
+                               .bind( 'blur', function() {
+                                       if ( $input.val().length == 0 ) {
+                                               $input
+                                                       .val( text )
+                                                       .addClass( 'placeholder' );
+                                               }
+                                       } )
+                               // Hide on focus
+                               .bind( 'focus', function() {
+                                       if ( $input.hasClass( 'placeholder' ) ) {
+                                               $input
+                                                       .val( '' )
+                                                       .removeClass( 'placeholder' );
+                                       }
+                               } )
+                               // Blank on submit -- prevents submitting with unintended value
+                               .parents( 'form' )
+                                       .bind( 'submit', function() {
+                                               $input.trigger( 'focus' );
+                                       } );
+                       // Show initially, if empty
+                       if ( $input.val() == '' ) {
+                               $input.trigger( 'blur' );
+                       }
+               } );
+       }
+};