Kirki_Control_Typography::render_content() - Code Metrics - Inspection of "Fixes #1082" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — develop ( 720728...cae3a5 )

by Aristeides

created 2017-05-20 15:27 UTC

Kirki_Control_Typography::render_content() A

↳ Parent: Kirki_Control_Typography

Complexity

Conditions	1
Paths	1

Size

Total Lines	1
Code Lines	1

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
eloc	1
nc	1
nop	0
dl	0
loc	1
rs	10
c	0
b	0
f	0

<?php
/**
 * Customizer Control: typography.
 *
 * @package     Kirki
 * @subpackage  Controls
 * @copyright   Copyright (c) 2017, Aristeides Stathopoulos
 * @license     http://opensource.org/licenses/https://opensource.org/licenses/MIT
 * @since       2.0
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Typography control.
 */
class Kirki_Control_Typography extends WP_Customize_Control {

	/**
	 * The control type.
	 *
	 * @access public
	 * @var string
	 */
	public $type = 'kirki-typography';

	/**
	 * Used to automatically generate all CSS output.
	 *
	 * @access public
	 * @var array
	 */
	public $output = array();

	/**
	 * Data type
	 *
	 * @access public
	 * @var string
	 */
	public $option_type = 'theme_mod';

	/**
	 * The kirki_config we're using for this control
	 *
	 * @access public
	 * @var string
	 */
	public $kirki_config = 'global';

	/**
	 * Constructor.
	 *
	 * Supplied `$args` override class property defaults.
	 *
	 * If `$args['settings']` is not defined, use the $id as the setting ID.
	 *
	 * @since 3.0.0
	 *
	 * @param WP_Customize_Manager $manager Customizer bootstrap instance.
	 * @param string               $id      Control ID.
	 * @param array                $args    {
	 *     Optional. Arguments to override class property defaults.
	 *
	 *     @type int                  $instance_number Order in which this instance was created in relation
	 *                                                 to other instances.
	 *     @type WP_Customize_Manager $manager         Customizer bootstrap instance.
	 *     @type string               $id              Control ID.
	 *     @type array                $settings        All settings tied to the control. If undefined, `$id` will
	 *                                                 be used.
	 *     @type string               $setting         The primary setting for the control (if there is one).
	 *                                                 Default 'default'.
	 *     @type int                  $priority        Order priority to load the control. Default 10.
	 *     @type string               $section         Section the control belongs to. Default empty.
	 *     @type string               $label           Label for the control. Default empty.
	 *     @type string               $description     Description for the control. Default empty.
	 *     @type array                $choices         List of choices for 'radio' or 'select' type controls, where
	 *                                                 values are the keys, and labels are the values.
	 *                                                 Default empty array.
	 *     @type array                $input_attrs     List of custom input attributes for control output, where
	 *                                                 attribute names are the keys and values are the values. Not
	 *                                                 used for 'checkbox', 'radio', 'select', 'textarea', or
	 *                                                 'dropdown-pages' control types. Default empty array.
	 *     @type array                $json            Deprecated. Use WP_Customize_Control::json() instead.
	 *     @type string               $type            Control type. Core controls include 'text', 'checkbox',
	 *                                                 'textarea', 'radio', 'select', and 'dropdown-pages'. Additional
	 *                                                 input types such as 'email', 'url', 'number', 'hidden', and
	 *                                                 'date' are supported implicitly. Default 'text'.
	 * }
	 */
	public function __construct( $manager, $id, $args = array() ) {

		parent::__construct( $manager, $id, $args );
		add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_scripts' ), 999 );

	}

	/**
	 * Enqueue control related scripts/styles.
	 *
	 * @access public
	 */
	public function enqueue_scripts() {

		wp_enqueue_script( 'select2', trailingslashit( Kirki::$url ) . 'assets/vendor/select2/js/select2.full.js', array( 'jquery' ), false, true );
		wp_enqueue_style( 'select2', trailingslashit( Kirki::$url ) . 'assets/vendor/select2/kirki.css', null );
		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'assets/vendor/wp-color-picker-alpha/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
		wp_enqueue_script( 'kirki-typography', trailingslashit( Kirki::$url ) . 'controls/typography/typography.js', array( 'jquery', 'customize-base', 'select2', 'wp-color-picker-alpha' ), false, true );

		// Add fonts to our JS objects.
		$google_fonts   = Kirki_Fonts::get_google_fonts();
		$standard_fonts = Kirki_Fonts::get_standard_fonts();
		$all_variants   = Kirki_Fonts::get_all_variants();
		$all_subsets    = Kirki_Fonts::get_google_font_subsets();

		$standard_fonts_final = array();
		$default_variants = $this->format_variants_array( array(
			'regular',
			'italic',
			'700',
			'700italic',
		) );
		foreach ( $standard_fonts as $font ) {
			$standard_fonts_final[] = array(
				'family'      => $font['stack'],
				'label'       => $font['label'],
				'subsets'     => array(),
				'is_standard' => true,
				'variants'    => ( isset( $font['variants'] ) ) ? $this->format_variants_array( $font['variants'] ) : $default_variants,
			);
		}

		$google_fonts_final = array();
		foreach ( $google_fonts as $family => $args ) {
			$label    = ( isset( $args['label'] ) ) ? $args['label'] : $family;
			$variants = ( isset( $args['variants'] ) ) ? $args['variants'] : array( 'regular', '700' );
			$subsets  = ( isset( $args['subsets'] ) ) ? $args['subsets'] : array();

			$available_variants = array();
			foreach ( $variants as $variant ) {
				if ( array_key_exists( $variant, $all_variants ) ) {
					$available_variants[] = array(
						'id' => $variant,
						'label' => $all_variants[ $variant ],
					);
				}
			}

			$available_subsets = array();
			foreach ( $subsets as $subset ) {
				if ( array_key_exists( $subset, $all_subsets ) ) {
					$available_subsets[] = array(
						'id' => $subset,
						'label' => $all_subsets[ $subset ],
					);
				}
			}

			$google_fonts_final[] = array(
				'family'       => $family,
				'label'        => $label,
				'variants'     => $available_variants,
				'subsets'      => $available_subsets,
			);
		}
		$final = array(
			'standard' => $standard_fonts_final,
			'google'   => $google_fonts_final,
		);
		wp_localize_script( 'kirki-typography', 'kirkiAllFonts', $final );

		wp_enqueue_style( 'kirki-typography-css', trailingslashit( Kirki::$url ) . 'controls/typography/typography.css', null );

	}

