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

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

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.0.3, at modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js

31 lines 1.0 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, getTabId, getIndex } from './utils';
4
5	register( {
6	elementType: 'e-tabs',
7	id: 'e-tabs-preview-handler',
8	callback: ( { element, signal, listenToChildren } ) => {
9	window?.parent.addEventListener( 'elementor/navigator/item/click', ( event ) => {
10	const { id, type } = event.detail;
11
12	if ( type !== TAB_ELEMENT_TYPE && type !== TAB_CONTENT_ELEMENT_TYPE ) {
13	return;
14	}
15
16	const targetElement = Alpine.$data( element ).$refs[ id ];
17
18	if ( ! targetElement ) {
19	return;
20	}
21
22	const targetIndex = getIndex( targetElement, type );
23	Alpine.$data( element ).activeTab = getTabId( element.dataset.id, targetIndex );
24	}, { signal } );
25
26	// Re-initialize Alpine to sync with editor DOM manipulations that bypass Alpine's reactivity.
27	listenToChildren( [ TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE ] )
28	.render( () => refreshTree( element ) );
29	},
30	} );
31