← All changes | assets/js/atomic-widgets-form-handler.js +18 -99 4.2.0-beta2 → 4.1.4 View file →

		@@ -19,9 +19,8 @@
19	19	var _frontendHandlers = __webpack_require__(/*! @elementor/frontend-handlers */ "@elementor/frontend-handlers");
20	20	var _alpinejs = __webpack_require__(/*! @elementor/alpinejs */ "@elementor/alpinejs");
21	21	var _utils = __webpack_require__(/*! ./utils */ "../modules/atomic-widgets/assets/js/frontend/utils.js");
22	22	var _lodash = _interopRequireDefault(__webpack_require__(/*! lodash */ "../node_modules/lodash/lodash.js"));
23		-let webmcpFormListenersRegistered = false;
24	23	(0, _frontendHandlers.registerBySelector)({
25	24	id: 'atomic-form-submit-handler',
26	25	selector: _utils.ATOMIC_FORM_SELECTOR,
27	26	callback: ({
		@@ -27,67 +26,8 @@
27	26	callback: ({
28	27	element
29	28	}) => handleAtomicFormSubmit(element)
30	29	});
31		-function registerWebmcpFormListeners() {
32		- if (webmcpFormListenersRegistered) {
33		- return;
34		- }
35		- webmcpFormListenersRegistered = true;
36		- window.addEventListener('toolactivated', ({
37		- toolName
38		- }) => {
39		- resetWebmcpFormState(toolName);
40		- });
41		- window.addEventListener('toolcancel', ({
42		- toolName
43		- }) => {
44		- resetWebmcpFormState(toolName);
45		- });
46		-}
47		-function resetWebmcpFormState(toolName) {
48		- document.querySelectorAll(_utils.ATOMIC_FORM_SELECTOR).forEach(form => {
49		- if (form.getAttribute('toolname') !== toolName) {
50		- return;
51		- }
52		- delete form.dataset.atomicFormSubmitting;
53		- form.querySelectorAll('button[type="submit"], input[type="submit"]').forEach(button => {
54		- button.disabled = false;
55		- });
56		- });
57		-}
58		-function extractAgentToolData(payload) {
59		- if (!payload || 'object' !== typeof payload) {
60		- return null;
61		- }
62		- if (undefined !== payload.data) {
63		- return payload.data;
64		- }
65		- const {
66		- message: ignoredMessage,
67		- ...rest
68		- } = payload;
69		- if (!Object.keys(rest).length) {
70		- return null;
71		- }
72		- return rest;
73		-}
74		-function buildAgentToolResponse(response, state) {
75		- const payload = response?.data ?? null;
76		- const message = payload?.message ?? response?.message ?? '';
77		- return {
78		- success: 'success' === state,
79		- state,
80		- message,
81		- data: extractAgentToolData(payload)
82		- };
83		-}
84		-function respondToAgentIfInvoked(event, response, state) {
85		- if (!event?.agentInvoked || 'function' !== typeof event.respondWith) {
86		- return;
87		- }
88		- event.respondWith(Promise.resolve(buildAgentToolResponse(response, state)));
89		-}
90	30	function registerAtomicFormAlpineData(form) {
91	31	if (!form || !_alpinejs.Alpine?.data) {
92	32	return;
93	33	}
		@@ -101,12 +41,8 @@
101	41	return;
102	42	}
103	43	event.preventDefault();
104	44	if (form.dataset.atomicFormSubmitting) {
105		- respondToAgentIfInvoked(event, {
106		- success: false,
107		- message: 'Form is already submitting.'
108		- }, 'error');
109	45	return;
110	46	}
111	47	form.dataset.atomicFormSubmitting = 'true';
112	48	const submitButtons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
		@@ -113,37 +49,28 @@
113	49	submitButtons.forEach(button => {
114	50	button.disabled = true;
115	51	});
116	52	const payload = buildAtomicFormPayload(form);
117		- if (!payload) {
118		- setFormState(form, 'error');
119		- respondToAgentIfInvoked(event, {
120		- success: false,
121		- message: 'Invalid form payload.'
122		- }, 'error');
123		- clearAtomicFormSubmittingState(form, submitButtons);
124		- return;
125		- }
126		- try {
127		- const response = await submitAtomicForm(payload);
128		- const state = response?.success ? 'success' : 'error';
129		- setFormState(form, state);
130		- if (response?.success) {
131		- form.reset();
132		- form.addEventListener('input', () => {
133		- setFormState(form, 'default');
134		- }, {
135		- once: true
136		- });
	53	+ if (payload) {
	54	+ try {
	55	+ const response = await submitAtomicForm(payload);
	56	+ const state = response?.success ? 'success' : 'error';
	57	+ setFormState(form, state);
	58	+ if (response?.success) {
	59	+ form.reset();
	60	+ form.addEventListener('input', () => {
	61	+ setFormState(form, 'default');
	62	+ }, {
	63	+ once: true
	64	+ });
	65	+ }
	66	+ } catch (error) {
	67	+ setFormState(form, 'error');
	68	+ } finally {
	69	+ clearAtomicFormSubmittingState(form, submitButtons);
137	70	}
138		- respondToAgentIfInvoked(event, response, state);
139		- } catch (error) {
	71	+ } else {
140	72	setFormState(form, 'error');
141		- respondToAgentIfInvoked(event, {
142		- success: false,
143		- message: error?.message ?? 'Submission failed.'
144		- }, 'error');
145		- } finally {
146	73	clearAtomicFormSubmittingState(form, submitButtons);
147	74	}
148	75	}
149	76	}));
		@@ -148,9 +75,8 @@
148	75	}
149	76	}));
150	77	}
151	78	function handleAtomicFormSubmit(form) {
152		- registerWebmcpFormListeners();
153	79	registerAtomicFormAlpineData(form);
154	80	return refreshDom(form);
155	81	}
156	82	function clearAtomicFormSubmittingState(form, submitButtons) {
		@@ -330,9 +256,8 @@
330	256	return;
331	257	}
332	258	element.classList.remove('form-state-default', 'form-state-success', 'form-state-error');
333	259	element.classList.add(`form-state-${state}`);
334		- setFocusOnMessageElement(element, state);
335	260	}
336	261	function refreshDom(element) {
337	262	if (!_alpinejs.Alpine?.nextTick || !_alpinejs.Alpine?.destroyTree || !_alpinejs.Alpine?.initTree) {
338	263	return;
		@@ -341,14 +266,8 @@
341	266	_alpinejs.Alpine.destroyTree(element);
342	267	_alpinejs.Alpine.initTree(element);
343	268	});
344	269	return () => _alpinejs.Alpine.destroyTree(element);
345		-}
346		-function setFocusOnMessageElement(element, type) {
347		- const messageElement = element.querySelector(`[data-e-type="e-form-${type}-message"]`);
348		- messageElement?.focus({
349		- focusVisible: true
350		- });
351	270	}
352	271
353	272	/***/ }),
354	273