https://integral-store.ru/local/components/integral/location.selec…/.default/script.js?17655508087049

1BX.ready(function() {
2    const mainWrapper = document.querySelector('#main');
3    const locationSelectorFormTriggers = document.querySelectorAll('.location-selector__form-trigger');
4    const locationSelectorSearchInput = document.querySelector('.location-selector__form input[name="location_selector_query"]');
5    const locationSelectorForm = document.querySelector('.location-selector__form');
6    const locationSelectorFormCloseButton = document.querySelector('.location-selector-form__close');
7    const locationSelectorFormResultsOuter = document.querySelector('.location-selector-form__search-results-outer');
8    const locationSelectorFormResults = document.querySelector('.location-selector-form__search-results');
9    const locationSelectorPopularCitiesContainer = document.querySelector('.location-selector-form__popular-cities');
10    const locationSelectorPopularCities = document.querySelectorAll('.location-selector-form__popular-city');
11    const locationSelectorErrorsContainer = document.querySelector('.location-selector-form__errors');
12    let debounceTimeout;
13
14    function searchInputChangeHandler(event) {
15        clearTimeout(debounceTimeout);
16        const searchValue = event.target.value;
17
18        debounceTimeout = setTimeout(function() {
19            const data = {
20                locationName: searchValue
21            };
22
23            if (searchValue === '') {
24                updateSearchResults([]);
25            }
26
27            BX.ajax.runComponentAction('integral:location.selector', 'search', {
28                mode: 'class',
29                data: data
30            }).then(function(response) {
31                if (response.status === 'success') {
32                    const cities = response.data.cities;
33                    locationSelectorErrorsContainer.innerHTML = '';
34                    locationSelectorPopularCitiesContainer.classList.remove('hidden');
35                    locationSelectorErrorsContainer.classList.add('hidden');
36                    updateSearchResults(cities);
37                }
38            }).catch(function (response) {
39                if (response.status === 'error' && response.errors.length) {
40                    locationSelectorErrorsContainer.innerHTML = '';
41                    const errors = response.errors;
42                    errors.forEach(error => {
43                        const errorElement = document.createElement('div');
44                        errorElement.classList.add('location-selector-form__error');
45                        errorElement.textContent = error.message;
46                        locationSelectorErrorsContainer.appendChild(errorElement);
47                    });
48                    locationSelectorErrorsContainer.classList.remove('hidden');
49                    locationSelectorPopularCitiesContainer.classList.add('hidden');
50                }
51            });
52        }, 300);
53    }
54
55    function locationSelectorFormTriggerHandler(event) {
56        let coverNode = document.querySelector('.main-black__cover-modal');
57        if (!coverNode) {
58            coverNode = document.createElement('div');
59            coverNode.classList.add('main-black__cover-modal');
60            coverNode.addEventListener('click', closeModal);
61            document.body.appendChild(coverNode);
62        }
63        document.body.classList.add('no-scroll');
64        coverNode.style.zIndex = '110';
65        coverNode.classList.add('in');
66        mainWrapper.classList.add('location-selector-open');
67        locationSelectorForm.classList.add('infograd-modal', 'modal-type-form');
68        mainWrapper.scrollTop = Number(window.pageYOffset);
69
70        setTimeout(() => {
71            locationSelectorForm.classList.add('in');
72        }, 100);
73    }
74
75    function closeModal(event){
76        let coverNode = document.querySelector('.main-black__cover-modal');
77        BX.onCustomEvent('onCloseModal', [this]);
78        document.body.classList.remove('no-scroll');
79        mainWrapper.classList.remove('location-selector-open');
80        coverNode.classList.remove('in');
81        coverNode.classList.add('out');
82        coverNode.style.zIndex = '';
83        locationSelectorForm.classList.remove('infograd-modal', 'modal-type-form');
84        mainWrapper.classList.remove('paddingRight', 'paddingTop');
85        window.scrollTo(0, Number(window.pageYOffset));
86        updateSearchResults([]);
87        locationSelectorSearchInput.value = '';
88        setTimeout(() => {
89            coverNode.classList.remove('out');
90            BX.remove(coverNode);
91            this.coverNode = false;

92        },600)
93    }
94
95    function updateSearchResults(cities) {
96        locationSelectorFormResults.innerHTML = '';
97        if (cities.length === 0) {
98            locationSelectorFormResultsOuter.classList.remove('active');
99            if (window.innerWidth <= 767) {
100                locationSelectorPopularCities.forEach(popularCity => {
101                    popularCity.classList.remove('hidden');
102                });
103            }
104            return;
105        }
106        if (window.innerWidth <= 767) {
107            locationSelectorPopularCities.forEach(popularCity => {
108                popularCity.classList.add('hidden');
109            });
110        }
111        locationSelectorFormResultsOuter.classList.add('active');
112
113        cities.forEach(city => {
114            const cityElement = document.createElement('div');
115            cityElement.classList.add('location-selector-form__search-result-item');
116            cityElement.dataset.cityId = city.id;
117            cityElement.textContent = city.name;
118
119            cityElement.addEventListener('click', function() {
120                setLocation(city.id, city.name);
121            });
122
123            locationSelectorFormResults.appendChild(cityElement);
124        });
125    }
126
127    function setLocation(cityId, cityName) {
128        const data = {
129            id: cityId
130        };
131
132        BX.ajax.runComponentAction('integral:location.selector', 'set', {
133            mode: 'class',
134            data: data
135        }).then(function(response) {
136            if (response.status === 'success') {
137                locationSelectorFormTriggers.forEach(trigger => {
138                    trigger.querySelector('.location-selector__form-trigger__text').innerHTML = cityName;
139                });
140            }
141            closeModal();
142        }).catch(function () {
143            locationSelectorFormTriggers.forEach(trigger => {
144                trigger.querySelector('.location-selector__form-trigger__text').innerHTML = cityName;
145            });
146            closeModal();
147        });
148    }
149
150    locationSelectorFormTriggers.forEach(trigger => {
151        trigger.addEventListener('click', locationSelectorFormTriggerHandler);
152    });
153    locationSelectorPopularCities.forEach(popularCity => {
154        popularCity.addEventListener('click', setLocation.bind(null, popularCity.dataset.cityId, popularCity.textContent));
155    });
156    locationSelectorSearchInput.addEventListener('input', searchInputChangeHandler);
157    locationSelectorFormCloseButton.addEventListener('click', closeModal);
158});