From b1946768769b8f6d2c6ca72f6d64d8021e0823e9 Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Wed, 1 Apr 2015 12:35:26 +0000
Subject: [PATCH] Customizer Theme Switcher: Switch the details/live preview
 buttons.

props celloexpressions, ocean90.
fixes #31791.

git-svn-id: https://develop.svn.wordpress.org/trunk@31954 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css       | 23 ++++++++++++++----
 src/wp-admin/includes/theme.php               |  8 +++----
 src/wp-admin/js/customize-controls.js         | 24 ++++++++++---------
 .../class-wp-customize-control.php            |  9 +++----
 4 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 030e02edcc..3e35b7eaa9 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -906,10 +906,6 @@ p.customize-section-description {
 	font-size: 32px;
 }
 
-.wp-customizer .theme-browser .theme.active .theme-name {
-	padding-right: 15px;
-}
-
 .wp-customizer #themes-filter {
 	font-size: 16px;
 	font-weight: 300;
@@ -917,6 +913,25 @@ p.customize-section-description {
 	width: 100%;
 }
 
+
+.wp-customizer .theme-browser .theme.active:hover,
+.wp-customizer .theme-browser .theme.active:focus {
+	cursor: default;
+}
+
+.wp-customizer .theme-browser .theme.active .more-details {
+	display: none;
+}
+
+.wp-customizer .theme-browser .theme.active .theme-name {
+	padding-right: 15px;
+}
+
+.wp-customizer .theme-browser.rendered .theme.active:hover .theme-screenshot img,
+.wp-customizer .theme-browser.rendered .theme.active:focus .theme-screenshot img {
+	opacity: 1;
+}
+
 /* Panel-like behavior */
 #accordion-section-themes .accordion-section-title:after {
 	content: "\f148";
diff --git a/src/wp-admin/includes/theme.php b/src/wp-admin/includes/theme.php
index 0d5c0beea1..4024b395f4 100644
--- a/src/wp-admin/includes/theme.php
+++ b/src/wp-admin/includes/theme.php
@@ -547,13 +547,13 @@ function customize_themes_print_templates() {
 				</div>
 			</div>
 
-			<div class="theme-actions">
-				<# if ( ! data.active ) { #>
+			<# if ( ! data.active ) { #>
+				<div class="theme-actions">
 					<div class="inactive-theme">
 						<a href="<?php echo add_query_arg( 'theme', '{{ data.id }}' ); ?>" target="_top" class="button button-primary"><?php _e( 'Live Preview' ); ?></a>
 					</div>
-				<# } #>
-			</div>
+				</div>
+			<# } #>
 		</div>
 	</script>
 	<?php
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index ec61263877..734a1935e7 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -648,14 +648,6 @@
 				section.closeDetails();
 			});
 
-			section.container.on( 'click keydown', '.theme-actions .button', function( event ) {
-				if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-					return;
-				}
-
-				$( '.wp-full-overlay' ).addClass( 'customize-loading' );
-			});
-
 			section.container.on( 'input', '#themes-filter', function( event ) {
 				var count,
 					term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
@@ -1907,15 +1899,25 @@
 					return;
 				}
 
-				api.section( control.section() ).showDetails( control.params.theme );
+				if ( $( this ).hasClass( 'active' ) ) {
+					return;
+				}
+
+				var previewUrl = $( this ).data( 'previewUrl' );
+
+				$( '.wp-full-overlay' ).addClass( 'customize-loading' );
+
+				window.parent.location = previewUrl;
 			});
 
-			control.container.on( 'click keydown', '.theme-actions .button', function( event ) {
+			control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) {
 				if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
 					return;
 				}
 
-				$( '.wp-full-overlay' ).addClass( 'customize-loading' );
+				event.preventDefault(); // Keep this AFTER the key filter above
+
+				api.section( control.section() ).showDetails( control.params.theme );
 			});
 		},
 
diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php
index de377d8fe2..0508de0270 100644
--- a/src/wp-includes/class-wp-customize-control.php
+++ b/src/wp-includes/class-wp-customize-control.php
@@ -1200,8 +1200,9 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 	 * @since 4.2.0
 	 */
 	public function content_template() {
-	?>
-		<div class="theme<# if ( data.theme.active ) { #> active<# } #>" tabindex="0" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
+		$preview_url = site_url( add_query_arg( 'theme', '{{ data.theme.id }}' ) );
+		?>
+		<div class="theme<# if ( data.theme.active ) { #> active<# } #>"<# if ( ! data.theme.active ) { #> tabindex="0"<# } #> data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
 			<# if ( data.theme.screenshot[0] ) { #>
 				<div class="theme-screenshot">
 					<img src="{{ data.theme.screenshot[0] }}" alt="" />
@@ -1209,7 +1210,7 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 			<# } else { #>
 				<div class="theme-screenshot blank"></div>
 			<# } #>
-			<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span>
+			<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
 			<div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
 
 			<# if ( data.theme.active ) { #>
@@ -1225,7 +1226,7 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 
 			<# if ( ! data.theme.active ) { #>
 				<div class="theme-actions">
-					<a class="button" href="<?php echo add_query_arg( 'theme', '{{ data.theme.id }}' ); ?>" target="_top"><?php _e( 'Live Preview' ); ?></a>
+					<button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
 				</div>
 			<# } #>
 		</div>