← All changes | modules/nested-tabs/widgets/nested-tabs.php +54 -33 4.3.0-beta3 → 3.26.0-dev5 View file →

		@@ -16,9 +16,9 @@
16	16	use Elementor\Plugin;
17	17	use Elementor\Repeater;
18	18
19	19	if ( ! defined( 'ABSPATH' ) ) {
20		- exit; // Exit if accessed directly.
	20	+ exit; // Exit if accessed directly
21	21	}
22	22
23	23	class NestedTabs extends Widget_Nested_Base {
24	24
		@@ -50,9 +50,9 @@
50	50	return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
51	51	}
52	52
53	53	public function show_in_panel(): bool {
54		- return Plugin::$instance->experiments->is_feature_active( 'container' );
	54	+ return Plugin::$instance->experiments->is_feature_active( 'nested-elements', true );
55	55	}
56	56
57	57	protected function tab_content_container( int $index ) {
58	58	return [
		@@ -57,13 +57,9 @@
57	57	protected function tab_content_container( int $index ) {
58	58	return [
59	59	'elType' => 'container',
60	60	'settings' => [
61		- '_title' => sprintf(
62		- /* translators: %d: Tab index. */
63		- __( 'Tab #%d', 'elementor' ),
64		- $index
65		- ),
	61	+ '_title' => sprintf( __( 'Tab #%s', 'elementor' ), $index ),
66	62	'content_width' => 'full',
67	63	],
68	64	];
69	65	}
		@@ -80,9 +76,8 @@
80	76	return 'tab_title';
81	77	}
82	78
83	79	protected function get_default_children_title() {
84		- /* translators: %d: Tab index. */
85	80	return esc_html__( 'Tab #%d', 'elementor' );
86	81	}
87	82
88	83	protected function get_default_children_placeholder_selector() {
		@@ -183,9 +178,9 @@
183	178	'tab_title' => esc_html__( 'Tab #3', 'elementor' ),
184	179	],
185	180	],
186	181	'title_field' => '{{{ tab_title }}}',
187		- 'button_text' => esc_html__( 'Add Tab', 'elementor' ),
	182	+ 'button_text' => 'Add Tab',
188	183	] );
189	184
190	185	$styling_block_start = '--n-tabs-direction: column; --n-tabs-heading-direction: row; --n-tabs-heading-width: initial; --n-tabs-title-flex-basis: content; --n-tabs-title-flex-shrink: 0;';
191	186	$styling_block_end = '--n-tabs-direction: column-reverse; --n-tabs-heading-direction: row; --n-tabs-heading-width: initial; --n-tabs-title-flex-basis: content; --n-tabs-title-flex-shrink: 0';
		@@ -536,8 +531,9 @@
536	531	$this->add_group_control(
537	532	Group_Control_Box_Shadow::get_type(),
538	533	[
539	534	'name' => 'tabs_title_box_shadow',
	535	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
540	536	'separator' => 'after',
541	537	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"false\"]:not( :hover )",
542	538	]
543	539	);
		@@ -594,8 +590,9 @@
594	590	$this->add_group_control(
595	591	Group_Control_Box_Shadow::get_type(),
596	592	[
597	593	'name' => 'tabs_title_box_shadow_hover',
	594	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
598	595	'separator' => 'after',
599	596	'selector' => "{$heading_selector_non_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover",
600	597	]
601	598	);
		@@ -678,8 +675,9 @@
678	675	$this->add_group_control(
679	676	Group_Control_Box_Shadow::get_type(),
680	677	[
681	678	'name' => 'tabs_title_box_shadow_active',
	679	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
682	680	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"true\"], {$heading_selector_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover",
683	681	]
684	682	);
685	683
		@@ -758,8 +756,13 @@
758	756	Group_Control_Text_Shadow::get_type(),
759	757	[
760	758	'name' => 'title_text_shadow',
761	759	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"false\"]:not( :hover )",
	760	+ 'fields_options' => [
	761	+ 'text_shadow_type' => [
	762	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
	763	+ ],
	764	+ ],
762	765	]
763	766	);
764	767
765	768	$this->add_group_control(
		@@ -766,8 +769,13 @@
766	769	Group_Control_Text_Stroke::get_type(),
767	770	[
768	771	'name' => 'title_text_stroke',
769	772	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"false\"]:not( :hover ) :is( span, a, i )",
	773	+ 'fields_options' => [
	774	+ 'text_stroke_type' => [
	775	+ 'label' => esc_html__( 'Stroke', 'elementor' ),
	776	+ ],
	777	+ ],
770	778	]
771	779	);
772	780
773	781	$this->end_controls_tab();
		@@ -794,8 +802,14 @@
