Completed
Push — develop ( 5297b1...c44c9b )
by Aristeides
02:34
created

Kirki_Control_Typography::__construct()   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 6
Code Lines 3

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 1
eloc 3
nc 1
nop 3
dl 0
loc 6
rs 9.4285
c 0
b 0
f 0
1
<?php
2
/**
3
 * Customizer Control: typography.
4
 *
5
 * @package     Kirki
6
 * @subpackage  Controls
7
 * @copyright   Copyright (c) 2016, 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 2.4.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( 'selectize', trailingslashit( Kirki::$url ) . 'controls/typography/selectize.js', array( 'jquery' ), false, true );
109
		wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'controls/typography/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
110
		wp_enqueue_script( 'kirki-typography', trailingslashit( Kirki::$url ) . 'controls/typography/typography.js', array( 'jquery', 'customize-base', 'selectize', 'wp-color-picker-alpha' ), false, true );
111
112
		// Add fonts to our JS objects.
113
		$google_fonts   = Kirki_Fonts::get_google_fonts();
114
		$standard_fonts = Kirki_Fonts::get_standard_fonts();
115
		$all_variants   = Kirki_Fonts::get_all_variants();
116
		$all_subsets    = Kirki_Fonts::get_google_font_subsets();
117
118
		$standard_fonts_final = array();
119
		foreach ( $standard_fonts as $font ) {
120
			$standard_fonts_final[] = array(
121
				'family'      => $font['stack'],
122
				'label'       => $font['label'],
123
				'subsets'     => array(),
124
				'is_standard' => true,
125
				'variants'    => array(
126
					array(
127
						'id'    => 'regular',
128
						'label' => $all_variants['regular'],
129
					),
130
					array(
131
						'id'    => 'italic',
132
						'label' => $all_variants['italic'],
133
					),
134
					array(
135
						'id'    => '700',
136
						'label' => $all_variants['700'],
137
					),
138
					array(
139
						'id'    => '700italic',
140
						'label' => $all_variants['700italic'],
141
					),
142
				),
143
			);
144
		}
145
146
		$google_fonts_final = array();
147
		foreach ( $google_fonts as $family => $args ) {
148
			$label    = ( isset( $args['label'] ) ) ? $args['label'] : $family;
149
			$variants = ( isset( $args['variants'] ) ) ? $args['variants'] : array( 'regular', '700' );
150
			$subsets  = ( isset( $args['subsets'] ) ) ? $args['subsets'] : array();
151
152
			$available_variants = array();
153
			foreach ( $variants as $variant ) {
154
				if ( array_key_exists( $variant, $all_variants ) ) {
155
					$available_variants[] = array( 'id' => $variant, 'label' => $all_variants[ $variant ] );
156
				}
157
			}
158
159
			$available_subsets = array();
160
			foreach ( $subsets as $subset ) {
161
				if ( array_key_exists( $subset, $all_subsets ) ) {
162
					$available_subsets[] = array( 'id' => $subset, 'label' => $all_subsets[ $subset ] );
163
				}
164
			}
165
166
			$google_fonts_final[] = array(
167
				'family'       => $family,
168
				'label'        => $label,
169
				'variants'     => $available_variants,
170
				'subsets'      => $available_subsets,
171
			);
172
		}
173
		$final = array_merge( $standard_fonts_final, $google_fonts_final );
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
			$this->json['value'] = get_user_meta( get_current_user_id(), $this->id, true );
201
		}
202
203
		$this->json['inputAttrs'] = '';
204
		foreach ( $this->input_attrs as $attr => $value ) {
205
			$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
206
		}
207
208
		$this->add_values_backwards_compatibility();
209
		$defaults = array(
210
			'font-family'    => false,
211
			'font-size'      => false,
212
			'variant'        => false,
213
			'line-height'    => false,
214
			'letter-spacing' => false,
215
			'word-spacing'   => false,
216
			'color'          => false,
217
			'text-align'     => false,
218
		);
219
		$this->json['default'] = wp_parse_args( $this->json['default'], $defaults );
220
		$this->json['show_variants'] = ( true === Kirki_Fonts_Google::$force_load_all_variants ) ? false : true;
221
		$this->json['show_subsets']  = ( true === Kirki_Fonts_Google::$force_load_all_subsets ) ? false : true;
222
	}
223
224
	/**
225
	 * An Underscore (JS) template for this control's content (but not its container).
226
	 *
227
	 * Class variables for this control class are available in the `data` JS object;
228
	 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
229
	 *
230
	 * @see WP_Customize_Control::print_template()
231
	 *
232
	 * @access protected
233
	 */
