https://music-hummer.ru/bitrix/templates/mh_bootstrap/components/s…/mh_bootstrap/script.js?17139578858629

1class RegionsChoose {
2
3    constructor() {
4
5        this.getRegion();
6
7        this.rootId = 'regions_choose_component';
8        this.rootDropDownId = 'regions_choose_component_dropdown';
9        this.selectRegionID = 'regon_choose_select-city__modal';
10        this.selectRegionOverlayID = 'regon_choose_modal__overlay';
11    
12        this.questionRegionId = null;
13        this.loctionList = null;
14
15        this.root = document.getElementById(this.rootId);
16        this.rootDropDown = document.getElementById(this.rootDropDownId);
17        this.selectRegion = document.getElementById(this.selectRegionID);
18        this.selectRegionOverlay = document.getElementById(this.selectRegionOverlayID);
19
20        this.setEvents();
21    }
22
23    getEntity(parent, entity, all=false) {
24        if (!parent || !entity) {
25            return null;
26        }
27        if (all) {
28            return parent.querySelectorAll('[data-entity="' + entity + '"]');
29        }
30        return parent.querySelector('[data-entity="' + entity + '"]');
31    }
32
33    setEvents() {
34        const yesBtn = this.getEntity(this.rootDropDown, 'select-city__dropdown__choose__yes');
35        const notBnt = this.getEntity(this.rootDropDown, 'select-city__dropdown__choose__no');
36        const cityName = this.getEntity(this.root, 'select-city__block__text-city');
37        const selectRegionClose = this.getEntity(this.selectRegion, 'select-city__close');
38        const searchLine = this.getEntity(this.selectRegion, 'select-city__modal__submit__input');
39        const selectRegionBtn = this.getEntity(this.selectRegion, 'select-city__modal__submit__btn');
40        const selectConfirmRegion = this.getEntity(this.selectRegion, 'select-city__automatic');
41
42        yesBtn.addEventListener('click', () => this.onSetRegion(this.questionRegionId));
43        notBnt.addEventListener('click', () => this.onShowALLRegions());
44        cityName.addEventListener('click', () => this.onShowALLRegions());
45        selectRegionClose.addEventListener('click', () => this.onSelectRegionShow(false));
46        searchLine.addEventListener('input', e => this.onInputSearch(e));
47        selectConfirmRegion.addEventListener('click', () => this.getRegion(true));
48
49
50        selectRegionBtn.addEventListener('click', () => {
51            const selectedRegion = Object.keys(this.loctionList)
52                .filter(i => searchLine.value === this.loctionList[i]);
53
54            if (selectedRegion.length === 0) {
55                return;
56            }
57
58            this.onSetRegion(selectedRegion[0]);
59            this.onShowALLRegions(false);
60        })
61
62    }
63
64    onSetRegion(regionId) {
65        BX.ajax.runAction('sotbit:regions.ChooseComponentController.setRegion', {
66            data: {regionId: regionId},
67        }).then(
68            (res) => res.data.actions.forEach(i => this[i](res.data)),
69            (err) => console.log(err),
70        )
71    }
72
73    dropDownShow(action) {
74        if (action) {
75            this.rootDropDown.setAttribute('style', 'display: block;');
76        } else {
77            this.rootDropDown.setAttribute('style', 'display: none;');
78        }
79    }
80
81    onShowALLRegions() {
82
83        if (this.loctionList !== null) {
84            return this.SHOW_SELECT_REGIONS(this.loctionList);
85        }
86
87        BX.ajax.runAction('sotbit:regions.ChooseComponentController.showLocations', {})
88            .then(
89                (res) => res.data.actions.forEach(i => this[i](res.data)),
90                (err) => console.log(err),
91            )
92    }
93
94    getRegion(deleteCookies=false) {
95
96        const query = new URLSearchParams(window.location.search);
97
98        const params = deleteCookies
99            ? {deletCookies: 1}
100            : {redirectRegionId: query.get('redirectRegionId')}
101
102        this.removeRegionGetParams(query);
103
104        BX.ajax.runAction('sotbit:regions.ChooseComponentController.getRegion', {
105            data: params,
106        })
107        .then(
108            (res) => {
109                res.data.actions.forEach(i => this[i](res.data));
110                if (deleteCookies) {
111                    this.dropDownShow(false);
112                    this.onSelectRegionShow(false);
113                    this.onSetRegion(res.data.currentRegionId);
114                }
115            },
116            (err) => console.log(err),
117        )
118
119    }
120
121    onSelectRegionShow(action) {
122        if (action) {
123            this.selectRegion.setAttribute('style', 'display: block;');
124            this.selectRegionOverlay.setAttribute('style', 'display: block;');
125        } else {
126            this.selectRegionOverlay.setAttribute('style', 'display: none;');
127            this.selectRegion.setAttribute('style', 'display: none;');
128        }
129    }
130
131    SHOW_REGION_NAME ({currentRegionName, currentRegionId}) {
132        const elment = this.getEntity(this.root, 'select-city__block__text-city');
133        elment.innerText = currentRegionName;
134        this.currentRegionId = currentRegionId;
135    }
136
137    SHOW_QUESTION ({currentRegionName, currentRegionId}) {
138        this.questionRegionId = currentRegionId;
139        //this.dropDownShow(true);
140        this.dropDownShow(false);
141        const element = this.getEntity(this.rootDropDown, 'select-city__dropdown__title');
142        element.innerText = element.textContent.replace('###', currentRegionName).trim();
143    }
144
145    CONFIRM_DOMAIN ({currentRegionName}) {
146        this.dropDownShow(false);
147        const elemnt = this.getEntity(this.root, 'select-city__block__text-city');
148        elemnt.innerText = currentRegionName;
149        this.getEntity(this.selectRegion, 'select-city__js').innerText = currentRegionName;
150    }
151
152    SHOW_SELECT_REGIONS ({allRegions}) {
153
154        this.onSelectRegionShow(true);
155
156        if (this.loctionList !== null) {
157            return;
158        }
159
160        this.loctionList = allRegions;
161        const exapmleRegions = this.getEntity(this.selectRegion, 'select-city__input__example');
162        const regionKeys = Object.keys(this.loctionList);
163        Array.from(exapmleRegions.querySelectorAll('span')).forEac

163h((item, index) => {
164            item.innerText = this.loctionList[regionKeys[index]];
165            item.addEventListener('click', () => {
166                this.onSetRegion(regionKeys[index]);
167                this.onShowALLRegions(false);
168            })
169        })
170    }
171
172    REDIRECT_TO_SUBDOMAIN ({currentRegionCode, currentRegionId}) {
173        const hostName = window.location.hostname;
174        const protocol = window.location.protocol;
175        const newUrl = window.location.href.replace(hostName, currentRegionCode);
176        const url = new URL(newUrl, `${protocol}${currentRegionCode}`);
177        url.searchParams.set('redirectRegionId', currentRegionId);
178        window.location.href = url.toString();
179    }
180
181    onInputSearch(e) {
182
183        const elementClass = 'regions_vars';
184        this.getEntity(this.selectRegion, elementClass, true).forEach(i => i.remove());
185        const text = e.currentTarget.value;
186        const localRootElement = this.getEntity(this.selectRegion, 'select-city__modal__submit__vars');
187
188        if (text.length  < 2) {
189            localRootElement.setAttribute('style', 'display: none;');
190            return;
191        }
192
193        const currentTarget = e.currentTarget;
194
195        const match = Object.keys(this.loctionList).filter(i => {
196            return  new RegExp(text, 'i').test(this.loctionList[i])
197        });
198
199        if (match.length > 0) {
200            localRootElement.setAttribute('style', 'display: block;');
201        } else {
202            localRootElement.setAttribute('style', 'display: none;');
203        }
204
205        match.forEach(i => {
206            const element = document.createElement('div');
207            element.setAttribute('data-entity', elementClass);
208            element.setAttribute('class', elementClass);
209            element.setAttribute('tabindex', 0);
210            element.innerText = this.loctionList[i];
211            element.addEventListener('click', () => {
212                currentTarget.value = this.loctionList[i];
213                this.getEntity(this.selectRegion, elementClass, true).forEach(i => i.remove());
214                localRootElement.setAttribute('style', 'display: none;');
215                this.getEntity(this.selectRegion, 'select-city__modal__submit__btn').removeAttribute('disabled')
216            });
217            localRootElement.append(element);
218        })
219    }
220
221    removeRegionGetParams(query) {
222        if (query.has('redirectRegionId')) {
223            const url = new URL(window.location.href, window.location.href);
224            url.searchParams.delete('redirectRegionId');
225            window.history.replaceState(null, '', url)
226        }
227    }
228}