	/**
	 * Refresh the parameters passed to the JavaScript via JSON.
	 *
	 * @see WP_Customize_Control::to_json()
	 */
	public function to_json() {
		parent::to_json();

		$this->json['default'] = $this->setting->default;
		if ( isset( $this->default ) ) {
			$this->json['default'] = $this->default;
		}
		$this->json['output']  = $this->output;
		$this->json['value']   = $this->value();
		$this->json['choices'] = $this->choices;
		$this->json['link']    = $this->get_link();
		$this->json['id']      = $this->id;
		$this->json['l10n']    = $this->l10n();

		if ( 'user_meta' === $this->option_type ) {
			// @codingStandardsIgnoreLine
			$this->json['value'] = get_user_meta( get_current_user_id(), $this->id, true );
		}

		$this->json['inputAttrs'] = '';
		foreach ( $this->input_attrs as $attr => $value ) {
			$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
		}

		$this->add_values_backwards_compatibility();
		$defaults = array(
			'font-family'    => false,
			'font-size'      => false,
			'variant'        => false,
			'line-height'    => false,
			'letter-spacing' => false,
			'word-spacing'   => false,
			'color'          => false,
			'text-align'     => false,
		);
		$this->json['default'] = wp_parse_args( $this->json['default'], $defaults );
		$this->json['show_variants'] = ( true === Kirki_Fonts_Google::$force_load_all_variants ) ? false : true;
		$this->json['show_subsets']  = ( true === Kirki_Fonts_Google::$force_load_all_subsets ) ? false : true;
		$this->json['languages'] = array(
			'cyrillic'     => 'Cyrillic',
			'cyrillic-ext' => 'Cyrillic Extended',
			'devanagari'   => 'Devanagari',
			'greek'        => 'Greek',
			'greek-ext'    => 'Greek Extended',
			'khmer'        => 'Khmer',
			'latin'        => 'Latin',
			'latin-ext'    => 'Latin Extended',
			'vietnamese'   => 'Vietnamese',
			'hebrew'       => 'Hebrew',
			'arabic'       => 'Arabic',
			'bengali'      => 'Bengali',
			'gujarati'     => 'Gujarati',
			'tamil'        => 'Tamil',
			'telugu'       => 'Telugu',
			'thai'         => 'Thai',
		);
	}

