TitanFrameworkOptionFont

Complexity

Total Complexity

86

Size/Duplication

Total Lines	924
Duplicated Lines	0 %

Coupling/Cohesion

Components	2
Dependencies	3

12 Methods

Rating	Name	Duplication	Size	Complexity
A	__construct()	0	17	2
A	generateCustomizerPreviewJS()	0	16	1
A	generateCustomizerPreviewCSS()	0	7	2
C	getGoogleFontURLs()	0	70	13
A	enqueueGooglefonts()	0	7	2
D	generateCSS()	0	113	19
A	loadAdminScripts()	0	4	1
B	createFontScript()	0	142	1
F	display()	0	345	37
A	cleanValueForSaving()	0	6	2
B	cleanValueForGetting()	0	12	5
A	registerCustomizerControl()	0	10	1

<?php

For compatibility and reusability of your code, PSR1 recommends that a file should introduce either new symbols (like classes, functions, etc.) or have side-effects (like outputting something, or including other files), but not both at the same time. The first symbol is defined on line 15 and the first side effect is on line 8.

/**
 * Font Option Class
 *
 * @since	1.4
 */

if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly
}
/**
 * Font Option Class
 *
 * @since	1.4
 */
class TitanFrameworkOptionFont extends TitanFrameworkOption {

	// Default settings specific to this option
	public $defaultSecondarySettings = array(
		'show_font_family' => true,
		'show_color' => true,
		'show_font_size' => true,
		'show_font_weight' => true,
		'show_font_style' => true,
		'show_line_height' => true,
		'show_letter_spacing' => true,
		'show_text_transform' => true,
		'show_font_variant' => true,
		'show_text_shadow' => true,
		'show_preview' => true,
		'enqueue' => true,
		'preview_text' => '',
		'include_fonts' => '', // A regex string or array of regex strings to match font names to include.
		'show_websafe_fonts' => true,
		'show_google_fonts' => true,
	);

	// Default style options
	public static $defaultStyling = array(
		'font-family' => 'inherit',
		'color' => '#333333',
		'font-size' => 'inherit',
		'font-weight' => 'inherit',
		'font-style' => 'normal',
		'line-height' => '1.5em',
		'letter-spacing' => 'normal',
		'text-transform' => 'none',
		'font-variant' => 'normal',
		'text-shadow-location' => 'none',
		'text-shadow-distance' => '0px',
		'text-shadow-blur' => '0px',
		'text-shadow-color' => '#333333',
		'text-shadow-opacity' => '1',
		'font-type' => 'google', // Only used internally to determine if the font is a
		'dark' => '', // only used to toggle the preview background
	);

	// The list of web safe fonts
	public static $webSafeFonts = array(
		'Arial, Helvetica, sans-serif' => 'Arial',
		'"Arial Black", Gadget, sans-serif' => 'Arial Black',
		'"Comic Sans MS", cursive, sans-serif' => 'Comic Sans',
		'"Courier New", Courier, monospace' => 'Courier New',
		'Georgia, serif' => 'Geogia',
		'Impact, Charcoal, sans-serif' => 'Impact',
		'"Lucida Console", Monaco, monospace' => 'Lucida Console',
		'"Lucida Sans Unicode", "Lucida Grande", sans-serif' => 'Lucida Sans',
		'"Palatino Linotype", "Book Antiqua", Palatino, serif' => 'Palatino',
		'Tahoma, Geneva, sans-serif' => 'Tahoma',
		'"Times New Roman", Times, serif' => 'Times New Roman',
		'"Trebuchet MS", Helvetica, sans-serif' => 'Trebuchet',
		'Verdana, Geneva, sans-serif' => 'Verdana',
	);

	// Holds all the options with Google Fonts for enqueuing.
	// We need to do this since we want to gather all the fonts first then enqueue only the unique fonts
	private static $optionsToEnqueue = array();


	/**
	 * Constructor
	 *
	 * @return	void

Adding a @return annotation to constructors is generally not recommended as a constructor does not have a meaningful return value.

	 * @since	1.4
	 */
	function __construct( $settings, $owner ) {

It is generally recommended to explicitly declare the visibility for methods.

		parent::__construct( $settings, $owner );

		tf_add_action_once( 'admin_enqueue_scripts', array( $this, 'loadAdminScripts' ) );
		tf_add_action_once( 'customize_controls_enqueue_scripts', array( $this, 'loadAdminScripts' ) );
		tf_add_action_once( 'admin_head', array( __CLASS__, 'createFontScript' ) );
		tf_add_action_once( 'wp_enqueue_scripts', array( $this, 'enqueueGooglefonts' ) );
		add_filter( 'tf_generate_css_font_' . $this->getOptionNamespace(), array( $this, 'generateCSS' ), 10, 2 );

		// Customizer preview handling
		tf_add_action_once( 'tf_generate_customizer_preview_js', array( $this, 'generateCustomizerPreviewJS' ) );
		tf_add_filter_once( 'tf_generate_customizer_preview_css_' . $this->getOptionNamespace(), array( $this, 'generateCustomizerPreviewCSS' ) );

		if ( $this->settings['enqueue'] ) {
			self::$optionsToEnqueue[] = $this;
		}
	}


