|
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
|
|
|
$fonts[$key] = array_merge([ |
|
22
|
|
|
'id' => $key, |
|
23
|
|
|
'text' => $font['family'], |
|
24
|
|
|
], $font); |
|
25
|
|
|
} |
|
26
|
|
|
|
|
27
|
|
|
return $fonts; |
|
28
|
|
|
} |
|
29
|
|
|
|
|
30
|
|
|
public static function parseVariants($variant) |
|
31
|
|
|
{ |
|
32
|
|
|
$variants = [ |
|
33
|
|
|
'regular' => '400', |
|
34
|
|
|
'italic' => '400italic', |
|
35
|
|
|
]; |
|
36
|
|
|
|
|
37
|
|
|
return $variants[$variant] ?? $variant; |
|
38
|
|
|
} |
|
39
|
|
|
|
|
40
|
|
|
/** |
|
41
|
|
|
* Refresh the parameters passed to the JavaScript via JSON. |
|
42
|
|
|
* |
|
43
|
|
|
* @return array Array of parameters passed to the JavaScript. |
|
44
|
|
|
*/ |
|
45
|
|
|
public function json() { |
|
46
|
|
|
$json = parent::json(); |
|
47
|
|
|
$value = $this->value(); |
|
48
|
|
|
$fonts = $this->getFonts(); |
|
49
|
|
|
// print_r($fonts); |
|
50
|
|
|
$key = sanitize_title($value['family']); |
|
51
|
|
|
$json['id'] = $this->id; |
|
52
|
|
|
$json['link'] = $this->get_link(); |
|
53
|
|
|
$json['value'] = $value; |
|
54
|
|
|
$json['font'] = sanitize_title($value['family'] ?? ''); |
|
55
|
|
|
$json['default'] = $this->default ?? $this->setting->default; |
|
|
|
|
|
|
56
|
|
|
$json['defaultKey'] = sanitize_title($json['default']['family']); |
|
57
|
|
|
$json['fonts'] = $fonts; |
|
58
|
|
|
$json['variants'] = $fonts[$key]['variants']; |
|
59
|
|
|
$json['subsets'] = $fonts[$key]['subsets']; |
|
60
|
|
|
return $json; |
|
61
|
|
|
} |
|
62
|
|
|
|
|
63
|
|
|
/** |
|
64
|
|
|
* Don't render the control content from PHP, as it's rendered via JS on load. |
|
65
|
|
|
*/ |
|
66
|
|
|
public function render_content() // phpcs:ignore PSR1.Methods.CamelCapsMethodName.NotCamelCaps |
|
67
|
|
|
{ |
|
68
|
|
|
} |
|
69
|
|
|
|
|
70
|
|
|
/** |
|
71
|
|
|
* Render a JS template for control display. |
|
72
|
|
|
*/ |
|
73
|
|
|
public function content_template() // phpcs:ignore PSR1.Methods.CamelCapsMethodName.NotCamelCaps |
|
74
|
|
|
{ |
|
75
|
|
|
?> |
|
76
|
|
|
<# if ( data.label ) { #><label for="{{{ data.id }}}" class="customize-control-title">{{{ data.label }}}</label><# } #> |
|
77
|
|
|
<# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #> |
|
78
|
|
|
|
|
79
|
|
|
<div class="customize-control-notifications-container"></div> |
|
80
|
|
|
|
|
81
|
|
|
<div class="customize-control-content"> |
|
82
|
|
|
<div class="flynt-typography-field"> |
|
83
|
|
|
<div class="flynt-typography-option"> |
|
84
|
|
|
<select |
|
85
|
|
|
class="flynt-typography-select" |
|
86
|
|
|
placeholder="<?php esc_html_e('Select Font', 'flynt'); ?>" |
|
87
|
|
|
value="{{{ data.font }}}" |
|
88
|
|
|
></select> |
|
89
|
|
|
</div> |
|
90
|
|
|
<div class="flynt-typography-option"> |
|
91
|
|
|
<span class="customize-control-title"><?php esc_html_e('Variants', 'flynt'); ?></span> |
|
92
|
|
|
<div class="flynt-typography-variants"> |
|
93
|
|
|
<# _.each(data.variants, function(variant) { #> |
|
94
|
|
|
<label> |
|
95
|
|
|
<input |
|
96
|
|
|
type="checkbox" |
|
97
|
|
|
value="{{{ variant }}}" |
|
98
|
|
|
name="{{{ data.id }}}-{{{ variant }}}" |
|
99
|
|
|
<# if (_.contains(data.value.variants, variant)) { #>checked='checked'<# } #> |
|
100
|
|
|
> |
|
101
|
|
|
<span>{{{ variant }}}</span> |
|
102
|
|
|
</label> |
|
103
|
|
|
<# }); #> |
|
104
|
|
|
</div> |
|
105
|
|
|
</div> |
|
106
|
|
|
<div class="flynt-typography-option"> |
|
107
|
|
|
<span class="customize-control-title"><?php esc_html_e('Subsets', 'flynt'); ?></span> |
|
108
|
|
|
<div class="flynt-typography-subsets"> |
|
109
|
|
|
<# _.each(data.subsets, function(subset) { #> |
|
110
|
|
|
<label> |
|
111
|
|
|
<input |
|
112
|
|
|
type="checkbox" |
|
113
|
|
|
value="{{{ subset }}}" |
|
114
|
|
|
name="{{{ data.id }}}-{{{ subset }}}" |
|
115
|
|
|
<# if (_.contains(data.value.subsets, subset)) { #>checked='checked'<# } #> |
|
116
|
|
|
> |
|
117
|
|
|
<span>{{{ subset }}}</span> |
|
118
|
|
|
</label> |
|
119
|
|
|
<# }); #> |
|
120
|
|
|
</div> |
|
121
|
|
|
</div> |
|
122
|
|
|
<button type="button" class="flynt-typography-reset button button-secondary" data-key="{{{ data.defaultKey }}}"><?php esc_html_e('Default', 'flynt'); ?></button> |
|
123
|
|
|
</div> |
|
124
|
|
|
</div> |
|
125
|
|
|
|
|
126
|
|
|
<?php |
|
127
|
|
|
} |
|
128
|
|
|
} |
|
129
|
|
|
|
flyntwp /
flynt
Loading history...