← All changes | includes/editor-templates/responsive-bar.php +40 -39 4.1.3 → 3.4.0-dev9 View file →

		@@ -7,36 +7,39 @@
7	7	exit; // Exit if accessed directly.
8	8	}
9	9
10	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 ] );
	11	+$breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
13	12
14		-$breakpoint_classes_map = array_intersect_key( Plugin::$instance->breakpoints->get_responsive_icons_classes_map(), array_flip( $active_devices ) );
	13	+// Insert the 'desktop' device in the correct position.
	14	+if ( array_key_exists( 'widescreen', $breakpoints ) ) {
	15	+ $widescreen_index = array_search( 'widescreen', array_keys( $breakpoints ), true );
	16	+
	17	+ $breakpoints = array_slice( $breakpoints, 0, $widescreen_index, true ) +
	18	+ [ 'desktop' => '' ] +
	19	+ array_slice( $breakpoints, $widescreen_index, null, true );
	20	+} else {
	21	+ $breakpoints['desktop'] = [];
	22	+}
	23	+
	24	+$breakpoint_classes_map = array_intersect_key( Plugin::$instance->breakpoints->get_responsive_icons_classes_map(), $breakpoints );
	25	+
	26	+/* translators: %1$s: Device Name */
	27	+$breakpoint_label = __( '%1$s <br> Settings added to %1$s device will apply to %2$spx screens and down', 'elementor' );
15	28	?>
16	29
17	30	<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		- );
	31	+ <div class="e-responsive-bar__col"></div>
	32	+ <div class="e-responsive-bar__col">
	33	+ <div class="e-responsive-bar-switcher">
	34	+ <?php foreach ( $breakpoints as $name => $breakpoint ) {
	35	+ if ( 'desktop' === $name ) {
	36	+ $tooltip_label = __( 'Desktop <br> Settings added to Base device will apply to all breakpoints unless edited', 'elementor' );
29	37	} 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		- );
	38	+ $tooltip_label = sprintf( $breakpoint_label, $breakpoint->get_label(), $breakpoint->get_value() );
35	39	}
36	40	printf( '<label
37		- id="e-responsive-bar-switcher__option-%1$s"
38		- class="e-responsive-bar-switcher__option"
	41	+ class="e-responsive-bar-switcher__option e-responsive-bar-switcher__option-%1$s"
39	42	for="e-responsive-bar-switch-%1$s"
40	43	data-tooltip="%2$s">
41	44
42	45	<input type="radio" name="breakpoint" id="e-responsive-bar-switch-%1$s" value="%1$s">
		@@ -41,29 +44,27 @@
41	44
42	45	<input type="radio" name="breakpoint" id="e-responsive-bar-switch-%1$s" value="%1$s">
43	46	<i class="%3$s" aria-hidden="true"></i>
44	47	<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 ] ) );
	48	+ </label>', $name, $tooltip_label, $breakpoint_classes_map[ $name ] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
46	49	} ?>
47	50	</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	51	</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' ); ?>">
	52	+ <div class="e-responsive-bar__col">
	53	+ <button class="e-responsive-bar__close-button e-responsive-bar__button"
	54	+ data-tooltip="<?php echo esc_html__( 'Close', 'elementor' ); ?>">
	55	+ <span class="elementor-screen-only"><?php echo esc_html__( 'Close', 'elementor' ); ?></span>
	56	+ <i class="eicon-close" aria-hidden="true"></i>
	57	+ </button>
	58	+ <button class="e-responsive-bar__settings-button e-responsive-bar__button"
	59	+ data-tooltip="<?php echo esc_html__( 'Manage Breakpoints', 'elementor' ); ?>">
	60	+ <span class="elementor-screen-only"><?php echo esc_html__( 'Settings', 'elementor' ); ?></span>
63	61	<i class="eicon-cog" aria-hidden="true"></i>
64	62	</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>
	63	+ <div class="e-flex e-align-items-center e-responsive-bar__size-inputs-wrapper">
	64	+ <label for="viewport_width">W</label>
	65	+ <input type="number" id="viewport_width" class="e-responsive-bar__input-size e-responsive-bar__input-width" autocomplete="off">
	66	+ <label for="viewport_height">H</label>
	67	+ <input type="number" id="viewport_height" class="e-responsive-bar__input-size e-responsive-bar__input-height" autocomplete="off">
	68	+ </div>
68	69	</div>
69	70	</script>