40 lines
1.0 KiB
JavaScript
40 lines
1.0 KiB
JavaScript
import { register } from '@elementor/frontend-handlers';
|
|
|
|
register( {
|
|
elementType: 'e-tabs',
|
|
uniqueId: 'e-tabs-handler',
|
|
callback: ( { element, signal } ) => {
|
|
const tabs = element.querySelectorAll( '[data-element_type="e-tab"]' );
|
|
const tabPanels = element.querySelectorAll( '[data-element_type="e-tab-panel"]' );
|
|
|
|
const setActiveTab = ( id ) => {
|
|
tabPanels.forEach( ( tabPanel ) => {
|
|
const activeTab = tabPanel.getAttribute( 'data-tab-id' ) === id;
|
|
|
|
if ( activeTab ) {
|
|
tabPanel.style.removeProperty( 'display' );
|
|
tabPanel.removeAttribute( 'hidden' );
|
|
|
|
return;
|
|
}
|
|
|
|
tabPanel.style.display = 'none';
|
|
tabPanel.setAttribute( 'hidden', 'true' );
|
|
} );
|
|
};
|
|
|
|
const defaultActiveTab = element.getAttribute( 'data-active-tab' );
|
|
|
|
setActiveTab( defaultActiveTab );
|
|
|
|
tabs.forEach( ( tab ) => {
|
|
const clickHandler = () => {
|
|
const tabId = tab.getAttribute( 'data-id' );
|
|
setActiveTab( tabId );
|
|
};
|
|
|
|
tab.addEventListener( 'click', clickHandler, { signal } );
|
|
} );
|
|
},
|
|
} );
|