From a899e409978bf095a37eb29808fffd439d11f91d Mon Sep 17 00:00:00 2001
From: Benjamin Intal <bfintal@gmail.com>
Date: Wed, 14 Jan 2015 19:06:17 +0800
Subject: [PATCH] Better Theme Customizer handling for Font option

---
 class-option-font.php                 | 36 ++++++++++++++++++++-------
 css/admin-theme-customizer-styles.css |  4 +++
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/class-option-font.php b/class-option-font.php
index 78ddaa86..f934ae14 100644
--- a/class-option-font.php
+++ b/class-option-font.php
@@ -384,17 +384,35 @@ public static function createFontScript() {
 					tf_select_font_update_preview( $this, false )
 				}, 1 );
 			});
-
-			$('body.wp-customizer').on('click', function(e) {
-				$('.tf-font .wp-color-result').each(function() {
-					if ( $(this).hasClass('wp-picker-open') ) {
-						$(this).parents('label:eq(0)').addClass('tf-picker-open');
+			
+			
+			/**
+			 * Theme Customizer scripts
+			 */
+			
+			// Check for font selector clicks, we need to adjust styles to make it look nice
+			$('body.wp-customizer .tf-font').on('mouseup', function(e) {
+				if ( $(e.target).is('.wp-color-result') ) {
+					if ( ! $(e.target).is('.wp-picker-open') ) {
+						$(e.target).parents('label:eq(0)').addClass('tf-picker-open');
 					} else {
-						if ( $(this).parents('label:eq(0)').hasClass('tf-picker-open') ) {
-							$(this).parents('label:eq(0)').removeClass('tf-picker-open');
-						}
+						$(e.target).parents('label:eq(0)').removeClass('tf-picker-open');
 					}
-				});
+				}
+			});
+			
+			// Check for close clicks (clicking outside while the picker is open)
+			$('body.wp-customizer').on('mouseup', '*', function(e) {
+				var $target = $(e.target);
+				if ( $target.is('.wp-color-result, .wp-color-picker, .wp-picker-default') ) { 
+					return;
+				}
+				if ( $target.parents('.wp-picker-holder').length > 0 ) {
+					return;
+				}
+				if ( $('.tf-picker-open').length > 0 ) {
+					$('.tf-picker-open').removeClass('tf-picker-open');
+				}
 			});
 		});
 
diff --git a/css/admin-theme-customizer-styles.css b/css/admin-theme-customizer-styles.css
index d458174b..0f15ad7b 100644
--- a/css/admin-theme-customizer-styles.css
+++ b/css/admin-theme-customizer-styles.css
@@ -154,6 +154,10 @@
 }
 .tf-font label.tf-picker-open {
 	color: #fcfcfc;
+	background: transparent;
+	border-color: transparent;
+	margin-left: -10px;
+	position: relative;
 }
 .tf-font label.tf-picker-open .wp-picker-container {
 	position: absolute;