|
1
|
|
|
<?php |
|
2
|
|
|
|
|
3
|
|
|
namespace Flynt\Customizer\Typography; |
|
4
|
|
|
|
|
5
|
|
|
use Flynt\Utils\Asset; |
|
6
|
|
|
|
|
7
|
|
|
class Control extends \WP_Customize_Control |
|
8
|
|
|
{ |
|
9
|
|
|
public $type = 'flynt-typography'; |
|
10
|
|
|
public $unit = ''; |
|
11
|
|
|
|
|
12
|
|
|
public function getFonts() |
|
13
|
|
|
{ |
|
14
|
|
|
$gfonts = Asset::getContents('../lib/Customizer/Typography/webfonts.json'); |
|
15
|
|
|
$gfonts = json_decode($gfonts, 1); |
|
|
|
|
|
|
16
|
|
|
$fonts = []; |
|
17
|
|
|
|
|
18
|
|
|
foreach ($gfonts['items'] as $font) { |
|
19
|
|
|
$key = sanitize_title($font['family']); |
|
20
|
|
|
$font['variants'] = array_map('self::parseVariants', $font['variants']); |
|
21
|
|
|
$font['variants'] = array_values(array_filter($font['variants'], 'self::removeItalicVariants')); |
|
22
|
|
|
$fonts[$key] = array_merge([ |
|
23
|
|
|
'id' => $key, |
|
24
|
|
|
'text' => $font['family'], |
|
25
|
|
|
], $font); |
|
26
|
|
|
} |
|
27
|
|
|
|
|
28
|
|
|
return $fonts; |
|
29
|
|
|
} |
|
30
|
|
|
|
|
31
|
|
|
public static function parseVariants($variant) |
|
32
|
|
|
{ |
|
33
|
|
|
$variants = [ |
|
34
|
|
|
'regular' => '400', |
|
35
|
|
|
'italic' => '400italic', |
|
36
|
|
|
]; |
|
37
|
|
|
|
|
38
|
|
|
return $variants[$variant] ?? $variant; |
|
39
|
|
|
} |
|
40
|
|
|
|
|
41
|
|
|
public static function removeItalicVariants($variant) |
|
42
|
|
|
{ |
|
43
|
|
|
return strpos($variant, 'italic') === false; |
|
44
|
|
|
} |
|
45
|
|
|
|
|
46
|
|
|
/** |
|
47
|
|
|
* Refresh the parameters passed to the JavaScript via JSON. |
|
48
|
|
|
* |
|
49
|
|
|
* @return array Array of parameters passed to the JavaScript. |
|
50
|
|
|
*/ |
|
51
|
|
|
public function json() |
|
52
|
|
|
{ |
|
53
|
|
|
$json = parent::json(); |
|
54
|
|
|
$value = $this->value(); |
|
55
|
|
|
$fonts = $this->getFonts(); |
|
56
|
|
|
$key = sanitize_title($value['family']); |
|
57
|
|
|
$json['id'] = $this->id; |
|
58
|
|
|
$json['link'] = $this->get_link(); |
|
59
|
|
|
$json['value'] = $value; |
|
60
|
|
|
$json['font'] = sanitize_title($value['family'] ?? ''); |
|
61
|
|
|
$json['default'] = $this->default ?? $this->setting->default; |
|
|
|
|
|
|
62
|
|
|
$json['defaultKey'] = sanitize_title($json['default']['family']); |
|
63
|
|
|
$json['fonts'] = $fonts; |
|
64
|
|
|
$json['variants'] = array_filter($fonts[$key]['variants'], function ($variant) { |
|
65
|
|
|
return strpos($variant, 'italic') === false; |
|
66
|
|
|
}); |
|
67
|
|
|
return $json; |
|
68
|
|
|
} |
|
69
|
|
|
|
|
70
|
|
|
/** |
|
71
|
|
|
* Don't render the control content from PHP, as it's rendered via JS on load. |
|
72
|
|
|
*/ |
|
73
|
|
|
public function render_content() // phpcs:ignore PSR1.Methods.CamelCapsMethodName.NotCamelCaps |
|
74
|
|
|
{ |
|
75
|
|
|
} |
|
76
|
|
|
|
|
77
|
|
|
/** |
|
78
|
|
|
* Render a JS template for control display. |
|
79
|
|
|
*/ |
|
80
|
|
|
public function content_template() // phpcs:ignore PSR1.Methods.CamelCapsMethodName.NotCamelCaps |
|
81
|
|
|
{ |
|
82
|
|
|
?> |
|
83
|
|
|
<# if ( data.label ) { #><label for="{{{ data.id }}}" class="customize-control-title">{{{ data.label }}}</label><# } #> |
|
84
|
|
|
<# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #> |
|
85
|
|
|
|
|
86
|
|
|
<div class="customize-control-notifications-container"></div> |
|
87
|
|
|
|
|
88
|
|
|
<div class="customize-control-content"> |
|
89
|
|
|
<div class="flynt-typography-field"> |
|
90
|
|
|
<div class="flynt-typography-option flynt-typography-option--family"> |
|
91
|
|
|
<span class="flynt-typography-option-title"><?php esc_html_e('Family', 'flynt'); ?></span> |
|
92
|
|
|
<select class="flynt-typography-family"></select> |
|
93
|
|
|
</div> |
|
94
|
|
|
<div class="flynt-typography-option flynt-typography-option--variant"> |
|
95
|
|
|
<span class="flynt-typography-option-title"><?php esc_html_e('Weight', 'flynt'); ?></span> |
|
96
|
|
|
<select class="flynt-typography-variant"> |
|
97
|
|
|
<# _.each(data.variants, function(variant) { #> |
|
98
|
|
|
<option |
|
99
|
|
|
value="{{{ variant }}}" |
|
100
|
|
|
<# if (_.isEqual(data.value.variant, variant)) { #>selected='selected'<# } #> |
|
101
|
|
|
>{{{ variant }}}</option> |
|
102
|
|
|
<# }); #> |
|
103
|
|
|
</select> |
|
104
|
|
|
</div> |
|
105
|
|
|
</div> |
|
106
|
|
|
<button type="button" class="flynt-typography-reset button button-secondary" data-key="{{{ data.defaultKey }}}"><?php esc_html_e('Default', 'flynt'); ?></button> |
|
107
|
|
|
</div> |
|
108
|
|
|
|
|
109
|
|
|
<?php |
|
110
|
|
|
} |
|
111
|
|
|
} |
|
112
|
|
|
|
flyntwp /
flynt
Loading history...