* Consistent single quotes
authorKrinkle <krinkle@users.mediawiki.org>
Mon, 10 Jan 2011 04:40:57 +0000 (04:40 +0000)
committerKrinkle <krinkle@users.mediawiki.org>
Mon, 10 Jan 2011 04:40:57 +0000 (04:40 +0000)
* The problem with onKeyUp was that is shows errors even when initially typing a (possibly valid) address. onBlur has the downside of not giving feedback while correcting the mistake + since e-mail is the last input element at the moment, it doesn't blur on submit and required a seperate event handler.
** Solution: Bind onBlur once, and then listen for onKeyUp.
* Adding missing semicolon(s)
* Compare with strict (===) to empty string / null
* Moved non-global wfFunction to mw.util
** The "FIXME:" note was kept
* Comment "apostrophe" fixed to "at". Comments don't run :)
* Caching selector in wfUpdateMailValidityLabel
* Renaming "wfUpdateMailValidityLabel" to "updateMailValidityLabel"
( Ping r79910, r75670, r75627  )

resources/Resources.php
resources/mediawiki.special/mediawiki.special.preferences.css
resources/mediawiki.special/mediawiki.special.preferences.js
resources/mediawiki.util/mediawiki.util.js

index 4496105..5760562 100644 (file)
@@ -358,9 +358,9 @@ return array(
                'dependencies' => 'mediawiki.util',
        ),
        'mediawiki.special.preferences' => array(
-               'messages' => array( 'email-address-validity-valid', 'email-address-validity-invalid' ),
                'scripts' => 'resources/mediawiki.special/mediawiki.special.preferences.js',
                'styles' => 'resources/mediawiki.special/mediawiki.special.preferences.css',
+               'messages' => array( 'email-address-validity-valid', 'email-address-validity-invalid' ),
        ),
        'mediawiki.special.changeslist' => array(
                'styles' => 'resources/mediawiki.special/mediawiki.special.changeslist.css',
index b6298a5..8f628a9 100644 (file)
@@ -2,12 +2,12 @@
        padding: 2px 1em;
 }
 body.ltr #mw-emailaddress-validity {
-       border-bottom-right-radius:0.8em;
-       border-top-right-radius:0.8em;
+       border-bottom-right-radius: 0.8em;
+       border-top-right-radius: 0.8em;
 }
 body.rtl #mw-emailaddress-validity {
-       border-bottom-left-radius:0.8em;
-       border-top-left-radius:0.8em;
+       border-bottom-left-radius: 0.8em;
+       border-top-left-radius: 0.8em;
 }
 #mw-emailaddress-validity.valid {
        border: 1px solid #80FF80;
index 084ed90..ad4e0a5 100644 (file)
@@ -39,119 +39,36 @@ $( '#preferences' )
                );
        } );
 
-// User preference form validation
-$( '#mw-prefs-form' )
-       .submit( function () {
-               var isValid = wfValidateEmail( $('#mw-input-wpemailaddress').val() );
-               wfUpdateMailValidityLabel( isValid );
-               if(isValid == false ) {
-                       $('#mw-input-wpemailaddress').focus();
-                       return false;
-               }
-       }
-);
-
-// Lame tip to let user know if its email is valid. See bug 22449
-$( '#mw-input-wpemailaddress' )
-       .blur( function () {
-               if( $( "#mw-emailaddress-validity" ).length == 0 ) {
-                       $(this).after( '<label for="mw-input-wpemailaddress" id="mw-emailaddress-validity"></label>' );
-               }
-               var isValid = wfValidateEmail( $(this).val() );
-               wfUpdateMailValidityLabel( isValid );
-       } );
-
 /**
  * Given an email validity status (true, false, null) update the label CSS class
  */
