From b0c538b9f11af63e345193541038c803e5c4ab4a Mon Sep 17 00:00:00 2001
From: nacin <nacin@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Fri, 8 Oct 2010 03:29:57 +0000
Subject: [PATCH] Update via ajax the sample output of custom date/times on
 options-general. fixes #12636.

git-svn-id: http://svn.automattic.com/wordpress/trunk@15757 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-admin/admin-ajax.php      |  6 ++++++
 wp-admin/options-general.php | 23 ++++++++++++++++-------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/wp-admin/admin-ajax.php b/wp-admin/admin-ajax.php
index 11c11cedf..27ca2a124 100644
--- a/wp-admin/admin-ajax.php
+++ b/wp-admin/admin-ajax.php
@@ -1463,6 +1463,12 @@ case 'set-post-thumbnail':
 	}
 	die( '0' );
 	break;
+case 'date_format' :
+	die( date_i18n( sanitize_option( 'date_format', $_POST['date'] ) ) );
+	break;
+case 'time_format' :
+	die( date_i18n( sanitize_option( 'time_format', $_POST['date'] ) ) );
+	break;
 default :
 	do_action( 'wp_ajax_' . $_POST['action'] );
 	die('0');
diff --git a/wp-admin/options-general.php b/wp-admin/options-general.php
index 1aaee4723..ca4c70af3 100644
--- a/wp-admin/options-general.php
+++ b/wp-admin/options-general.php
@@ -30,7 +30,7 @@ function add_js() {
 	jQuery(document).ready(function($){
 		$("input[name='date_format']").click(function(){
 			if ( "date_format_custom_radio" != $(this).attr("id") )
-				$("input[name='date_format_custom']").val( $(this).val() );
+				$("input[name='date_format_custom']").val( $(this).val() ).siblings('.example').text( $(this).siblings('span').text() );
 		});
 		$("input[name='date_format_custom']").focus(function(){
 			$("#date_format_custom_radio").attr("checked", "checked");
@@ -38,11 +38,19 @@ function add_js() {
 
 		$("input[name='time_format']").click(function(){
 			if ( "time_format_custom_radio" != $(this).attr("id") )
-				$("input[name='time_format_custom']").val( $(this).val() );
+				$("input[name='time_format_custom']").val( $(this).val() ).siblings('.example').text( $(this).siblings('span').text() );
 		});
 		$("input[name='time_format_custom']").focus(function(){
 			$("#time_format_custom_radio").attr("checked", "checked");
 		});
+		$("input[name='date_format_custom'], input[name='time_format_custom']").change( function() {
+			var format = $(this);
+			format.siblings('img').css('visibility','visible');
+			$.post(ajaxurl, {
+					action: 'date_format_custom' == format.attr('name') ? 'date_format' : 'time_format',
+					date : format.val(),
+				}, function(d) { format.siblings('img').css('visibility','hidden'); format.siblings('.example').text(d); } );	
+		});
 	});
 //]]>
 </script>
@@ -265,14 +273,14 @@ if ( empty($tzstring) ) { // Create a UTC+- zone if no timezone string exists
 			echo " checked='checked'";
 			$custom = false;
 		}
-		echo ' /> ' . date_i18n( $format ) . "</label><br />\n";
+		echo ' /> <span>' . date_i18n( $format ) . "</span></label><br />\n";
 	}
 
 	echo '	<label><input type="radio" name="date_format" id="date_format_custom_radio" value="\c\u\s\t\o\m"';
 	checked( $custom );
-	echo '/> ' . __('Custom:') . ' </label><input type="text" name="date_format_custom" value="' . esc_attr( get_option('date_format') ) . '" class="small-text" /> ' . date_i18n( get_option('date_format') ) . "\n";
+	echo '/> ' . __('Custom:') . ' </label><input type="text" name="date_format_custom" value="' . esc_attr( get_option('date_format') ) . '" class="small-text" /> <span class="example"> ' . date_i18n( get_option('date_format') ) . "</span> <img class='ajax-loading' src='" . esc_url( admin_url( 'images/wpspin_light.gif' ) ) . "' />\n";
 
-	echo "\t<p>" . __('<a href="http://codex.wordpress.org/Formatting_Date_and_Time">Documentation on date formatting</a>. Click &#8220;Save Changes&#8221; to update sample output.') . "</p>\n";
+	echo "\t<p>" . __('<a href="http://codex.wordpress.org/Formatting_Date_and_Time">Documentation on date and time formatting</a>.') . "</p>\n";
 ?>
 	</fieldset>
 </td>
@@ -297,12 +305,13 @@ if ( empty($tzstring) ) { // Create a UTC+- zone if no timezone string exists
 			echo " checked='checked'";
 			$custom = false;
 		}
-		echo ' /> ' . date_i18n( $format ) . "</label><br />\n";
+		echo ' /> <span>' . date_i18n( $format ) . "</span></label><br />\n";
 	}
 
 	echo '	<label><input type="radio" name="time_format" id="time_format_custom_radio" value="\c\u\s\t\o\m"';
 	checked( $custom );
-	echo '/> ' . __('Custom:') . ' </label><input type="text" name="time_format_custom" value="' . esc_attr( get_option('time_format') ) . '" class="small-text" /> ' . date_i18n( get_option('time_format') ) . "\n";
+	echo '/> ' . __('Custom:') . ' </label><input type="text" name="time_format_custom" value="' . esc_attr( get_option('time_format') ) . '" class="small-text" /> <span class="example"> ' . date_i18n( get_option('time_format') ) . "</span> <img class='ajax-loading' src='" . esc_url( admin_url( 'images/wpspin_light.gif' ) ) . "' />\n";
+	;
 ?>
 	</fieldset>
 </td>