	/**
	 * Adds the Javascript code that adds Google fonts straight into the customizer preview.
	 *
	 * @since 1.9.2
	 *
	 * @return void
	 *
	 * @see TitanFrameworkCustomizer->livePreviewMainScript()
	 */
	public function generateCustomizerPreviewJS() {
		?>
		for ( var fontName in data.google_fonts ) {
			if ( document.querySelector( '#tf-preview-' + fontName ) ) {
				continue;
			}
			var link = document.createElement('LINK');
			link.setAttribute( 'rel', 'stylesheet' );
			link.setAttribute( 'type', 'text/css' );
			link.setAttribute( 'media', 'all' );
			link.setAttribute( 'id', 'tf-preview' + fontName );
			link.setAttribute( 'href', data.google_fonts[ fontName ] );
			document.head.appendChild( link );
		}
		<?php
	}


	/**
	 * Adds the list of all Google fonts into the customizer live preview
	 *
	 * @since 1.9.2
	 *
	 * @param array $generated The parameters to pass to the ajax handler during customizer live previews.
	 *
	 * @return array An array containing modified ajax values to pass
	 */
	public function generateCustomizerPreviewCSS( $generated ) {
		if ( empty( $generated['google_fonts'] ) ) {
			$generated['google_fonts'] = array();
		}
		$generated['google_fonts'] = array_merge( $generated['google_fonts'], $this->getGoogleFontURLs() );
		return $generated;
	}


	/**
	 * Gets all the Google font URLs for enqueuing. This was previously inside $this->enqueueGooglefonts()
	 * but was split off so it can be used by other functions.
	 *
	 * @since 1.9.2
	 *
	 * @return array An array containing the font names as keys and the font URLs as values.
	 */
	public function getGoogleFontURLs() {

		$urls = array();

		// Gather all the fonts that we need to load, some may be repeated so we need to
		// load them once after gathering them
		$fontsToLoad = array();
		foreach ( self::$optionsToEnqueue as $option ) {
			$fontValue = $option->getValue();

			if ( empty( $fontValue['font-family'] ) ) {
				continue;
			}
			if ( $fontValue['font-family'] == 'inherit' ) {
				continue;
			}

			if ( $fontValue['font-type'] != 'google' ) {
				continue;
			}

			// Get all the fonts that we need to load
			if ( empty( $fontsToLoad[ $fontValue['font-family'] ] ) ) {
				$fontsToLoad[ $fontValue['font-family'] ] = array();
			}

			// Get the weight
			$variant = $fontValue['font-weight'];
			if ( $variant == 'normal' ) {
				$variant = '400';
			} else if ( $variant == 'bold' ) {
				$variant = '500';
			} else if ( $variant == 'bolder' ) {
				$variant = '800';
			} else if ( $variant == 'lighter' ) {
				$variant = '100';
			}

			if ( $fontValue['font-style'] == 'italic' ) {
				$variant .= 'italic';
			}

			$fontsToLoad[ $fontValue['font-family'] ][] = $variant;
		}

		// Font subsets, allow others to change this
		$subsets = apply_filters( 'tf_google_font_subsets_' . $this->getOptionNamespace(), array( 'latin', 'latin-ext' ) );

		// Enqueue the Google Font
		foreach ( $fontsToLoad as $fontName => $variants ) {

			// Always include the normal weight so that we don't error out
			$variants[] = '400';
			$variants = array_unique( $variants );

			$fontUrl = sprintf( '//fonts.googleapis.com/css?family=%s:%s&subset=%s',
				str_replace( ' ', '+', $fontName ),
				implode( ',', $variants ),
				implode( ',', $subsets )
			);

			$fontUrl = apply_filters( 'tf_enqueue_google_webfont_' . $this->getOptionNamespace(), $fontUrl, $fontName );

			if ( $fontUrl != false ) {
				$urls[ $fontName ] = $fontUrl;
			}
		}

		return $urls;
	}


