From e9daa176b4b04002515dc0a0b7d0ed1458e82594 Mon Sep 17 00:00:00 2001
From: S Page <spage@wikimedia.org>
Date: Fri, 3 May 2013 22:45:25 -0700
Subject: [PATCH] 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
---
 .../mediawiki.special.createAccount.vform.css | 19 +++++------
 .../mediawiki.special.createAccount.vform.js  | 34 +++++++++----------
 2 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/resources/mediawiki.special/mediawiki.special.createAccount.vform.css b/resources/mediawiki.special/mediawiki.special.createAccount.vform.css
index a1d78a218c..ef16a1d3a4 100644
--- 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 11084fe961..9fd176b56f 100644
--- 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 ) );
-- 
2.20.1