← All changes | includes/widgets/tabs.php +100 -123 1.3.16 → 1.3.17 View file →

		@@ -1347,9 +1347,11 @@
1347	1347	return $should_render;
1348	1348	};
1349	1349
1350	1350	add_filter('elementor/frontend/container/should_render', $add_attribute_to_container, 10, 3);
1351		- $children[$index]->print_element();
	1351	+ if (isset($children[$index])) {
	1352	+ $children[$index]->print_element();
	1353	+ }
1352	1354	remove_filter('elementor/frontend/container/should_render', $add_attribute_to_container);
1353	1355	}
1354	1356
1355	1357	protected function add_attributes_to_container($container, $item_settings)
		@@ -1359,9 +1361,9 @@
1359	1361	'role' => 'tabpanel',
1360	1362	'aria-labelledby' => $item_settings['tab_id'],
1361	1363	'data-tab-index' => $item_settings['tab_count'],
1362	1364	'style' => '--ui-e-tabs-order: ' . $item_settings['tab_count'] . ';',
1363		- 'class' => 0 === $item_settings['index'] ? 'e-active' : '',
	1365	+ 'class' => 0 === $item_settings['index'] ? 'ui-e-active' : '',
1364	1366	]);
1365	1367	}
1366	1368
1367	1369	protected function render()
		@@ -1425,89 +1427,64 @@