	/**
	 * Enqueues all the Google fonts, used in wp_enqueue_scripts
	 *
	 * @since	1.4
	 *
	 * @return	void
	 */
	public function enqueueGooglefonts() {
		$urls = $this->getGoogleFontURLs();

		foreach ( $urls as $fontName => $url ) {
			wp_enqueue_style( 'tf-google-webfont-' . strtolower( str_replace( ' ', '-', $fontName ) ), $url );
		}
	}


	/**
	 * Generates CSS for the font, this is used in TitanFrameworkCSS
	 *
	 * @param	string               $css The CSS generated
	 * @param	TitanFrameworkOption $option The current option being processed
	 * @return	string The CSS generated
	 * @since	1.4
	 */
	public function generateCSS( $css, $option ) {
		if ( $this->settings['id'] != $option->settings['id'] ) {
			return $css;
		}

		$skip = array( 'dark', 'font-type', 'text-shadow-distance', 'text-shadow-blur', 'text-shadow-color', 'text-shadow-opacity' );

		// If the value is blank, use the defaults
		$value = $this->getValue();
		$value = array_merge( self::$defaultStyling, $value );

		foreach ( $value as $key => $val ) {

			// Force skip other keys, those are processed under another key, e.g. text-shadow-distance is
			// used by text-shadow-location
			if ( in_array( $key, $skip ) ) {
				continue;
			}

			// Don't include keys which are not in the default styles
			if ( ! in_array( $key, array_keys( self::$defaultStyling ) ) ) {
				continue;
			}

			if ( $key == 'font-family' ) {
				if ( $value[ $key ] == 'inherit' ) {
					$css .= '$' . $option->settings['id'] . '-' . $key . ': ' . $value[ $key ] . ';';
					continue;
				}
				if ( ! empty( $value['font-type'] ) ) {
					if ( $value['font-type'] == 'google' ) {
						$css .= '$' . $option->settings['id'] . '-' . $key . ': "' . $value[ $key ] . '";';
						continue;
					}
				}
				$css .= '$' . $option->settings['id'] . '-' . $key . ': ' . $value[ $key ] . ';';
				continue;
			}

			if ( $key == 'text-shadow-location' ) {
				$textShadow = '';
				if ( $value[ $key ] != 'none' ) {
					if ( stripos( $value[ $key ], 'left' ) !== false ) {
						$textShadow .= '-' . $value['text-shadow-distance'];
					} else if ( stripos( $value[ $key ], 'right' ) !== false ) {
						$textShadow .= $value['text-shadow-distance'];
					} else {
						$textShadow .= '0';
					}
					$textShadow .= ' ';
					if ( stripos( $value[ $key ], 'top' ) !== false ) {
						$textShadow .= '-' . $value['text-shadow-distance'];
					} else if ( stripos( $value[ $key ], 'bottom' ) !== false ) {
						$textShadow .= $value['text-shadow-distance'];
					} else {
						$textShadow .= '0';
					}
					$textShadow .= ' ';
					$textShadow .= $value['text-shadow-blur'];
					$textShadow .= ' ';

					$rgb = tf_hex2rgb( $value['text-shadow-color'] );
					$rgb[] = $value['text-shadow-opacity'];

					$textShadow .= 'rgba(' . implode( ',', $rgb ) . ')';
				} else {
					$textShadow .= $value[ $key ];
				}

				$css .= '$' . $option->settings['id'] . '-text-shadow: ' . $textShadow . ';';
				continue;
			}

			$css .= '$' . $option->settings['id'] . '-' . $key . ': ' . $value[ $key ] . ';';
		}

		/*
		 * There are 2 ways to include the values for the CSS. The normal `value-arraykey`, or just `value`
		 * Using `value` will print out the entire font CSS.
		 */

		// Create the entire CSS for the font, this should just be used to replace the `value` variable.
		$cssVariables = '';
		$cssChecking = array( 'font_family', 'color', 'font_size', 'font_weight', 'font_style', 'line_height', 'letter_spacing', 'text_transform', 'font_variant', 'text_shadow' );

		// Enter values that are not marked as false.
		foreach ( $cssChecking as $subject ) {
			if ( $option->settings[ 'show_'.$subject ] ) {
				$cssVariableArray[] = str_replace( '_', '-', $subject );

$cssVariableArray was never initialized. Although not strictly required by PHP, it is generally a good practice to add $cssVariableArray = array(); before regardless.

			}
		}

		// Now, integrate these values with their corresponding keys.
		foreach ( $cssVariableArray as $param ) {

The variable $cssVariableArray does not seem to be defined for all execution paths leading up to this point.

			$cssVariables .= $param . ': $' . $option->settings['id'] . '-' . $param . ";\n";
		}

		// Replace the `value` parameters in the given css.
		$modifiedCss = '';
		if ( ! empty( $option->settings['css'] ) ) {
			$modifiedCss = $option->settings['css'];

			// If `value` is given, replace it with the entire css we created above in $cssVariables.
			$modifiedCss = preg_replace( '/value[^-]/', $cssVariables, $modifiedCss );

			// Normal `value-arraykey` values.
			$modifiedCss = str_replace( 'value-', '$' . $option->settings['id'] . '-', $modifiedCss );
		}

		$css .= $modifiedCss;

		return $css;
	}


