https://www.niioncologii.ru/bitrix/templates/info_light_gray/js/phonecode_new10.js

1var countryCache;
2var countryRequesting_order = false;
3/**
4 * @author Yakov Akulov
5 * @email [email protected]
6 * @line jakuov.ru
7 */
8(function($) {
9    $.widget('custom.phonecode_order', {
10        data: [],
11        container: null,
12        prefixField: null,
13        searchTimeout: null,
14        suggestTimeout: null,
15        hideTimeout: null,
16        options: {
17            default_prefix: '',
18            prefix: '',
19            preferCo: 'росси'
20        },
21        _create: function() {
22            this._loadData();
23            this.element.wrap('<div class="country-phone">');
24            var container = this.element.parent('.country-phone');
25            var selector = $('<div class="country-phone-selector"><div class="country-phone-selected"></div><div class="country-phone-options"></div></div>');
26            $(selector).prependTo(container);
27
28            var prefixName = this.options.prefix ?
29                this.options.prefix : '__phone_prefix';
30            var hidden = $('<input type="hidden" class="phone_prefix" data-attr="7" name="'+ prefixName +'" value="7'+ this.options.default_prefix +'">');
31
32            $(hidden).appendTo(container);
33
34            this.container = container;
35            this.prefixField = hidden;
36        },
37
38        _loadData : function() {
39            var self = this;
40            
41            if(!countryCache && !countryRequesting_order) {
42                countryRequesting_order = $.getJSON('countries_order.json', {})
43                    .done(function(json) {
44                        self.data = json;
45                        countryCache = self.data;
46                        self._initSelector();
47                    })
48                    .fail(function(xhr, status, error) {
49                        //alert(status + ' ' + error);
50                        self.data = countries_order;
51                        countryCache = self.data;
52                        self._initSelector();
53                    });
54            }
55            else if(countryCache) {
56                this.data = countryCache;
57                self._initSelector();
58            }
59            else if(countryRequesting_order) {
60                countryRequesting_order.done(function(json) {
61                    self.data = json;
62                    countryCache = self.data;
63                    self._initSelector();
64                });
65            }
66        },
67
68        _initSelector: function() {
69            var options = this.container.find('.country-phone-options');
70            var selector = this.container.find('.country-phone-selected');
71            var selected = null;
72            var self = this;
73            var searchInput = $('<input type="text" class="country-phone-search" value="">');
74            $(searchInput).appendTo(options);
75            var searchLabel = $('<label class="country-phone-search-label">Введите страну</label>');
76            $(searchLabel).on('click',function(){
77                $(this).hide();
78                $(searchInput).focus();
79            }).insertAfter(searchInput);
80            $(searchLabel).hide().show();
81            $(searchInput).bind('keyup', function(e){
82
83                if(self.suggestTimeout) {
84                    window.clearTimeout(self.suggestTimeout);
85                }
86                var input = this;
87                var ev = e;
88                self.suggestTimeout = window.setTimeout(function(){
89                    var text = $(input).val().toLowerCase();
90                    self.suggestCountry(text);
91                    if(ev.keyCode == 40) {
92                        self._moveSuggestDown(options);
93                    }
94                    if(ev.keyCode == 38) {
95                        self._moveSuggestUp(options);
96                    }
97                    if(ev.keyCode == 13) {
98                        var hovered = $(options).find('.hovered:visible');
99                        if(hovered.length) {
100                            if(!$(hovered).hasClass('country-phone-search')) {
101                                self.setElementSelected(hovered);
102                                self._toggleSelector();
103                            }
104                        }
105                        ev.stopPropagation();
106                        ev.preventDefault();
107                    }
108                }, 100);
109
110                if($(this).val() == '') {
111                    $(searchLabel).show();
112                }
113                else {
114                    $(searchLabel).hide();
115                }
116
117            }).bind('keypress', function(e){

118                if(e.keyCode == 13) {
119                    e.stopPropagation();
120                    e.preventDefault();
121                    return false;
122                }
123            });
124
125            for(var i = 0; i < this.data.length; i++) {
126                if(i == 0) {
127                    selected = this.data[i];
128                }
129                var country = this.data[i];
130                var prefCountry = country.co;
131
132                var option = $('<div data-phone="'+
133                    country.ph + '" data-co="'+ prefCountry.toLowerCase() +'"' +
134                    ' class="country-phone-option"><span>+'+ country.ph +'<img src="/bitrix/templates/info_light_gray/images/blank.gif" class="flag flag-'+
135                    country.co +
136                    '"></span>'+ country.na +'</div>'
137                );
138                $(option).appendTo(options);
139                if(this.options.preferCo && (this.options.preferCo != undefined)) {
140                    if(prefCountry == this.options.preferCo) {
141                        selected = country;
142                    }
143                }
144                else {
145                    if(country.ph == this.options.default_prefix) {
146                        selected = country;
147                    }
148                }
149            }
150            if(selected) {
151                this.container.find('.country-phone-selected')
152                    .html('<img src="/bitrix/templates/info_light_gray/images/blank.gif" class="flag flag-'+ selected.co +'">+'+ selected.ph);
153            }
154            $(selector).bind('click', function(e){
155                self._toggleSelector();
156            });
157            $(options).find('.country-phone-option').bind('click', function(){
158                self.setElementSelected(this);
159                self._toggleSelector();
160            });
161            $(options).hover(function(){
162                if(self.hideTimeout) {
163                    window.clearTimeout(self.hideTimeout);
164                }
165            }, function(){
166                var select = this;
167                self.hideTimeout = window.setTimeout(self._mouseOverHide, 1000, select, self);
168            });
169
170            this._initInput();
171        },
172
173        _mouseOverHide: function(select, self) {
174            if(self.container) {
175                var searchInput = self.container.find('.country-phone-search');
176                if(!$(searchInput).is(':focus')) {
177                    $(select).hide();
178                }
179                else {
180                    self.hideTimeout = window.setTimeout(self._mouseOverHide, 1000, select, self);
181                }
182            }
183        },
184
185        _moveSuggestDown: function(options) {
186            var select = null;
187            var hovered = $(options).find('.hovered:visible');
188            if(hovered.length) {
189                var next = $(hovered).next(':visible');
190                if(next.length) {
191                    select = next;
192                }
193                else {
194                    next = $(hovered).nextUntil(':visible').last().next();
195                    if(next.length) {
196                        select = next;
197                    }
198                }
199            }
200            if(!select) {
201                select = $(options).find('.country-phone-option:visible').first();
202            }
203            if(select) {
204                $(options).find('.country-phone-option').add('.country-phone-search').removeClass('hovered');
205                $(select).addClass('hovered');
206            }
207        },
208
209        _moveSuggestUp: function(options) {
210            var select = null;
211            var hovered = $(options).find('.hovered:visible');
212            if(hovered.length) {
213                var next = $(hovered).prev(':visible');
214                if(next.length) {
215                    select = next;
216                }
217                else {
218                    next = $(hovered).prevUntil(':visible').last().prev();
219                    if(next.length) {
220                        select = next;
221                    }
222                }
223            }
224            if(!select) {
225                select = $(options).find('.country-phone-option:visible').last();
226            }
227            if(select) {
228                $(options).find('.country-phone-option').add('.country-phone-search').removeClass('hovered');
229                $(select).addClass('hovered');
230            }
231        },
232
233        suggestCountry: function(text, checkCode) {
234            var options = this.container.find('.country-phone-options');
235            var self = this;
236            $(options).find('.country-phone-option').each(function(){
237                if(text) {
238                    if(text == 'россия') {
239                        text = 'росси';
240                    }
241                    var match = $(this).text().toLowerCase();
242                    if(match.indexOf(text) >= 0) {
243                        $(this).show();
244                        if(checkCode && checkCode != undefined) {
245                            var code = $(this).data('phone');
246                            var selCode = self.prefixField.val();
247
248
249
250                            $('#phone_whith_pref-order').val('+' + $('#feedback input[name="__phone_prefix"]').val() + $('#phones-order').val());
251
252                            if(selCode == code) {
253                                self.setElementSelected(this);
254                            }
255                        }
256                    }
257                    else {
258                        if(!checkCode) {
259                            $(this).hide();
260                        }
261                    }
262                }
263                else {
264                    $(this).show();
265                }
266            });
267        },
268
269        _toggleSelector: function(){
270            var options = this.container.find('.country-phone-options');
271            if($(options).is(':visible')) {
272                $(options).hide('fast');
273                $(options).find('.country-phone-search').val('').blur();
274                this.element.focus();
275                this.suggestCountry('');
276            }
277            else {
278                $(options).show('fast');
279                window.setTimeout(function(){
280                    var searchInp = $(options).find('.country-phone-search');
281                    $(searchInp).val('').focus();
282                }, 300);
283            }
284        },
285
286        setElementSelected: function(el) {
287            var selector = this.container.find('.country-phone-selected');
288            var code = $(el).data('phone');
289            var sel = $(el).html();
290            sel = sel.split('</span>');
291            $(selector).html(sel[0] +'</span>');
292            this.prefixField.val(code);
293
294
295            $('#feedback #phone_whith_pref-order').val('+' + $('#feedback input[name="__phone_prefix"]').val() + $('#phones-order').val());
296
297            if($('#feedback input[name="__phone_prefix"]').val()=='7'){
298                $('#phones-order').attr('data-mask','(000) 000-00-00');
299                $('#phones-order').attr('placeholder','(000) 000-00-00');
300                $('#phones-order').mask('(000) 000-00-00');
301            } else {
302                $('#phones-order').attr('data-mask','');
303                $('#phones-order').attr('placeholder','');
304                $('#phones-order').unmask();
305            }
306
307            return code;
308        },
309
310        _initInput: function() {
311            var self = this;
312            this.element.bind('keyup', function(){
313                var text = $(this).val();
314                if(text.length > 1 && text[0] == '+') {
315                    var code = text.substring(1);
316                    if(self.searchTimeout) {
317                        window.clearTimeout(self.searchTimeout);
318                    }
319                    var input = this;
320                    window.setTimeout(function(){
321                        var found = self.searchCountryCode(code);
322                        if(found) {
323                            text = $(input).val();
324                            text = text.replace('+' + found, '');
325                            $(input).val(text);
326                        }
327                    }, 1000);
328                }
329            });
330
331            this.initInputVal();
332        },
333
334        initInputVal: function() {
335            var text = this.element.val();
336            var self = this;
337            if(text.length > 1 && text[0] == '+') {
338                for(var i = 6; i >= 1; i--) {
339                    var code = text.substring(1, i);
340                    var found = self.searchCountryCode(code);
341                    if(found) {
342                        text = this.element.val();
343                        text = text.replace('+' + found, '');
344                        this.element.val(text);
345                        break;
346                    }
347                }
348            }
349            else if(text.length == 1 && text[0] == '+') {
350                this.element.val('');
351            }
352        },
353
354        searchCountryCode: function(code) {
355            var options = this.container.find('.country-phone-options');
356            var search = code;
357            var self = this;
358            var found = false;
359            var foundItems = [];
360            $(options).find('.country-phone-option').each(function(){
361                if(search == $(this).data('phone')) {
362                    foundItems.push({
363                        co: $(this).data('co'),
364                        el: this
365                    });
366                }
367            });
368
369            if(foundItems.length == 1) {
370                found = self.setElementSelected(foundItems[0].el);
371            }
372            else if(foundItems.length > 1) {
373                for(var i = 0; i < foundItems.length; i++) {
374                    if(self.options.preferCo) {
375                        if(self.options.preferCo == foundItems[i].co) {
376                            found = self.setElementSelected(foundItems[i].el);
377                            break;
378                        }
379                    }
380                    else {
381                        found = self.setElementSelected(foundItems[i].el);
382                        break;
383                    }
384                }
385                if(!found) {
386                    found = self.setElementSelected(foundItems[0].el);
387                }
388            }
389
390            return found;
391        }
392    });

393})(jQuery);