← All changes | assets/js/tabs-preview-handler.js +66 -3 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	(0, _frontendHandlers.register)({
16	17	elementType: 'e-tabs',
17	18	id: 'e-tabs-preview-handler',
18	19	callback: ({
		@@ -32,20 +33,78 @@
32	33	if (!targetElement) {
33	34	return;
34	35	}
35	36	const targetIndex = (0, _utils.getIndex)(targetElement, type);
36		- _alpinejs.Alpine.$data(element).activeTab = (0, _utils.getTabId)(element.dataset.id, targetIndex);
	37	+ (0, _editorTabsState.setActiveTabIndex)(element.dataset.id, targetIndex);
37	38	}, {
38	39	signal
39	40	});
40	41
41	42	// Re-initialize Alpine to sync with editor DOM manipulations that bypass Alpine's reactivity.
42		- listenToChildren([_utils.TAB_ELEMENT_TYPE, _utils.TAB_CONTENT_ELEMENT_TYPE]).render(() => (0, _alpinejs.refreshTree)(element));
	43	+ listenToChildren([_utils.TAB_ELEMENT_TYPE, _utils.TAB_CONTENT_ELEMENT_TYPE]).render(event => {
	44	+ const childElement = event.detail.element;
	45	+ const nearestTabs = childElement.closest('[data-e-type="e-tabs"]');
	46	+ if (nearestTabs !== element) {
	47	+ return;
	48	+ }
	49	+ (0, _alpinejs.refreshTree)(element);
	50	+ });
43	51	}
44	52	});
45	53
46	54	/***/ }),
47	55
	56	+/***/ "../modules/atomic-widgets/elements/atomic-tabs/handlers/editor-tabs-state.js":
	57	+/*!************************************************************************************!*\
	58	+ !*** ../modules/atomic-widgets/elements/atomic-tabs/handlers/editor-tabs-state.js ***!
	59	+ \************************************************************************************/
	60	+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
	61	+
	62	+
	63	+
	64	+Object.defineProperty(exports, "__esModule", ({
	65	+ value: true
	66	+}));
	67	+exports.getActiveTabId = getActiveTabId;
	68	+exports.setActiveTabIndex = setActiveTabIndex;
	69	+exports.validateActiveTab = validateActiveTab;
	70	+var _alpinejs = __webpack_require__(/*! @elementor/alpinejs */ "@elementor/alpinejs");
	71	+var _utils = __webpack_require__(/*! ./utils */ "../modules/atomic-widgets/elements/atomic-tabs/handlers/utils.js");
	72	+/**
	73	+ * @typedef {Record<string, number>} TabsState - Maps tabsId to the selected tab index.
	74	+ */
	75	+const STORE_NAME = 'editor-atomic-tabs-state';
	76	+function ensureStore() {
	77	+ if (!_alpinejs.Alpine.store(STORE_NAME)) {
	78	+ _alpinejs.Alpine.store(STORE_NAME, /** @type {TabsState} */{});
	79	+ }
	80	+ return /** @type {TabsState} */_alpinejs.Alpine.store(STORE_NAME);
	81	+}
	82	+function getActiveTabId(tabsId, fallback) {
	83	+ const store = ensureStore();
	84	+ const storedIndex = store[tabsId];
	85	+ if (storedIndex === undefined) {
	86	+ return fallback;
	87	+ }
	88	+ return (0, _utils.getTabId)(tabsId, storedIndex);
	89	+}
	90	+function setActiveTabIndex(tabsId, index) {
	91	+ const store = ensureStore();
	92	+ store[tabsId] = index;
	93	+}
	94	+function validateActiveTab(tabsId, tabCount) {
	95	+ const store = ensureStore();
	96	+ const storedIndex = store[tabsId];
	97	+ if (storedIndex === undefined) {
	98	+ return;
	99	+ }
	100	+ if (storedIndex >= tabCount) {
	101	+ delete store[tabsId];
	102	+ }
	103	+}
	104	+
	105	+/***/ }),
	106	+
48	107	/***/ "../modules/atomic-widgets/elements/atomic-tabs/handlers/utils.js":
49	108	/*!************************************************************************!*\
50	109	!*** ../modules/atomic-widgets/elements/atomic-tabs/handlers/utils.js ***!
51	110	\************************************************************************/
		@@ -55,9 +114,9 @@
55	114
56	115	Object.defineProperty(exports, "__esModule", ({
57	116	value: true
58	117	}));
59		-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;
	118	+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;
60	119	__webpack_require__(/*! core-js/modules/esnext.iterator.constructor.js */ "../node_modules/core-js/modules/esnext.iterator.constructor.js");
61	120	__webpack_require__(/*! core-js/modules/esnext.iterator.filter.js */ "../node_modules/core-js/modules/esnext.iterator.filter.js");
62	121	const TAB_ELEMENT_TYPE = exports.TAB_ELEMENT_TYPE = 'e-tab';
63	122	const TAB_CONTENT_ELEMENT_TYPE = exports.TAB_CONTENT_ELEMENT_TYPE = 'e-tab-content';
		@@ -84,8 +143,12 @@
84	143	const children = getChildren(el, elementType);
85	144	return children.indexOf(el);
86	145	};
87	146	exports.getIndex = getIndex;
	147	+const getDirectTabCount = tabsRootElement => {
	148	+ return tabsRootElement.querySelectorAll(`:scope > [data-element_type="${TABS_MENU_ELEMENT_TYPE}"] > [data-element_type="${TAB_ELEMENT_TYPE}"]`).length;
	149	+};
	150	+exports.getDirectTabCount = getDirectTabCount;
88	151	const getNextTab = (key, tab) => {
89	152	const tabs = getChildren(tab, TAB_ELEMENT_TYPE);
90	153	const tabsLength = tabs.length;
91	154	const currentIndex = getIndex(tab, TAB_ELEMENT_TYPE);