https://armstroy-nn.ru/local/templates/armstroy_max/js/phone/phone_input.js

1window.appAspro = window.appAspro || {};
2
3if (!window.appAspro.phone) {
4  window.appAspro.phone = {
5    get checkIntlPhone() {
6      return typeof window.intlTelInput === "function";
7    },
8    get checkInputmask() {
9      return typeof window.Inputmask === "function";
10    },
11    get checkIntlTelInputUtils() {
12      return typeof window.intlTelInputUtils === "function";
13    },
14    errorMap: ["INVALID_NUMBER", "INVALID_COUNTRY_CODE", "TOO_SHORT", "TOO_LONG", "INVALID_NUMBER", "INVALID_NUMBER"],
15    get config() {
16      return this._config || "";
17    },
18    set config(config) {
19      this._config = config;
20    },
21    init: function (els, options) {
22      const self = this;
23      const defaultOptions = {
24        useValidate: true,
25        mask: arAsproOptions.THEME.PHONE_MASK,
26        onlyCountries: arAsproOptions.THEME.PHONE_CITIES,
27        preferredCountries: arAsproOptions.THEME.PHONE_CITIES_FAVORITE,
28      };
29
30      if (!options && this.config) {
31        options = this.config;
32      }
33      options = $.extend({}, defaultOptions, options || {});
34
35      if (this.checkIntlPhone) {
36        if (options.coutriesData) {
37          if (typeof allCountries === "undefined") {
38            $.ajax({

39              url: options.coutriesData,
40              async: false,
41              success: function (data) {
42                if (allCountries) {
43                  options.countries = allCountries;
44                }
45              },
46            });
47          } else {
48            options.countries = allCountries;
49          }
50        }
51        this.initIntlPhone(els, options);
52      } else if (this.checkInputmask && options.mask) {
53        this.initNormalPhone(els, options);
54      }
55    },
56    initIntlPhone: function (els, options) {
57      let defaultOptions = {
58        utilsScript: arAsproOptions["SITE_TEMPLATE_PATH"] + "/vendor/js/intl.phone/utils.js",
59        preferredCountries: ["ru"],
60        autoPlaceholder: "aggressive",
61        nationalMode: false,
62        onlyCountries: ["ru"],
63        formatOnDisplay: true,
64        autoHideDialCode: true,
65      };
66      options = options || {};
67      const pluginOptions = $.extend({}, defaultOptions, options);
68
69      if (pluginOptions.onlyCountries.length && typeof pluginOptions.onlyCountries === "string") {
70        pluginOptions.onlyCountries = pluginOptions.onlyCountries.split(",");
71      }
72      if (pluginOptions.preferredCountries.length && typeof pluginOptions.preferredCountries === "string") {
73        pluginOptions.preferredCountries = pluginOptions.preferredCountries.split(",");
74      }
75
76      const self = this;
77
78      els.each(function (i, node) {
79        let iti = window.intlTelInput(node, pluginOptions);
80        let _this = $(node);
81        _this.data("iti", iti);
82
83        // if (!~_this.val().indexOf('+')) {
84        //     _this.val('+'+_this.val())
85        // }
86
87        _this.on("change", function () {
88          const inputVal = _this.val();
89          if (!~inputVal.indexOf("+") && inputVal.length) {
90            _this.val("+" + inputVal);
91          }
92
93          if (typeof intlTelInputUtils !== "undefined") {
94            var currentText = iti.getNumber(intlTelInputUtils.numberFormat.E164);
95            if (typeof currentText === "string") {
96              iti.setNumber(currentText);
97            }
98          }
99          /* paste fix */
100          if (!iti.getSelectedCountryData().name) {
101            _this.val(_this.val().replace("+8", "+7"));
102            iti.setNumber(_this.val());
103          }
104          /* */
105        });
106        _this.on("input", function (e) {
107          const _this = $(this);
108          const telInput = _this.data("iti");
109          let inputVal = _this.val();
110
111          // console.log('input',
112          // telInput.getValidationError(),
113          //     self.errorMap[telInput.getValidationError()],
114          //     inputVal,
115          //     telInput.isValidNumber(),
116          //     telInput.getSelectedCountryData(),
117          //     e
118          // );
119
120          if (inputVal.length >= 1 && !inputVal.includes("+")) {
121            _this.val("+" + inputVal);
122            inputVal = _this.val();
123          }
124          if (inputVal.length > 3) {
125            if (!telInput.getSelectedCountryData().name) {
126              _this.val(inputVal.replace("+8", "+7"));
127            } else {
128              // let inputCountryLength = _this.attr('placeholder').replace(/\D/g,'').length
129              // let inputValLength = inputVal.replace(/\D/g,'').length
130              // if (inputValLength > inputCountryLength) {
131              //     // _this.val(inputVal.slice(0, inputCountryLength - inputValLength))
132              // }
133            }
134          }
135
136          if (typeof intlTelInputUtils !== "undefined") {
137            var currentText = iti.getNumber(intlTelInputUtils.numberFormat.E164);
138            if (typeof currentText === "string") {
139              iti.setNumber(currentText);
140              // _this[0].selectionStart =_this[0].selectionEnd = pos
141            }
142          }
143        });
144        _this.on("keypress", function (e) {
145          let key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
146
147          if (e.target.value === "") {
148            e.target.value = "+";
149          }
150          return /\d/.test(key);
151        });
152
153        //manual change trigger
154        _this.trigger("change");
155      });
156
157      this.bindPhoneMask(els);
158      if (options.useValidate) {
159        this.addValidationIntlPhone();
160      }
161    },
162    initNormalPhone: function (els, options) {
163      let base_mask = options.mask.replace(/(\d)/g, "_");
164      els.inputmask("mask", { mask: options.mask });
165      els.blur(function () {
166        if ($(this).val() == base_mask || $(this).val() == "") {
167          if ($(this).hasClass("required")) {
168            $(this).parent().find("label.error").html(BX.message("JS_REQUIRED"));
169          }
170        }
171      });
172      if (options.useValidate) {
173        this.addValidationPhone();
174      }
175    },
176    addValidationIntlPhone: function () {
177      $.validator.addMethod(
178        "intl_phone",
179        function (value, element, param) {
180          const telInput = $(element).data("iti");
181          let valid = telInput.isValidNumber();
182
183          if (element.classList.contains("required") || element.getAttribute("required") !== null) {
184            if (valid) {
185              element.classList.remove("error");
186            } else {
187              element.classList.add("error");
188            }
189          } else {
190            valid = true;
191          }
192          return valid;
193        },
194        function (param, element) {
195          const telInput = $(element).data("iti");
196
197          return BX.message(param[telInput.getValidationError()]) || BX.message(param[0]);
198        }
199        //BX.message("JS_FORMAT")
200      );
201      $.validator.addClassRules({
202        phone: {
203          intl_phone: this.errorMap,
204        },
205        phone_input: {
206          intl_phone: this.errorMap,
207        },
208      });
209    },
210    addValidationPhone: function () {
211      if (arAsproOptions["THEME"]["VALIDATE_PHONE_MASK"]) {
212        $.validator.addClassRules({
213          phone: {
214            regexp: arAsproOptions["THEME"]["VALIDATE_PHONE_MASK"],
215          },
216          phone_input: {
217            regexp: arAsproOptions["THEME"]["VALIDATE_PHONE_MASK"],
218          },
219        });
220      }
221    },
222    bindPhoneMask: function (els) {
223      let _this = this;
224      els.each(function (i, node) {
225        this.addEventListener("countrychange", function (e) {
226          e.stopImmediatePropagation();
227          const _this = $(e.target);
228
229          if (typeof e.detail === "object" && e.detail) {
230            if (e.detail.type === "_selectListItem") {
231              _this.trigger("input");
232              _this.valid();
233            }
234          }
235        });
236      });
237    },
238  };
239}