← All changes | assets/js/tabs-handler.js +65 -4 4.0.9 → 4.1.0-beta1 View file →

		@@ -11,8 +11,9 @@
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");
15	16	const SELECTED_CLASS = 'e--selected';
16	17	(0, _frontendHandlers.register)({
17	18	elementType: 'e-tabs',
18	19	id: 'e-tabs-handler',
		@@ -20,10 +21,16 @@
20	21	element,
21	22	settings
22	23	}) => {
23	24	const tabsId = element.dataset.id;
	25	+ const defaultActiveTab = settings['default-active-tab'];
24	26	_alpinejs.Alpine.data(`eTabs${tabsId}`, () => ({
25		- activeTab: settings['default-active-tab'],
	27	+ init() {
	28	+ (0, _editorTabsState.validateActiveTab)(tabsId, (0, _utils.getDirectTabCount)(this.$el));
	29	+ },
	30	+ get activeTab() {
	31	+ return (0, _editorTabsState.getActiveTabId)(tabsId, defaultActiveTab);
	32	+ },
26	33	navigateTabs({
27	34	key,
28	35	target: tab
29	36	}) {
		@@ -35,10 +42,9 @@
35	42	const index = (0, _utils.getIndex)(this.$el, _utils.TAB_ELEMENT_TYPE);
36	43	return (0, _utils.getTabId)(tabsId, index);
37	44	},
38	45	'@click'() {
39		- const id = this.$el.id;
40		- this.activeTab = id;
	46	+ (0, _editorTabsState.setActiveTabIndex)(tabsId, (0, _utils.getIndex)(this.$el, _utils.TAB_ELEMENT_TYPE));
41	47	},
42	48	'@keydown.arrow-right.prevent'(event) {
43	49	this.navigateTabs(event);
44	50	},
		@@ -88,8 +94,59 @@
88	94	});
89	95
90	96	/***/ }),
91	97
	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	+
92	149	/***/ "../modules/atomic-widgets/elements/atomic-tabs/handlers/utils.js":
93	150	/*!************************************************************************!*\
94	151	!*** ../modules/atomic-widgets/elements/atomic-tabs/handlers/utils.js ***!
95	152	\************************************************************************/
		@@ -99,9 +156,9 @@
99	156
100	157	Object.defineProperty(exports, "__esModule", ({
101	158	value: true
102	159	}));
103		-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;
	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;
104	161	__webpack_require__(/*! core-js/modules/esnext.iterator.constructor.js */ "../node_modules/core-js/modules/esnext.iterator.constructor.js");
105	162	__webpack_require__(/*! core-js/modules/esnext.iterator.filter.js */ "../node_modules/core-js/modules/esnext.iterator.filter.js");
106	163	const TAB_ELEMENT_TYPE = exports.TAB_ELEMENT_TYPE = 'e-tab';
107	164	const TAB_CONTENT_ELEMENT_TYPE = exports.TAB_CONTENT_ELEMENT_TYPE = 'e-tab-content';
		@@ -128,8 +185,12 @@
128	185	const children = getChildren(el, elementType);
129	186	return children.indexOf(el);
130	187	};
131	188	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;
132	193	const getNextTab = (key, tab) => {
133	194	const tabs = getChildren(tab, TAB_ELEMENT_TYPE);
134	195	const tabsLength = tabs.length;
135	196	const currentIndex = getIndex(tab, TAB_ELEMENT_TYPE);