| 1 |
<?php |
| 2 |
namespace Elementor; |
| 3 |
|
| 4 |
use Elementor\Core\Breakpoints\Breakpoint; |
| 5 |
|
| 6 |
if ( ! defined( 'ABSPATH' ) ) { |
| 7 |
exit; // Exit if accessed directly. |
| 8 |
} |
| 9 |
|
| 10 |
// TODO: Use API data instead of this static array, once it is available. |
| 11 |
$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints(); |
| 12 |
$active_devices = Plugin::$instance->breakpoints->get_active_devices_list( [ 'reverse' => true ] ); |
| 13 |
|
| 14 |
$breakpoint_classes_map = array_intersect_key( Plugin::$instance->breakpoints->get_responsive_icons_classes_map(), array_flip( $active_devices ) ); |
| 15 |
?> |
| 16 |
|
| 17 |
<script type="text/template" id="tmpl-elementor-templates-responsive-bar"> |
| 18 |
<div id="e-responsive-bar__center"> |
| 19 |
<div id="e-responsive-bar-switcher" class="e-responsive-bar--pipe"> |
| 20 |
<?php foreach ( $active_devices as $device_key ) { |
| 21 |
if ( 'desktop' === $device_key ) { |
| 22 |
$tooltip_label = esc_html__( 'Desktop <br> Settings added for the base device will apply to all breakpoints unless edited', 'elementor' ); |
| 23 |
} elseif ( 'widescreen' === $device_key ) { |
| 24 |
$tooltip_label = sprintf( |
| 25 |
/* translators: %d: Breakpoint screen size. */ |
| 26 |
esc_html__( 'Widescreen <br> Settings added for the Widescreen device will apply to screen sizes %dpx and up', 'elementor' ), |
| 27 |
$active_breakpoints[ $device_key ]->get_value() |
| 28 |
); |
| 29 |
} else { |
| 30 |
$tooltip_label = sprintf( |
| 31 |
/* translators: %1$s: Device name, %2$s: Breakpoint screen size. */ |
| 32 |
esc_html__( '%1$s <br> Settings added for the %1$s device will apply to %2$spx screens and down', 'elementor' ), |
| 33 |
$active_breakpoints[ $device_key ]->get_label(), $active_breakpoints[ $device_key ]->get_value() |
| 34 |
); |
| 35 |
} |
| 36 |
printf( '<label |
| 37 |
id="e-responsive-bar-switcher__option-%1$s" |
| 38 |
class="e-responsive-bar-switcher__option" |
| 39 |
for="e-responsive-bar-switch-%1$s" |
| 40 |
data-tooltip="%2$s"> |
| 41 |
|
| 42 |
<input type="radio" name="breakpoint" id="e-responsive-bar-switch-%1$s" value="%1$s"> |
| 43 |
<i class="%3$s" aria-hidden="true"></i> |
| 44 |
<span class="screen-reader-text">%2$s</span> |
| 45 |
</label>', esc_attr( $device_key ), esc_attr( $tooltip_label ), esc_attr( $breakpoint_classes_map[ $device_key ] ) ); |
| 46 |
} ?> |
| 47 |
</div> |
| 48 |
<div id="e-responsive-bar-scale"> |
| 49 |
<div id="e-responsive-bar-scale__minus"></div> |
| 50 |
<div id="e-responsive-bar-scale__value-wrapper"><span id="e-responsive-bar-scale__value">100</span>%</div> |
| 51 |
<div id="e-responsive-bar-scale__plus"><i class="eicon-plus" aria-hidden="true"></i></div> |
| 52 |
<div id="e-responsive-bar-scale__reset"><i class="eicon-undo" aria-hidden="true"></i></div> |
| 53 |
</div> |
| 54 |
</div> |
| 55 |
<div id="e-responsive-bar__end"> |
| 56 |
<div id="e-responsive-bar__size-inputs-wrapper" class="e-flex e-align-items-center"> |
| 57 |
<label for="e-responsive-bar__input-width">W</label> |
| 58 |
<input type="number" id="e-responsive-bar__input-width" class="e-responsive-bar__input-size" autocomplete="off"> |
| 59 |
<label for="e-responsive-bar__input-height">H</label> |
| 60 |
<input type="number" id="e-responsive-bar__input-height" class="e-responsive-bar__input-size" autocomplete="off"> |
| 61 |
</div> |
| 62 |
<button id="e-responsive-bar__settings-button" class="e-responsive-bar__button e-responsive-bar--pipe" data-tooltip="<?php echo esc_attr__( 'Manage Breakpoints', 'elementor' ); ?>" aria-label="<?php echo esc_attr__( 'Manage Breakpoints', 'elementor' ); ?>"> |
| 63 |
<i class="eicon-cog" aria-hidden="true"></i> |
| 64 |
</button> |
| 65 |
<button id="e-responsive-bar__close-button" class="e-responsive-bar__button" data-tooltip="<?php echo esc_attr__( 'Close', 'elementor' ); ?>" aria-label="<?php echo esc_attr__( 'Close', 'elementor' ); ?>"> |
| 66 |
<i class="eicon-close" aria-hidden="true"></i> |
| 67 |
</button> |
| 68 |
</div> |
| 69 |
</script> |
| 70 |
|
