ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / thebhoeo / public_html / wp-content / themes / woodmart / inc / admin / modules / options / controls / typography

<?php
/**
 * Typography settings for particular CSS selectors.
 *
 * @package woodmart
 */

namespace XTS\Admin\Modules\Options\Controls;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Direct access not allowed.
}

use XTS\Admin\Modules\Options\Field;
use XTS\Admin\Modules\Options;
use XTS\Admin\Modules\Options\Google_Fonts\Google_Fonts;
use XTS\Admin\Modules\Options\Presets;

/**
 * Class for typography settings control.
 */
class Typography extends Field {

/**
	 * Default field value.
	 *
	 * @since 1.0.0
	 *
	 * @var array
	 */
	private $default_value = array(
		'selector'          => array(),
		'selector_var'      => array(),
		'google'            => false,
		'custom'            => false,
		'custom-selector'   => '',
		'font-family'       => '',
		'font-weight'       => '',
		'font-variant'      => '',
		'advanced-variants' => array(),
		'font-style'        => '',
		'font-size'         => '',
		'line-height'       => '',
		'color'             => '',
		'background'        => '',
		'font-subset'       => '',
		'tablet'            => array(
			'font-size'   => '',
			'line-height' => '',
			'padding'     => array(
				'top'    => '',
				'right'  => '',
				'bottom' => '',
				'left'   => '',
			),
		),
		'mobile'            => array(
			'font-size'   => '',
			'line-height' => '',
			'padding'     => array(
				'top'    => '',
				'right'  => '',
				'bottom' => '',
				'left'   => '',
			),
		),
		'hover'             => array(
			'color'      => '',
			'background' => '',
		),
		'text-transform'    => '',
		'padding'           => array(
			'top'    => '',
			'right'  => '',
			'bottom' => '',
			'left'   => '',
		),
	);

/**
	 * Google fonts array.
	 *
	 * @since 1.0.0
	 *
	 * @var array
	 */
	public $google_fonts = array();

/**
	 * Construct the object.
	 *
	 * @since 1.0.0
	 *
	 * @param array  $args        Field args array.
	 * @param array  $options     Options from the database.
	 * @param string $type        Field type.
	 * @param string $object_type Object type.
	 */
	public function __construct( $args, $options, $type = 'options', $object_type = 'post' ) {
		parent::__construct( $args, $options, $type, $object_type );

add_action( 'wp_enqueue_scripts', array( $this, 'frontend_enqueue' ), 300 );

add_action( 'admin_print_styles-post.php', array( $this, 'frontend_enqueue' ), 300 );
		add_action( 'admin_print_styles-post-new.php', array( $this, 'frontend_enqueue' ), 300 );
		add_action( 'admin_print_styles-widgets.php', array( $this, 'frontend_enqueue' ), 300 );

$this->args = wp_parse_args(
			$args,
			array(
				'font-size'         => true,
				'line-height'       => true,
				'text-transform'    => false,
				'color'             => true,
				'color-hover'       => false,
				'selector'          => '',
				'selector-hover'    => false,
				'background'        => false,
				'background-hover'  => false,
				'padding'           => false,
				'advanced-variants' => false,
			)
		);

$this->google_fonts = Google_Fonts::$all_google_fonts;
	}

/**
	 * Displays the field control HTML.
	 *
	 * @since 1.0.0
	 *
	 * @return void.
	 */
	public function render_control() {
		$value = $this->get_field_value();
		// get last index from the array.
		$key = 0;
		if ( is_array( $value ) ) {
			end( $value );
			$key = key( $value );
		}

echo '<div id="' . esc_attr( $this->get_id() ) . '" class="xts-advanced-typography-field ' . ( ( $this->is_multiple_field() ) ? 'xts-multiple-typography' : 'xts-single-typography' ) . '" data-id="' . esc_attr( $this->get_id() ) . '" data-key="' . esc_attr( $key ) . '">';

echo '<div class="xts-typography-sections">';

if ( is_array( $value ) && count( $value ) > 0 && $this->is_multiple_field() ) {
			foreach ( $value as $index => $value ) {
				$this->render_section( $index );
			}
		} else {
			$this->render_section( 0 );
		}

echo '</div>';

if ( $this->is_multiple_field() ) {
			$this->section_template( false );
			echo '<div class="xts-typography-btn-add xts-font-section-add xts-inline-btn xts-color-primary xts-i-add">' . esc_html__( 'Add rule', 'woodmart' ) . '</div>';
		}

echo '</div>';
	}

/**
	 * Check is it multiple typography field.
	 *
	 * @since 1.0.0
	 *
	 * @return boolean.
	 */
	private function is_multiple_field() {
		return isset( $this->args['selectors'] );
	}

/**
	 * Renders one typography settings section based on index.
	 *
	 * @since 1.0.0
	 *
	 * @param integer $index  Section index.
	 *
	 * @return void.
	 */
	public function render_section( $index ) {
		$default_value = $this->default_value;
		$value         = $this->get_field_value();
		$section_value = array();

if ( '{{index}}' === $index ) {
			return;
		}

if ( isset( $value[ $index ] ) ) {
			$section_value = wp_parse_args( $value[ $index ], $default_value );
		} else {
			$section_value = $default_value;
		}

// Is selected font a Google font.
		$google = '0';

if ( isset( $this->google_fonts[ $section_value['font-family'] ] ) ) {
			$google = '1';
		}

$this->section_template(
			$index,
			array(
				'google' => $google,
				'value'  => $section_value,
			)
		);
	}

/**
	 * Displays the section template.
	 *
	 * @since 1.0.0
	 *
	 * @param integer $i  Section index.
	 * @param array   $data  Section data.
	 *
	 * @return void.
	 */
	public function section_template( $i, $data = array() ) {
		$index = ( false === $i ) ? '{{index}}' : $i;

extract( // phpcs:ignore
			wp_parse_args(
				$data,
				array(
					'google' => '0',
					'value'  => $this->default_value,
				)
			)
		);

$default = isset( Options::get_default( $this->args )[ $i ] ) ? Options::get_default( $this->args )[ $i ] : array();

$idle             = isset( $value['color'] ) ? $value['color'] : '';
		$hover            = isset( $value['hover']['color'] ) ? $value['hover']['color'] : '';
		$font_size        = isset( $value['font-size'] ) ? $value['font-size'] : '';
		$font_weight      = isset( $value['font-weight'] ) ? $value['font-weight'] : '';
		$transform        = isset( $value['text-transform'] ) ? $value['text-transform'] : '';
		$font_family      = isset( $value['font-family'] ) ? $value['font-family'] : '';
		$font_subset      = isset( $value['font-subset'] ) ? $value['font-subset'] : '';
		$background       = isset( $value['background'] ) ? $value['background'] : '';
		$background_hover = isset( $value['hover']['background'] ) ? $value['hover']['background'] : '';

if ( ! $font_weight && ! $font_family ) {
			if ( isset( $default['font-family'] ) ) {
				$font_family = $default['font-family'];
			}

if ( isset( $default['font-weight'] ) ) {
				$font_weight = $default['font-weight'];
			}
		}

if ( ! $font_size && isset( $default['font-size'] ) ) {
			$font_size = $default['font-size'];
		}

if ( ! $transform && isset( $default['text-transform'] ) ) {
			$transform = $default['text-transform'];
		}

if ( ! $font_subset && isset( $default['font-subset'] ) ) {
			$font_subset = $default['font-subset'];
		}

if ( ! $idle && isset( $default['color'] ) ) {
			$idle = $default['color'];
		}

if ( ! $hover && isset( $default['hover']['color'] ) ) {
			$hover = $default['hover']['color'];
		}

if ( ! $background && isset( $default['background'] ) ) {
			$background = $default['background'];
		}

if ( ! $background_hover && isset( $default['hover']['background'] ) ) {
			$background_hover = $default['hover']['background'];
		}

if ( empty( $this->args['selectors'] ) && isset( $this->args['callback'] ) ) {
			$this->args['selectors'] = $this->args['callback']();
		}

?>
		<div class="xts-font-section xts-group xts-typography-section <?php echo ( ( false === $i ) ? 'xts-typography-template hide' : '' ); ?>" data-id="<?php echo esc_attr( $this->get_id() ); ?>-<?php echo esc_attr( $index ); ?>">
			<div class="xts-typography-font-container xts-row xts-sp-20">

<?php if ( $this->is_multiple_field() ) : ?>
					<div class="xts-col-12">
						<input type="hidden" class="xts-typography-custom-input" name="<?php echo esc_attr( $this->get_input_name( $index, 'custom' ) ); ?>" value="<?php echo esc_attr( $value['custom'] ); ?>"  />
						<select class="xts-typography-selector" name="<?php echo esc_attr( $this->get_input_name( $index, 'selector', '' ) ); ?>" multiple="multiple" data-placeholder="<?php esc_attr_e( 'Assigned to elements', 'woodmart' ); ?>">
							<?php
							$group = false;
							foreach ( $this->args['selectors'] as $id => $selector ) {
								if ( ! is_array( $selector ) ) {
									continue;
								}

if ( ! isset( $selector['selector'] ) && ! isset( $selector['selector_var'] ) ) {
									if ( $group ) {
										echo '</optgroup>';
									}
									echo '<optgroup label="' . esc_attr( $selector['title'] ) . '">';
									$group = true;
									continue;
								}

$attributes  = in_array( $id, $value['selector'], true ) ? ' selected="selected" ' : '';
								$attributes .= ! empty( $selector['hint'] ) ? ' data-hint-src="' . $selector['hint'] : '';
								echo '<option value="' . esc_attr( $id ) . '" ' . $attributes . '">'; // phpcs:ignore
								echo esc_html( $selector['title'] );
								echo '</option>';
							}
							if ( $group ) {
								echo '</optgroup>';
							}
							?>
						</select>
						<input type="text" placeholder="For ex.: .my-custom-class" class="xts-typography-custom-selector<?php echo ( ( ! $value['custom'] ) ? ' hide' : '' ); ?>" name="<?php echo esc_attr( $this->get_input_name( $index, 'custom-selector' ) ); ?>" value="<?php echo esc_attr( $value['custom-selector'] ); ?>"  />
					</div>
				<?php endif; ?>

<div class="xts-col-12 xts-col-lg-6">
					<input type="hidden" class="xts-typography-google-input" name="<?php echo esc_attr( $this->get_input_name( $index, 'google' ) ); ?>" value="<?php echo esc_attr( $google ); ?>">

<input type="hidden" class="xts-typography-family-input" name="<?php echo esc_attr( $this->get_input_name( $index, 'font-family' ) ); ?>" value="<?php echo esc_attr( $font_family ); ?>"  />

<select class="xts-typography-family select2-container" data-placeholder="<?php esc_attr_e( 'Font family', 'woodmart' ); ?>" data-value="<?php echo esc_attr( $font_family ); ?>">
						<?php if ( $font_family ) : ?>
							<option>
								<?php echo esc_html( $font_family ); ?>
							</option>
						<?php else : ?>
							<option disabled selected>
								<?php esc_attr_e( 'Font family', 'woodmart' ); ?>
							</option>
						<?php endif; ?>
					</select>
				</div>

<input type="hidden" class="xts-typography-weight-input" name="<?php echo esc_attr( $this->get_input_name( $index, 'font-weight' ) ); ?>" value="<?php echo esc_attr( $font_weight ); ?>"  />

<input type="hidden" class="xts-typography-style-input" name="<?php echo esc_attr( $this->get_input_name( $index, 'font-style' ) ); ?>" value="<?php echo esc_attr( $value['font-style'] ); ?>"/>

<select data-placeholder="<?php esc_attr_e( 'Style', 'woodmart' ); ?>" class="xts-typography-style" original-title="<?php esc_attr_e( 'Font style', 'woodmart' ); ?>" data-value="<?php echo esc_attr( $style ); ?>">
					</select>
				</div>

<?php if ( $this->args['text-transform'] ) : ?>
					<div class="xts-col-12 xts-col-lg-12">
						<div class="xts-typography-extra-container">
							<select class="xts-typography-transform" data-placeholder="<?php esc_attr_e( 'Text transform', 'woodmart' ); ?>" name="<?php echo esc_attr( $this->get_input_name( $index, 'text-transform' ) ); ?>">
								<option value=""></option>
								<option value="capitalize" <?php selected( $transform, 'capitalize' ); ?>>Capitalize</option>
								<option value="lowercase" <?php selected( $transform, 'lowercase' ); ?>>Lowercase</option>
								<option value="uppercase" <?php selected( $transform, 'uppercase' ); ?>>Uppercase</option>
								<option value="none" <?php selected( $transform, 'none' ); ?>>None</option>
								<option value="inherit" <?php selected( $transform, 'inherit' ); ?>>Inherit</option>
							</select>
						</div>
					</div>
				<?php endif; ?>

<?php if ( $this->args['advanced-variants'] ) : ?>
					<div class="xts-typography-additional-styles-container xts-col-12 xts-col-lg-12<?php echo ! $google ? ' hide' : ''; ?>">
						<?php
							$additional_variants     = isset( $value['advanced-variants'] ) ? (array) $value['advanced-variants'] : array();
							$additional_variants_str = implode( ',', array_filter( $additional_variants ) );
						?>

<select
							data-placeholder="<?php esc_attr_e( 'Additional styles', 'woodmart' ); ?>"
							class="xts-typography-additional-style xts-select2"
							name="<?php echo esc_attr( $this->get_input_name( $index, 'advanced-variants', '' ) ); ?>"
							data-value="<?php echo esc_attr( $additional_variants_str ); ?>"
							multiple="multiple">
						</select>
						<div class="xts-field-description">
							<?php esc_html_e( 'Only required if you change the font weight or use italic for this font in other areas of the site.', 'woodmart' ); ?>
						</div>
					</div>
				<?php endif; ?>
			</div>

<?php if ( $this->args['font-size'] || $this->args['line-height'] ) : ?>
				<div class="xts-typography-text-container xts-row xts-sp-20">
					<?php if ( $this->args['font-size'] ) : ?>
						<div class="xts-col-12 xts-col-lg-6">
							<div class="xts-typography-size-container xts-typography-responsive-controls">
								<div class="xts-typography-size-point xts-typography-control-desktop xts-input-append-wrap">
									<label class="xts-i-desktop"><?php esc_html_e( 'Font size', 'woodmart' ); ?></label>
									<div class="xts-input-append">
										<input type="number" name="<?php echo esc_attr( $this->get_input_name( $index, 'font-size' ) ); ?>" value="<?php echo esc_attr( $font_size ); ?>"  /><span class="xts-add-on">px</span>
									</div>
								</div>
								<div class="xts-typography-responsive-opener xts-i-button-right" title="Responsive controls"></div>
								<div class="xts-typography-size-point xts-typography-control-tablet xts-input-append-wrap <?php echo ( ! empty( $value['tablet']['font-size'] ) ? 'show' : 'hide' ); ?>">
									<label class="xts-i-tablet"><?php esc_html_e( 'Tablet', 'woodmart' ); ?></label>
									<div class="xts-input-append">
										<input type="number" name="<?php echo esc_attr( $this->get_input_name( $index, 'tablet', 'font-size' ) ); ?>" value="<?php echo esc_attr( $value['tablet']['font-size'] ); ?>"  /><span class="xts-add-on">px</span>
									</div>
								</div>
								<div class="xts-typography-size-point xts-typography-control-mobile xts-input-append-wrap <?php echo ( ! empty( $value['tablet']['font-size'] ) ? 'show' : 'hide' ); ?>">
									<label class="xts-i-phone"><?php esc_html_e( 'Mobile', 'woodmart' ); ?></label>
									<div class="xts-input-append">
										<input type="number" name="<?php echo esc_attr( $this->get_input_name( $index, 'mobile', 'font-size' ) ); ?>" value="<?php echo esc_attr( $value['mobile']['font-size'] ); ?>"  /><span class="xts-add-on">px</span>
									</div>
								</div>
							</div>
						</div>
					<?php endif; ?>
					<?php if ( $this->args['line-height'] ) : ?>
						<div class="xts-col-12 xts-col-lg-6">
							<div class="xts-typography-height-container xts-typography-responsive-controls">
								<div class="xts-typography-height-point xts-typography-control-desktop xts-input-append-wrap">
									<label class="xts-i-desktop"><?php esc_html_e( 'Line height', 'woodmart' ); ?></label>
									<div class="xts-input-append">
										<input type="number" step="0.01" name="<?php echo esc_attr( $this->get_input_name( $index, 'line-height' ) ); ?>" value="<?php echo esc_attr( $value['line-height'] ); ?>"/><span class="xts-add-on">px</span>
									</div>
								</div>
								<div class="xts-typography-responsive-opener xts-i-button-right" title="Responsive controls"></div>
								<div class="xts-typography-height-point xts-typography-control-tablet xts-input-append-wrap <?php echo ( ! empty( $value['tablet']['line-height'] ) ) ? 'show' : 'hide'; ?>">
									<label class="xts-i-tablet"><?php esc_html_e( 'Tablet', 'woodmart' ); ?></label>
									<div class="xts-input-append">
										<input type="number" step="0.01" name="<?php echo esc_attr( $this->get_input_name( $index, 'tablet', 'line-height' ) ); ?>" value="<?php echo esc_attr( $value['tablet']['line-height'] ); ?>"/><span class="xts-add-on">px</span>
									</div>
								</div>
								<div class="xts-typography-height-point xts-typography-control-mobile xts-input-append-wrap <?php echo ( ! empty( $value['tablet']['line-height'] ) ) ? 'show' : 'hide'; ?>">
									<label class="xts-i-phone"><?php esc_html_e( 'Mobile', 'woodmart' ); ?></label>
									<div class="xts-input-append">
										<input type="number" step="0.01" name="<?php echo esc_attr( $this->get_input_name( $index, 'mobile', 'line-height' ) ); ?>" value="<?php echo esc_attr( $value['mobile']['line-height'] ); ?>"/><span class="xts-add-on">px</span>
									</div>
								</div>
							</div>
						</div>
					<?php endif; ?>
				</div>
			<?php endif; ?>

<?php if ( $this->args['color'] || $this->args['color-hover'] || $this->args['background'] || $this->args['background-hover'] || $this->args['padding'] ) : ?>
				<div class="xts-typography-text-container xts-row xts-sp-20">
					<?php if ( $this->args['color'] ) : ?>
						<div class="xts-typography-color-container xts-col-12 xts-col-lg-6">
							<div class="xts-typography-color-point">
								<label>
									<?php esc_html_e( 'Color', 'woodmart' ); ?>
								</label>
								<input type="text" placeholder="<?php __( 'Color', 'woodmart' ); ?>" data-alpha-enabled="<?php echo isset( $this->args['alpha'] ) ? esc_attr( $this->args['alpha'] ) : 'true'; ?>" name="<?php echo esc_attr( $this->get_input_name( $index, 'color' ) ); ?>" value="<?php echo esc_attr( $idle ); ?>" class="xts-typography-color color-picker" />
							</div>
						</div>
					<?php endif; ?>

<?php if ( $this->args['color-hover'] ) : ?>
						<div class="xts-typography-color-container xts-col-12 xts-col-lg-6">
							<div class="xts-typography-color-point">
								<label>
									<?php esc_html_e( 'Color on hover', 'woodmart' ); ?>
								</label>
								<input type="text" placeholder="<?php __( 'Color', 'woodmart' ); ?>" data-alpha-enabled="<?php echo isset( $this->args['alpha'] ) ? esc_attr( $this->args['alpha'] ) : 'true'; ?>" name="<?php echo esc_attr( $this->get_input_name( $index, 'hover', 'color' ) ); ?>" value="<?php echo esc_attr( $hover ); ?>" class="xts-typography-color-hover color-picker" />
							</div>
						</div>
					<?php endif; ?>

<?php if ( $this->args['background'] ) : ?>
						<div class="xts-typography-color-container xts-typography-control-background xts-col-12 xts-col-lg-6">
							<div class="xts-typography-color-point">
								<label>
									<?php esc_html_e( 'Background', 'woodmart' ); ?>
								</label>
								<input type="text" placeholder="<?php __( 'Background', 'woodmart' ); ?>" data-alpha-enabled="<?php echo isset( $this->args['alpha'] ) ? esc_attr( $this->args['alpha'] ) : 'true'; ?>" name="<?php echo esc_attr( $this->get_input_name( $index, 'background' ) ); ?>" value="<?php echo esc_attr( $background ); ?>" class="xts-typography-background color-picker" />
							</div>
						</div>
					<?php endif; ?>

<?php if ( $this->args['background-hover'] ) : ?>
						<div class="xts-typography-color-container xts-typography-control-background-hover xts-col-12 xts-col-lg-6">
							<div class="xts-typography-color-point">
								<label>
									<?php esc_html_e( 'Background on hover', 'woodmart' ); ?>
								</label>
								<input type="text" placeholder="<?php __( 'Background on hover', 'woodmart' ); ?>" data-alpha-enabled="<?php echo isset( $this->args['alpha'] ) ? esc_attr( $this->args['alpha'] ) : 'true'; ?>" name="<?php echo esc_attr( $this->get_input_name( $index, 'hover', 'background' ) ); ?>" value="<?php echo esc_attr( $background_hover ); ?>" class="xts-typography-background-hover color-picker" />
							</div>
						</div>
					<?php endif; ?>

<?php if ( ! empty( $this->args['padding'] ) ) : ?>
						<div class="xts-dimensions-control xts-col-6">
							<label>
								<?php esc_html_e( 'Padding', 'woodmart' ); ?>
							</label>
							<div class="xts-dimensions xts-field-type-input xts-require-all-values">
								<div class="xts-control-tabs-nav">
									<span class="xts-control-tab-nav-item xts-device wd-desktop xts-active" data-value="desktop"></span>
									<span class="xts-control-tab-nav-item xts-device wd-tablet" data-value="tablet"></span>
									<span class="xts-control-tab-nav-item xts-device wd-mobile" data-value="mobile"></span>
								</div>

<?php
								$devices    = array(
									'desktop' => array( 'padding' ),
									'tablet'  => array( 'tablet', 'padding' ),
									'mobile'  => array( 'mobile', 'padding' ),
								);
								$dimensions = array(
									'top'    => esc_html__( 'Top', 'woodmart' ),
									'right'  => esc_html__( 'Right', 'woodmart' ),
									'bottom' => esc_html__( 'Bottom', 'woodmart' ),
									'left'   => esc_html__( 'Left', 'woodmart' ),
								);

foreach ( $devices as $device => $data ) :
									$device_settings = $value;
									foreach ( $data as $k ) {
										$device_settings = isset( $device_settings[ $k ] ) ? $device_settings[ $k ] : array();
									}

$has_any_value = (bool) array_filter( array_intersect_key( $device_settings, $dimensions ), 'strlen' );
									?>
									<div class="xts-control-tab-content<?php echo 'desktop' === $device ? ' xts-active' : ''; ?>" data-device="<?php echo esc_attr( $device ); ?>" data-unit="px">
										<?php foreach ( $dimensions as $dim_key => $dim_title ) : ?>
											<?php
											$current_value = isset( $device_settings[ $dim_key ] ) ? $device_settings[ $dim_key ] : '';
											$placeholder   = ( $has_any_value && ! $current_value ) ? '0' : '';

$input_name_args = array_merge( array( $index ), $data, array( $dim_key ) );
											$input_name      = call_user_func_array( array( $this, 'get_input_name' ), $input_name_args );
											?>
											<div class="xts-dimensions-field">
												<span class="xts-dimensions-field-value-input">
													<input
														id="<?php echo esc_attr( $input_name ); ?>"
														type="number"
														value="<?php echo esc_attr( $current_value ); ?>"
														min="0"
														name="<?php echo esc_attr( $input_name ); ?>"
														placeholder="<?php echo esc_attr( $placeholder ); ?>"
													>
													<label for="<?php echo esc_attr( $input_name ); ?>">
														<?php echo esc_attr( $dim_title ); ?>
													</label>
												</span>
											</div>
										<?php endforeach; ?>
										<div class="xts-lock-units xts-add-on"></div>
									</div>
								<?php endforeach; ?>
							</div>
						</div>
					<?php endif; ?>
				</div>
			<?php endif; ?>

<p class="xts-typography-preview hide">1 2 3 4 5 6 7 8 9 0 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
			<?php if ( $this->is_multiple_field() ) : ?>
				<div class="xts-typography-btn-remove xts-font-section-remove xts-inline-btn xts-color-warning xts-i-trash">
					<?php esc_html_e( 'Remove', 'woodmart' ); ?>
				</div>
			<?php endif; ?>
		</div>

<?php
	}

/**
	 * Enqueue colorpicker lib.
	 *
	 * @since 1.0.0
	 */
	public function enqueue() {
		wp_enqueue_script( 'jquery-ui-autocomplete' );
		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker-alpha', WOODMART_ASSETS . '/js/libs/wp-color-picker-alpha.js', array( 'wp-color-picker' ), woodmart_get_theme_info( 'Version' ), true );
		wp_enqueue_script( 'select2' );
		wp_enqueue_script(
			'webfontloader',
			'https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js',
			array( 'jquery' ),
			'1.5.0',
			true
		);
	}

/**
	 * Frontend enqueue .
	 *
	 * @since 1.0.0
	 */
	public function frontend_enqueue() {
		$this->add_google_fonts();
	}

/**
	 * Add google fonts
	 *
	 * @since 1.0.0
	 */
	public function add_google_fonts() {
		if ( empty( $this->get_field_value() ) ) {
			return;
		}

$active_presets = Presets::get_active_presets();

if ( $active_presets ) {
			$this->set_presets( $active_presets );
		}

$value = $this->get_field_value();

foreach ( $value as $typography ) {
			if ( 'text-font' === $this->args['id'] && ! empty( $typography['font-family'] ) ) {
				$default_font_weights = Google_Fonts::get_default_font_weights( $typography['font-family'] );

foreach ( $default_font_weights as $weight ) {
					$typography['variants'][] = array(
						'id'   => $weight,
						'name' => 'Normal ' . $weight,
					);
				}
			}

Google_Fonts::add_google_font( $typography );
		}
	}

/**
	 * Output field's css code based on the settings.
	 *
	 * @since 1.0.0
	 *
	 * @param string $key Key.
	 * @param array  $typography Typography.
	 *
	 * @return string $output Generated CSS code.
	 */
	public function generate_var_css_code( $key, $typography ) {
		$output    = '';
		$suffix    = '';
		$std_fonts = woodmart_get_config( 'standard-fonts' );
		$value     = isset( $typography[ $key ] ) ? $typography[ $key ] : '';
		$is_var    = false;

if ( 'color-hover' === $key ) {
			$value = isset( $typography['hover']['color'] ) ? $typography['hover']['color'] : '';
		} elseif ( 'background-hover' === $key ) {
			$value = isset( $typography['hover']['background'] ) ? $typography['hover']['background'] : '';
		}

if ( ! $value ) {
			return $output;
		}

if ( 'font-family' === $key ) {
			$is_var = 0 === strpos( trim( $value ), 'var(' );

if ( in_array( $value, $std_fonts, true ) ) {
				$value = array_search( $value, $std_fonts, true );
			} else {
				$value  = $is_var ? $value : '"' . $value . '"';
				$suffix = apply_filters( 'woodmart_backup_fonts', ', Arial, Helvetica, sans-serif' );
			}
		}

if ( 'line-height' === $key || 'font-size' === $key ) {
			$suffix = 'px';
		}

if ( 'padding' === $key && is_array( $value ) ) {
			$top    = isset( $value['top'] ) ? $value['top'] : '';
			$right  = isset( $value['right'] ) ? $value['right'] : '';
			$bottom = isset( $value['bottom'] ) ? $value['bottom'] : '';
			$left   = isset( $value['left'] ) ? $value['left'] : '';

if ( '' !== $top || '' !== $right || '' !== $bottom || '' !== $left ) {
				$top    = '' !== $top ? $top . 'px' : '0';
				$right  = '' !== $right ? $right . 'px' : '0';
				$bottom = '' !== $bottom ? $bottom . 'px' : '0';
				$left   = '' !== $left ? $left . 'px' : '0';

$value = $top . ' ' . $right . ' ' . $bottom . ' ' . $left;
			} else {
				return $output;
			}
		}

if ( $is_var ) {
			$suffix = '';
		}

if ( isset( $this->args['selector_var'][ $key ] ) ) {
			$output .= $this->args['selector_var'][ $key ] . ': ' . $value . $suffix . ';' . "\n";
		} elseif ( isset( $typography['selector_var'][ $key ] ) ) {
			$output .= $typography['selector_var'][ $key ] . ': ' . $value . $suffix . ';' . "\n";
		}

return $output;
	}

/**
	 * Output field's css code based on the settings.
	 *
	 * @since 1.0.0
	 *
	 * @return array $output Generated CSS code.
	 */
	public function css_output() {
		if ( empty( $this->get_field_value() ) ) {
			return array();
		}

$value      = $this->get_field_value();
		$output_css = array();

if ( empty( $this->args['selectors'] ) && ! empty( $this->args['callback'] ) ) {
			$this->args['selectors'] = $this->args['callback']();
		}

foreach ( $value as $i => $typography ) {
			if ( isset( $this->args['callback'] ) && ! empty( $typography['selector'] ) ) {
				foreach ( $typography['selector'] as $key => $selector ) {
					if ( ! empty( $this->args['selectors'][ $selector ]['selector_var'] ) ) {
						$typography['selector_var'] = $this->args['selectors'][ $selector ]['selector_var'];

if ( isset( $typography['tablet'] ) && is_array( $typography['tablet'] ) ) {
							$typography['tablet']['selector_var'] = $this->args['selectors'][ $selector ]['selector_var'];
						}
						if ( isset( $typography['mobile'] ) && is_array( $typography['mobile'] ) ) {
							$typography['mobile']['selector_var'] = $this->args['selectors'][ $selector ]['selector_var'];
						}

unset( $value[ $i ]['selector'][ $key ] );
					}
				}

if ( empty( $typography['selector_var'] ) ) {
					continue;
				}
			} elseif ( ! isset( $this->args['selector_var'] ) ) {
				continue;
			}

$default     = Options::get_default( $this->args )[0];
			$idle        = isset( $typography['color'] ) ? $typography['color'] : '';
			$hover       = isset( $typography['hover'] ) ? $typography['hover']['color'] : '';
			$font_size   = isset( $typography['font-size'] ) ? $typography['font-size'] : '';
			$font_weight = isset( $typography['font-weight'] ) ? $typography['font-weight'] : '';
			$transform   = isset( $typography['text-transform'] ) ? $typography['text-transform'] : '';
			$font_family = isset( $typography['font-family'] ) ? $typography['font-family'] : '';
			$font_subset = isset( $typography['font-subset'] ) ? $typography['font-subset'] : '';

if ( ! $font_subset && isset( $default['font-subset'] ) ) {
				$typography['font-subset'] = $default['font-subset'];
			}

if ( ! $font_size && isset( $default['font-size'] ) ) {
				$typography['font-size'] = $default['font-size'];
			}

if ( ! $font_weight && isset( $default['font-weight'] ) ) {
				$typography['font-weight'] = $default['font-weight'];
			}

if ( ! $transform && isset( $default['text-transform'] ) ) {
				$typography['text-transform'] = $default['text-transform'];
			}

if ( ! $font_family && isset( $default['font-family'] ) ) {
				$typography['font-family'] = $default['font-family'];
			}

if ( ! $idle && isset( $default['color'] ) ) {
				$typography['color'] = $default['color'];
			}

if ( ! $hover && isset( $default['hover']['color'] ) ) {
				$typography['hover']['color'] = $default['hover']['color'];
			}

if ( ! empty( $typography['font-family'] ) || ! empty( $typography['font-weight'] ) || ! empty( $typography['text-transform'] ) || ! empty( $typography['color'] ) || ! empty( $typography['font-style'] ) || ! empty( $typography['font-size'] ) || ! empty( $typography['line-height'] ) || ! empty( $typography['background'] ) || ! empty( $typography['hover']['color'] ) || ! empty( $typography['hover']['background'] ) || ! empty( $typography['padding'] ) ) {
				$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'font-family', $typography );
				$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'font-weight', $typography );
				$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'text-transform', $typography );
				$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'color', $typography );
				$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'font-style', $typography );
				$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'font-size', $typography );
				$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'line-height', $typography );
				$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'background', $typography );
				$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'padding', $typography );

