← All changes | assets/js/tabs-handler.js +5 -68 4.2.1 → 3.35.0-dev2 View file →

		@@ -11,9 +11,8 @@
11	11
12	12	var _frontendHandlers = __webpack_require__(/*! @elementor/frontend-handlers */ "@elementor/frontend-handlers");
13	13	var _alpinejs = __webpack_require__(/*! @elementor/alpinejs */ "@elementor/alpinejs");
14	14	var _utils = __webpack_require__(/*! ./utils */ "../modules/atomic-widgets/elements/atomic-tabs/handlers/utils.js");
15		-var _editorTabsState = __webpack_require__(/*! ./editor-tabs-state */ "../modules/atomic-widgets/elements/atomic-tabs/handlers/editor-tabs-state.js");
16	15	const SELECTED_CLASS = 'e--selected';
17	16	(0, _frontendHandlers.register)({
18	17	elementType: 'e-tabs',
19	18	id: 'e-tabs-handler',
		@@ -21,16 +20,10 @@
21	20	element,
22	21	settings
23	22	}) => {
24	23	const tabsId = element.dataset.id;
25		- const defaultActiveTab = settings['default-active-tab'];
26	24	_alpinejs.Alpine.data(`eTabs${tabsId}`, () => ({
27		- init() {
28		- (0, _editorTabsState.validateActiveTab)(tabsId, (0, _utils.getDirectTabCount)(this.$el));
29		- },
30		- get activeTab() {
31		- return (0, _editorTabsState.getActiveTabId)(tabsId, defaultActiveTab);
32		- },
	25	+ activeTab: settings['default-active-tab'],
33	26	navigateTabs({
34	27	key,
35	28	target: tab
36	29	}) {
		@@ -42,9 +35,10 @@
42	35	const index = (0, _utils.getIndex)(this.$el, _utils.TAB_ELEMENT_TYPE);
43	36	return (0, _utils.getTabId)(tabsId, index);
44	37	},
45	38	'@click'() {
46		- (0, _editorTabsState.setActiveTabIndex)(tabsId, (0, _utils.getIndex)(this.$el, _utils.TAB_ELEMENT_TYPE));
	39	+ const id = this.$el.id;
	40	+ this.activeTab = id;
47	41	},
48	42	'@keydown.arrow-right.prevent'(event) {
49	43	this.navigateTabs(event);
50	44	},
		@@ -52,11 +46,9 @@
52	46	this.navigateTabs(event);
53	47	},
54	48	':class'() {
55	49	const id = this.$el.id;
56		- return {
57		- [SELECTED_CLASS]: this.activeTab === id
58		- };
	50	+ return this.activeTab === id ? SELECTED_CLASS : '';
59	51	},
60	52	':aria-selected'() {
61	53	const id = this.$el.id;
62	54	return this.activeTab === id ? 'true' : 'false';
		@@ -94,59 +86,8 @@
94	86	});
95	87
96	88	/***/ }),
97	89
98		-/***/ "../modules/atomic-widgets/elements/atomic-tabs/handlers/editor-tabs-state.js":
99		-/*!************************************************************************************!*\
100		- !*** ../modules/atomic-widgets/elements/atomic-tabs/handlers/editor-tabs-state.js ***!
101		- \************************************************************************************/
102		-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
103		-
104		-
105		-
106		-Object.defineProperty(exports, "__esModule", ({
107		- value: true
108		-}));
109		-exports.getActiveTabId = getActiveTabId;
110		-exports.setActiveTabIndex = setActiveTabIndex;
111		-exports.validateActiveTab = validateActiveTab;
112		-var _alpinejs = __webpack_require__(/*! @elementor/alpinejs */ "@elementor/alpinejs");
113		-var _utils = __webpack_require__(/*! ./utils */ "../modules/atomic-widgets/elements/atomic-tabs/handlers/utils.js");
114		-/**
115		- * @typedef {Record<string, number>} TabsState - Maps tabsId to the selected tab index.
116		- */
117		-const STORE_NAME = 'editor-atomic-tabs-state';
118		-function ensureStore() {
119		- if (!_alpinejs.Alpine.store(STORE_NAME)) {
120		- _alpinejs.Alpine.store(STORE_NAME, /** @type {TabsState} */{});
121		- }
122		- return /** @type {TabsState} */_alpinejs.Alpine.store(STORE_NAME);
123		-}
124		-function getActiveTabId(tabsId, fallback) {
125		- const store = ensureStore();
126		- const storedIndex = store[tabsId];
127		- if (storedIndex === undefined) {
128		- return fallback;
129		- }
130		- return (0, _utils.getTabId)(tabsId, storedIndex);
131		-}
132		-function setActiveTabIndex(tabsId, index) {
133		- const store = ensureStore();
134		- store[tabsId] = index;
135		-}
136		-function validateActiveTab(tabsId, tabCount) {
137		- const store = ensureStore();
138		- const storedIndex = store[tabsId];
139		- if (storedIndex === undefined) {
140		- return;
141		- }
142		- if (storedIndex >= tabCount) {
143		- delete store[tabsId];
144		- }
145		-}
146		-
147		-/***/ }),
148		-
149	90	/***/ "../modules/atomic-widgets/elements/atomic-tabs/handlers/utils.js":
150	91	/*!************************************************************************!*\
151	92	!*** ../modules/atomic-widgets/elements/atomic-tabs/handlers/utils.js ***!
152	93	\************************************************************************/
		@@ -156,9 +97,9 @@
