responsive-bar.php (3689B)
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 /* translators: %1$s: Device Name */ 17 $breakpoint_label = esc_html__( '%1$s <br> Settings added for the %1$s device will apply to %2$spx screens and down', 'elementor' ); 18 ?> 19 20 <script type="text/template" id="tmpl-elementor-templates-responsive-bar"> 21 <div id="e-responsive-bar__center"> 22 <div id="e-responsive-bar-switcher" class="e-responsive-bar--pipe"> 23 <?php foreach ( $active_devices as $device_key ) { 24 if ( 'desktop' === $device_key ) { 25 $tooltip_label = esc_html__( 'Desktop <br> Settings added for the base device will apply to all breakpoints unless edited', 'elementor' ); 26 } elseif ( 'widescreen' === $device_key ) { 27 $tooltip_label = esc_html__( 'Widescreen <br> Settings added for the Widescreen device will apply to screen sizes %dpx and up', 'elementor' ); 28 29 $tooltip_label = sprintf( $tooltip_label, $active_breakpoints[ $device_key ]->get_value() ); 30 } else { 31 $tooltip_label = sprintf( $breakpoint_label, $active_breakpoints[ $device_key ]->get_label(), $active_breakpoints[ $device_key ]->get_value() ); 32 } 33 printf( '<label 34 id="e-responsive-bar-switcher__option-%1$s" 35 class="e-responsive-bar-switcher__option" 36 for="e-responsive-bar-switch-%1$s" 37 data-tooltip="%2$s"> 38 39 <input type="radio" name="breakpoint" id="e-responsive-bar-switch-%1$s" value="%1$s"> 40 <i class="%3$s" aria-hidden="true"></i> 41 <span class="screen-reader-text">%2$s</span> 42 </label>', esc_attr( $device_key ), esc_attr( $tooltip_label ), esc_attr( $breakpoint_classes_map[ $device_key ] ) ); 43 } ?> 44 </div> 45 <div id="e-responsive-bar-scale"> 46 <div id="e-responsive-bar-scale__minus"></div> 47 <div id="e-responsive-bar-scale__value-wrapper"><span id="e-responsive-bar-scale__value">100</span>%</div> 48 <div id="e-responsive-bar-scale__plus"><i class="eicon-plus" aria-hidden="true"></i></div> 49 <div id="e-responsive-bar-scale__reset"><i class="eicon-undo" aria-hidden="true"></i></div> 50 </div> 51 </div> 52 <div id="e-responsive-bar__end"> 53 <div id="e-responsive-bar__size-inputs-wrapper" class="e-flex e-align-items-center"> 54 <label for="e-responsive-bar__input-width">W</label> 55 <input type="number" id="e-responsive-bar__input-width" class="e-responsive-bar__input-size" autocomplete="off"> 56 <label for="e-responsive-bar__input-height">H</label> 57 <input type="number" id="e-responsive-bar__input-height" class="e-responsive-bar__input-size" autocomplete="off"> 58 </div> 59 <button id="e-responsive-bar__settings-button" class="e-responsive-bar__button e-responsive-bar--pipe" 60 data-tooltip="<?php echo esc_html__( 'Manage Breakpoints', 'elementor' ); ?>"> 61 <span class="elementor-screen-only"><?php echo esc_html__( 'Settings', 'elementor' ); ?></span> 62 <i class="eicon-cog" aria-hidden="true"></i> 63 </button> 64 <button id="e-responsive-bar__close-button" class="e-responsive-bar__button" 65 data-tooltip="<?php echo esc_html__( 'Close', 'elementor' ); ?>"> 66 <span class="elementor-screen-only"><?php echo esc_html__( 'Close', 'elementor' ); ?></span> 67 <i class="eicon-close" aria-hidden="true"></i> 68 </button> 69 </div> 70 </script>