if ( isset( $typography['hover'] ) ) {
					$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'color-hover', $typography );
					$output_css['desktop'][':root'][] = $this->generate_var_css_code( 'background-hover', $typography );
				}

Google_Fonts::add_google_font( $typography );
			}

if ( isset( $typography['tablet'] ) && is_array( $typography['tablet'] ) ) {
				if ( ! isset( $output_css['tablet'][':root'] ) ) {
					$output_css['tablet'][':root'] = array();
				}

$output_css['tablet'][':root'][] = $this->generate_var_css_code( 'font-size', $typography['tablet'] );
				$output_css['tablet'][':root'][] = $this->generate_var_css_code( 'line-height', $typography['tablet'] );
				$output_css['tablet'][':root'][] = $this->generate_var_css_code( 'padding', $typography['tablet'] );
			}

if ( isset( $typography['mobile'] ) && is_array( $typography['mobile'] ) ) {
				if ( ! isset( $output_css['mobile'][':root'] ) ) {
					$output_css['mobile'][':root'] = array();
				}

$output_css['mobile'][':root'][] = $this->generate_var_css_code( 'font-size', $typography['mobile'] );
				$output_css['mobile'][':root'][] = $this->generate_var_css_code( 'line-height', $typography['mobile'] );
				$output_css['mobile'][':root'][] = $this->generate_var_css_code( 'padding', $typography['mobile'] );
			}
		}

