Elementor Website Builder – more than just a page builder / 4.3.1

Elementor Website Builder – more than just a page builder v4.3.1

elementor / modules / atomic-widgets / elements / atomic-tabs / handlers / atomic-tabs-preview-handler.js

atomic-tabs-preview-handler.js in Elementor Website Builder – more than just a page builder 4.3.1, at modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js

41 lines 1.2 KB

Raw Download Zip

1	import { register } from '@elementor/frontend-handlers';
2	import { Alpine, refreshTree } from '@elementor/alpinejs';
3	import { TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE, getIndex } from './utils';
4	import { setActiveTabIndex } from './editor-tabs-state';
5
6	register( {
7	elementType: 'e-tabs',
8	id: 'e-tabs-preview-handler',
9	callback: ( { element, signal, listenToChildren } ) => {
10	window?.parent.addEventListener( 'elementor/navigator/item/click', ( event ) => {
11	const { id, type } = event.detail;
12
13	if ( type !== TAB_ELEMENT_TYPE && type !== TAB_CONTENT_ELEMENT_TYPE ) {
14	return;
15	}
16
17	const targetElement = Alpine.$data( element ).$refs[ id ];
18
19	if ( ! targetElement ) {
20	return;
21	}
22
23	const targetIndex = getIndex( targetElement, type );
24	setActiveTabIndex( element.dataset.id, targetIndex );
25	}, { signal } );
26
27	// Re-initialize Alpine to sync with editor DOM manipulations that bypass Alpine's reactivity.
28	listenToChildren( [ TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE ] )
29	.render( ( event ) => {
30	const childElement = event.detail.element;
31	const nearestTabs = childElement.closest( '[data-e-type="e-tabs"]' );
32
33	if ( nearestTabs !== element ) {
34	return;
35	}
36
37	refreshTree( element );
38	} );
39	},
40	} );
41