794	802	Group_Control_Text_Shadow::get_type(),
795	803	[
796	804	'name' => 'title_text_shadow_hover',
797	805	'selector' => "{$heading_selector_non_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover",
	806	+ 'fields_options' => [
	807	+ 'text_shadow_type' => [
	808	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
	809	+ ],
	810	+ ],
	811	+
798	812	]
799	813	);
800	814
801	815	$this->add_group_control(
		@@ -802,8 +816,13 @@
802	816	Group_Control_Text_Stroke::get_type(),
803	817	[
804	818	'name' => 'title_text_stroke_hover',
805	819	'selector' => "{$heading_selector_non_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover :is( span, a, i )",
	820	+ 'fields_options' => [
	821	+ 'text_stroke_type' => [
	822	+ 'label' => esc_html__( 'Stroke', 'elementor' ),
	823	+ ],
	824	+ ],
806	825	]
807	826	);
808	827
809	828	$this->end_controls_tab();
		@@ -830,8 +849,13 @@
830	849	Group_Control_Text_Shadow::get_type(),
831	850	[
832	851	'name' => 'title_text_shadow_active',
833	852	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"true\"], {$heading_selector_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover",
	853	+ 'fields_options' => [
	854	+ 'text_shadow_type' => [
	855	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
	856	+ ],
	857	+ ],
834	858	]
835	859	);
836	860
837	861	$this->add_group_control(
		@@ -838,8 +862,13 @@
838	862	Group_Control_Text_Stroke::get_type(),
839	863	[
840	864	'name' => 'title_text_stroke_active',
841	865	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"true\"] :is( span, a, i ), {$heading_selector_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover :is( span, a, i )",
	866	+ 'fields_options' => [
	867	+ 'text_stroke_type' => [
	868	+ 'label' => esc_html__( 'Stroke', 'elementor' ),
	869	+ ],
	870	+ ],
842	871	]
843	872	);
844	873
845	874	$this->end_controls_tab();
		@@ -1075,9 +1104,8 @@