156	97
157	98	Object.defineProperty(exports, "__esModule", ({
158	99	value: true
159	100	}));
160		-exports.getTabId = exports.getTabContentId = exports.getNextTab = exports.getIndex = exports.getDirectTabCount = exports.getChildren = exports.TAB_ELEMENT_TYPE = exports.TAB_CONTENT_ELEMENT_TYPE = exports.TABS_MENU_ELEMENT_TYPE = exports.TABS_CONTENT_AREA_ELEMENT_TYPE = void 0;
	101	+exports.getTabId = exports.getTabContentId = exports.getNextTab = exports.getIndex = exports.getChildren = exports.TAB_ELEMENT_TYPE = exports.TAB_CONTENT_ELEMENT_TYPE = exports.TABS_MENU_ELEMENT_TYPE = exports.TABS_CONTENT_AREA_ELEMENT_TYPE = void 0;
161	102	__webpack_require__(/*! core-js/modules/esnext.iterator.constructor.js */ "../node_modules/core-js/modules/esnext.iterator.constructor.js");
162	103	__webpack_require__(/*! core-js/modules/esnext.iterator.filter.js */ "../node_modules/core-js/modules/esnext.iterator.filter.js");
163	104	const TAB_ELEMENT_TYPE = exports.TAB_ELEMENT_TYPE = 'e-tab';
164	105	const TAB_CONTENT_ELEMENT_TYPE = exports.TAB_CONTENT_ELEMENT_TYPE = 'e-tab-content';
		@@ -185,12 +126,8 @@
185	126	const children = getChildren(el, elementType);
186	127	return children.indexOf(el);
187	128	};
188	129	exports.getIndex = getIndex;
189		-const getDirectTabCount = tabsRootElement => {
190		- return tabsRootElement.querySelectorAll(`:scope > [data-element_type="${TABS_MENU_ELEMENT_TYPE}"] > [data-element_type="${TAB_ELEMENT_TYPE}"]`).length;
191		-};
192		-exports.getDirectTabCount = getDirectTabCount;
193	130	const getNextTab = (key, tab) => {
194	131	const tabs = getChildren(tab, TAB_ELEMENT_TYPE);
195	132	const tabsLength = tabs.length;
196	133	const currentIndex = getIndex(tab, TAB_ELEMENT_TYPE);