Focus and blur styling (via JS) for the install screen language selector. Props jorbin. See #28577

Built from https://develop.svn.wordpress.org/trunk@29020


git-svn-id: http://core.svn.wordpress.org/trunk@28808 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/install-rtl.css

@@ -337,7 +337,6 @@ body.language-chooser {
 	height: 250px;
 }
 
-/* TODO:add focus style via JS */
 .language-chooser fieldset.focus {
 	border-color: #5b9dd9;
 	-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
@@ -355,9 +354,17 @@ body.language-chooser {
 
 .language-chooser input:checked + label{
 	  color:white;
+	  background: #777;
+}
+
+.language-chooser .focus input:checked + label{
 	  background: #0074A2;
 }
 
+.language-chooser label:hover {
+	  background: #eee;
+}
+
 .language-chooser label{
 	display:block;
 }
@@ -373,3 +380,5 @@ body.language-chooser {
 	clip: rect(0 0 0 0);
 	border: 0;
 }
+
+}

wp-admin/css/install.css

@@ -337,7 +337,6 @@ body.language-chooser {
 	height: 250px;
 }
 
-/* TODO:add focus style via JS */
 .language-chooser fieldset.focus {
 	border-color: #5b9dd9;
 	-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
@@ -355,9 +354,17 @@ body.language-chooser {
 
 .language-chooser input:checked + label{
 	  color:white;
+	  background: #777;
+}
+
+.language-chooser .focus input:checked + label{
 	  background: #0074A2;
 }
 
+.language-chooser label:hover {
+	  background: #eee;
+}
+
 .language-chooser label{
 	display:block;
 }
@@ -373,3 +380,5 @@ body.language-chooser {
 	clip: rect(0 0 0 0);
 	border: 0;
 }
+
+}

wp-admin/includes/upgrade.php

@@ -2162,7 +2162,7 @@ endif;
 function wp_install_language_form( $languages ) {
 	echo "<fieldset>\n";
 	echo "<legend class='screen-reader-text'>Select a default language</legend>\n";
-	echo '<input type="radio" checked="checked" class="screen-reader-input" name="language" id="language_default" value="">';
+	echo '<input type="radio" checked="checked" class="screen-reader-input language-chooser-input" name="language" id="language_default" value="">';
 	echo '<label for="language_default">English (United States)</label>';
 	echo "\n";
 
@@ -2175,7 +2175,7 @@ function wp_install_language_form( $languages ) {
 	}
 
 	foreach ( $languages as $language ) {
-		echo '<input type="radio" name="language" class="' . esc_attr( $language['language'] ) . ' screen-reader-input" id="language_'. esc_attr( $language['language'] ) .'" value="' . esc_attr( $language['language'] ) . '">';
+		echo '<input type="radio" name="language" class="' . esc_attr( $language['language'] ) . ' screen-reader-input language-chooser-input" id="language_'. esc_attr( $language['language'] ) .'" value="' . esc_attr( $language['language'] ) . '">';
 		echo '<label for="language_' . esc_attr( $language['language'] ) . '">' . esc_html( $language['native_name'] ) . "</label>\n";
 	}
 	echo "</fieldset>\n";

wp-admin/install.php

@@ -281,5 +281,6 @@ if ( !wp_is_mobile() ) {
 <script type="text/javascript">var t = document.getElementById('weblog_title'); if (t){ t.focus(); }</script>
 <?php } ?>
 <?php wp_print_scripts( 'user-profile' ); ?>
+<?php wp_print_scripts( 'language-chooser' ); ?>
 </body>
 </html>

wp-admin/js/language-chooser.js

@@ -0,0 +1,39 @@
+(function($){
+	if ( $('body').hasClass('language-chooser') === false ) {
+		return;
+	}
+
+	var mouseDown = 0,
+		$fieldset = $('fieldset');
+
+	// simple way to check if mousebutton is depressed while accounting for multiple mouse buttons being used independently
+	document.body.onmousedown = function() {
+		++mouseDown;
+	};
+	document.body.onmouseup = function() {
+		--mouseDown;
+	};
+
+	/*
+		we can't rely upon the focusout event
+		since clicking on a label triggers it
+	*/
+	function maybeRemoveFieldsetFocus(){
+		if (mouseDown) {
+			setTimeout( maybeRemoveFieldsetFocus, 50);
+			return;
+		}
+		if ( $(':focus').hasClass('language-chooser-input') !== true ) {
+			$fieldset.removeClass('focus');
+		}
+	}
+
+	$fieldset.focusin( function() {
+		$(this).addClass('focus');
+	});
+
+	$fieldset.focusout( function() {
+		setTimeout( maybeRemoveFieldsetFocus, 50);
+	});
+
+})(jQuery);

wp-admin/js/language-chooser.min.js

@@ -0,0 +1 @@
+!function(a){function b(){return c?void setTimeout(b,50):void(a(":focus").hasClass("language-chooser-input")!==!0&&d.removeClass("focus"))}if(a("body").hasClass("language-chooser")!==!1){var c=0,d=a("fieldset");document.body.onmousedown=function(){++c},document.body.onmouseup=function(){--c},d.focusin(function(){a(this).addClass("focus")}),d.focusout(function(){setTimeout(b,50)})}}(jQuery);

wp-admin/setup-config.php

@@ -319,5 +319,6 @@ el.select();
 	break;
 }
 ?>
+<?php wp_print_scripts( 'language-chooser' ); ?>
 </body>
 </html>

wp-includes/script-loader.php

@@ -345,6 +345,7 @@ function wp_default_scripts( &$scripts ) {
 	) );
 
 	$scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter' ), false, 1 );
+	$scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 );
 
 	$scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.0-alpha-20140707';
+$wp_version = '4.0-alpha-20140708';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.