PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.3
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.3
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / admin / views / sp-framework / fields / typography / typography.php

typography.php in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.3, at admin/views/sp-framework/fields/typography/typography.php

457 lines 18.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * The framework typography fields file.
4 *
5 * @package Smart_Post_Show
6 * @subpackage Smart_Post_Show/admin
7 */
8
9 if ( ! defined( 'ABSPATH' ) ) {
10 exit; // Exit if accessed directly.
11 }
12
13 if ( ! class_exists( 'SP_PC_Field_typography' ) ) {
14 /**
15 * SP_PC_Field_typography
16 */
17 class SP_PC_Field_typography extends SP_PC_Fields {
18
19 /**
20 * Chosen
21 *
22 * @var bool
23 */
24 public $chosen = false;
25
26 /**
27 * Value
28 *
29 * @var array
30 */
31 public $value = array();
32 /**
33 * Field constructor.
34 *
35 * @param array $field The field type.
36 * @param string $value The values of the field.
37 * @param string $unique The unique ID for the field.
38 * @param string $where To where show the output CSS.
39 * @param string $parent The parent args.
40 */
41 public function __construct( $field, $value = '', $unique = '', $where = '', $parent = '' ) {
42 parent::__construct( $field, $value, $unique, $where, $parent );
43 }
44
45 /**
46 * Render method.
47 */
48 public function render() {
49
50 echo wp_kses_post( $this->field_before() );
51
52 $args = wp_parse_args(
53 $this->field,
54 array(
55 'font_family' => true,
56 'font_weight' => true,
57 'font_style' => true,
58 'font_size' => true,
59 'line_height' => true,
60 'tablet_font_size' => true,
61 'tablet_line_height' => true,
62 'mobile_font_size' => true,
63 'mobile_line_height' => true,
64 'letter_spacing' => true,
65 'text_align' => true,
66 'text_transform' => true,
67 'color' => true,
68 'hover_color' => false,
69 'chosen' => true,
70 'preview' => true,
71 'subset' => true,
72 'multi_subset' => false,
73 'extra_styles' => false,
74 'backup_font_family' => false,
75 'font_variant' => false,
76 'word_spacing' => false,
77 'text_decoration' => false,
78 'custom_style' => false,
79 'exclude' => '', // phpcs:ignore
80 'unit' => 'px',
81 'preview_text' => 'The quick brown fox jumps over the lazy dog',
82 )
83 );
84
85 $default_value = array(
86 'font-family' => '',
87 'font-weight' => '',
88 'font-style' => '',
89 'font-variant' => '',
90 'font-size' => '',
91 'line-height' => '',
92 'tablet-font-size' => '',
93 'tablet-line-height' => '',
94 'mobile-font-size' => '',
95 'mobile-line-height' => '',
96 'letter-spacing' => '',
97 'word-spacing' => '',
98 'text-align' => '',
99 'text-transform' => '',
100 'text-decoration' => '',
101 'backup-font-family' => '',
102 'color' => '',
103 'hover_color' => '',
104 'custom-style' => '',
105 'type' => '',
106 'subset' => '',
107 'extra-styles' => array(),
108 );
109
110 $default_value = ( ! empty( $this->field['default'] ) ) ? wp_parse_args( $this->field['default'], $default_value ) : $default_value;
111 $this->value = wp_parse_args( $this->value, $default_value );
112 $this->chosen = $args['chosen'];
113 $chosen_class = ( $this->chosen ) ? ' spf--chosen' : '';
114
115 echo '<div class="spf--typography' . esc_attr( $chosen_class ) . '" data-unit="' . esc_attr( $args['unit'] ) . '" data-exclude="' . esc_attr( $args['exclude'] ) . '">';
116
117 echo '<div class="spf--blocks spf--blocks-selects">';
118
119 //
120 // Font Family.
121 if ( ! empty( $args['font_family'] ) ) {
122 echo '<div class="spf--block">';
123 echo '<div class="spf--title">' . esc_html__( 'Font Family', 'post-carousel' ) . '</div>';
124 echo $this->create_select( array( $this->value['font-family'] => $this->value['font-family'] ), 'font-family', esc_html__( 'Select a font', 'post-carousel' ) ); // phpcs:ignore -- escaped by create_select.
125 echo '</div>';
126 }
127
128 //
129 // Backup Font Family.
130 if ( ! empty( $args['backup_font_family'] ) ) {
131 echo '<div class="spf--block spf--block-backup-font-family hidden">';
132 echo '<div class="spf--title">' . esc_html__( 'Backup Font Family', 'post-carousel' ) . '</div>';
133 echo $this->create_select( // phpcs:ignore -- escaped by create_select.
134 apply_filters(
135 'spf_field_typography_backup_font_family',
136 array(
137 'Arial, Helvetica, sans-serif',
138 "'Arial Black', Gadget, sans-serif",
139 "'Comic Sans MS', cursive, sans-serif",
140 'Impact, Charcoal, sans-serif',
141 "'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
142 'Tahoma, Geneva, sans-serif',
143 "'Trebuchet MS', Helvetica, sans-serif'",
144 'Verdana, Geneva, sans-serif',
145 "'Courier New', Courier, monospace",
146 "'Lucida Console', Monaco, monospace",
147 'Georgia, serif',
148 'Palatino Linotype',
149 )
150 ),
151 'backup-font-family',
152 esc_html__( 'Default', 'post-carousel' )
153 );
154 echo '</div>';
155 }
156
157 //
158 // Font Style and Extra Style Select.
159 if ( ! empty( $args['font_weight'] ) || ! empty( $args['font_style'] ) ) {
160
161 //
162 // Font Style Select.
163 echo '<div class="spf--block spf--block-font-style hidden">';
164 echo '<div class="spf--title">' . esc_html__( 'Font Style', 'post-carousel' ) . '</div>';
165 echo '<select class="spf--font-style-select" data-placeholder="Default">';
166 echo '<option value="">' . ( wp_kses_post( ! $this->chosen ) ? esc_html__( 'Default', 'post-carousel' ) : '' ) . '</option>';
167 if ( ! empty( $this->value['font-weight'] ) || ! empty( $this->value['font-style'] ) ) {
168 echo '<option value="' . esc_attr( strtolower( $this->value['font-weight'] . $this->value['font-style'] ) ) . '" selected></option>';
169 }
170 echo '</select>';
171 echo '<input type="hidden" name="' . esc_attr( $this->field_name( '[font-weight]' ) ) . '" class="spf--font-weight" value="' . esc_attr( $this->value['font-weight'] ) . '" />';
172 echo '<input type="hidden" name="' . esc_attr( $this->field_name( '[font-style]' ) ) . '" class="spf--font-style" value="' . esc_attr( $this->value['font-style'] ) . '" />';
173
174 //
175 // Extra Font Style Select.
176 if ( ! empty( $args['extra_styles'] ) ) {
177 echo '<div class="spf--block-extra-styles hidden">';
178 echo ( ! $this->chosen ) ? '<div class="spf--title">' . esc_html__( 'Load Extra Styles', 'post-carousel' ) . '</div>' : '';
179 $placeholder = ( $this->chosen ) ? esc_html__( 'Load Extra Styles', 'post-carousel' ) : esc_html__( 'Default', 'post-carousel' );
180 echo $this->create_select( $this->value['extra-styles'], 'extra-styles', $placeholder, true ); // phpcs:ignore -- escaped by create_select.
181 echo '</div>';
182 }
183
184 echo '</div>';
185
186 }
187
188 //
189 // Subset.
190 if ( ! empty( $args['subset'] ) ) {
191 echo '<div class="spf--block spf--block-subset hidden">';
192 echo '<div class="spf--title">' . esc_html__( 'Subset', 'post-carousel' ) . '</div>';
193 $subset = ( is_array( $this->value['subset'] ) ) ? $this->value['subset'] : array_filter( (array) $this->value['subset'] );
194 echo $this->create_select( $subset, 'subset', esc_html__( 'Default', 'post-carousel' ), $args['multi_subset'] ); // phpcs:ignore -- escaped by create_select.
195 echo '</div>';
196 }
197
198 //
199 // Text Align.
200 if ( ! empty( $args['text_align'] ) ) {
201 echo '<div class="spf--block">';
202 echo '<div class="spf--title">' . esc_html__( 'Text Align', 'post-carousel' ) . '</div>';
203 echo $this->create_select( // phpcs:ignore -- escaped by create_select.
204 array(
205 'inherit' => esc_html__( 'Inherit', 'post-carousel' ),
206 'left' => esc_html__( 'Left', 'post-carousel' ),
207 'center' => esc_html__( 'Center', 'post-carousel' ),
208 'right' => esc_html__( 'Right', 'post-carousel' ),
209 'justify' => esc_html__( 'Justify', 'post-carousel' ),
210 'initial' => esc_html__( 'Initial', 'post-carousel' ),
211 ),
212 'text-align',
213 esc_html__( 'Default', 'post-carousel' )
214 );
215 echo '</div>';
216 }
217
218 //
219 // Font Variant.
220 if ( ! empty( $args['font_variant'] ) ) {
221 echo '<div class="spf--block">';
222 echo '<div class="spf--title">' . esc_html__( 'Font Variant', 'post-carousel' ) . '</div>';
223 echo wp_kses_post(
224 $this->create_select(
225 array(
226 'normal' => esc_html__( 'Normal', 'post-carousel' ),
227 'small-caps' => esc_html__( 'Small Caps', 'post-carousel' ),
228 'all-small-caps' => esc_html__( 'All Small Caps', 'post-carousel' ),
229 ),
230 'font-variant',
231 esc_html__( 'Default', 'post-carousel' )
232 )
233 );
234 echo '</div>';
235 }
236
237 //
238 // Text Transform.
239 if ( ! empty( $args['text_transform'] ) ) {
240 echo '<div class="spf--block">';
241 echo '<div class="spf--title">' . esc_html__( 'Text Transform', 'post-carousel' ) . '</div>';
242 echo $this->create_select( // phpcs:ignore -- escaped by create_select.
243 array(
244 'none' => esc_html__( 'None', 'post-carousel' ),
245 'capitalize' => esc_html__( 'Capitalize', 'post-carousel' ),
246 'uppercase' => esc_html__( 'Uppercase', 'post-carousel' ),
247 'lowercase' => esc_html__( 'Lowercase', 'post-carousel' ),
248 ),
249 'text-transform',
250 esc_html__( 'Default', 'post-carousel' )
251 );
252 echo '</div>';
253 }
254
255 //
256 // Text Decoration.
257 if ( ! empty( $args['text_decoration'] ) ) {
258 echo '<div class="spf--block">';
259 echo '<div class="spf--title">' . esc_html__( 'Text Decoration', 'post-carousel' ) . '</div>';
260 echo wp_kses_post(
261 $this->create_select(
262 array(
263 'none' => esc_html__( 'None', 'post-carousel' ),
264 'underline' => esc_html__( 'Solid', 'post-carousel' ),
265 'underline double' => esc_html__( 'Double', 'post-carousel' ),
266 'underline dotted' => esc_html__( 'Dotted', 'post-carousel' ),
267 'underline dashed' => esc_html__( 'Dashed', 'post-carousel' ),
268 'underline wavy' => esc_html__( 'Wavy', 'post-carousel' ),
269 'underline overline' => esc_html__( 'Overline', 'post-carousel' ),
270 'line-through' => esc_html__( 'Line-through', 'post-carousel' ),
271 ),
272 'text-decoration',
273 esc_html__( 'Default', 'post-carousel' )
274 )
275 );
276 echo '</div>';
277 }
278
279 echo '</div>'; // End of .spf--blocks-selects.
280
281 echo '<div class="spf--blocks spf--blocks-inputs">';
282
283 //
284 // Font Size and Line Height.
285 if ( ! empty( $args['font_size'] ) ) {
286 echo '<div class="spf--block">';
287 echo '<div class="spf--title">' . esc_html__( 'Font Size', 'post-carousel' ) . '</div>';
288 echo '<div class="spf--input-wrap">';
289 echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[font-size]' ) ) . '" class="spf--font-size spf--input spf-input-number" value="' . esc_attr( $this->value['font-size'] ) . '" />';
290 echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
291 echo '</div>';
292 echo '</div>';
293 }
294 if ( ! empty( $args['line_height'] ) ) {
295 echo '<div class="spf--block">';
296 echo '<div class="spf--title">' . esc_html__( 'Line Height', 'post-carousel' ) . '</div>';
297 echo '<div class="spf--input-wrap">';
298 echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[line-height]' ) ) . '" class="spf--line-height spf--input spf-input-number" value="' . esc_attr( $this->value['line-height'] ) . '" />';
299 echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
300 echo '</div>';
301 echo '</div>';
302 }
303 if ( ! empty( $args['tablet_font_size'] ) ) {
304 echo '<div class="spf--block">';
305 echo '<div class="spf--title">' . esc_html__( 'Font Size (Tablet)', 'post-carousel' ) . '</div>';
306 echo '<div class="spf--input-wrap">';
307 echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[tablet-font-size]' ) ) . '" class="spf--font-size spf--input spf-input-number" value="' . esc_attr( $this->value['tablet-font-size'] ) . '" />';
308 echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
309 echo '</div>';
310 echo '</div>';
311 }
312 if ( ! empty( $args['tablet_line_height'] ) ) {
313 echo '<div class="spf--block">';
314 echo '<div class="spf--title">' . esc_html__( 'Line Height (Tablet)', 'post-carousel' ) . '</div>';
315 echo '<div class="spf--input-wrap">';
316 echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[tablet-line-height]' ) ) . '" class="spf--line-height spf--input spf-input-number" value="' . esc_attr( $this->value['tablet-line-height'] ) . '" />';
317 echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
318 echo '</div>';
319 echo '</div>';
320 }
321 if ( ! empty( $args['mobile_font_size'] ) ) {
322 echo '<div class="spf--block">';
323 echo '<div class="spf--title">' . esc_html__( 'Font Size (Mobile)', 'post-carousel' ) . '</div>';
324 echo '<div class="spf--input-wrap">';
325 echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[mobile-font-size]' ) ) . '" class="spf--font-size spf--input spf-input-number" value="' . esc_attr( $this->value['mobile-font-size'] ) . '" />';
326 echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
327 echo '</div>';
328 echo '</div>';
329 }
330 if ( ! empty( $args['mobile_line_height'] ) ) {
331 echo '<div class="spf--block">';
332 echo '<div class="spf--title">' . esc_html__( 'Line Height (Mobile)', 'post-carousel' ) . '</div>';
333 echo '<div class="spf--input-wrap">';
334 echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[mobile-line-height]' ) ) . '" class="spf--line-height spf--input spf-input-number" disabled="disabled" value="' . esc_attr( $this->value['mobile-line-height'] ) . '" />';
335 echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
336 echo '</div>';
337 echo '</div>';
338 }
339
340 //
341 // Letter Spacing.
342 if ( ! empty( $args['letter_spacing'] ) ) {
343 echo '<div class="spf--block">';
344 echo '<div class="spf--title">' . esc_html__( 'Letter Spacing', 'post-carousel' ) . '</div>';
345 echo '<div class="spf--input-wrap">';
346 echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[letter-spacing]' ) ) . '" class="spf--letter-spacing spf--input spf-input-number" value="' . esc_attr( $this->value['letter-spacing'] ) . '" />';
347 echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
348 echo '</div>';
349 echo '</div>';
350 }
351
352 //
353 // Word Spacing.
354 if ( ! empty( $args['word_spacing'] ) ) {
355 echo '<div class="spf--block">';
356 echo '<div class="spf--title">' . esc_html__( 'Word Spacing', 'post-carousel' ) . '</div>';
357 echo '<div class="spf--input-wrap">';
358 echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[word-spacing]' ) ) . '" class="spf--word-spacing spf--input spf-input-number" value="' . esc_attr( $this->value['word-spacing'] ) . '" />';
359 echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
360 echo '</div>';
361 echo '</div>';
362 }
363
364 echo '</div>'; // End of spf--blocks-inputs.
365
366 //
367 // Font Color.
368 if ( ! empty( $args['color'] ) ) {
369 echo '<div class="spf--blocks spf--blocks-color">';
370 $default_color_attr = ( ! empty( $default_value['color'] ) ) ? ' data-default-color="' . esc_attr( $default_value['color'] ) . '"' : '';
371 echo '<div class="spf--block spf--block-font-color">';
372 echo '<div class="spf--title">' . esc_html__( 'Font Color', 'post-carousel' ) . '</div>';
373 echo '<div class="spf-field-color">';
374 echo '<input type="text" name="' . esc_attr( $this->field_name( '[color]' ) ) . '" class="spf-color spf--color" value="' . esc_attr( $this->value['color'] ) . '"' . wp_kses_post( $default_color_attr ) . ' />';
375 echo '</div>';
376 echo '</div>';
377
378 //
379 // Font Hover Color.
380 if ( ! empty( $args['hover_color'] ) ) {
381 $default_hover_color_attr = ( ! empty( $default_value['hover_color'] ) ) ? ' data-default-color="' . esc_attr( $default_value['hover_color'] ) . '"' : '';
382 echo '<div class="spf--block spf--block-font-color">';
383 echo '<div class="spf--title">' . esc_html__( 'Hover Color', 'post-carousel' ) . '</div>';
384 echo '<div class="spf-field-color">';
385 echo '<input type="text" name="' . esc_attr( $this->field_name( '[hover_color]' ) ) . '" class="spf-color spf--color" value="' . esc_attr( $this->value['hover_color'] ) . '"' . wp_kses_post( $default_hover_color_attr ) . ' />';
386 echo '</div>';
387 echo '</div>';
388 }
389 echo '</div>'; // End of spf--blocks-color.
390 }
391
392 //
393 // Custom style.
394 if ( ! empty( $args['custom_style'] ) ) {
395 echo '<div class="spf--block spf--block-custom-style">';
396 echo '<div class="spf--title">' . esc_html__( 'Custom Style', 'post-carousel' ) . '</div>';
397 echo '<textarea disabled="disabled" name="' . esc_attr( $this->field_name( '[custom-style]' ) ) . '" class="spf--custom-style">' . esc_html( $this->value['custom-style'] ) . '</textarea>';
398 echo '</div>';
399 }
400
401 //
402 // Preview.
403 $always_preview = ( 'always' !== $args['preview'] ) ? ' hidden' : '';
404
405 if ( ! empty( $args['preview'] ) ) {
406 echo '<div class="spf--block spf--block-preview' . esc_attr( $always_preview ) . '">';
407 echo '<div class="spf--toggle fa fa-toggle-off"></div>';
408 echo '<div class="spf--preview">' . esc_html( $args['preview_text'] ) . '</div>';
409 echo '</div>';
410 }
411
412 echo '<input type="hidden" name="' . esc_attr( $this->field_name( '[type]' ) ) . '" class="spf--type" value="' . esc_attr( $this->value['type'] ) . '" />';
413 echo '<input type="hidden" name="' . esc_attr( $this->field_name( '[unit]' ) ) . '" class="spf--unit-save" value="' . esc_attr( $args['unit'] ) . '" />';
414
415 echo '</div>';
416
417 echo wp_kses_post( $this->field_after() );
418 }
419
420 /**
421 * Create select field.
422 *
423 * @param [type] $options options.
424 * @param [type] $name name.
425 * @param string $placeholder placeholder.
426 * @param boolean $is_multiple multiple check.
427 * @return mixed
428 */
429 public function create_select( $options, $name, $placeholder = '', $is_multiple = false ) {
430
431 $multiple_name = ( $is_multiple ) ? '[]' : '';
432 $multiple_attr = ( $is_multiple ) ? ' multiple data-multiple="true"' : '';
433 $chosen_rtl = ( $this->chosen && is_rtl() ) ? ' chosen-rtl' : '';
434
435 $output = '<select disabled="disabled" name="' . $this->field_name( '[' . $name . ']' . $multiple_name ) . '" class="spf--' . $name . $chosen_rtl . '" data-placeholder="' . $placeholder . '"' . $multiple_attr . '>';
436 $output .= ( ! empty( $placeholder ) ) ? '<option value="">' . ( ( ! $this->chosen ) ? $placeholder : '' ) . '</option>' : '';
437
438 if ( ! empty( $options ) ) {
439 foreach ( $options as $option_key => $pcp_metabox_value ) {
440 if ( $is_multiple ) {
441 $selected = ( in_array( $pcp_metabox_value, $this->value[ $name ] ) ) ? ' selected' : '';
442 $output .= '<option value="' . esc_attr( $pcp_metabox_value ) . '"' . $selected . '>' . $pcp_metabox_value . '</option>';
443 } else {
444 $option_key = ( is_numeric( $option_key ) ) ? $pcp_metabox_value : $option_key;
445 $selected = ( $option_key === $this->value[ $name ] ) ? ' selected' : '';
446 $output .= '<option value="' . esc_attr( $option_key ) . '"' . $selected . '>' . $pcp_metabox_value . '</option>';
447 }
448 }
449 }
450
451 $output .= '</select>';
452
453 return $output;
454 }
455 }
456 }
457