foreach ( $value as $typography ) {
			if ( ( empty( $typography['selector'] ) && $this->is_multiple_field() ) || isset( $this->args['selector_var'] ) ) {
				continue;
			}

if ( ! $this->is_multiple_field() ) {
				$selector       = $this->args['selector'];
				$hover_selector = isset( $this->args['selector_hover'] ) ? $this->args['selector_hover'] : $this->args['selector'] . ':hover';
			} else {
				$custom_selector = isset( $typography['custom-selector'] ) ? $typography['custom-selector'] : false;
				$selector        = $this->combine_selectors( $typography['selector'], false, $custom_selector );
				$hover_selector  = $this->combine_selectors( $typography['selector'], 'hover', $custom_selector );
			}

if ( isset( $this->args['selector-color-hover'] ) ) {
				$hover_selector = $this->args['selector-color-hover'];
			}

$output_css['desktop'][ $selector ][] = $this->generate_css_code( $typography );

if ( isset( $typography['tablet'] ) && is_array( $typography['tablet'] ) ) {
				$output_css['tablet'][ $selector ][] = $this->generate_css_code( $typography['tablet'] );
			}

if ( isset( $typography['mobile'] ) && is_array( $typography['mobile'] ) ) {
				$output_css['mobile'][ $selector ][] = $this->generate_css_code( $typography['mobile'] );
			}

if ( $hover_selector !== $selector && isset( $typography['hover'] ) && is_array( $typography['hover'] ) ) {
				$output_css['desktop'][ $hover_selector ][] = $this->generate_css_code( $typography['hover'] );
			}

// Special selector for font family.
			if ( isset( $this->args['selector-font-family'] ) && isset( $typography['font-family'] ) ) {
				$output_css['desktop'][ $this->args['selector-font-family'] ][] = $this->generate_css_code(
					array(
						'font-family' => $typography['font-family'],
						'font-weight' => $typography['font-weight'],
						'font-style'  => $typography['font-style'],
					)
				);
			}

// Special selector for font size.
			if ( isset( $this->args['selector-font-size'] ) && isset( $typography['font-size'] ) ) {
				$output_css['desktop'][ $this->args['selector-font-size'] ][] = $this->generate_css_code(
					array(
						'font-size'   => $typography['font-size'],
						'line-height' => $typography['line-height'],
					)
				);

if ( isset( $typography['tablet'] ) && isset( $typography['tablet']['font-size'] ) ) {
					$output_css['tablet'][ $this->args['selector-font-size'] ][] = $this->generate_css_code(
						array(
							'font-size'   => $typography['tablet']['font-size'],
							'line-height' => $typography['tablet']['line-height'],
						)
					);
				}

if ( isset( $typography['mobile'] ) && isset( $typography['mobile']['font-size'] ) ) {
					$output_css['mobile'][ $this->args['selector-font-size'] ][] = $this->generate_css_code(
						array(
							'font-size'   => $typography['mobile']['font-size'],
							'line-height' => $typography['mobile']['line-height'],
						)
					);
				}
			}

// Special selector for color.
			if ( isset( $this->args['selector-color'] ) && isset( $typography['color'] ) ) {
				$output_css['desktop'][ $this->args['selector-color'] ][] = $this->generate_css_code(
					array(
						'color' => $typography['color'],
					)
				);
			}

// Special selector for padding.
			if ( isset( $this->args['selector-padding'] ) && isset( $typography['padding'] ) ) {
				$output_css['desktop'][ $this->args['selector-padding'] ][] = $this->generate_css_code(
					array(
						'padding' => $typography['padding'],
					)
				);

if ( isset( $typography['tablet'] ) && isset( $typography['tablet']['padding'] ) ) {
					$output_css['tablet'][ $this->args['selector-padding'] ][] = $this->generate_css_code(
						array(
							'padding' => $typography['tablet']['padding'],
						)
					);
				}

if ( isset( $typography['mobile'] ) && isset( $typography['mobile']['padding'] ) ) {
					$output_css['mobile'][ $this->args['selector-padding'] ][] = $this->generate_css_code(
						array(
							'padding' => $typography['mobile']['padding'],
						)
					);
				}
			}

Google_Fonts::add_google_font( $typography );
		}

