https://www.macromedia-fachhochschule.de/wp-content/themes/macromedia/dist/js/phoneInputManager.js?ver=1.0.4

1let itiInstance = null;
2
3function initializePhoneInput(element, lang) {
4    if (!element) return;
5
6    const countryNameMap = lang == 'Deutsch' ? localizedCountries : '';
7
8    itiInstance = window.intlTelInput(element, {
9        initialCountry: "de",
10        i18n: countryNameMap,
11        countrySearch: false,
12        autoPlaceholder: "off",
13        loadUtils: () => import("./vendor/utils.js"),
14    });
15
16    // Add custom arrow beside flag
17    const flagContainer = element.closest(".iti")?.querySelector(".iti__selected-country");
18    if (flagContainer) {
19        const customArrow = document.createElement("div");
20        customArrow.className = element.classList.contains('new-design')
21        ? "custom-dropdown-arrow new-design"
22        : "custom-dropdown-arrow";
23        customArrow.innerHTML = '<i class="far fa-chevron-down"></i>';
24        flagContainer.appendChild(customArrow);
25    }
26
27    // Add label animation if not 'new-design'
28    if (!element.classList.contains('new-design')) {
29        const input = $(element);
30        const formId = input.closest('form').attr('id');
31        const isApplicationForm = ['application-form-de', 'application-form-en'].includes(formId);
32
33        // Class names depending on form
34        const inputActiveClass = isApplicationForm ? 'is-active' : 'active';
35        const labelActiveClass = isApplicationForm ? 'is-active' : 'active';
36
37        input.on('focus', function () {
38            const label = $(this).closest('.form-group').find('label[for="telefon"]');
39            label.addClass('focused').addClass(labelActiveClass);
40        });
41
42        input.on('blur', function () {
43            const label = $(this).closest('.form-group').find('label[for="telefon"]');
44            if (input.val()) {
45                input.addClass(inputActiveClass);
46                label.addClass('focused');
47            } else {
48                input.removeClass(inputActiveClass);
49                label.removeClass('focused');
50            }
51            label.removeClass(labelActiveClass);
52        });
53    }
54}
55
56// Helper to get instance by DOM element
57function getPhoneInstance() {
58	return itiInstance;
59}
60
61// Helper to get user IP and country code
62function updatePhoneCountryByIP() {
63	fetch("https://api.ipstack.com/check?access_key=85e5c84aa32cef29850e997edd2d382e")
64	.then(res => res.json())
65	.then(data => {
66		const countryCode = data?.country_code?.toLowerCase() || "de";
67		const iti = getPhoneInstance();
68		iti.setCountry(countryCode);
69	})
70	.catch(() => {
71		// On failure, fallback to DE
72        const iti = getPhoneInstance();
73		iti.setCountry("de");
74	});
75}