1425	1427	}
1426	1428
1427	1429	protected function get_initial_config(): array
1428	1430	{
1429		- if (Plugin::$instance->experiments->is_feature_active('e_nested_atomic_repeaters')) {
1430		- return array_merge(parent::get_initial_config(), [
1431		- 'support_improved_repeaters' => true,
1432		- 'target_container' => ['.ui-e-tabs-heading'],
1433		- 'node' => 'button',
1434		- ]);
1435		- }
1436		-
1437		- return parent::get_initial_config();
	1431	+ return array_merge(parent::get_initial_config(), [
	1432	+ 'support_improved_repeaters' => true,
	1433	+ 'target_container' => ['.ui-e-tabs-heading'],
	1434	+ 'node' => 'button',
	1435	+ ]);
1438	1436	}
1439		- /*
1440		- protected function content_template_single_repeater_item() {
1441		- ?>
1442		- <#
1443		- const tabCount = view.collection.length + 1,
1444		- elementUid = view.getIDInt().toString().substring( 0, 3 ) + tabCount,
1445		- tabIcon = elementor.helpers.renderIcon( view, data.tab_icon, { 'aria-hidden': true }, 'i' , 'object' );
1446	1437
1447		- let tabActiveIcon = tabIcon,
1448		- tabId = 'ui-e-tab-title-' + elementUid;
	1438	+ protected function content_template_single_repeater_item()
	1439	+ {
	1440	+ ?>
	1441	+ <#
	1442	+ const tabCount=view.collection.length + 1,
	1443	+ elementUid=view.getIDInt().toString().substr( 0, 3 ),
	1444	+ tabUid=elementUid + tabCount,
	1445	+ tabWrapperKey='tab-single-' + tabUid,
	1446	+ tabTitleKey='tab-title-' + tabUid,
	1447	+ tabIconKey='tab-icon-' + tabUid,
	1448	+ tabIcon=elementor.helpers.renderIcon( view, data.tab_icon, { 'aria-hidden' : true }, 'i' , 'object' ),
	1449	+ hoverAnimationClass=settings['hover_animation'] ? `elementor-animation-${ settings['hover_animation'] }` : '' ,
	1450	+ showDescription=settings['show_description'] ? 'ui-e-toggle-description' : '' ;
1449	1451
1450		- if ( '' !== data.tab_icon_active.value ) {
1451		- tabActiveIcon = elementor.helpers.renderIcon( view, data.tab_icon_active, { 'aria-hidden': true }, 'i' , 'object' );
1452		- }
	1452	+ let tabActiveIcon=tabIcon,
	1453	+ tabId='ui-e-tab-title-' + tabUid;
1453	1454
1454		- const tabWrapperKey = {
1455		- 'id': 'ui-e-tab-title-' + elementUid,
1456		- 'class': [ 'ui-e-tab-title' ],
1457		- 'data-tab-index': tabCount,
1458		- 'role': 'tab',
1459		- 'aria-selected': 1 === tabCount ? 'true' : 'false',
1460		- 'tabindex': 1 === tabCount ? '0' : '-1',
1461		- 'aria-controls': 'ui-e-tab-content-' + elementUid,
1462		- 'style': '--ui-e-tabs-order: ' + tabCount + ';',
1463		- };
	1455	+ if ( data.tab_icon_active && '' !==data.tab_icon_active.value ) {
	1456	+ tabActiveIcon=elementor.helpers.renderIcon( view, data.tab_icon_active, { 'aria-hidden' : true }, 'i' , 'object' );
	1457	+ }
1464	1458
1465		- const tabIconKey = {
1466		- 'class': [ 'ui-e-tab-icon' ],
1467		- 'data-binding-type': 'repeater-item',
1468		- 'data-binding-repeater-name': 'tabs',
1469		- 'data-binding-setting': [ data.tab_icon.value, data.tab_icon_active.value ],
1470		- 'data-binding-index': tabCount,
1471		- };
	1459	+ if ( data.tab_id && '' !==data.tab_id ) {
	1460	+ tabId=data.tab_id;
	1461	+ }
1472	1462
1473		- const tabTitleKey = {
1474		- 'class': [ 'ui-e-tab-title-text' ],
1475		- 'data-binding-type': 'repeater-item',
1476		- 'data-binding-repeater-name': 'tabs',
1477		- 'data-binding-setting': [ 'tab_title' ],
1478		- 'data-binding-index': tabCount,
1479		- };
	1463	+ view.addRenderAttribute( tabWrapperKey, { 'id' : tabId, 'class' : [ 'ui-e-tab-title' , hoverAnimationClass, showDescription ], 'data-tab-index' : tabCount, 'role' : 'tab' , 'aria-selected' : 1===tabCount ? 'true' : 'false' , 'tabindex' : 1===tabCount ? '0' : '-1' , 'aria-controls' : 'ui-e-tab-content-' + tabUid, 'style' : '--ui-e-tabs-order: ' + tabCount + ';' ,
	1464	+ } );
1480	1465
1481		- view.addRenderAttribute( 'button-container', tabWrapperKey, null, true );
1482		- view.addRenderAttribute( 'tab-title-container', tabTitleKey, null, true );
1483		- view.addRenderAttribute( 'tab-icon-key-container', tabIconKey, null, true );
1484		- #>
	1466	+ view.addRenderAttribute( tabTitleKey, { 'class' : [ 'ui-e-tab-texts' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ 'tab_title' ], 'data-binding-index' : tabCount,
	1467	+ } );
1485	1468
1486		- <button {{{ view.getRenderAttributeString( 'button-container' ) }}}>
1487		- <# if ( tabIcon.value ) { #>
1488		- <span {{{ view.getRenderAttributeString( 'tab-icon-key-container' ) }}}> {{{ tabIcon.value }}}{{{ tabActiveIcon.value }}} </span>
1489		- <# } #>
1490		- <span {{{ view.getRenderAttributeString( 'tab-title-container' ) }}}> {{{ data.tab_title }}} </span>
1491		- </button>
1492		- <?php
1493		- }
1494		- */
1495		- /*
1496		- protected function content_template_single_repeater_item() {
1497		- ?>
1498		- <#
1499		- const tabIndex = view.collection.length,
1500		- elementUid = view.getIDInt().toString(),
1501		- item = data,
1502		- hoverAnimationSetting = view?.container?.settings?.attributes?.hover_animation;
1503		- hoverAnimationClass = hoverAnimationSetting
1504		- ? `elementor-animation-${ hoverAnimationSetting }`
1505		- : '';
1506		- #>
1507		- <?php $this->content_template_single_item( '{{ tabIndex }}', '{{ item }}', '{{ elementUid }}', '{{ hoverAnimationClass }}' );
1508		- }
1509		- */
	1469	+ view.addRenderAttribute( tabIconKey, { 'class' : [ 'ui-e-tab-icon' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ data.tab_icon ? data.tab_icon.value : '' , data.tab_icon_active ? data.tab_icon_active.value : '' ], 'data-binding-index' : tabCount,
	1470	+ } );
	1471	+ #>
	1472	+ <button {{{ view.getRenderAttributeString( tabWrapperKey ) }}}>
	1473	+ <# if ( tabIcon && tabIcon.value ) { #>
	1474	+ <span {{{ view.getRenderAttributeString( tabIconKey ) }}}>{{{ tabActiveIcon.value }}}{{{ tabIcon.value }}}</span>
	1475	+ <# } #>
	1476	+ <div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
	1477	+ <# if ( data.tab_title ) { #>
	1478	+ <span> {{{ data.tab_title }}} </span>
	1479	+ <# } #>
	1480	+ <# if ( data.tab_description ) { #>
	1481	+ <p> {{{ data.tab_description }}} </p>
	1482	+ <# } #>
	1483	+ </div>
	1484	+ </button>
	1485	+ <?php
	1486	+ }
