From 2fd59af7a688bb97f4122a5830166274b194fc80 Mon Sep 17 00:00:00 2001
From: koopersmith <koopersmith@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Wed, 4 Apr 2012 21:02:29 +0000
Subject: [PATCH] Theme Customizer: Improve the customize loader and themes
 list table markup. see #19910.

* Use event delegation for triggering the customize loader (so we play nicely with infinite scroll).
* Use data attributes on .load-customize links instead of parsing the href.
* Properly translate the 'Customize' string instead of injecting the replacement with JS.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20352 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../includes/class-wp-themes-list-table.php   | 10 +++++++---
 wp-includes/js/customize-loader.dev.js        | 20 +++++--------------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/wp-admin/includes/class-wp-themes-list-table.php b/wp-admin/includes/class-wp-themes-list-table.php
index 5cecb6b04..b2b16cd92 100644
--- a/wp-admin/includes/class-wp-themes-list-table.php
+++ b/wp-admin/includes/class-wp-themes-list-table.php
@@ -131,11 +131,15 @@ class WP_Themes_List_Table extends WP_List_Table {
 				array( 'preview' => 1, 'template' => $template, 'stylesheet' => $stylesheet, 'preview_iframe' => true, 'TB_iframe' => 'true' ),
 				home_url( '/' ) ) );
 
+			$customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize &#8220;%s&#8221;' ), $title ) ) . '"
+				. data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
+
 			$actions = array();
 			$actions[] = '<a href="' . $activate_link . '" class="activatelink" title="'
 				. esc_attr( sprintf( __( 'Activate &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Activate' ) . '</a>';
-			$actions[] = '<a href="' . $preview_link . '" class="thickbox thickbox-preview" title="'
-				. esc_attr( sprintf( __( 'Preview &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Preview' ) . '</a>';
+			$actions[] = '<a href="' . $preview_link . '" class="hide-if-js" title="'
+				. esc_attr( sprintf( __( 'Preview &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Preview' ) . '</a>'
+				. '<a href="#" class="load-customize hide-if-no-js" ' . $customize_attributes . '>' . __( 'Customize' ) . '</a>';
 			if ( ! is_multisite() && current_user_can( 'delete_themes' ) )
 				$actions[] = '<a class="submitdelete deletion" href="' . wp_nonce_url( "themes.php?action=delete&amp;template=$stylesheet", 'delete-theme_' . $stylesheet )
 					. '" onclick="' . "return confirm( '" . esc_js( sprintf( __( "You are about to delete this theme '%s'\n  'Cancel' to stop, 'OK' to delete." ), $title ) )
@@ -145,7 +149,7 @@ class WP_Themes_List_Table extends WP_List_Table {
 
 			$actions = implode ( ' | ', $actions );
 			?>
-			<a href="<?php echo $preview_link; ?>" class="thickbox thickbox-preview screenshot">
+			<a href="<?php echo $preview_link; ?>" class="load-customize screenshot" <?php echo $customize_attributes; ?>>
 			<?php if ( $screenshot = $theme->get_screenshot() ) : ?>
 				<img src="<?php echo esc_url( $screenshot ); ?>" alt="" />
 			<?php endif; ?>
diff --git a/wp-includes/js/customize-loader.dev.js b/wp-includes/js/customize-loader.dev.js
index fb83840f9..32fbeb77d 100644
--- a/wp-includes/js/customize-loader.dev.js
+++ b/wp-includes/js/customize-loader.dev.js
@@ -41,27 +41,17 @@ if ( typeof wp === 'undefined' )
 	$( function() {
 		Loader.initialize();
 
-		// Override 'preview' links on themes page.
-		$('.thickbox-preview').click( function( event ) {
-			var href, template, stylesheet;
+		$('#current-theme, #availablethemes').on( 'click', '.load-customize', function( event ) {
+			var load = $(this);
 
-			// Stop the thickbox.
 			event.preventDefault();
-			event.stopImmediatePropagation();
-
-			// Extract the template/stylesheet from the preview link's url.
-			href = $(this).attr('href');
-			template = href.match('template=([^&]*)')[1];
-			stylesheet = href.match('stylesheet=([^&]*)')[1];
 
 			// Load the theme.
 			Loader.open({
-				template: template,
-				stylesheet: stylesheet
+				template:   load.data('customizeTemplate'),
+				stylesheet: load.data('customizeStylesheet')
 			});
-		}).filter( function() {
-			return 'Preview' == $(this).text();
-		}).text('Customize');
+		});
 	});
 
 	// Expose the API to the world.