return $output_css;
	}

/**
	 * Generate CSS code based on rules array.
	 *
	 * @since 1.0.0
	 *
	 * @param array $rules  CSS rules array.
	 *
	 * @return string $output Generated CSS code.
	 */
	private function generate_css_code( $rules ) {
		$css_rules  = $this->get_css_rule( 'font-family', $rules );
		$css_rules .= $this->get_css_rule( 'font-weight', $rules );
		$css_rules .= $this->get_css_rule( 'font-style', $rules );
		$css_rules .= $this->get_css_rule( 'font-size', $rules );
		$css_rules .= $this->get_css_rule( 'line-height', $rules );
		$css_rules .= $this->get_css_rule( 'text-transform', $rules );
		$css_rules .= $this->get_css_rule( 'color', $rules );
		$css_rules .= $this->get_css_rule( 'background', $rules );
		$css_rules .= $this->get_css_rule( 'padding', $rules );

return substr( $css_rules, 1 );
	}

/**
	 * Generate a single CSS rule.
	 *
	 * @since 1.0.0
	 *
	 * @param string $rule  CSS rule.
	 * @param array  $rules_array  CSS rules array.
	 *
	 * @return  string $output Generated CSS code for this rule.
	 */
	private function get_css_rule( $rule, $rules_array ) {
		if ( ! isset( $rules_array[ $rule ] ) || empty( $rules_array[ $rule ] ) ) {
			return '';
		}

$std_fonts = woodmart_get_config( 'standard-fonts' );

$suffix = '';
		if ( in_array( $rule, array( 'font-size', 'line-height' ), true ) ) {
			$suffix = 'px';
		}

if ( in_array( $rule, array( 'font-family' ), true ) ) {
			if ( in_array( $rules_array[ $rule ], $std_fonts, true ) ) {
				return "\t" . $rule . ': ' . array_search( $rules_array[ $rule ], $std_fonts, true ) . ';';
			}

$suffix = apply_filters( 'woodmart_backup_fonts', ', Arial, Helvetica, sans-serif' );

return "\t" . $rule . ': "' . $rules_array[ $rule ] . '"' . $suffix . ";\n";
		}

if ( in_array( $rule, array( 'padding' ), true ) ) {
			if ( is_array( $rules_array[ $rule ] ) ) {
				$top    = isset( $rules_array[ $rule ]['top'] ) ? $rules_array[ $rule ]['top'] : '';
				$right  = isset( $rules_array[ $rule ]['right'] ) ? $rules_array[ $rule ]['right'] : '';
				$bottom = isset( $rules_array[ $rule ]['bottom'] ) ? $rules_array[ $rule ]['bottom'] : '';
				$left   = isset( $rules_array[ $rule ]['left'] ) ? $rules_array[ $rule ]['left'] : '';

if ( '' !== $top || '' !== $right || '' !== $bottom || '' !== $left ) {
					$top    = '' !== $top ? $top . 'px' : '0';
					$right  = '' !== $right ? $right . 'px' : '0';
					$bottom = '' !== $bottom ? $bottom . 'px' : '0';
					$left   = '' !== $left ? $left . 'px' : '0';

return "\t" . $rule . ': ' . $top . ' ' . $right . ' ' . $bottom . ' ' . $left . ";\n";
				}
			}
			return '';
		}

return "\t" . $rule . ': ' . $rules_array[ $rule ] . $suffix . ";\n";
	}

