← All changes | modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-handler.js +10 -5 4.0.9 → trunk View file →

		@@ -1,7 +1,8 @@
1	1	import { register } from '@elementor/frontend-handlers';
2	2	import { Alpine } from '@elementor/alpinejs';
3		-import { TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE, getTabId, getTabContentId, getIndex, getNextTab } from './utils';
	3	+import { TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE, getTabId, getTabContentId, getIndex, getNextTab, getDirectTabCount } from './utils';
	4	+import { getActiveTabId, setActiveTabIndex, validateActiveTab } from './editor-tabs-state';
4	5
5	6	const SELECTED_CLASS = 'e--selected';
6	7
7	8	register( {
		@@ -8,11 +9,17 @@
8	9	elementType: 'e-tabs',
9	10	id: 'e-tabs-handler',
10	11	callback: ( { element, settings } ) => {
11	12	const tabsId = element.dataset.id;
	13	+ const defaultActiveTab = settings[ 'default-active-tab' ];
12	14
13	15	Alpine.data( `eTabs${ tabsId }`, () => ( {
14		- activeTab: settings[ 'default-active-tab' ],
	16	+ init() {
	17	+ validateActiveTab( tabsId, getDirectTabCount( this.$el ) );
	18	+ },
	19	+ get activeTab() {
	20	+ return getActiveTabId( tabsId, defaultActiveTab );
	21	+ },
15	22
16	23	navigateTabs( { key, target: tab } ) {
17	24	const nextTab = getNextTab( key, tab );
18	25
		@@ -24,11 +31,9 @@
24	31
25	32	return getTabId( tabsId, index );
26	33	},
27	34	'@click'() {
28		- const id = this.$el.id;
29		-
30		- this.activeTab = id;
	35	+ setActiveTabIndex( tabsId, getIndex( this.$el, TAB_ELEMENT_TYPE ) );
31	36	},
32	37	'@keydown.arrow-right.prevent'( event ) {
33	38	this.navigateTabs( event );
34	39	},