234
	protected function content_template() {
235
		?>
236
		<label class="customizer-text">
237
			<# if ( data.label ) { #>
238
				<span class="customize-control-title">{{{ data.label }}}</span>
239
			<# } #>
240
			<# if ( data.description ) { #>
241
				<span class="description customize-control-description">{{{ data.description }}}</span>
242
			<# } #>
243
		</label>
244
245
		<div class="wrapper">
246
247
			<# if ( data.default['font-family'] ) { #>
248
				<# if ( '' == data.value['font-family'] ) { data.value['font-family'] = data.default['font-family']; } #>
249
				<# if ( data.choices['fonts'] ) { data.fonts = data.choices['fonts']; } #>
250
				<div class="font-family">
251
					<h5>{{ data.l10n['font-family'] }}</h5>
252
					<select {{{ data.inputAttrs }}} id="kirki-typography-font-family-{{{ data.id }}}" placeholder="{{ data.l10n['select-font-family'] }}"></select>
253
				</div>
254
				<# if ( true === data.show_variants || false !== data.default.variant ) { #>
255
					<div class="variant hide-on-standard-fonts kirki-variant-wrapper">
256
						<h5>{{ data.l10n['variant'] }}</h5>
257
						<select {{{ data.inputAttrs }}} class="variant" id="kirki-typography-variant-{{{ data.id }}}"></select>
258
					</div>
259
				<# } #>
260
				<# if ( true === data.show_subsets ) { #>
261
					<div class="subsets hide-on-standard-fonts kirki-subsets-wrapper">
262
						<h5>{{ data.l10n['subsets'] }}</h5>
263
						<select {{{ data.inputAttrs }}} class="subset" id="kirki-typography-subsets-{{{ data.id }}}"></select>
264
					</div>
265
				<# } #>
266
			<# } #>
267
268
			<# if ( data.default['font-size'] ) { #>
269
				<div class="font-size">
270
					<h5>{{ data.l10n['font-size'] }}</h5>
271
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['font-size'] }}"/>
272
				</div>
273
			<# } #>
274
275
			<# if ( data.default['line-height'] ) { #>
276
				<div class="line-height">
277
					<h5>{{ data.l10n['line-height'] }}</h5>
278
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['line-height'] }}"/>
279
				</div>
280
			<# } #>
281
282
			<# if ( data.default['letter-spacing'] ) { #>
283
				<div class="letter-spacing">
284
					<h5>{{ data.l10n['letter-spacing'] }}</h5>
285
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['letter-spacing'] }}"/>
286
				</div>
287
			<# } #>
288
289
			<# if ( data.default['word-spacing'] ) { #>
290
				<div class="word-spacing">
291
					<h5>{{ data.l10n['word-spacing'] }}</h5>
292
					<input {{{ data.inputAttrs }}} type="text" value="{{ data.value['word-spacing'] }}"/>
293
				</div>
294
			<# } #>
295
296
			<# if ( data.default['text-align'] ) { #>
297
				<div class="text-align">
298
					<h5>{{ data.l10n['text-align'] }}</h5>
299
					<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"<# } #>>
300
						<label for="{{ data.id }}-text-align-inherit">
301
							<span class="dashicons dashicons-editor-removeformatting"></span>
302
							<span class="screen-reader-text">{{ data.l10n['inherit'] }}</span>
303
						</label>
304
					</input>
305
					<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"<# } #>>
306
						<label for="{{ data.id }}-text-align-left">
307
							<span class="dashicons dashicons-editor-alignleft"></span>
308
							<span class="screen-reader-text">{{ data.l10n['left'] }}</span>
309
						</label>
310
					</input>
311
					<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"<# } #>>
312
						<label for="{{ data.id }}-text-align-center">
313
							<span class="dashicons dashicons-editor-aligncenter"></span>
314
							<span class="screen-reader-text">{{ data.l10n['center'] }}</span>
315
						</label>
316
					</input>
317
					<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"<# } #>>
318
						<label for="{{ data.id }}-text-align-right">
319
							<span class="dashicons dashicons-editor-alignright"></span>
320
							<span class="screen-reader-text">{{ data.l10n['right'] }}</span>
321
						</label>
322
					</input>
323
					<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"<# } #>>
324
						<label for="{{ data.id }}-text-align-justify">
325
							<span class="dashicons dashicons-editor-justify"></span>
326
							<span class="screen-reader-text">{{ data.l10n['justify'] }}</span>
327
						</label>
328
					</input>
329
				</div>
330
			<# } #>
331
332
			<# if ( data.default['text-transform'] ) { #>
333
				<div class="text-transform">
334
					<h5>{{ data.l10n['text-transform'] }}</h5>
335
					<select {{{ data.inputAttrs }}} id="kirki-typography-text-transform-{{{ data.id }}}">
336
						<option value="none"<# if ( 'none' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['none'] }}</option>
337
						<option value="capitalize"<# if ( 'capitalize' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['capitalize'] }}</option>
338
						<option value="uppercase"<# if ( 'uppercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['uppercase'] }}</option>
339
						<option value="lowercase"<# if ( 'lowercase' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['lowercase'] }}</option>