/**
	 * Generate a complex selector based on selectors array, state and custom.
	 *
	 * @since 1.0.0
	 *
	 * @param array  $selector_ids  CSS rule.
	 * @param string $state State like hover etc..
	 * @param string $custom Custom CSS selector.
	 *
	 * @return  string $string Generated CSS selector.
	 */
	private function combine_selectors( $selector_ids, $state = false, $custom = false ) {
		if ( ! is_array( $selector_ids ) ) {
			return $selector_ids;
		}

$selector = array();

if ( empty( $this->args['selectors'] ) && isset( $this->args['callback'] ) ) {
			$this->args['selectors'] = $this->args['callback']();
		}

foreach ( $selector_ids as $i => $id ) {
			if ( ! isset( $this->args['selectors'][ $id ] ) || ! isset( $this->args['selectors'][ $id ]['selector'] ) ) {
				continue;
			}

$current_selector = $this->args['selectors'][ $id ]['selector'];

// hover different selector.
			if ( 'hover' === $state && isset( $this->args['selectors'][ $id ]['selector-hover'] ) ) {
				$current_selector = $this->args['selectors'][ $id ]['selector-hover'];
			}

if ( 'custom' === $id ) {
				$current_selector = $custom;

if ( 'hover' === $state ) {
					$multiple = explode( ',', $current_selector );
					if ( count( $multiple ) > 1 ) {
						$current_selector = implode( ':hover,', $multiple );
					}

$current_selector .= ':' . $state;
				}
			}

$selector[ $i ] = $current_selector;
		}

return implode( ', ', $selector );
	}
}

[+] ..
[-] class-typography.php [edit]