| 1 |
<?php |
| 2 |
/** |
| 3 |
* Template: Responsive Dimensions field. |
| 4 |
* |
| 5 |
* @var array<string, mixed> $settings Field configuration. |
| 6 |
* @var mixed $value Current saved value. |
| 7 |
* @var string $module_id Module ID. |
| 8 |
* |
| 9 |
* @package Merchant |
| 10 |
* @since 2.2.5 |
| 11 |
*/ |
| 12 |
|
| 13 |
if ( ! defined( 'ABSPATH' ) ) { |
| 14 |
exit; |
| 15 |
} |
| 16 |
|
| 17 |
$settings = wp_parse_args( $settings, array( |
| 18 |
'units' => array( |
| 19 |
'px' => 'px', |
| 20 |
'rem' => 'rem', |
| 21 |
'em' => 'em', |
| 22 |
'vw' => 'vw', |
| 23 |
'vh' => 'vh', |
| 24 |
'%' => '%', |
| 25 |
), |
| 26 |
'dimensions' => array( |
| 27 |
'top', |
| 28 |
'right', |
| 29 |
'bottom', |
| 30 |
'left', |
| 31 |
), |
| 32 |
'devices' => array( |
| 33 |
'desktop' => 'dashicons-desktop', |
| 34 |
'tablet' => 'dashicons-tablet', |
| 35 |
'mobile' => 'dashicons-smartphone', |
| 36 |
), |
| 37 |
) ); |
| 38 |
$default_values = array(); |
| 39 |
foreach ( $settings['devices'] as $device => $icon ) { |
| 40 |
$default_values[ $device ]['unit'] = reset( $settings['units'] ); |
| 41 |
foreach ( $settings['dimensions'] as $dimension ) { |
| 42 |
$default_values[ $device ][ $dimension ] = 0; |
| 43 |
} |
| 44 |
} |
| 45 |
$value = wp_parse_args( $value, $default_values ); |
| 46 |
?> |
| 47 |
<div class="merchant-module-page-settings-responsive"> |
| 48 |
<ul class="merchant-module-page-settings-devices"> |
| 49 |
<?php foreach ( $settings['devices'] as $device => $icon ) : ?> |
| 50 |
<li class="<?php echo esc_attr( $device ); ?>"> |
| 51 |
<button type="button" class="preview-<?php echo esc_attr( $device ); ?> <?php echo $device === key( $settings['devices'] ) ? 'active' : '' ?>" |
| 52 |
data-device="<?php echo esc_attr( $device ); ?>"> |
| 53 |
<i class="dashicons <?php echo esc_attr( $icon ); ?>"></i> |
| 54 |
</button> |
| 55 |
</li> |
| 56 |
<?php endforeach; ?> |
| 57 |
</ul> |
| 58 |
<?php foreach ( $settings['devices'] as $device => $icon ) : ?> |
| 59 |
<div class="merchant-module-page-settings-device-container <?php echo $device === key( $settings['devices'] ) ? 'active' : '' ?>" data-device="<?php echo esc_attr( $device ); ?>"> |
| 60 |
<div class="merchant-module-page-settings-unit"> |
| 61 |
<select name="merchant[<?php echo esc_attr( $settings['id'] ); ?>][<?php echo esc_attr( $device ) ?>][unit]"> |
| 62 |
<?php foreach ( $settings['units'] as $key => $option ) : ?> |
| 63 |
<option value="<?php echo esc_attr( $key ); ?>" <?php selected( $value[ esc_attr( $device ) ]['unit'], $key, true ); ?>><?php echo esc_html( $option ); ?></option> |
| 64 |
<?php endforeach; ?> |
| 65 |
</select> |
| 66 |
</div> |
| 67 |
<div class="merchant-module-page-settings-dimensions"> |
| 68 |
<?php foreach ( $settings['dimensions'] as $dimension ) : ?> |
| 69 |
<div> |
| 70 |
<input id="merchant-<?php echo esc_attr( $settings['id'] ); ?>-<?php echo esc_attr( $device ) ?>-<?php echo esc_attr( $dimension ) ?>" |
| 71 |
type="number" |
| 72 |
name="merchant[<?php echo esc_attr( $settings['id'] ); ?>][<?php echo esc_attr( $device ) ?>][<?php echo esc_attr( $dimension ) ?>]" |
| 73 |
value="<?php echo esc_attr( $value[ $device ][ $dimension ] ); ?>"/> |
| 74 |
<label for="merchant-<?php echo esc_attr( $settings['id'] ); ?>-<?php echo esc_attr( $device ) ?>-<?php echo esc_attr( $dimension ) ?>"> |
| 75 |
<?php echo esc_html( ucfirst( $dimension ) ); ?> |
| 76 |
</label> |
| 77 |
</div> |
| 78 |
<?php endforeach; ?> |
| 79 |
</div> |
| 80 |
</div> |
| 81 |
<?php endforeach; ?> |
| 82 |
</div> |
| 83 |
<?php |
| 84 |
|
