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