King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.49

King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.49

king-addons / includes / widgets / Form_Builder / editor-handler.js

editor-handler.js in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.49, at includes/widgets/Form_Builder/editor-handler.js

283 lines 14.2 KB

Raw Download Zip

1	"use strict";
2	(function ($) {
3	const FLAG = "kingAddonsFormBuilderEditorBound";
4
5	/**
6	* Bind Elementor editor handlers once.
7	*
8	* @returns {void}
9	*/
10	const bindOnce = () => {
11	if (window[FLAG]) {
12	return;
13	}
14	window[FLAG] = true;
15
16	$(window).on("elementor:init", () => {
17
18	elementor.hooks.addAction(
19	"panel/open_editor/widget/king-addons-form-builder",
20	function (panel, model, view) {
21	if (view && view._kingAddonsFormBuilderBound) {
22	return;
23	}
24	if (view) {
25	view._kingAddonsFormBuilderBound = true;
26	}
27
28	const $panelRoot = $("#elementor-panel");
29	const $elements = panel.$el.find(".elementor-repeater-fields");
30
31	if (!$panelRoot.length) {
32	return;
33	}
34
35	if (view && view._kingAddonsStepObserver) {
36	view._kingAddonsStepObserver.disconnect();
37	}
38
39	const stepObserver = new MutationObserver(function (mutations) {
40	mutations.forEach((mutation) => {
41	if (mutation.type !== "childList") {
42	return;
43	}
44	mutation.addedNodes.forEach((node) => {
45	if (!(node instanceof Element)) {
46	return;
47	}
48	const rowTools = node.querySelectorAll(".elementor-repeater-row-tools");
49	const rowControls = node.querySelectorAll(".elementor-repeater-row-controls");
50	if (!rowControls.length \|\| !rowTools.length) {
51	return;
52	}
53
54	const selects = [];
55	rowControls.forEach(function (item) {
56	selects.push(item.querySelector("select"));
57	});
58
59	rowTools.forEach(function (item, i) {
60	if (selects[i] && selects[i].value === "king-addons-fb-step") {
61	item.classList.add("king-addons-fb-step-editor-bg");
62	}
63	});
64	});
65	});
66	});
67
68	if (view) {
69	view._kingAddonsStepObserver = stepObserver;
70	}
71
72	stepObserver.observe($panelRoot[0], {
73	childList: true,
74	subtree: true,
75	});
76
77	changeStepBackground();
78
79	elementor.channels.editor.off("section:activated.kingAddonsFormBuilder");
80	elementor.channels.editor.on("section:activated.kingAddonsFormBuilder", function () {
81	updateDynamicOptions(view);
82	});
83
84	const formFieldsCollection = view.model.get("settings").get("form_fields");
85	view.stopListening(formFieldsCollection, "add change remove");
86	view.listenTo(formFieldsCollection, "add change remove", function () {
87	updateDynamicOptions(view);
88	});
89
90	function changeStepBackground() {
91	$elements.each(function () {
92	if ($(this).find("select").val() === "king-addons-fb-step") {
93	$(this)
94	.find(".elementor-repeater-row-tools")
95	.addClass("king-addons-fb-step-editor-bg");
96	}
97	});
98
99	$panelRoot.off("change.kingAddonsFormBuilder", "select");
100	$panelRoot.on("change.kingAddonsFormBuilder", "select", function () {
101	const $select = $(this);
102	const $tools = $select
103	.closest(".elementor-repeater-row-controls")
104	.prev(".elementor-repeater-row-tools");
105
106	if ($select.val() === "king-addons-fb-step") {
107	$tools.addClass("king-addons-fb-step-editor-bg");
108	return;
109	}
110	if ($tools.hasClass("king-addons-fb-step-editor-bg")) {
111	$tools.removeClass("king-addons-fb-step-editor-bg");
112	}
113	});
114	}
115
116	function updateDynamicOptions() {
117	const formFieldsModel = view.model.get("settings").get("form_fields");
118
119	const emailField = view.model.get("settings").get("email_field");
120	const firstNameField = view.model.get("settings").get("first_name_field");
121	const lastNameField = view.model.get("settings").get("last_name_field");
122	const phoneField = view.model.get("settings").get("phone_field");
123	const birthdayField = view.model.get("settings").get("birthday_field");
124	const addressField = view.model.get("settings").get("address_field");
125	const countryField = view.model.get("settings").get("country_field");
126	const cityField = view.model.get("settings").get("city_field");
127	const stateField = view.model.get("settings").get("state_field");
128	const zipField = view.model.get("settings").get("zip_field");
129
130	const emailSelectControl = panel.$el
131	.find(".elementor-control-email_field")
132	.find('select[data-setting="email_field"]');
133	const firstNameSelectControl = panel.$el
134	.find(".elementor-control-first_name_field")
135	.find('select[data-setting="first_name_field"]');
136	const lastNameSelectControl = panel.$el
137	.find(".elementor-control-last_name_field")
138	.find('select[data-setting="last_name_field"]');
139	const phoneSelectControl = panel.$el
140	.find(".elementor-control-phone_field")
141	.find('select[data-setting="phone_field"]');
142	const birthdaySelectControl = panel.$el
143	.find(".elementor-control-birthday_field")
144	.find('select[data-setting="birthday_field"]');
145	const addressSelectControl = panel.$el
146	.find(".elementor-control-address_field")
147	.find('select[data-setting="address_field"]');
148	const countrySelectControl = panel.$el
149	.find(".elementor-control-country_field")
150	.find('select[data-setting="country_field"]');
151	const citySelectControl = panel.$el
152	.find(".elementor-control-city_field")
153	.find('select[data-setting="city_field"]');
154	const stateSelectControl = panel.$el
155	.find(".elementor-control-state_field")
156	.find('select[data-setting="state_field"]');
157	const zipSelectControl = panel.$el
158	.find(".elementor-control-zip_field")
159	.find('select[data-setting="zip_field"]');
160
161	const selectControls = [
162	emailSelectControl,
163	firstNameSelectControl,
164	lastNameSelectControl,
165	phoneSelectControl,
166	birthdaySelectControl,
167	addressSelectControl,
168	countrySelectControl,
169	citySelectControl,
170	stateSelectControl,
171	zipSelectControl,
172	];
173	const fieldValues = [
174	emailField,
175	firstNameField,
176	lastNameField,
177	phoneField,
178	birthdayField,
179	addressField,
180	countryField,
181	cityField,
182	stateField,
183	zipField,
184	];
185
186	const options = { none: "None" };
187	let prevFieldId;
188
189	formFieldsModel.each(function (field) {
190	const fieldLabel = field.get("field_label");
191	const fieldId = field.get("field_id");
192
193	if (prevFieldId === fieldId) {
194	$panelRoot
195	.find(":input[value=" + field.attributes._id + "]")
196	.closest(".elementor-repeater-fields")
197	.find(':input[data-setting="field_id"]')
198	.val(field.attributes._id);
199	$panelRoot
200	.find(":input[value=" + field.attributes._id + "]")
201	.closest(".elementor-repeater-fields")
202	.find(".king-addons-form-field-shortcode")
203	.val('id=["' + field.attributes._id + '"]');
204	field.attributes.field_id = field.attributes._id;
205	}
206
207	prevFieldId = fieldId;
208
209	if (!fieldId) {
210	$panelRoot
211	.find(":input[value=" + field.attributes._id + "]")
212	.closest(".elementor-repeater-fields")
213	.find(':input[data-setting="field_id"]')
214	.val(field.attributes._id);
215	$panelRoot
216	.find(":input[value=" + field.attributes._id + "]")
217	.closest(".elementor-repeater-fields")
218	.find(".king-addons-form-field-shortcode")
219	.val('id=["' + field.attributes._id + '"]');
220	field.attributes.field_id = field.attributes._id;
221	}
222
223	options[fieldId] = fieldLabel;
224	});
225
226	view.model.setSetting("email_field", _.extend(emailField, { options }));
227	view.model.setSetting("first_name_field", _.extend(firstNameField, { options }));
228	view.model.setSetting("last_name_field", _.extend(lastNameField, { options }));
229	view.model.setSetting("phone_field", _.extend(phoneField, { options }));
230	view.model.setSetting("birthday_field", _.extend(birthdayField, { options }));
231	view.model.setSetting("address_field", _.extend(addressField, { options }));
232	view.model.setSetting("country_field", _.extend(countryField, { options }));
233	view.model.setSetting("city_field", _.extend(cityField, { options }));
234	view.model.setSetting("state_field", _.extend(stateField, { options }));
235	view.model.setSetting("zip_field", _.extend(zipField, { options }));
236
237	_.each(selectControls, function (control) {
238	control.empty();
239	});
240
241	_.each(options, function (label, value) {
242	_.each(selectControls, function (control, i) {
243	const isSelected = fieldValues[i] === value ? " selected" : "";
244	control.append(
245	'<option value="' + value + '"' + isSelected + ">" + label + "</option>"
246	);
247	});
248	});
249	}
250	// Change the selector below to match the field_id field in your repeater.
251	const customIdFieldSelector = 'input[data-setting="field_id"]';
252
253	// Change the selector below to match the shortcode field in your repeater.
254	const shortcodeFieldSelector = ".king-addons-form-field-shortcode";
255
256	// Listen for changes in the field_id field (namespaced).
257	$panelRoot.off("input.kingAddonsFormBuilder", customIdFieldSelector);
258	$panelRoot.on("input.kingAddonsFormBuilder", customIdFieldSelector, function () {
259	const newCustomId = $(this).val();
260
261	const $shortcodeField = $(this)
262	.closest(".elementor-repeater-fields")
263	.find(shortcodeFieldSelector);
264
265	let updatedShortcode;
266	const currentShortcode = $shortcodeField.val();
267	const match = currentShortcode.match(/\[id="[^"]*"\]/);
268
269	if (match) {
270	updatedShortcode = currentShortcode.replace(match[0], `[id="${newCustomId}"]`);
271	} else {
272	updatedShortcode = `[id="${newCustomId}"]`;
273	}
274
275	$shortcodeField.val(updatedShortcode);
276	});
277	});
278	);
279	});
280	};
281
282	bindOnce();
283	}(jQuery));