1510	1487	protected function content_template()
1511	1488	{
1512	1489
1513	1490	if (Plugin::$instance->experiments->is_feature_active('nested-elements') == false) {
		@@ -1513,62 +1490,62 @@
1513	1490	if (Plugin::$instance->experiments->is_feature_active('nested-elements') == false) {
1514	1491	return;
1515	1492	}
1516	1493
1517		- ?>
1518		- <# const elementUid=view.getIDInt().toString().substr( 0, 3 ); #>
1519		- <div class="ui-e-tabs" data-widget-number="{{ elementUid }}" aria-label="<?php echo esc_html__('Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.', 'uicore-elements'); ?>">
1520		- <# if ( settings['tabs'] ) { #>
1521		- <div class="ui-e-tabs-heading" role="tablist">
1522		- <# _.each( settings['tabs'], function( item, index ) {
1523		- const tabCount=index + 1,
1524		- tabUid=elementUid + tabCount,
1525		- tabWrapperKey=tabUid,
1526		- tabTitleKey='tab-title-' + tabUid,
1527		- tabIconKey='tab-icon-' + tabUid,
1528		- tabIcon=elementor.helpers.renderIcon( view, item.tab_icon, { 'aria-hidden' : true }, 'i' , 'object' ),
1529		- hoverAnimationClass=settings['hover_animation'] ? `elementor-animation-${ settings['hover_animation'] }` : '' ,
1530		- showDescription=settings['show_description'] ? 'ui-e-toggle-description' : '' ;
	1494	+ ?>
	1495	+ <# const elementUid=view.getIDInt().toString().substr( 0, 3 ); #>
	1496	+ <div class="ui-e-tabs" data-widget-number="{{ elementUid }}" aria-label="<?php echo esc_html__('Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.', 'uicore-elements'); ?>">
	1497	+ <# if ( settings['tabs'] ) { #>
	1498	+ <div class="ui-e-tabs-heading" role="tablist">
	1499	+ <# _.each( settings['tabs'], function( item, index ) {
	1500	+ const tabCount=index + 1,
	1501	+ tabUid=elementUid + tabCount,
	1502	+ tabWrapperKey=tabUid,
	1503	+ tabTitleKey='tab-title-' + tabUid,
	1504	+ tabIconKey='tab-icon-' + tabUid,
	1505	+ tabIcon=elementor.helpers.renderIcon( view, item.tab_icon, { 'aria-hidden' : true }, 'i' , 'object' ),
	1506	+ hoverAnimationClass=settings['hover_animation'] ? `elementor-animation-${ settings['hover_animation'] }` : '' ,
	1507	+ showDescription=settings['show_description'] ? 'ui-e-toggle-description' : '' ;
1531	1508
1532		- let tabActiveIcon=tabIcon,
1533		- tabId='ui-e-tab-title-' + tabUid;
	1509	+ let tabActiveIcon=tabIcon,
	1510	+ tabId='ui-e-tab-title-' + tabUid;
1534	1511
1535		- if ( '' !==item.tab_icon_active.value ) {
1536		- tabActiveIcon=elementor.helpers.renderIcon( view, item.tab_icon_active, { 'aria-hidden' : true }, 'i' , 'object' );
1537		- }
	1512	+ if ( '' !==item.tab_icon_active.value ) {
	1513	+ tabActiveIcon=elementor.helpers.renderIcon( view, item.tab_icon_active, { 'aria-hidden' : true }, 'i' , 'object' );
	1514	+ }
1538	1515
1539		- if ( '' !==item.tab_id ) {
1540		- tabId=item.tab_id;
1541		- }
	1516	+ if ( '' !==item.tab_id ) {
	1517	+ tabId=item.tab_id;
	1518	+ }
1542	1519
1543		- view.addRenderAttribute( tabWrapperKey, { 'id' : tabId, 'class' : [ 'ui-e-tab-title' , hoverAnimationClass, showDescription ], 'data-tab-index' : tabCount, 'role' : 'tab' , 'aria-selected' : 1===tabCount ? 'true' : 'false' , 'tabindex' : 1===tabCount ? '0' : '-1' , 'aria-controls' : 'ui-e-tab-content-' + tabUid, 'style' : '--ui-e-tabs-order: ' + tabCount + ';' ,
1544		- } );
	1520	+ view.addRenderAttribute( tabWrapperKey, { 'id' : tabId, 'class' : [ 'ui-e-tab-title' , hoverAnimationClass, showDescription ], 'data-tab-index' : tabCount, 'role' : 'tab' , 'aria-selected' : 1===tabCount ? 'true' : 'false' , 'tabindex' : 1===tabCount ? '0' : '-1' , 'aria-controls' : 'ui-e-tab-content-' + tabUid, 'style' : '--ui-e-tabs-order: ' + tabCount + ';' ,
	1521	+ } );
1545	1522
1546		- view.addRenderAttribute( tabTitleKey, { 'class' : [ 'ui-e-tab-texts' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ 'tab_title' ], 'data-binding-index' : tabCount,
1547		- } );
	1523	+ view.addRenderAttribute( tabTitleKey, { 'class' : [ 'ui-e-tab-texts' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ 'tab_title' ], 'data-binding-index' : tabCount,
	1524	+ } );
1548	1525
1549		- view.addRenderAttribute( tabIconKey, { 'class' : [ 'ui-e-tab-icon' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ 'tab_icon.value' , 'tab_icon_active.value' ], 'data-binding-index' : tabCount,
1550		- } );
1551		- #>
1552		- <button {{{ view.getRenderAttributeString( tabWrapperKey ) }}}>
1553		- <# if ( tabIcon.value ) { #>
1554		- <span {{{ view.getRenderAttributeString( tabIconKey ) }}}>{{{ tabActiveIcon.value }}}{{{ tabIcon.value }}}</span>
1555		- <# } #>
1556		- <div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
1557		- <# if ( item.tab_title ) { #>
1558		- <span> {{{ item.tab_title }}} </span>
1559		- <# } #>
1560		- <# if ( item.tab_description ) { #>
1561		- <p> {{{ item.tab_description }}} </p>
1562		- <# } #>
1563		- </div>
1564		- </button>
1565		- <# } ); #>
1566		- </div>
1567		- <div class="ui-e-tabs-content"></div>
1568		- <# } #>
1569		- </div>
1570		- <?php
	1526	+ view.addRenderAttribute( tabIconKey, { 'class' : [ 'ui-e-tab-icon' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ 'tab_icon.value' , 'tab_icon_active.value' ], 'data-binding-index' : tabCount,
	1527	+ } );
	1528	+ #>
	1529	+ <button {{{ view.getRenderAttributeString( tabWrapperKey ) }}}>
	1530	+ <# if ( tabIcon.value ) { #>
	1531	+ <span {{{ view.getRenderAttributeString( tabIconKey ) }}}>{{{ tabActiveIcon.value }}}{{{ tabIcon.value }}}</span>
	1532	+ <# } #>
	1533	+ <div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
	1534	+ <# if ( item.tab_title ) { #>
	1535	+ <span> {{{ item.tab_title }}} </span>
	1536	+ <# } #>
	1537	+ <# if ( item.tab_description ) { #>
	1538	+ <p> {{{ item.tab_description }}} </p>
	1539	+ <# } #>
	1540	+ </div>
	1541	+ </button>
	1542	+ <# } ); #>
	1543	+ </div>
	1544	+ <div class="ui-e-tabs-content"></div>
	1545	+ <# } #>
	1546	+ </div>
	1547	+ <?php
1571	1548	}
1572	1549	/*
1573	1550	private function content_template_single_item( $tab_index, $item, $element_uid, $hover_animation_class ) {
1574	1551	?>