-wfUpdateMailValidityLabel = function( isValid ) {
-       var class_to_add    = isValid ? 'valid' : 'invalid';
-       var class_to_remove = isValid ? 'invalid' : 'valid';
+var updateMailValidityLabel = function( mail ) {
+       var     isValid = mw.util.validateEmail( mail ),
+               $label = $( '#mw-emailaddress-validity' );
 
-       // We allow null address
-       if( isValid == null ) {
-               $( '#mw-emailaddress-validity' ).text( '' )
-               .removeClass( 'valid invalid');
-       } else {
-       $( '#mw-emailaddress-validity' )
-               .text(
-                       isValid ?
-                       mediaWiki.msg( 'email-address-validity-valid' )
-                       : mediaWiki.msg( 'email-address-validity-invalid' )
-               )
-               .addClass( class_to_add )
-               .removeClass( class_to_remove );
-       }
-}
+       // We allow empty address
+       if( isValid === null ) {
+               $label.text( '' ).removeClass( 'valid invalid' );
 
-/**
- *  Validate a string as representing a valid e-mail address
- * according to HTML5 specification. Please note the specification
- * does not validate a domain with one character.
- *
- * FIXME: should be moved to a JavaScript validation module.
- */
-wfValidateEmail = function( mailtxt ) {
-       if( mailtxt == '' ) { return null; }
+       // Valid
+       } else if ( isValid ) {
+               $label.text( mw.msg( 'email-address-validity-valid' ) ).addClass( 'valid' ).removeClass( 'invalid' );
 
-       /**
-        * HTML 5 define a string as valid e-mail address if it matches
-        * the ABNF :
-        *   1 * ( atext / "." ) "@" ldh-str 1*( "." ldh-str )
-        * With:
-        * - atext   : defined in RFC 5322 section 3.2.3
-        * - ldh-str : defined in RFC 1034 section 3.5
-        *
-        * (see STD 68 / RFC 5234 http://tools.ietf.org/html/std68):
-        */
-
-       /**
-        * First, define the RFC 5322 'atext' which is pretty easy :
-        * atext = ALPHA / DIGIT /    ; Printable US-ASCII
-                       "!" / "#" /        ;  characters not including
-                       "$" / "%" /        ;  specials.  Used for atoms.
-                       "&" / "'" /
-                       "*" / "+" /
-                       "-" / "/" /
-                       "=" / "?" /
-                       "^" / "_" /
-                       "`" / "{" /
-                       "|" / "}" /
-                       "~"
-       */
-       var rfc5322_atext   = "a-z0-9!#$%&'*+-/=?^_`{|}—~" ;
-
-       /**
-        * Next define the RFC 1034 'ldh-str'
-        *   <domain> ::= <subdomain> | " "
-        *   <subdomain> ::= <label> | <subdomain> "." <label>
-        *   <label> ::= <letter> [ [ <ldh-str> ] <let-dig> ]
-        *   <ldh-str> ::= <let-dig-hyp> | <let-dig-hyp> <ldh-str>
-        *   <let-dig-hyp> ::= <let-dig> | "-"
-        *   <let-dig> ::= <letter> | <digit>
-        */
-       var rfc1034_ldh_str = "a-z0-9-" ;
-
-       var HTML5_email_regexp = new RegExp(
-               // start of string
-               '^'
-               +
-               // User part which is liberal :p
-               '[' + rfc5322_atext + '\\.' + ']' + '+'
-               +
-               // "apostrophe"
-               '@'
-               +
-               // Domain first part
-               '[' + rfc1034_ldh_str + ']+'
-               +
-               // Second part and following are separated by a dot
-               '(?:\\.[' + rfc1034_ldh_str + ']+)+'
-               +
-               // End of string
-               '$',
-               // RegExp is case insensitive
-               'i'
-               );
-       return (null != mailtxt.match( HTML5_email_regexp ) );
+       // Not valid
+       } else {
+               $label.text( mw.msg( 'email-address-validity-invalid' ) ).addClass( 'invalid' ).removeClass( 'valid' );
+       }
 };
+
+// Lame tip to let user know if its email is valid. See bug 22449
+// Only bind once for 'blur' so that the user can fill it in without errors
+// After that look at every keypress for direct feedback if it was invalid onblur
+$( '#mw-input-wpemailaddress' ).one( 'blur', function() {
+       if ( $( '#mw-emailaddress-validity' ).length === 0 ) {
+               $(this).after( '<label for="mw-input-wpemailaddress" id="mw-emailaddress-validity"></label>' );
+       }
+       updateMailValidityLabel( $(this).val() );
+       $(this).keyup( function() {
+               updateMailValidityLabel( $(this).val() );
+       } );
+} );
index 5f61236..6668716 100644 (file)
@@ -40,8 +40,8 @@
                                        // (but not Safari on Windows)
                                        } else if ( !( profile.platform == 'win' && profile.name == 'safari' )
                                                                        && ( profile.name == 'safari'
-                                                                         || profile.platform == 'mac'
-                                                                         || profile.name == 'konqueror' ) ) {
+                                                                       || profile.platform == 'mac'
+                                                                       || profile.name == 'konqueror' ) ) {
                                                mw.util.tooltipAccessKeyPrefix = 'ctrl-';
 
                                        // Firefox 2.x
                 * ( '#foobar' ) of that item.
                 *
                 * @example mw.util.addPortletLink(
-                *     'p-tb', 'http://mediawiki.org/',
-                *     'MediaWiki.org', 't-mworg', 'Go to MediaWiki.org ', 'm', '#t-print'
-                *   )
+                *       'p-tb', 'http://mediawiki.org/',
+                *       'MediaWiki.org', 't-mworg', 'Go to MediaWiki.org ', 'm', '#t-print'
+                * )
                 *
                 * @param portlet ID of the target portlet ( 'p-cactions' or 'p-personal' etc.)
                 * @param href Link URL
                 * @param text Link text (will be automatically converted to lower
-                *     case by CSS for p-cactions in Monobook)
+                *       case by CSS for p-cactions in Monobook)
                 * @param id ID of the new item, should be unique and preferably have
