https://www.qmdservices.com/wp-content/plugins/cool-formkit-for-el…/atomic-form-state-field-init.js?ver=1.7.5

1/**
2 * State field init for Elementor atomic form (e-form-state).
3 */
4(function ($) {
5	'use strict';
6
7	const FORM_ROOT_SELECTOR = '[data-e-type="e-form"].e-form-base, form[data-e-type="e-form"], [data-e-type].e-form-base';
8	const STATE_SPAN_SELECTOR = '.elementor-field-type-state .sfef-editor-intl-input';
9	const COUNTRY_INPUT_SELECTOR = '.elementor-field-type-country input';
10	let elementorHooksRegistered = false;
11
12	function getCountrySelectedName($form, countryId) {
13		const countryInputEl = $form.find('#form-field-' + countryId);
14		const countryFieldText = $form
15			.find('.elementor-field-textual.iti__tel-input.' + countryId)
16			.siblings('.iti__country-container')
17			.find('button .iti__a11y-text')[0];
18
19		let countrySelected = countryFieldText ? countryFieldText.innerHTML : countryInputEl.val();
20		countrySelected = countrySelected !== 'No country selected' ? countrySelected : '';
21		return countrySelected !== '' && countrySelected !== undefined ? countrySelected.split(' +')[0] : '';
22	}
23
24	function buildStateDropdown($form, $stateInput, $stateLabel, countryId) {
25		if (!$stateInput.length) {
26			return;
27		}
28
29		const countryInputEl = $form.find('#form-field-' + countryId);
30		const countryIso2 = countryInputEl.data('iso2') || '';
31		const countrySelected = getCountrySelectedName($form, countryId);
32
33		if (!countrySelected || !window.sfef_states) {
34			$stateInput.attr('placeholder', 'Select a country');
35			if ($stateInput[0]) {
36				$stateInput[0].style.pointerEvents = 'none';
37			}
38			return;
39		}
40
41		const selectedCountry = window.sfef_states.find(
42			(country) => country.iso2 === countryIso2 || country.name.toLowerCase() === countrySelected.toLowerCase()
43		);
44
45		if (!selectedCountry) {
46			return;
47		}
48
49		$stateInput.val('');
50		$stateInput.attr('placeholder', '');
51		$stateInput[0].style.pointerEvents = 'auto';
52		$stateInput.siblings('.sfef-custom-dropdown').remove();
53
54		let dropdownHtml = '<ul class="sfef-custom-dropdown">';
55		selectedCountry.states.forEach(function (state) {
56			dropdownHtml += '<li data-value="' + state.name + '">' + state.name + '</li>';
57		});
58		dropdownHtml += '</ul>';
59
60		if ($stateLabel.length > 0) {
61			$stateLabel.after(dropdownHtml);
62		} else {
63			$stateInput.after(dropdownHtml);
64		}
65
66		const $dropdown = $stateInput.siblings('.sfef-custom-dropdown');
67
68		$stateInput.off('focus.cfkefState click.cfkefState').on('focus.cfkefState click.cfkefState', function () {
69			$dropdown.show();
70		});
71
72		$dropdown.off('click.cfkefState').on('click.cfkefState', 'li', function () {
73			$stateInput.val($(this).data('value'));
74			$stateInput.trigger('change');
75			$dropdown.hide();
76		});
77
78		$(document).off('click.cfkefState' + countryId).on('click.cfkefState' + countryId, function (e) {
79			if (!$stateInput.is(e.target) && !$dropdown.is(e.target) && $dropdown.has(e.target).length === 0) {
80				$dropdown.hide();
81			}
82		});
83	}
84
85	function updateStateFields($form) {
86		$form.find(STATE_SPAN_SELECTOR).each(function () {
87			const $element = $(this);
88			const countryId = $element.data('country-field-id');
89
90			if (!countryId) {
91				return;
92			}
93
94			const $stateInput = $element.siblings('input');
95			const $stateLabel = $element.siblings('label');
96			buildStateDropdown($form, $stateInput, $stateLabel, countryId);
97		});
98	}
99
100	function bindCountryChangeEvents($form) {
101		$form.off('input.cfkefState change.cfkefState click.cfkefState countrychange.cfkefState', COUNTRY_INPUT_SELECTOR + ', .elementor-field-type-country ul li');
102		$form.on('input.cfkefState change.cfkefState click.cfkefState countrychange.cfkefState', COUNTRY_INPUT_SELECTOR + ', .elementor-field-type-country ul li', function () {
103			updateStateFields($form);
104		});
105
106		$form.off('blur.cfkefState', COUNTRY_INPUT_SELECTOR);
107		$form.on('blur.cfkefState', COUNTRY_INPUT_SELECTOR, function () {
108			updateStateFields($form);
109		});
110	}
111
112	function initScope($scope) {
113		const $form = $scope.hasClass('e-form-base') ? $scope : $scope.closest(FORM_ROOT_SELECTOR);
114
115		if (!$form.length) {
116			return;
117		}
118
119		if (!$form.find(STATE_SPAN_SELECTOR).length) {
120			return;
121		}
122
123		bindCountryChangeEvents($form);
124		updateStateFields($form);
125		$form.find(COUNTRY_INPUT_SELECTOR).trigger('change');
126		$form.find(COUNTRY_INPUT_SELECTOR).trigger('input');
127	}
128
129	function getFormRoot($el) {
130		if (!$el || !$el.length) {
131			return $();
132		}
133

134		if ($el.is(FORM_ROOT_SELECTOR)) {
135			return $el;
136		}
137
138		const $root = $el.closest(FORM_ROOT_SELECTOR);
139		return $root.length ? $root : $el;
140	}
141
142	function shouldInitScope($el) {
143		return (
144			$el.is('[data-e-type="e-form-state"]') ||
145			$el.is('[data-e-type="e-form-country"]') ||
146			$el.is(FORM_ROOT_SELECTOR) ||
147			$el.hasClass('elementor-field-type-state') ||
148			$el.hasClass('elementor-field-type-country') ||
149			$el.find(STATE_SPAN_SELECTOR).length > 0
150		);
151	}
152
153	function initScopeFromElement(element, retries) {
154		const $el = $(element);
155
156		if (!shouldInitScope($el)) {
157			return;
158		}
159
160		const $form = getFormRoot($el);
161		initScope($form.length ? $form : $el);
162
163		if (retries > 0) {
164			setTimeout(function () {
165				initScopeFromElement(element, retries - 1);
166			}, 400);
167		}
168	}
169
170	function observeStateFields() {
171		if (window.cflAtomicStateObserver || !document.body) {
172			return;
173		}
174
175		let debounceTimer;
176
177		window.cflAtomicStateObserver = new MutationObserver(function () {
178			clearTimeout(debounceTimer);
179			debounceTimer = setTimeout(function () {
180				document.querySelectorAll('.elementor-field-type-state').forEach(function (el) {
181					initScope($(el).closest(FORM_ROOT_SELECTOR));
182				});
183			}, 200);
184		});
185
186		window.cflAtomicStateObserver.observe(document.body, {
187			childList: true,
188			subtree: true,
189		});
190	}
191
192	function initFormsOnPage() {
193		document.querySelectorAll(FORM_ROOT_SELECTOR).forEach(function (el) {
194			initScope($(el));
195		});
196
197		document.querySelectorAll('.elementor-field-type-state').forEach(function (el) {
198			initScope($(el).closest(FORM_ROOT_SELECTOR));
199		});
200	}
201
202	function registerElementorHooks() {
203		if (elementorHooksRegistered || typeof elementorFrontend === 'undefined' || !elementorFrontend.hooks) {
204			return;
205		}
206
207		elementorHooksRegistered = true;
208
209		elementorFrontend.hooks.addAction('frontend/element_ready/e-form.default', function ($element) {
210			initScopeFromElement($element[0], 3);
211		});
212
213		elementorFrontend.hooks.addAction('frontend/element_ready/e-form-state.default', function ($element) {
214			initScopeFromElement($element[0], 3);
215		});
216
217		elementorFrontend.hooks.addAction('frontend/element_ready/e-form-country.default', function ($element) {
218			const $form = getFormRoot($element);
219			if ($form.length) {
220				initScope($form);
221			}
222		});
223	}
224
225	function init() {
226		window.addEventListener('elementor/element/render', function (event) {
227			const element = event.detail && event.detail.element;
228
229			if (!element) {
230				return;
231			}
232
233			initScopeFromElement(element, 3);
234		});
235
236		if (document.body && (document.body.classList.contains('elementor-editor-active') || typeof elementor !== 'undefined')) {
237			observeStateFields();
238		}
239
240		if (document.readyState === 'loading') {
241			document.addEventListener('DOMContentLoaded', initFormsOnPage);
242		} else {
243			initFormsOnPage();
244		}
245	}
246
247	registerElementorHooks();
248	$(window).on('elementor/frontend/init', registerElementorHooks);
249
250	window.cflAtomicFormState = window.cflAtomicFormState || {};
251	window.cflAtomicFormState.reinitContainer = function (container) {
252		const $form = $(container).closest(FORM_ROOT_SELECTOR);
253		if ($form.length) {
254			initScope($form);
255		}
256	};
257
258	init();
259})(jQuery);