Reposition nested FancyCaptcha, conditional help.

There's less work to do here when the Refresh link is already nicely
positioned over the FancyCaptcha image (in extension/ConfirmEdit's
I57be0bc8aa , merged and deployed).  It still needs separate divs, one
with a border exactly 270px wide (display: table-cell) and one to act as
the positioning parent of the Refresh link (display: inline-block).

Also, only show the help msg for the captcha if it exists.

Bug: 47699
Change-Id: I003c5f1b75471cce32b149037198c314ce9489ea

diff --git a/resources/mediawiki.special/mediawiki.special.createAccount.vform.css b/resources/mediawiki.special/mediawiki.special.createAccount.vform.css
index a1d78a2..ef16a1d 100644 (file)
--- a/resources/mediawiki.special/mediawiki.special.createAccount.vform.css
+++ b/resources/mediawiki.special/mediawiki.special.createAccount.vform.css
@@ -4,7 +4,7 @@
        font-weight: bold;
 }
 
-/* shuffled CAPTCHA */
+/**** shuffled CAPTCHA ****/
 #wpCaptchaWord {
        margin-top: 6px;
 }
@@ -16,29 +16,26 @@
        text-align: center;
 }
 
-.mw-createacct-captcha-image-container {
-       background-color: #fff;
-       min-height: 95px;
-}
-
 .mw-createacct-captcha-assisted {
        display: block;
        margin-top: 0.5em;
 }
 
+/* Put a border around the fancycaptcha-image-container. */
 .mw-createacct-captcha-and-reload {
        border: 1px solid #c9c9c9;
-       display: table-cell;
+       display: table-cell; /* Other display formats end up too wide */
        width: 270px;
        background-color: #FFF;
 }
 
-.mw-createacct-captcha-and-reload .confirmedit-captcha-reload {
-       display: block;
-       float: right;
+/* Make the fancycaptcha-image-container full-width within its parent.  */
+.fancycaptcha-image-container
+{
+       width: 100%;
 }
 
-/* Benefits column CSS to the right (if it fits) of the form. */
+/**** Benefits column CSS to the right (if it fits) of the form. ****/
 .mw-ui-container #userloginForm {
        float: left;
 }

diff --git a/resources/mediawiki.special/mediawiki.special.createAccount.vform.js b/resources/mediawiki.special/mediawiki.special.createAccount.vform.js
index 11084fe..9fd176b 100644 (file)
--- a/resources/mediawiki.special/mediawiki.special.createAccount.vform.js
+++ b/resources/mediawiki.special/mediawiki.special.createAccount.vform.js
@@ -8,8 +8,9 @@
                        $submit = $content.find( '#wpCreateaccount' ),
                        tabIndex,
                        $captchaStuff,
+                       $captchaImageContainer,
                        helpMsg = mw.config.get( 'wgCreateacctImgcaptchaHelp' ),
-                       captchaImage;
+                       helpHtml = '';
 
                /*
                 * CAPTCHA
@@ -26,40 +27,39 @@
 
                if ( $captchaStuff.length ) {
 
-                       // The FancyCaptcha image has this class in the ConfirmEdit extension
+                       // The FancyCaptcha has this class in the ConfirmEdit extension
                        // after 2013-04-18.
-                       captchaImage = $captchaStuff.find( 'img.fancycaptcha-image' );
-                       if ( captchaImage.length !== 1 ) {
+                       $captchaImageContainer = $captchaStuff.find( '.fancycaptcha-image-container' );
+                       if ( $captchaImageContainer.length !== 1 ) {
                                return;
                        }
 
                        $captchaStuff.remove();
 
-                       // Insert another div before the submit button.
+                       if ( helpMsg) {
+                               helpHtml = '<small class="mw-createacct-captcha-assisted">' + helpMsg + '</small>';
+                       }
+
+                       // Insert another div before the submit button that will include the 
+                       // repositioned FancyCaptcha div, an input field, and possible help.
                        $submit.closest( 'div' )
                                .before( [
                        '<div>',
                                '<label for="wpCaptchaWord">' + mw.message( 'createacct-captcha' ).escaped() + '</label>',
                                '<div class="mw-createacct-captcha-container">',
-                                       '<div class="mw-createacct-captcha-and-reload">',
-                                               '<div class="mw-createacct-captcha-image-container">',
-                                                       '<img id="mw-createacct-captcha" alt="PLACEHOLDER">',
-                                               '</div>',
-                                       '</div>',
+                                       '<div class="mw-createacct-captcha-and-reload" />',
                                        '<input id="wpCaptchaWord" name="wpCaptchaWord" type="text" placeholder="' +
                                                mw.message( 'createacct-imgcaptcha-ph' ).escaped() +
                                                '" tabindex="' + tabIndex + '" autocapitalize="off" autocorrect="off">',
-                                       '<small class="mw-createacct-captcha-assisted">' + helpMsg + '</small>',
+                                               helpHtml,
                                '</div>',
                        '</div>'
                                        ].join( '' )
                                );
 
-                       // Replace the placeholder img with the img from the old CAPTCHA.
-                       captchaImage.replaceAll( $content.find( '#mw-createacct-captcha' ) );
-
-                       // Append CAPTCHA reload, if any.
-                       $( '.mw-createacct-captcha-and-reload' ).append( $captchaStuff.find( '.confirmedit-captcha-reload' ) );
+                       // Stick the FancyCaptcha container inside our bordered and framed parents.
+                       $captchaImageContainer
+                               .prependTo( $content.find( '.mw-createacct-captcha-and-reload' ) );
 
                        // Find the input field, add the text (if any) of the existing CAPTCHA
                        // field (although usually it's blanked out on every redisplay),
@@ -70,6 +70,6 @@
                                .after( $captchaStuff.find( '#wpCaptchaId' ) );
                }
 
-       });
+       } );
 
 }( mediaWiki, jQuery ) );