	/**
	 * An Underscore (JS) template for this control's content (but not its container).
	 *
	 * Class variables for this control class are available in the `data` JS object;
	 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
	 *
	 * @see WP_Customize_Control::print_template()
	 *
	 * @access protected
	 */
	protected function content_template() {
		?>
		<label class="customizer-text">
			<# if ( data.label ) { #>
				<span class="customize-control-title">{{{ data.label }}}</span>
			<# } #>
			<# if ( data.description ) { #>
				<span class="description customize-control-description">{{{ data.description }}}</span>
			<# } #>
		</label>

		<div class="wrapper">

			<# if ( data.default['font-family'] ) { #>
				<# if ( '' == data.value['font-family'] ) { data.value['font-family'] = data.default['font-family']; } #>
				<# if ( data.choices['fonts'] ) { data.fonts = data.choices['fonts']; } #>
				<div class="font-family">
					<h5>{{ data.l10n['font-family'] }}</h5>
					<select {{{ data.inputAttrs }}} id="kirki-typography-font-family-{{{ data.id }}}" placeholder="{{ data.l10n['select-font-family'] }}"></select>
				</div>
				<# if ( true === data.show_variants || false !== data.default.variant ) { #>
					<div class="variant kirki-variant-wrapper">
						<h5>{{ data.l10n['variant'] }}</h5>
						<select {{{ data.inputAttrs }}} class="variant" id="kirki-typography-variant-{{{ data.id }}}"></select>
					</div>
				<# } #>
				<# if ( true === data.show_subsets ) { #>
					<div class="subsets hide-on-standard-fonts kirki-subsets-wrapper">
						<h5>{{ data.l10n['subsets'] }}</h5>
						<select {{{ data.inputAttrs }}} class="subset" id="kirki-typography-subsets-{{{ data.id }}}" multiple>
							<# _.each( data.value.subsets, function( subset ) { #>
								<option value="{{ subset }}" selected="selected">{{ data.languages[ subset ] }}</option>
							<# } ); #>
						</select>
					</div>
				<# } #>
			<# } #>

			<# if ( data.default['font-size'] ) { #>
				<div class="font-size">
					<h5>{{ data.l10n['font-size'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['font-size'] }}"/>
				</div>
			<# } #>

			<# if ( data.default['line-height'] ) { #>
				<div class="line-height">
					<h5>{{ data.l10n['line-height'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['line-height'] }}"/>
				</div>
			<# } #>

			<# if ( data.default['letter-spacing'] ) { #>
				<div class="letter-spacing">
					<h5>{{ data.l10n['letter-spacing'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['letter-spacing'] }}"/>
				</div>
			<# } #>

			<# if ( data.default['word-spacing'] ) { #>
				<div class="word-spacing">
					<h5>{{ data.l10n['word-spacing'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['word-spacing'] }}"/>
				</div>
			<# } #>

			<# if ( data.default['text-align'] ) { #>
				<div class="text-align">
					<h5>{{ data.l10n['text-align'] }}</h5>
					<input {{{ data.inputAttrs }}} type="radio" value="inherit" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-inherit" <# if ( data.value['text-align'] === 'inherit' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-inherit">
							<span class="dashicons dashicons-editor-removeformatting"></span>
							<span class="screen-reader-text">{{ data.l10n['inherit'] }}</span>
						</label>
					</input>
					<input {{{ data.inputAttrs }}} type="radio" value="left" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-left" <# if ( data.value['text-align'] === 'left' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-left">
							<span class="dashicons dashicons-editor-alignleft"></span>
							<span class="screen-reader-text">{{ data.l10n['left'] }}</span>
						</label>
					</input>
					<input {{{ data.inputAttrs }}} type="radio" value="center" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-center" <# if ( data.value['text-align'] === 'center' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-center">
							<span class="dashicons dashicons-editor-aligncenter"></span>
							<span class="screen-reader-text">{{ data.l10n['center'] }}</span>
						</label>
					</input>
					<input {{{ data.inputAttrs }}} type="radio" value="right" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-right" <# if ( data.value['text-align'] === 'right' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-right">
							<span class="dashicons dashicons-editor-alignright"></span>
							<span class="screen-reader-text">{{ data.l10n['right'] }}</span>
						</label>
					</input>
					<input {{{ data.inputAttrs }}} type="radio" value="justify" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-justify" <# if ( data.value['text-align'] === 'justify' ) { #> checked="checked"<# } #>>
						<label for="{{ data.id }}-text-align-justify">
							<span class="dashicons dashicons-editor-justify"></span>
							<span class="screen-reader-text">{{ data.l10n['justify'] }}</span>
						</label>
					</input>
				</div>
			<# } #>

			<# if ( data.default['text-transform'] ) { #>
				<div class="text-transform">
					<h5>{{ data.l10n['text-transform'] }}</h5>
					<select {{{ data.inputAttrs }}} id="kirki-typography-text-transform-{{{ data.id }}}">
						<option value="none"<# if ( 'none' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['none'] }}</option>
						<option value="capitalize"<# if ( 'capitalize' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['capitalize'] }}</option>
						<option value="uppercase"<# if ( 'uppercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['uppercase'] }}</option>
						<option value="lowercase"<# if ( 'lowercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['lowercase'] }}</option>
						<option value="initial"<# if ( 'initial' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['initial'] }}</option>
						<option value="inherit"<# if ( 'inherit' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['inherit'] }}</option>
					</select>
				</div>
			<# } #>

			<# if ( data.default['color'] ) { #>
				<div class="color">
					<h5>{{ data.l10n['color'] }}</h5>
					<input {{{ data.inputAttrs }}} type="text" data-palette="{{ data.palette }}" data-default-color="{{ data.default['color'] }}" value="{{ data.value['color'] }}" class="kirki-color-control color-picker" {{{ data.link }}} />
				</div>
			<# } #>
		</div>
		<#
		if ( ! _.isUndefined( data.value['font-family'] ) ) {
			data.value['font-family'] = data.value['font-family'].replace( /&quot;/g, '&#39' );
		}
		valueJSON = JSON.stringify( data.value ).replace( /'/g, '&#39' );
		#>
		<input class="typography-hidden-value" type="hidden" value='{{{ valueJSON }}}' {{{ data.link }}}>
		<?php
	}

	/**
	 * Adds backwards-compatibility for values.
	 * Converts font-weight to variant
	 * Adds units to letter-spacing
	 *
	 * @access protected
	 */
	protected function add_values_backwards_compatibility() {
		$value = $this->value();
		$old_values = array(
			'font-family'    => '',
			'font-size'      => '',
			'variant'        => ( isset( $value['font-weight'] ) ) ? $value['font-weight'] : 'regular',
			'line-height'    => '',
			'letter-spacing' => '',
			'color'          => '',
		);

		// Font-weight is now variant.
		// All values are the same with the exception of 400 (becomes regular).
		if ( '400' === $old_values['variant'] || 400 === $old_values['variant'] ) {
			$old_values['variant'] = 'regular';
		}

		if ( isset( $value['variant'] ) && in_array( $value['variant'], array( '100light', '600bold', '800bold', '900bold' ) ) ) {
			$value['variant'] = (string) intval( $value['variant'] );
		}

		// Letter spacing was in px, now it requires units.
		if ( isset( $value['letter-spacing'] ) && is_numeric( $value['letter-spacing'] ) && $value['letter-spacing'] ) {
			$value['letter-spacing'] .= 'px';
		}

		$this->json['value'] = wp_parse_args( $value, $old_values );

		// Cleanup.
		if ( isset( $this->json['value']['font-weight'] ) ) {
			unset( $this->json['value']['font-weight'] );
		}

		// Make sure we use "subsets" instead of "subset".
		if ( isset( $this->json['value']['subset'] ) ) {
			if ( ! empty( $this->json['value']['subset'] ) && ! isset( $this->json['value']['subsets'] ) || empty( $this->json['value']['subsets'] ) ) {
				$this->json['value']['subsets'] = $this->json['value']['subset'];
			}
			unset( $this->json['value']['subset'] );
		}
	}

	/**
	 * Returns an array of translation strings.
	 *
	 * @access protected
	 * @since 3.0.0
	 * @param string|false $config_id The string-ID.
	 * @return string
	 */
	protected function l10n( $config_id = false ) {
		$translation_strings = array(
			'inherit'        => esc_attr__( 'Inherit', 'kirki' ),
			'font-family'    => esc_attr__( 'Font Family', 'kirki' ),
			'font-size'      => esc_attr__( 'Font Size', 'kirki' ),
			'line-height'    => esc_attr__( 'Line Height', 'kirki' ),
			'letter-spacing' => esc_attr__( 'Letter Spacing', 'kirki' ),
			'word-spacing'   => esc_attr__( 'Word Spacing', 'kirki' ),
			'left'           => esc_attr__( 'Left', 'kirki' ),
			'right'          => esc_attr__( 'Right', 'kirki' ),
			'center'         => esc_attr__( 'Center', 'kirki' ),
			'justify'        => esc_attr__( 'Justify', 'kirki' ),
			'color'          => esc_attr__( 'Color', 'kirki' ),
			'variant'        => esc_attr__( 'Variant', 'kirki' ),
			'subsets'        => esc_attr__( 'Subset', 'kirki' ),
			'text-align'     => esc_attr__( 'Text Align', 'kirki' ),
			'text-transform' => esc_attr__( 'Text Transform', 'kirki' ),
			'none'           => esc_attr__( 'None', 'kirki' ),
			'capitalize'     => esc_attr__( 'Capitalize', 'kirki' ),
			'uppercase'      => esc_attr__( 'Uppercase', 'kirki' ),
			'lowercase'      => esc_attr__( 'Lowercase', 'kirki' ),
			'initial'        => esc_attr__( 'Initial', 'kirki' ),
		);
		$translation_strings = apply_filters( "kirki/{$this->kirki_config}/l10n", $translation_strings );
		if ( false === $config_id ) {
			return $translation_strings;
		}
		return $translation_strings[ $config_id ];
	}

	/**
	 * Formats variants.
	 *
	 * @access protected
	 * @since 3.0.0
	 * @param array $variants The variants.
	 * @return array
	 */
	protected function format_variants_array( $variants ) {

		$all_variants = Kirki_Fonts::get_all_variants();
		$final_variants = array();
		foreach ( $variants as $variant ) {
			if ( is_string( $variant ) ) {
				$final_variants[] = array(
					'id'    => $variant,
					'label' => isset( $all_variants[ $variant ] ) ? $all_variants[ $variant ] : $variant,
				);
			} elseif ( is_array( $variant ) && isset( $variant['id'] ) && isset( $variant['label'] ) ) {
				$final_variants[] = $variant;
			}
		}
		return $final_variants;
	}

	/**
	 * Render the control's content.
	 *
	 * @see WP_Customize_Control::render_content()
	 */
	protected function render_content() {}
}


1			<?php
2			/**
3			* Customizer Control: typography.
4			*
5			* @package Kirki
6			* @subpackage Controls
7			* @copyright Copyright (c) 2017, Aristeides Stathopoulos
8			* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
9			* @since 2.0
10			*/
11
12			// Exit if accessed directly.
13			if ( ! defined( 'ABSPATH' ) ) {
14			exit;
15			}
16
17			/**
18			* Typography control.
19			*/
20			class Kirki_Control_Typography extends WP_Customize_Control {
21
22			/**
23			* The control type.
24			*
25			* @access public
26			* @var string
27			*/
28			public $type = 'kirki-typography';
29
30			/**
31			* Used to automatically generate all CSS output.
32			*
33			* @access public
34			* @var array
35			*/
36			public $output = array();
37
38			/**
39			* Data type
40			*
41			* @access public
42			* @var string
43			*/
44			public $option_type = 'theme_mod';
45
46			/**
47			* The kirki_config we're using for this control
48			*
49			* @access public
50			* @var string
51			*/
52			public $kirki_config = 'global';
53
54			/**
55			* Constructor.
56			*
57			* Supplied `$args` override class property defaults.
58			*
59			* If `$args['settings']` is not defined, use the $id as the setting ID.
60			*
61			* @since 3.0.0
62			*
63			* @param WP_Customize_Manager $manager Customizer bootstrap instance.
64			* @param string $id Control ID.
65			* @param array $args {
66			* Optional. Arguments to override class property defaults.
67			*
68			* @type int $instance_number Order in which this instance was created in relation
69			* to other instances.
70			* @type WP_Customize_Manager $manager Customizer bootstrap instance.
71			* @type string $id Control ID.
72			* @type array $settings All settings tied to the control. If undefined, `$id` will
73			* be used.
74			* @type string $setting The primary setting for the control (if there is one).
75			* Default 'default'.
76			* @type int $priority Order priority to load the control. Default 10.
77			* @type string $section Section the control belongs to. Default empty.
78			* @type string $label Label for the control. Default empty.
79			* @type string $description Description for the control. Default empty.
80			* @type array $choices List of choices for 'radio' or 'select' type controls, where
81			* values are the keys, and labels are the values.
82			* Default empty array.
83			* @type array $input_attrs List of custom input attributes for control output, where
84			* attribute names are the keys and values are the values. Not
85			* used for 'checkbox', 'radio', 'select', 'textarea', or
86			* 'dropdown-pages' control types. Default empty array.
87			* @type array $json Deprecated. Use WP_Customize_Control::json() instead.
88			* @type string $type Control type. Core controls include 'text', 'checkbox',
89			* 'textarea', 'radio', 'select', and 'dropdown-pages'. Additional
90			* input types such as 'email', 'url', 'number', 'hidden', and
91			* 'date' are supported implicitly. Default 'text'.
92			* }
93			*/
94			public function __construct( $manager, $id, $args = array() ) {
95
96			parent::__construct( $manager, $id, $args );
97			add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_scripts' ), 999 );
98
99			}
100
101			/**
102			* Enqueue control related scripts/styles.
103			*
104			* @access public
105			*/
106			public function enqueue_scripts() {
107
108			wp_enqueue_script( 'select2', trailingslashit( Kirki::$url ) . 'assets/vendor/select2/js/select2.full.js', array( 'jquery' ), false, true );
109			wp_enqueue_style( 'select2', trailingslashit( Kirki::$url ) . 'assets/vendor/select2/kirki.css', null );
110			wp_enqueue_style( 'wp-color-picker' );
111			wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'assets/vendor/wp-color-picker-alpha/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
112			wp_enqueue_script( 'kirki-typography', trailingslashit( Kirki::$url ) . 'controls/typography/typography.js', array( 'jquery', 'customize-base', 'select2', 'wp-color-picker-alpha' ), false, true );
113
114			// Add fonts to our JS objects.
115			$google_fonts = Kirki_Fonts::get_google_fonts();
116			$standard_fonts = Kirki_Fonts::get_standard_fonts();
117			$all_variants = Kirki_Fonts::get_all_variants();
118			$all_subsets = Kirki_Fonts::get_google_font_subsets();
119
120			$standard_fonts_final = array();
121			$default_variants = $this->format_variants_array( array(
122			'regular',
123			'italic',
124			'700',
125			'700italic',
126			) );
127			foreach ( $standard_fonts as $font ) {
128			$standard_fonts_final[] = array(
129			'family' => $font['stack'],
130			'label' => $font['label'],
131			'subsets' => array(),
132			'is_standard' => true,
133			'variants' => ( isset( $font['variants'] ) ) ? $this->format_variants_array( $font['variants'] ) : $default_variants,
134			);
135			}
136
137			$google_fonts_final = array();
138			foreach ( $google_fonts as $family => $args ) {
139			$label = ( isset( $args['label'] ) ) ? $args['label'] : $family;
140			$variants = ( isset( $args['variants'] ) ) ? $args['variants'] : array( 'regular', '700' );
141			$subsets = ( isset( $args['subsets'] ) ) ? $args['subsets'] : array();
142
143			$available_variants = array();
144			foreach ( $variants as $variant ) {
145			if ( array_key_exists( $variant, $all_variants ) ) {
146			$available_variants[] = array(
147			'id' => $variant,
148			'label' => $all_variants[ $variant ],
149			);
150			}
151			}
152
153			$available_subsets = array();
154			foreach ( $subsets as $subset ) {
155			if ( array_key_exists( $subset, $all_subsets ) ) {
156			$available_subsets[] = array(
157			'id' => $subset,
158			'label' => $all_subsets[ $subset ],
159			);
160			}
161			}
162
163			$google_fonts_final[] = array(
164			'family' => $family,
165			'label' => $label,
166			'variants' => $available_variants,
167			'subsets' => $available_subsets,
168			);
169			}
170			$final = array(
171			'standard' => $standard_fonts_final,
172			'google' => $google_fonts_final,
173			);
174			wp_localize_script( 'kirki-typography', 'kirkiAllFonts', $final );
175
176			wp_enqueue_style( 'kirki-typography-css', trailingslashit( Kirki::$url ) . 'controls/typography/typography.css', null );
177
178			}
179
180			/**
181			* Refresh the parameters passed to the JavaScript via JSON.
182			*
183			* @see WP_Customize_Control::to_json()
184			*/
185			public function to_json() {
186			parent::to_json();
187
188			$this->json['default'] = $this->setting->default;
189			if ( isset( $this->default ) ) {
190			$this->json['default'] = $this->default;
191			}
192			$this->json['output'] = $this->output;
193			$this->json['value'] = $this->value();
194			$this->json['choices'] = $this->choices;
195			$this->json['link'] = $this->get_link();
196			$this->json['id'] = $this->id;
197			$this->json['l10n'] = $this->l10n();
198
199			if ( 'user_meta' === $this->option_type ) {
200			// @codingStandardsIgnoreLine
201			$this->json['value'] = get_user_meta( get_current_user_id(), $this->id, true );
202			}
203
204			$this->json['inputAttrs'] = '';
205			foreach ( $this->input_attrs as $attr => $value ) {
206			$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
207			}
208
209			$this->add_values_backwards_compatibility();
210			$defaults = array(
211			'font-family' => false,
212			'font-size' => false,
213			'variant' => false,
214			'line-height' => false,
215			'letter-spacing' => false,
216			'word-spacing' => false,
217			'color' => false,
218			'text-align' => false,
219			);
220			$this->json['default'] = wp_parse_args( $this->json['default'], $defaults );
221			$this->json['show_variants'] = ( true === Kirki_Fonts_Google::$force_load_all_variants ) ? false : true;
222			$this->json['show_subsets'] = ( true === Kirki_Fonts_Google::$force_load_all_subsets ) ? false : true;
223			$this->json['languages'] = array(
224			'cyrillic' => 'Cyrillic',
225			'cyrillic-ext' => 'Cyrillic Extended',
226			'devanagari' => 'Devanagari',
227			'greek' => 'Greek',
228			'greek-ext' => 'Greek Extended',
229			'khmer' => 'Khmer',
230			'latin' => 'Latin',
231			'latin-ext' => 'Latin Extended',
232			'vietnamese' => 'Vietnamese',
233			'hebrew' => 'Hebrew',
234			'arabic' => 'Arabic',
235			'bengali' => 'Bengali',
236			'gujarati' => 'Gujarati',
237			'tamil' => 'Tamil',
238			'telugu' => 'Telugu',
239			'thai' => 'Thai',
240			);
241			}
242
243			/**
244			* An Underscore (JS) template for this control's content (but not its container).
245			*
246			* Class variables for this control class are available in the `data` JS object;
247			* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
248			*
249			* @see WP_Customize_Control::print_template()
250			*
251			* @access protected
252			*/
253			protected function content_template() {
254			?>
255			<label class="customizer-text">
256			<# if ( data.label ) { #>
257			<span class="customize-control-title">{{{ data.label }}}</span>
258			<# } #>
259			<# if ( data.description ) { #>
260			<span class="description customize-control-description">{{{ data.description }}}</span>
261			<# } #>
262			</label>
263
264			<div class="wrapper">
265
266			<# if ( data.default['font-family'] ) { #>
267			<# if ( '' == data.value['font-family'] ) { data.value['font-family'] = data.default['font-family']; } #>
268			<# if ( data.choices['fonts'] ) { data.fonts = data.choices['fonts']; } #>
269			<div class="font-family">
270			<h5>{{ data.l10n['font-family'] }}</h5>
271			<select {{{ data.inputAttrs }}} id="kirki-typography-font-family-{{{ data.id }}}" placeholder="{{ data.l10n['select-font-family'] }}"></select>
272			</div>
273			<# if ( true === data.show_variants \|\| false !== data.default.variant ) { #>
274			<div class="variant kirki-variant-wrapper">
275			<h5>{{ data.l10n['variant'] }}</h5>
276			<select {{{ data.inputAttrs }}} class="variant" id="kirki-typography-variant-{{{ data.id }}}"></select>
277			</div>
278			<# } #>
279			<# if ( true === data.show_subsets ) { #>
280			<div class="subsets hide-on-standard-fonts kirki-subsets-wrapper">
281			<h5>{{ data.l10n['subsets'] }}</h5>
282			<select {{{ data.inputAttrs }}} class="subset" id="kirki-typography-subsets-{{{ data.id }}}" multiple>
283			<# _.each( data.value.subsets, function( subset ) { #>
284			<option value="{{ subset }}" selected="selected">{{ data.languages[ subset ] }}</option>
285			<# } ); #>
286			</select>
287			</div>
288			<# } #>
289			<# } #>
290
291			<# if ( data.default['font-size'] ) { #>
292			<div class="font-size">
293			<h5>{{ data.l10n['font-size'] }}</h5>
294			<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['font-size'] }}"/>
295			</div>
296			<# } #>
297
298			<# if ( data.default['line-height'] ) { #>
299			<div class="line-height">
300			<h5>{{ data.l10n['line-height'] }}</h5>
301			<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['line-height'] }}"/>
302			</div>
303			<# } #>
304
305			<# if ( data.default['letter-spacing'] ) { #>
306			<div class="letter-spacing">
307			<h5>{{ data.l10n['letter-spacing'] }}</h5>
308			<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['letter-spacing'] }}"/>
309			</div>
310			<# } #>
311
312			<# if ( data.default['word-spacing'] ) { #>
313			<div class="word-spacing">
314			<h5>{{ data.l10n['word-spacing'] }}</h5>
315			<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['word-spacing'] }}"/>
316			</div>
317			<# } #>
318
319			<# if ( data.default['text-align'] ) { #>
320			<div class="text-align">
321			<h5>{{ data.l10n['text-align'] }}</h5>
322			<input {{{ data.inputAttrs }}} type="radio" value="inherit" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-inherit" <# if ( data.value['text-align'] === 'inherit' ) { #> checked="checked"<# } #>>
323			<label for="{{ data.id }}-text-align-inherit">
324			<span class="dashicons dashicons-editor-removeformatting"></span>
325			<span class="screen-reader-text">{{ data.l10n['inherit'] }}</span>
326			</label>
327			</input>
328			<input {{{ data.inputAttrs }}} type="radio" value="left" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-left" <# if ( data.value['text-align'] === 'left' ) { #> checked="checked"<# } #>>
329			<label for="{{ data.id }}-text-align-left">
330			<span class="dashicons dashicons-editor-alignleft"></span>
331			<span class="screen-reader-text">{{ data.l10n['left'] }}</span>
332			</label>
333			</input>
334			<input {{{ data.inputAttrs }}} type="radio" value="center" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-center" <# if ( data.value['text-align'] === 'center' ) { #> checked="checked"<# } #>>
335			<label for="{{ data.id }}-text-align-center">
336			<span class="dashicons dashicons-editor-aligncenter"></span>
337			<span class="screen-reader-text">{{ data.l10n['center'] }}</span>
338			</label>
339			</input>
340			<input {{{ data.inputAttrs }}} type="radio" value="right" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-right" <# if ( data.value['text-align'] === 'right' ) { #> checked="checked"<# } #>>
341			<label for="{{ data.id }}-text-align-right">
342			<span class="dashicons dashicons-editor-alignright"></span>
343			<span class="screen-reader-text">{{ data.l10n['right'] }}</span>
344			</label>
345			</input>
346			<input {{{ data.inputAttrs }}} type="radio" value="justify" name="_customize-typography-text-align-radio-{{ data.id }}" id="{{ data.id }}-text-align-justify" <# if ( data.value['text-align'] === 'justify' ) { #> checked="checked"<# } #>>
347			<label for="{{ data.id }}-text-align-justify">
348			<span class="dashicons dashicons-editor-justify"></span>
349			<span class="screen-reader-text">{{ data.l10n['justify'] }}</span>
350			</label>
351			</input>
352			</div>
353			<# } #>
354
355			<# if ( data.default['text-transform'] ) { #>
356			<div class="text-transform">
357			<h5>{{ data.l10n['text-transform'] }}</h5>
358			<select {{{ data.inputAttrs }}} id="kirki-typography-text-transform-{{{ data.id }}}">
359			<option value="none"<# if ( 'none' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['none'] }}</option>
360			<option value="capitalize"<# if ( 'capitalize' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['capitalize'] }}</option>
361			<option value="uppercase"<# if ( 'uppercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['uppercase'] }}</option>
362			<option value="lowercase"<# if ( 'lowercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['lowercase'] }}</option>
363			<option value="initial"<# if ( 'initial' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['initial'] }}</option>
364			<option value="inherit"<# if ( 'inherit' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['inherit'] }}</option>
365			</select>
366			</div>
367			<# } #>
368
369			<# if ( data.default['color'] ) { #>
370			<div class="color">
371			<h5>{{ data.l10n['color'] }}</h5>
372			<input {{{ data.inputAttrs }}} type="text" data-palette="{{ data.palette }}" data-default-color="{{ data.default['color'] }}" value="{{ data.value['color'] }}" class="kirki-color-control color-picker" {{{ data.link }}} />
373			</div>
374			<# } #>
375			</div>
376			<#
377			if ( ! _.isUndefined( data.value['font-family'] ) ) {
378			data.value['font-family'] = data.value['font-family'].replace( /"/g, '&#39' );
379			}
380			valueJSON = JSON.stringify( data.value ).replace( /'/g, '&#39' );
381			#>
382			<input class="typography-hidden-value" type="hidden" value='{{{ valueJSON }}}' {{{ data.link }}}>
383			<?php
384			}
385
386			/**
387			* Adds backwards-compatibility for values.
388			* Converts font-weight to variant
389			* Adds units to letter-spacing
390			*
391			* @access protected
392			*/
393			protected function add_values_backwards_compatibility() {
394			$value = $this->value();
395			$old_values = array(
396			'font-family' => '',
397			'font-size' => '',
398			'variant' => ( isset( $value['font-weight'] ) ) ? $value['font-weight'] : 'regular',
399			'line-height' => '',
400			'letter-spacing' => '',
401			'color' => '',
402			);
403
404			// Font-weight is now variant.
405			// All values are the same with the exception of 400 (becomes regular).
406			if ( '400' === $old_values['variant'] \|\| 400 === $old_values['variant'] ) {
407			$old_values['variant'] = 'regular';
408			}
409
410			if ( isset( $value['variant'] ) && in_array( $value['variant'], array( '100light', '600bold', '800bold', '900bold' ) ) ) {
411			$value['variant'] = (string) intval( $value['variant'] );
412			}
413
414			// Letter spacing was in px, now it requires units.
415			if ( isset( $value['letter-spacing'] ) && is_numeric( $value['letter-spacing'] ) && $value['letter-spacing'] ) {
416			$value['letter-spacing'] .= 'px';
417			}
418
419			$this->json['value'] = wp_parse_args( $value, $old_values );
420
421			// Cleanup.
422			if ( isset( $this->json['value']['font-weight'] ) ) {
423			unset( $this->json['value']['font-weight'] );
424			}
425
426			// Make sure we use "subsets" instead of "subset".
427			if ( isset( $this->json['value']['subset'] ) ) {
428			if ( ! empty( $this->json['value']['subset'] ) && ! isset( $this->json['value']['subsets'] ) \|\| empty( $this->json['value']['subsets'] ) ) {
429			$this->json['value']['subsets'] = $this->json['value']['subset'];
430			}
431			unset( $this->json['value']['subset'] );
432			}
433			}
434
435			/**
436			* Returns an array of translation strings.
437			*
438			* @access protected
439			* @since 3.0.0
440			* @param string\|false $config_id The string-ID.
441			* @return string
442			*/
443			protected function l10n( $config_id = false ) {
444			$translation_strings = array(
445			'inherit' => esc_attr__( 'Inherit', 'kirki' ),
446			'font-family' => esc_attr__( 'Font Family', 'kirki' ),
447			'font-size' => esc_attr__( 'Font Size', 'kirki' ),
448			'line-height' => esc_attr__( 'Line Height', 'kirki' ),
449			'letter-spacing' => esc_attr__( 'Letter Spacing', 'kirki' ),
450			'word-spacing' => esc_attr__( 'Word Spacing', 'kirki' ),
451			'left' => esc_attr__( 'Left', 'kirki' ),
452			'right' => esc_attr__( 'Right', 'kirki' ),
453			'center' => esc_attr__( 'Center', 'kirki' ),
454			'justify' => esc_attr__( 'Justify', 'kirki' ),
455			'color' => esc_attr__( 'Color', 'kirki' ),
456			'variant' => esc_attr__( 'Variant', 'kirki' ),
457			'subsets' => esc_attr__( 'Subset', 'kirki' ),
458			'text-align' => esc_attr__( 'Text Align', 'kirki' ),
459			'text-transform' => esc_attr__( 'Text Transform', 'kirki' ),
460			'none' => esc_attr__( 'None', 'kirki' ),
461			'capitalize' => esc_attr__( 'Capitalize', 'kirki' ),
462			'uppercase' => esc_attr__( 'Uppercase', 'kirki' ),
463			'lowercase' => esc_attr__( 'Lowercase', 'kirki' ),
464			'initial' => esc_attr__( 'Initial', 'kirki' ),
465			);
466			$translation_strings = apply_filters( "kirki/{$this->kirki_config}/l10n", $translation_strings );
467			if ( false === $config_id ) {
468			return $translation_strings;
469			}
470			return $translation_strings[ $config_id ];
471			}
472
473			/**
474			* Formats variants.
475			*
476			* @access protected
477			* @since 3.0.0
478			* @param array $variants The variants.
479			* @return array
480			*/
481			protected function format_variants_array( $variants ) {
482
483			$all_variants = Kirki_Fonts::get_all_variants();
484			$final_variants = array();
485			foreach ( $variants as $variant ) {
486			if ( is_string( $variant ) ) {
487			$final_variants[] = array(
488			'id' => $variant,
489			'label' => isset( $all_variants[ $variant ] ) ? $all_variants[ $variant ] : $variant,
490			);
491			} elseif ( is_array( $variant ) && isset( $variant['id'] ) && isset( $variant['label'] ) ) {
492			$final_variants[] = $variant;
493			}
494			}
495			return $final_variants;
496			}
497
498			/**
499			* Render the control's content.
500			*
501			* @see WP_Customize_Control::render_content()
502			*/
503			protected function render_content() {}
504			}
505

aristath / kirki

Push — develop ( 720728...cae3a5 )

Kirki_Control_Typography::render_content() A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like