1075	1104	}
1076	1105
1077	1106	$this->add_render_attribute( $setting_key, [
1078	1107	'id' => $item_settings['tab_id'],
1079		- 'data-tab-title-id' => $item_settings['tab_title_id'],
1080	1108	'class' => $css_classes,
1081	1109	'aria-selected' => 1 === $item_settings['tab_count'] ? 'true' : 'false',
1082	1110	'data-tab-index' => $item_settings['tab_count'],
1083	1111	'role' => 'tab',
		@@ -1123,9 +1151,9 @@
1123	1151
1124	1152	/**
1125	1153	* Print the content area.
1126	1154	*
1127		- * @param int $index
	1155	+ * @param int $index
1128	1156	* @param array $item_settings
1129	1157	*/
1130	1158	public function print_child( $index, $item_settings = [] ) {
1131	1159	$children = $this->get_children();
		@@ -1184,11 +1212,11 @@
1184	1212	<div class="e-n-tabs-heading" role="tablist">
1185	1213	<?php
1186	1214	foreach ( $settings['tabs'] as $index => $item ) {
1187	1215	$tab_count = $index + 1;
1188		- $tab_title_id = 'e-n-tab-title-' . $widget_number . $tab_count;
	1216	+
1189	1217	$tab_id = empty( $item['element_id'] )
1190		- ? $tab_title_id
	1218	+ ? 'e-n-tab-title-' . $widget_number . $tab_count
1191	1219	: $item['element_id'];
1192	1220
1193	1221	$item_settings = [
1194	1222	'index' => $index,
		@@ -1193,9 +1221,8 @@
1193	1221	$item_settings = [
1194	1222	'index' => $index,
1195	1223	'tab_count' => $tab_count,
1196	1224	'tab_id' => $tab_id,
1197		- 'tab_title_id' => $tab_title_id,
1198	1225	'container_id' => 'e-n-tab-content-' . $widget_number . $tab_count,
1199	1226	'widget_number' => $widget_number,
1200	1227	'item' => $item,
1201	1228	'settings' => $settings,
		@@ -1214,13 +1241,17 @@
1214	1241	<?php
1215	1242	}
1216	1243
1217	1244	protected function get_initial_config(): array {
1218		- return array_merge( parent::get_initial_config(), [
1219		- 'support_improved_repeaters' => true,
1220		- 'target_container' => [ '.e-n-tabs-heading' ],
1221		- 'node' => 'button',
1222		- ] );
	1245	+ if ( Plugin::$instance->experiments->is_feature_active( 'e_nested_atomic_repeaters' ) ) {
	1246	+ return array_merge( parent::get_initial_config(), [
	1247	+ 'support_improved_repeaters' => true,
	1248	+ 'target_container' => [ '.e-n-tabs-heading' ],
	1249	+ 'node' => 'button',
	1250	+ ] );
	1251	+ }
	1252	+
	1253	+ return parent::get_initial_config();
1223	1254	}
1224	1255
1225	1256	protected function content_template_single_repeater_item() {
1226	1257	?>
		@@ -1261,12 +1292,11 @@
1261	1292	private function content_template_single_item( $tab_index, $item, $element_uid, $hover_animation_class ) {
1262	1293	?>
1263	1294	<#
1264	1295	const tabCount = tabIndex + 1,
1265		- tabTitleId = 'e-n-tab-title-' + elementUid + tabCount,
1266	1296	tabId = item.element_id
1267	1297	? item.element_id
1268		- : tabTitleId,
	1298	+ : 'e-n-tab-title-' + elementUid + ( tabIndex + 1 ),
1269	1299	tabUid = elementUid + tabCount,
1270	1300	tabIcon = elementor.helpers.renderIcon( view, item.tab_icon, { 'aria-hidden': true }, 'i' , 'object' ),
1271	1301	activeTabIcon = item.tab_icon_active.value
1272	1302	? elementor.helpers.renderIcon( view, item.tab_icon_active, { 'aria-hidden': true }, 'i' , 'object' )
		@@ -1274,9 +1304,8 @@
1274	1304	escapedHoverAnimationClass = _.escape( hoverAnimationClass );
1275	1305
1276	1306	view.addRenderAttribute( 'tab-title', {
1277	1307	'id': tabId,
1278		- 'data-tab-title-id': tabTitleId,
1279	1308	'class': [ 'e-n-tab-title',escapedHoverAnimationClass ],
1280	1309	'data-tab-index': tabCount,
1281	1310	'role': 'tab',
1282	1311	'aria-selected': 1 === tabCount ? 'true' : 'false',
		@@ -1288,20 +1317,11 @@
1288	1317	view.addRenderAttribute( 'tab-title-text', {
1289	1318	'class': [ 'e-n-tab-title-text' ],
1290	1319	'data-binding-type': 'repeater-item',
1291	1320	'data-binding-repeater-name': 'tabs',
1292		- 'data-binding-setting': [ 'tab_title', 'element_id' ],
	1321	+ 'data-binding-setting': [ 'tab_title' ],
1293	1322	'data-binding-index': tabCount,
1294		- 'data-binding-config': JSON.stringify({
1295		- 'element_id': {
1296		- attr: 'id',
1297		- selector: 'button',
1298		- editType: 'attribute',
1299		- },
1300		- 'tab_title': {
1301		- editType: 'text',
1302		- },
1303		- }),
	1323	+ 'data-binding-dynamic': 'true',
1304	1324	}, null, true );
1305	1325
1306	1326	view.addRenderAttribute( 'tab-icon', {
1307	1327	'class': [ 'e-n-tab-icon' ],
		@@ -1306,8 +1326,9 @@
1306	1326	view.addRenderAttribute( 'tab-icon', {
1307	1327	'class': [ 'e-n-tab-icon' ],
1308	1328	'data-binding-type': 'repeater-item',
1309	1329	'data-binding-repeater-name': 'tabs',
	1330	+ 'data-binding-setting': [ 'tab_icon', 'tab_icon_active' ],
1310	1331	'data-binding-index': tabCount,
1311	1332	}, null, true );
1312	1333	#>
1313	1334