	/**
	 * Enqueues the needed scripts for the admin
	 *
	 * @return	void
	 * @since	1.4
	 */
	public function loadAdminScripts() {
		wp_enqueue_script( 'wp-color-picker' );
		wp_enqueue_style( 'wp-color-picker' );
	}


	/**
	 * Creates the Javascript for running the font option
	 *
	 * @return	void
	 * @since	1.4
	 */
	public static function createFontScript() {

		?>
		<script>
		jQuery(document).ready(function($) {
			"use strict";

			var _tf_select_font_throttle = null;

			// Initialize color pickers
			$('.tf-font .tf-font-sel-color, .tf-font .tf-font-sel-shadow-color').wpColorPicker({
				change: function ( event, ui ) {
					// update the preview, but throttle it to prevent fast loading
					if ( _tf_select_font_throttle != null ) {
						clearTimeout( _tf_select_font_throttle );
						_tf_select_font_throttle = null;
					}
					var $this = $(this);
					_tf_select_font_throttle = setTimeout( function() {
						tf_select_font_update_preview( $this.parents('.tf-font:eq(0)'), true );
					}, 300 );
				}
			});


			// Initialize the option
			$('.tf-font').each(function() {

				// Update save field on change
				$(this).find('select,.tf-font-sel-dark').change(function() {
					tf_select_font_update_preview( $(this).parents('.tf-font:eq(0)'), true );
				});

				// Trigger for toggling light/dark preview backgrounds
				$(this).find('.btn-dark').click(function() {
					var darkInput = $(this).parent().find('.tf-font-sel-dark');
					if ( darkInput.val() == '' ) {
						darkInput.val('dark').trigger('change');
					} else {
						darkInput.val('').trigger('change');
					}
				})

				// initialize preview
				tf_select_font_update_preview( $(this), true );

				// We have to do this after 1ms for the theme customizer, or else the field's value
				// gets changed to a weird value
				var $this = $(this);
				setTimeout( function() {
					tf_select_font_update_preview( $this, false )
				}, 1 );
			});
			
			
			/**
			 * 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 {
						$(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');
				}
			});
		});


		// Updates the option elements
		function tf_select_font_update_preview( $container, doTrigger ) {
			"use strict";
			var $ = jQuery;

			// Show / hide shadow fields
			if ( $container.find(".tf-font-sel-location").val() == 'none'
				 || $container.find('.tf-font-sel-location').parents('label:eq(0)').attr('data-visible') == 'false' ) {
				$container.find(".tf-font-sel-distance").parents('label:eq(0)').fadeOut();
				$container.find(".tf-font-sel-blur").parents('label:eq(0)').fadeOut();
				$container.find(".tf-font-sel-shadow-color").parents('label:eq(0)').fadeOut();
				$container.find(".tf-font-sel-opacity").parents('label:eq(0)').fadeOut();
			} else {
				$container.find(".tf-font-sel-distance").parents('label:eq(0)').fadeIn();
				$container.find(".tf-font-sel-blur").parents('label:eq(0)').fadeIn();
				$container.find(".tf-font-sel-shadow-color").parents('label:eq(0)').fadeIn();
				$container.find(".tf-font-sel-opacity").parents('label:eq(0)').fadeIn();
			}

			var family = $container.find('.tf-font-sel-family').val();

			// These are all our parameters
			var params = {
				'font-family': family,
				'font-type': $container.find(".tf-font-sel-family option[value='" + family + "']").parent().attr('class'),
				'color': $container.find(".tf-font-sel-color").val(),
				'font-size': $container.find(".tf-font-sel-size").val(),
				'font-weight': $container.find(".tf-font-sel-weight").val(),
				'font-style': $container.find(".tf-font-sel-style").val(),
				'line-height': $container.find(".tf-font-sel-height").val(),
				'letter-spacing': $container.find(".tf-font-sel-spacing").val(),
				'text-transform': $container.find(".tf-font-sel-transform").val(),
				'font-variant': $container.find(".tf-font-sel-variant").val(),
				'text-shadow-location': $container.find(".tf-font-sel-location").val(),
				'text-shadow-distance': $container.find(".tf-font-sel-distance").val(),
				'text-shadow-blur': $container.find(".tf-font-sel-blur").val(),
				'text-shadow-color': $container.find(".tf-font-sel-shadow-color").val(),
				'text-shadow-opacity': $container.find(".tf-font-sel-opacity").val(),
				'dark': $container.find(".tf-font-sel-dark").val(),
				'text': $container.find("iframe").attr('data-preview-text')
			}

			// Update preview
			if ( $container.find('iframe').is(':not([data-visible=false])') ) {
				$container.find('iframe').attr('src', '<?php echo TitanFramework::getURL( 'iframe-font-preview.php?', __FILE__ ) ?>' + $.param(params) );
			}

			// Update hidden save field
			$container.find('.tf-for-saving').val(serialize(params));
			if ( doTrigger ) {
				$container.find('.tf-for-saving').trigger('change');
			}
		}
		</script>
		<?php
	}


	/**
	 * Displays the option in admin panels and meta boxes
	 *
	 * @return	void
	 * @since	1.4
	 */
	public function display() {
		$this->echoOptionHeader( true );

		// Get the current value and merge with defaults
		$value = $this->getValue();
		$value = array_merge( self::$defaultStyling, $value );

		/*
		 * Create all the fields
		 */
		$visibilityAttrs = '';
		if ( ! $this->settings['show_font_family'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<div>
		<label <?php echo $visibilityAttrs ?>>
			Font Family
			<select class='tf-font-sel-family'>
				<option value='inherit'>inherit</option>
				<?php

				if ( $this->settings['show_websafe_fonts'] ) {
					?>
					<optgroup label="Web Safe Fonts" class='safe'>
						<?php
						foreach ( self::$webSafeFonts as $family => $label ) {
							printf( "<option value='%s'%s>%s</option>",
								$family,
								selected( $value['font-family'], $family, false ),
								$label
							);
						}
						?>
					</optgroup>
					<?php
				}

				if ( $this->settings['show_google_fonts'] ) {
					?>
					<optgroup label="Google WebFonts" class='google'>
						<?php
						$allFonts = titan_get_googlefonts();
						foreach ( $allFonts as $key => $fontStuff ) {

							// Show only the include_fonts (font names) if provided, uses regex.
							if ( ! empty( $this->settings['include_fonts'] ) ) {
								if ( is_array( $this->settings['include_fonts'] ) ) {
									$fontNameMatch = false;
									foreach ( $this->settings['include_fonts'] as $fontNamePattern ) {
										if ( ! is_string( $fontNamePattern ) ) {
											continue;
										}
										$fontNamePattern = '/' . trim( $fontNamePattern, '/' ) . '/';
										if ( preg_match( $fontNamePattern . 'i', $fontStuff['name'] ) ) {
											$fontNameMatch = true;
											break;
										}
									}
									if ( ! $fontNameMatch ) {
										continue;
									}
								} else if ( is_string( $this->settings['include_fonts'] ) ) {
									$fontNamePattern = '/' . trim( $this->settings['include_fonts'], '/' ) . '/';
									if ( ! preg_match( $fontNamePattern . 'i', $fontStuff['name'] ) ) {
										continue;
									}
								}
							}

							printf( "<option value='%s'%s>%s</option>",
								esc_attr( $fontStuff['name'] ),
								selected( $value['font-family'], $fontStuff['name'], false ),
								$fontStuff['name']
							);
						}
						?>
					</optgroup>
					<?php
				}
				?>
			</select>
		</label>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_color'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<label <?php echo $visibilityAttrs ?>>
			Color
			<input class='tf-font-sel-color' type="text" value="<?php echo esc_attr( $value['color'] ) ?>"  data-default-color="<?php echo esc_attr( $value['color'] ) ?>"/>
		</label>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_font_size'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<label <?php echo $visibilityAttrs ?>>
			Font Size
			<select class='tf-font-sel-size'>
				<option value='inherit'>inherit</option>
				<?php
				for ( $i = 1; $i <= 150; $i++ ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $i . 'px' ),
						selected( $value['font-size'], $i . 'px', false ),
						$i . 'px'
					);
				}
				?>
			</select>
		</label>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_font_weight'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<label <?php echo $visibilityAttrs ?>>
			Font Weight
			<select class='tf-font-sel-weight'>
				<option value='inherit'>inherit</option>
				<?php
				$options = array( 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900' );
				foreach ( $options as $option ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $option ),
						selected( $value['font-weight'], $option, false ),
						$option
					);
				}
				?>
			</select>
		</label>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_font_style'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<label <?php echo $visibilityAttrs ?>>
			Font Style
			<select class='tf-font-sel-style'>
				<?php
				$options = array( 'normal', 'italic' );
				foreach ( $options as $option ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $option ),
						selected( $value['font-style'], $option, false ),
						$option
					);
				}
				?>
			</select>
		</label>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_line_height'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<label <?php echo $visibilityAttrs ?>>
			Line Height
			<select class='tf-font-sel-height'>
				<?php
				for ( $i = .5; $i <= 3; $i += 0.1 ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $i . 'em' ),
						selected( $value['line-height'], $i . 'em', false ),
						$i . 'em'
					);
				}
				?>
			</select>
		</label>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_letter_spacing'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<label <?php echo $visibilityAttrs ?>>
			Letter Spacing
			<select class='tf-font-sel-spacing'>
				<option value='normal'>normal</option>
				<?php
				for ( $i = -20; $i <= 20; $i++ ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $i . 'px' ),
						selected( $value['letter-spacing'], $i . 'px', false ),
						$i . 'px'
					);
				}
				?>
			</select>
		</label>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_text_transform'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<label <?php echo $visibilityAttrs ?>>
			Text Transform
			<select class='tf-font-sel-transform'>
				<?php
				$options = array( 'none', 'capitalize', 'uppercase', 'lowercase' );
				foreach ( $options as $option ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $option ),
						selected( $value['text-transform'], $option, false ),
						$option
					);
				}
				?>
			</select>
		</label>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_font_variant'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<label <?php echo $visibilityAttrs ?>>
			Font Variant
			<select class='tf-font-sel-variant'>
				<?php
				$options = array( 'normal', 'small-caps' );
				foreach ( $options as $option ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $option ),
						selected( $value['font-variant'], $option, false ),
						$option
					);
				}
				?>
			</select>
		</label>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_text_shadow'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<label <?php echo $visibilityAttrs ?>>
			Shadow Location
			<select class='tf-font-sel-location'>
				<?php
				$options = array( 'none', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right' );
				foreach ( $options as $option ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $option ),
						selected( $value['text-shadow-location'], $option, false ),
						$option
					);
				}
				?>
			</select>
		</label>
		<label style='display: none'>
			Shadow Distance
			<select class='tf-font-sel-distance'>
				<?php
				for ( $i = 0; $i <= 10; $i++ ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $i . 'px' ),
						selected( $value['text-shadow-distance'], $i . 'px', false ),
						$i . 'px'
					);
				}
				?>
			</select>
		</label>
		<label style='display: none'>
			Shadow Blur
			<select class='tf-font-sel-blur'>
				<?php
				$options = array( '0px', '1px', '2px', '3px', '4px', '5px', '10px', '20px' );
				foreach ( $options as $option ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $option ),
						selected( $value['text-shadow-blur'], $option, false ),
						$option
					);
				}
				?>
			</select>
		</label>
		<label style='display: none'>
			Shadow Color
			<input class="tf-font-sel-shadow-color" type="text" value="<?php echo esc_attr( $value['text-shadow-color'] ) ?>"  data-default-color="<?php echo esc_attr( $value['text-shadow-color'] ) ?>"/>
		</label>
		<label style='display: none'>
			Shadow Opacity
			<select class='tf-font-sel-opacity'>
				<?php
				$options = array( '1', '0.9', '0.8', '0.7', '0.6', '0.5', '0.4', '0.3', '0.2', '0.1', '0' );
				foreach ( $options as $option ) {
					printf( "<option value='%s'%s>%s</option>",
						esc_attr( $option ),
						selected( $value['text-shadow-opacity'], $option, false ),
						$option
					);
				}
				?>
			</select>
		</label>
		</div>
		<?php

		$visibilityAttrs = '';
		if ( ! $this->settings['show_preview'] ) {
			$visibilityAttrs = "data-visible='false' style='display: none'";
		}
		?>
		<div <?php echo $visibilityAttrs ?>>
			<iframe data-preview-text='<?php echo esc_attr( $this->settings['preview_text'] ) ?>'></iframe>
			<i class='dashicons dashicons-admin-appearance btn-dark'></i>
			<input type='hidden' class='tf-font-sel-dark' value='<?php echo esc_attr( $value['dark'] ? 'dark' : '' ) ?>'/>
		</div>
		<?php

		if ( ! is_serialized( $value ) ) {
			$value = serialize( $value );
		}

		printf("<input type='hidden' class='tf-for-saving' name='%s' id='%s' value='%s' />",
			$this->getID(),
			$this->getID(),
			esc_attr( $value )
		);

		$this->echoOptionFooter( false );
	}


	/**
	 * Cleans up the serialized value before saving
	 *
	 * @param	string $value The serialized value
	 * @return	string The cleaned value
	 * @since	1.4
	 */
	public function cleanValueForSaving( $value ) {
		if ( is_array( $value ) ) {
			$value = serialize( $value );
		}
		return stripslashes( $value );
	}


	/**
	 * Cleans the raw value for getting
	 *
	 * @param	string $value The raw value
	 * @return	string The cleaned value
	 * @since	1.4
	 */
	public function cleanValueForGetting( $value ) {
		if ( is_string( $value ) ) {
			$value = maybe_unserialize( stripslashes( $value ) );
		}
		if ( is_array( $value ) ) {
			$value = array_merge( self::$defaultStyling, $value );
		}
		if ( ! empty( $value['font-family'] ) ) {
			$value['font-type'] = in_array( $value['font-family'], array_keys( self::$webSafeFonts ) ) ? 'websafe' : 'google';
		}
		return $value;
	}


	/**
	 * Registers the theme customizer control, for displaying the option
	 *
	 * @param	WP_Customize                    $wp_enqueue_script The customize object

There is no parameter named $wp_enqueue_script. Was it maybe removed?

	 * @param	TitanFrameworkCustomizerSection $section The section where this option will be placed
	 * @param	int                             $priority The order of this control in the section
	 * @return	void
	 * @since	1.4
	 */
	public function registerCustomizerControl( $wp_customize, $section, $priority = 1 ) {
		$wp_customize->add_control( new TitanFrameworkOptionFontControl( $wp_customize, $this->getID(), array(
			'label' => $this->settings['name'],
			'section' => $section->settings['id'],
			'settings' => $this->getID(),
			'description' => $this->settings['desc'],
			'priority' => $priority,
			'params' => $this->settings,
		) ) );
	}
}