-                *     the appropriate prefix ( 'ca-', 'pt-', 'n-' or 't-' )
+                *       the appropriate prefix ( 'ca-', 'pt-', 'n-' or 't-' )
                 * @param tooltip Text to show when hovering over the link, without accesskey suffix
                 * @param accesskey Access key to activate this link (one character, try
-                *     to avoid conflicts. Use $( '[accesskey=x' ).get() in the console to
-                *     see if 'x' is already used.
+                *       to avoid conflicts. Use $( '[accesskey=x' ).get() in the console to
+                *       see if 'x' is already used.
                 * @param nextnode DOM node or jQuery-selector of the item that the new
-                *     item should be added before, should be another item in the same
-                *     list will be ignored if not the so
+                *       item should be added before, should be another item in the same
+                *       list will be ignored if not the so
                 *
                 * @return The DOM node of the new item (a LI element, or A element for
-                *     older skins) or null.
+                *       older skins) or null.
                 */
                'addPortletLink' : function( portlet, href, text, id, tooltip, accesskey, nextnode ) {
 
                 * something, replacing any previous message.
                 *
                 * @param message       mixed   The DOM-element or HTML-string to be put inside the message box]
-                *                                                      Calling with no arguments, with an empty string or null will hide the message 
+                *                                                      Calling with no arguments, with an empty string or null will hide the message
                 * @param className     string  Used in adding a class; should be different for each
-                *   call to allow CSS/JS to hide different boxes.  null = no class used.
-                * @return Boolean       True on success, false on failure
+                * call to allow CSS/JS to hide different boxes. null = no class used.
+                * @return Boolean         True on success, false on failure
                 */
                'jsMessage' : function( message, className ) {
                
                                return true; // Emptying and hiding message is intended behaviour, return true  
                        
                        } else {
-                               // We special-case skin structures provided by the software.  Skins that
+                               // We special-case skin structures provided by the software. Skins that
                                // choose to abandon or significantly modify our formatting can just define
                                // an mw-js-message div to start with.
                                var $messageDiv = $( '#mw-js-message' );
                                if ( !$messageDiv.length ) {
                                        $messageDiv = $( '<div id="mw-js-message">' );
-                                       if ( mw.util.$content.parent().length ) { 
+                                       if ( mw.util.$content.parent().length ) {
                                                mw.util.$content.parent().prepend( $messageDiv );
                                        } else {
                                                return false;
                                $messageDiv.slideDown();
                                return true;
                        }
+               },
+       
+               /**
+                * Validate a string as representing a valid e-mail address
+                * according to HTML5 specification. Please note the specification
+                * does not validate a domain with one character.
+                *
+                * FIXME: should be moved to a JavaScript validation module.
+                */
+               'validateEmail' : function( mailtxt ) {
+                       if( mailtxt === '' ) {
+                               return null;
+                       }
+               
+                       /**
+                        * HTML5 defines a string as valid e-mail address if it matches
+                        * the ABNF:
+                        *      1 * ( atext / "." ) "@" ldh-str 1*( "." ldh-str )
+                        * With:
+                        * - atext      : defined in RFC 5322 section 3.2.3
+                        * - ldh-str : defined in RFC 1034 section 3.5
+                        *
+                        * (see STD 68 / RFC 5234 http://tools.ietf.org/html/std68):
+                        */
+               
+                       /**
+                        * First, define the RFC 5322 'atext' which is pretty easy :
+                        * atext = ALPHA / DIGIT / ; Printable US-ASCII
+                                                "!" / "#" /     ; characters not including
+                                                "$" / "%" /     ; specials. Used for atoms.
+                                                "&" / "'" /
+                                                "*" / "+" /
+                                                "-" / "/" /
+                                                "=" / "?" /
+                                                "^" / "_" /
+                                                "`" / "{" /
+                                                "|" / "}" /
+                                                "~"
+                       */
+                       var     rfc5322_atext = "a-z0-9!#$%&'*+-/=?^_`{|}Ñ~",
+               
+                       /**
+                        * Next define the RFC 1034 'ldh-str'
+                        *      <domain> ::= <subdomain> | " "
+                        *      <subdomain> ::= <label> | <subdomain> "." <label>
+                        *      <label> ::= <letter> [ [ <ldh-str> ] <let-dig> ]
+                        *      <ldh-str> ::= <let-dig-hyp> | <let-dig-hyp> <ldh-str>
+                        *      <let-dig-hyp> ::= <let-dig> | "-"
+                        *      <let-dig> ::= <letter> | <digit>
+                        */
+                               rfc1034_ldh_str = "a-z0-9-",
+       
+                               HTML5_email_regexp = new RegExp(
+                                       // start of string
+                                       '^'
+                                       +
+                                       // User part which is liberal :p
+                                       '[' + rfc5322_atext + '\\.' + ']' + '+'
+                                       +
+                                       // "at"
+                                       '@'
+                                       +
+                                       // Domain first part
+                                       '[' + rfc1034_ldh_str + ']+'
+                                       +
+                                       // Second part and following are separated by a dot
+                                       '(?:\\.[' + rfc1034_ldh_str + ']+)+'
+                                       +
+                                       // End of string
+                                       '$',
+                                       // RegExp is case insensitive
+                                       'i'
+                               );
+                       return (null !== mailtxt.match( HTML5_email_regexp ) );
                }
 
        };