340
						<option value="initial"<# if ( 'initial' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['initial'] }}</option>
341
						<option value="inherit"<# if ( 'inherit' === data.value['text-transform'] ) { #>selected<# } #>>{{ data.l10n['inherit'] }}</option>
342
					</select>
343
				</div>
344
			<# } #>
345
346
			<# if ( data.default['color'] ) { #>
347
				<div class="color">
348
					<h5>{{ data.l10n['color'] }}</h5>
349
					<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 }}} />
350
				</div>
351
			<# } #>
352
		</div>
353
		<?php
354
	}
355
356
	/**
357
	 * Adds backwards-compatibility for values.
358
	 * Converts font-weight to variant
359
	 * Adds units to letter-spacing
360
	 *
361
	 * @access protected
362
	 */
363
	protected function add_values_backwards_compatibility() {
364
		$value = $this->value();
365
		$old_values = array(
366
			'font-family'    => '',
367
			'font-size'      => '',
368
			'variant'        => ( isset( $value['font-weight'] ) ) ? $value['font-weight'] : 'regular',
369
			'line-height'    => '',
370
			'letter-spacing' => '',
371
			'color'          => '',
372
		);
373
374
		// Font-weight is now variant.
375
		// All values are the same with the exception of 400 (becomes regular).
376
		if ( '400' === $old_values['variant'] || 400 === $old_values['variant'] ) {
377
			$old_values['variant'] = 'regular';
378
		}
379
380
		// Letter spacing was in px, now it requires units.
381
		if ( isset( $value['letter-spacing'] ) && is_numeric( $value['letter-spacing'] ) && $value['letter-spacing'] ) {
382
			$value['letter-spacing'] .= 'px';
383
		}
384
385
		$this->json['value'] = wp_parse_args( $value, $old_values );
386
387
		// Cleanup.
388
		if ( isset( $this->json['value']['font-weight'] ) ) {
389
			unset( $this->json['value']['font-weight'] );
390
		}
391
392
		// Make sure we use "subsets" instead of "subset".
393
		if ( isset( $this->json['value']['subset'] ) ) {
394
			if ( ! empty( $this->json['value']['subset'] ) ) {
395
				if ( ! isset( $this->json['value']['subsets'] ) || empty( $this->json['value']['subsets'] ) ) {
396
					$this->json['value']['subsets'] = $this->json['value']['subset'];
397
				}
398
			}
399
			unset( $this->json['value']['subset'] );
400
		}
401
	}
402
403
	/**
404
	 * Returns an array of translation strings.
405
	 *
406
	 * @access protected
407
	 * @since 2.4.0
408
	 * @param string|false $id The string-ID.
409
	 * @return string
410
	 */
411
	protected function l10n( $id = false ) {
412
		$translation_strings = array(
413
			'inherit'        => esc_attr__( 'Inherit', 'kirki' ),
414
			'font-family'    => esc_attr__( 'Font Family', 'kirki' ),
415
			'font-size'      => esc_attr__( 'Font Size', 'kirki' ),
416
			'line-height'    => esc_attr__( 'Line Height', 'kirki' ),
417
			'letter-spacing' => esc_attr__( 'Letter Spacing', 'kirki' ),
418
			'word-spacing'   => esc_attr__( 'Word Spacing', 'kirki' ),
419
			'left'           => esc_attr__( 'Left', 'kirki' ),
420
			'right'          => esc_attr__( 'Right', 'kirki' ),
421
			'center'         => esc_attr__( 'Center', 'kirki' ),
422
			'justify'        => esc_attr__( 'Justify', 'kirki' ),
423
			'color'          => esc_attr__( 'Color', 'kirki' ),
424
			'variant'        => esc_attr__( 'Variant', 'kirki' ),
425
			'subsets'        => esc_attr__( 'Subset', 'kirki' ),
426
			'text-align'     => esc_attr__( 'Text Align', 'kirki' ),
427
			'text-transform' => esc_attr__( 'Text Transform', 'kirki' ),
428
			'none'           => esc_attr__( 'None', 'kirki' ),
429
			'capitalize'     => esc_attr__( 'Capitalize', 'kirki' ),
430
			'uppercase'      => esc_attr__( 'Uppercase', 'kirki' ),
431
			'lowercase'      => esc_attr__( 'Lowercase', 'kirki' ),
432
			'initial'        => esc_attr__( 'Initial', 'kirki' ),
433
		);
434
		$translation_strings = apply_filters( 'kirki/' . $this->kirki_config . '/l10n', $translation_strings );
435
		if ( false === $id ) {
436
			return $translation_strings;
437
		}
438
		return $translation_strings[ $id ];
439
	}
440
441
	/**
442
	 * Render the control's content.
443
	 *
444
	 * @see WP_Customize_Control::render_content()
445
	 */
446
	protected function render_content() {}
447
}
448