/*
 * We create a new control for the theme customizer
 */
add_action( 'customize_register', 'registerTitanFrameworkOptionFontControl', 1 );


/**
 * Creates the option for the theme customizer
 *
 * @return	void
 * @since	1.4
 */
function registerTitanFrameworkOptionFontControl() {
	class TitanFrameworkOptionFontControl extends WP_Customize_Control {
		public $description;
		public $params;

		public function render_content() {
			$this->params['show_preview'] = false;
			TitanFrameworkOptionFont::createFontScript();

			?>
			<div class='tf-font'>
				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<?php

			// Get the current value and merge with defaults
			$value = $this->value();
			if ( is_serialized( $value ) ) {
				$value = unserialize( $value );
			}
			if ( ! is_array( $value ) ) {
				$value = array();
			}
			$value = array_merge( TitanFrameworkOptionFont::$defaultStyling, $value );

			/*
			 * Create all the fields
			 */
			$visibilityAttrs = '';
			if ( ! $this->params['show_font_family'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<div>
			<label <?php echo $visibilityAttrs ?>>
				Font Family
				<select class='tf-font-sel-family'>
					<option value='inherit'>inherit</option>
				    <optgroup label="Web Safe Fonts" class='safe'>
						<?php
						foreach ( TitanFrameworkOptionFont::$webSafeFonts as $family => $label ) {
							printf( "<option value='%s'%s>%s</option>",
								$family,
								selected( $value['font-family'], $family, false ),
								$label
							);
						}
						?>
					</optgroup>
				    <optgroup label="Google WebFonts" class='google'>
						<?php
						$allFonts = titan_get_googlefonts();
						foreach ( $allFonts as $key => $fontStuff ) {
							printf( "<option value='%s'%s>%s</option>",
								esc_attr( $fontStuff['name'] ),
								selected( $value['font-family'], $fontStuff['name'], false ),
								$fontStuff['name']
							);
						}
						?>
					</optgroup>
				</select>
			</label>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_color'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<label <?php echo $visibilityAttrs ?>>
				Color
				<input class='tf-font-sel-color' type="text" value="<?php echo esc_attr( $value['color'] ) ?>"  data-default-color="<?php echo esc_attr( $value['color'] ) ?>"/>
			</label>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_font_size'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<label <?php echo $visibilityAttrs ?>>
				Font Size
				<select class='tf-font-sel-size'>
					<option value='inherit'>inherit</option>
					<?php
					for ( $i = 1; $i <= 150; $i++ ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $i . 'px' ),
							selected( $value['font-size'], $i . 'px', false ),
							$i . 'px'
						);
					}
					?>
				</select>
			</label>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_font_weight'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<label <?php echo $visibilityAttrs ?>>
				Font Weight
				<select class='tf-font-sel-weight'>
					<option value='inherit'>inherit</option>
					<?php
					$options = array( 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900' );
					foreach ( $options as $option ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $option ),
							selected( $value['font-weight'], $option, false ),
							$option
						);
					}
					?>
				</select>
			</label>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_font_style'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<label <?php echo $visibilityAttrs ?>>
				Font Style
				<select class='tf-font-sel-style'>
					<?php
					$options = array( 'normal', 'italic' );
					foreach ( $options as $option ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $option ),
							selected( $value['font-style'], $option, false ),
							$option
						);
					}
					?>
				</select>
			</label>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_line_height'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<label <?php echo $visibilityAttrs ?>>
				Line Height
				<select class='tf-font-sel-height'>
					<?php
					for ( $i = .5; $i <= 3; $i += 0.1 ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $i . 'em' ),
							selected( $value['line-height'], $i . 'em', false ),
							$i . 'em'
						);
					}
					?>
				</select>
			</label>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_letter_spacing'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<label <?php echo $visibilityAttrs ?>>
				Letter Spacing
				<select class='tf-font-sel-spacing'>
					<option value='normal'>normal</option>
					<?php
					for ( $i = -20; $i <= 20; $i++ ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $i . 'px' ),
							selected( $value['letter-spacing'], $i . 'px', false ),
							$i . 'px'
						);
					}
					?>
				</select>
			</label>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_text_transform'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<label <?php echo $visibilityAttrs ?>>
				Text Transform
				<select class='tf-font-sel-transform'>
					<?php
					$options = array( 'none', 'capitalize', 'uppercase', 'lowercase' );
					foreach ( $options as $option ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $option ),
							selected( $value['text-transform'], $option, false ),
							$option
						);
					}
					?>
				</select>
			</label>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_font_variant'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<label <?php echo $visibilityAttrs ?>>
				Font Variant
				<select class='tf-font-sel-variant'>
					<?php
					$options = array( 'normal', 'small-caps' );
					foreach ( $options as $option ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $option ),
							selected( $value['font-variant'], $option, false ),
							$option
						);
					}
					?>
				</select>
			</label>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_text_shadow'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<label <?php echo $visibilityAttrs ?>>
				Shadow Location
				<select class='tf-font-sel-location'>
					<?php
					$options = array( 'none', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right' );
					foreach ( $options as $option ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $option ),
							selected( $value['text-shadow-location'], $option, false ),
							$option
						);
					}
					?>
				</select>
			</label>
			<label style='display: none'>
				Shadow Distance
				<select class='tf-font-sel-distance'>
					<?php
					for ( $i = 0; $i <= 10; $i++ ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $i . 'px' ),
							selected( $value['text-shadow-distance'], $i . 'px', false ),
							$i . 'px'
						);
					}
					?>
				</select>
			</label>
			<label style='display: none'>
				Shadow Blur
				<select class='tf-font-sel-blur'>
					<?php
					$options = array( '0px', '1px', '2px', '3px', '4px', '5px', '10px', '20px' );
					foreach ( $options as $option ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $option ),
							selected( $value['text-shadow-blur'], $option, false ),
							$option
						);
					}
					?>
				</select>
			</label>
			<label style='display: none'>
				Shadow Color
				<input class="tf-font-sel-shadow-color" type="text" value="<?php echo esc_attr( $value['text-shadow-color'] ) ?>"  data-default-color="<?php echo esc_attr( $value['text-shadow-color'] ) ?>"/>
			</label>
			<label style='display: none'>
				Shadow Opacity
				<select class='tf-font-sel-opacity'>
					<?php
					$options = array( '1', '0.9', '0.8', '0.7', '0.6', '0.5', '0.4', '0.3', '0.2', '0.1', '0' );
					foreach ( $options as $option ) {
						printf( "<option value='%s'%s>%s</option>",
							esc_attr( $option ),
							selected( $value['text-shadow-opacity'], $option, false ),
							$option
						);
					}
					?>
				</select>
			</label>
			</div>
			<?php

			$visibilityAttrs = '';
			if ( ! $this->params['show_preview'] ) {
				$visibilityAttrs = "data-visible='false' style='display: none'";
			}
			?>
			<div <?php echo $visibilityAttrs ?>>
				<iframe></iframe>
				<i class='dashicons dashicons-admin-appearance btn-dark'></i>
				<input type='hidden' class='tf-font-sel-dark' value='<?php echo esc_attr( $value['dark'] ? 'dark' : '' ) ?>'/>
			</div>
			<?php

			if ( ! is_serialized( $value ) ) {
				$value = serialize( $value );
			}

			?>
			<input type='hidden' class='tf-for-saving' <?php $this->link() ?> value='<?php echo esc_attr( $value ) ?>'/>
			</div>
			<?php
			echo "<p class='description'>{$this->description}</p>";
		}
	}
}