https://www.halo-lab.com/js/global/phone-countries.js

1///<script src="https://assets.slater.app/slater/826/24828.js"></script>
2///<script src="https://slater.app/826/24828.js"></script>
3
4
5// Функция для динамической загрузки JS файла
6function loadScript(url) {
7  return new Promise((resolve, reject) => {
8    const script = document.createElement('script');
9    script.src = url;
10    script.onload = resolve;
11    script.onerror = reject;
12    document.head.appendChild(script);
13  });
14}
15
16// Countries where a landline, or a less common mobile number, is longer than a regular mobile
17// number. They keep the library's own limit, which already fits those numbers.
18const PHONE_LONGER_THAN_MOBILE = ['de', 'ie', 'il', 'it', 'lu', 'mn', 'nl', 'rs', 'va', 'vn', 'xk', 'zw'];
19
20// intl-tel-input 20.3.0 stops a typed number at the longest number of any type the country has.
21// For Ukraine that is a 10-digit toll-free number, so a 9-digit mobile number took a tenth digit
22// and lost its spacing; 42 countries behaved the same way. Newer versions of the library stop at
23// the longest mobile or landline number. The utils bundled with 20.3.0 can only measure mobile
24// numbers, so the limit is the longest mobile number, apart from the countries listed above.
25function limitPhoneToMobileLength(iti) {
26  const updateMaxLength = iti._updateMaxLength;
27
28  iti._updateMaxLength = function () {
29    updateMaxLength.call(this);
30
31    const utils = window.intlTelInputUtils;
32    const { iso2 } = this.getSelectedCountryData();
33    if (!utils || !iso2 || PHONE_LONGER_THAN_MOBILE.includes(iso2)) return;
34
35    let number = utils.getExampleNumber(iso2, false, utils.numberType.MOBILE, true);
36    let longestNumber = number;
37    while (utils.isPossibleNumber(number, iso2, true)) {
38      longestNumber = number;
39      number += '0';
40    }
41
42    const mobileLength = utils.getCoreNumber(longestNumber, iso2).length;
43    if (mobileLength) this.maxCoreNumberLength = mobileLength;
44  };
45
46  iti._updateMaxLength();
47}
48
49// Функция инициализации маски и intlTelInput
50function initializeTelInput() {
51
52  // MASK AND CODE OF COUNTRY FOR TEL
53  {
54    function changeMask(elemMask, elemInput) {
55      Inputmask({
56        mask: elemMask,
57        placeholder: '_',
58        clearIncomplete: true,
59        showMaskOnHover: false,
60        clearMaskOnLostFocus: true,
61      }).mask(elemInput);
62    }
63
64    const input = $('input[type=tel]');
65
66    if (!window.clientCountryCode || window.clientCountryCode.length === 0) {
67      clientCountryCode = 'us';
68    }
69
70    input.each((index, element) => {
71      const iti = window.intlTelInput(element, {
72        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/20.3.0/js/utils.min.js",
73        initialCountry: clientCountryCode,
74        showSelectedDialCode: true,
75        useFullscreenPopup: false,
76        nationalMode: false,
77        strictMode: true,
78        countrySearch: true,
79        autoPlaceholder: 'polite',
80        i18n: {
81          searchPlaceholder: "Type country name",
82          zeroSearchResults: "No results found",
83        },
84        hiddenInput: function (telInputName) {
85          return {
86            phone: "phone_full",
87            country: "country_code"
88          };
89        }
90      });
91
92      limitPhoneToMobileLength(iti);
93
94      const arrCountryList = $(element).parent().find('.iti__country-list').children(
95        '[data-dial-code]');
96
97      iti.promise.then(() => {
98        // $(element).trigger('countrychange');
99
100        // let placeholder = $(element).attr('placeholder');
101        // let maskPattern = placeholder.replace(/\d/g, '9');
102        // changeMask(maskPattern, element);
103
104        $('input.iti__search-input').each(function () {
105          $(this).attr('autocomplete', 'new-password');
106        });
107
108      }).catch(error => {
109        console.error('An error occurred while initializing intlTelInput:', error);
110      });
111
112      $(element).on('countrychange', function (e) {
113        const countryData = iti.getSelectedCountryData();
114        const countryCode = countryData.iso2;
115        highlightCountry(countryCode);
116
117        // let placeholder = $(e.target).attr('placeholder');
118        // let maskPattern = placeholder.replace(/\d/g, '9');
119        // changeMask(maskPattern, $(e.target));
120      });
121
122      function highlightCountry(countryCode) {
123        arrCountryList.each((index, thisElem) => {
124          const thisCode = $(thisElem).data('country-code');
125          if (thisCode === countryCode) {
126            $(thisElem).addClass('is--active');
127          } else {
128            $(thisElem).removeClass('is--active');
129          }
130        });
131      }
132    });
133
134    // scroll list and style scrollbar
135    $('.iti__country-list').attr({ 'data-lenis-prevent': '', 'scroll-style-grey': '' });
136  }
137
138}
139
140// Функция загрузки скриптов и инициализации
141let isTelInputInitialized = false;

142
143function loadAndInitializeTelInput() {
144  if (isTelInputInitialized) return;
145  loadScript(
146      'https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.js')
147    .then(() => loadScript(
148      'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/20.3.0/js/intlTelInput.min.js'))
149    .then(() => {
150      initializeTelInput();
151      isTelInputInitialized = true; // Устанавливаем флаг после инициализации
152    })
153    .catch(error => console.error('Ошибка при загрузке скриптов:', error));
154}
155
156// Целевой элемент вне модалки
157const targetElement = document.querySelector('input[type=tel]');
158
159// Настройка Intersection Observer
160const observer = new IntersectionObserver((entries, observer) => {
161  entries.forEach(entry => {
162    if (entry.isIntersecting) {
163      observer.disconnect();
164      loadAndInitializeTelInput();
165    }
166  });
167}, { threshold: 0.1 });
168
169// Запуск наблюдателя для целевого элемента, если он присутствует на странице
170if (targetElement) {
171  observer.observe(targetElement);
172}
173
174// Проверка и инициализация при открытии модалки
175$(document).on('opening', '.remodal', function () {
176  const modalTelInput = $(this).find('input[type=tel]');
177  if (modalTelInput.length > 0) {
178    // Отключение наблюдателя, если он еще активен
179    if (observer) observer.disconnect();
180    loadAndInitializeTelInput();
181  }
182});