https://mountainpeaks.ru/local/templates/webdoka/scripts/modules/m…/mobileProductSelection.js

1"use strict";
2
3import data from "../../data/data.js";
4import checkType from "../../utils/checkType.js";
5import windowScrollSwitcher from "../../utils/windowScrollSwitcher.js";
6import DoubleRange from "../../utils/DoubleRange.js";
7import Range from "../../utils/Range.js";
8import checkboxHandler from "../../utils/checkboxHandler.js";
9import buttonsHandler from "../buttonsHandler/buttonsHandler.js";
10import SetupValue from "../../utils/setupValue.js";
11
12const PRODUCT_SELECTION_URL = "https://mountainpeaks.ru/ajax/getMobileFilter.php";
13
14function mobileProductSelection(button) {
15    const getMobileProductSelection = async () => {
16        try {
17            // Отправяем запрос
18            let paramShop = 'shop=' + button.dataset.shop;
19            let fullUrl = PRODUCT_SELECTION_URL + '?' + paramShop;
20            const response = await fetch(fullUrl);
21    
22            // Проверяем, успешен ли запрос
23            if (!response.ok) {
24                throw new Error(`Ошибка HTTP: ${response.status}`);
25            } else {
26                if(data.error)
27                {
28                    alert(data.errorText);
29                }
30                else
31                {
32                    const data = await response.json();
33                    let topFilter = document.getElementById('mobileFilter');
34                    topFilter.innerHTML = data.template;
35                    innitSelection(data.template);
36                }
37            }
38        } catch (error) {
39            console.log(error.message);
40        }
41    };
42
43    getMobileProductSelection();
44
45    function innitSelection(tempalte) {
46        const buttonSelectionType = button.dataset.productSelectionType;
47        data.mobileProductSelection.classList.add("active");
48        data.mobileProductSelection.innerHTML = tempalte;
49        windowScrollSwitcher("off");
50        const mobileProductSelectionList = document.querySelectorAll(
51            ".mobile-product-selection .product-selection-item"
52        );
53
54        mobileProductSelectionList.forEach((item) => {
55            if (checkType(item)) {
56                const itemForm = item.querySelectorAll(
57                    ".product-selection-form"
58                );
59                const productSelectionBtnClose = item.querySelectorAll(
60                    ".product-selection-header__btn-close"
61                );
62                const itemSelectionType = item.dataset.productSelectionType;
63                const doubleRangeList = item.querySelectorAll(
64                    '[data-input="doubleRange"]'
65                );
66                const rangeList = item.querySelectorAll('[data-input="range"]');
67                const buttonList = item.querySelectorAll("[data-button]");
68                // const formList = item.querySelectorAll("[data-form]");
69                const checkboxList = item.querySelectorAll(
70                    '[data-input-box="checkbox"]'
71                );
72                const tabBlockList = item.querySelectorAll("[data-tab-list]");
73                const setupValueList = item.querySelectorAll(".setup-value");
74
75                if (itemSelectionType === buttonSelectionType) {
76                    item.classList.add("active");
77                }
78
79                itemForm.forEach((form) => {
80                    if (checkType(form)) {
81                        const productSelectionType = form.querySelectorAll(
82                            ".product-selection-type"
83                        );
84                        const btnBack = form.querySelector(
85                            ".mobile-menu__arrow-back"
86                        );
87
88                        productSelectionType.forEach((selection) => {
89                            if (checkType(selection)) {
90                                const accordionBtn = selection.querySelector(
91                                    ".product-selection-type__header"
92                                );
93                                const accordionContent =
94                                    selection.querySelector(
95                                        ".product-selection-type__list-wrap"
96                                    );
97
98                                accordionContent.style.maxHeight =
99                                    accordionContent.scrollHeight + "px";
100                                selection.classList.add("active");
101
102                                accordionBtn.addEventListener(
103                                    "click",
104                                    function () {
105                                        selection.classList.contains("active")
106                                            ? ((accordionContent.style.maxHeight =
107                                                  null),
108                                              selection.classList.remove(
109                                                  "active"
110                                              ))
111                                            : ((accordionContent.style.maxHeight =
112                                                  accordionContent.scrollHeight +
113                                                  "px"),
114                                              selection.classList.add(
115                                                  "active"
116                                              ));
117                                    }
118                                );
119                            }
120                        });
121
122                        btnBack.addEventListener("click", () => {
123                            form.classList.remove("active");
124                        });
125                    }
126                });
127
128                doubleRangeList.forEach((range) => {
129                    const rangeMin = range.querySelector(
130                        ".double-range__thumb-min"
131                    );
132                    const rangeMax = range.querySelector(
133                        ".double-range__thumb-max"
134                    );
135                    const minValueInput = range.querySelector(
136                        ".double-range__value-min"
137                    );
138                    const maxValueInput = range.querySelector(
139                        ".double-range-slider__value-max"
140                    );
141
142                    const doubleRangeHandler = new DoubleRange(range);
143
144                    // Обновление при изменении ползунков
145                    rangeMin.addEventListener("input", () => {
146                        doubleRangeHandler.rangeHandler();
147                    });
148
149                    rangeMax.addEventListener("input", () => {
150                        doubleRangeHandler.rangeHandler();
151                    });
152
153                    minValueInput.addEventListener("input", () => {
154                        doubleRangeHandler.minNumberHandler();
155                    });
156
157                    maxValueInput.addEventListener("input", () => {
158                        doubleRangeHandler.maxNumberHandler();
159                    });
160
161                    minValueInput.addEventListener("change", () => {
162                        doubleRangeHandler.checkMinValueInput();
163                    });
164
165                    maxValueInput.addEventListener("keydown", (e) => {
166                        if (e.key === "Enter") {
167                            e.preventDefault();
168                        }
169                    });
170
171                    minValueInput.addEventListener("keydown", (e) => {
172                        if (e.key === "Enter") {
173                            e.preventDefault();
174                        }
175                    });
176
177                    maxValueInput.addEventListener("change", () => {
178                        doubleRangeHandler.checkMaxValueInput();
179                    });
180
181                    // Инициализация при загрузке
182                    doubleRangeHandler.rangeHandler();
183                });
184
185                rangeList.forEach((range) => {
186                    if (checkType(range)) {
187                        const rangeInput = range.querySelector(
188                            ".range__input-range"
189                        );
190                        const numberInput = range.querySelector(
191                            ".range__input-number"
192                        );
193                        const decreaseBtn = range.querySelector(
194                            ".range__decrease-btn"
195                        );
196                        const increaseBtn = range.querySelector(
197                            ".range__incecrease-btn"
198                        );
199
200                        const rangeHandler = new Range(range);
201
202                        // Обновление значения при изменении ползунка
203                        rangeInput.addEventListener("input", () => {
204                            rangeHandler.updateRange();
205                        });
206
207                        // Обновление значения при изменении текстового поля
208                        numberInput.addEventListener("input", () => {
209                            rangeHandler.updateNumberValue();
210                        });
211
212                        // Обновление значения при изменении текстового поля
213                        numberInput.addEventListener("change", () => {
214                            rangeHandler.reset();
215                        });
216
217                        numberInput.addEventListener("keydown", (e) => {
218                            if (e.key === "Enter") {
219                                e.preventDefault();
220                            }
221                        });
222
223                        decreaseBtn.addEventListener("click", () => {
224                            rangeHandler.decrease();
225                        });
226
227                        increaseBtn.addEventListener("click", () => {
228                            rangeHandler.increase();
229                        });
230
231                        // Инициализация при загрузке страницы
232                        rangeHandler.initRange();
233                    }
234                });
235
236                buttonList.forEach((btn) => {
237                    if (checkType(btn)) {
238                        btn.addEventListener("click", function () {
239                            buttonsHandler(btn);
240                        });
241                    }
242                });
243
244                checkboxList.forEach((checkbox) => {
245                    if (checkType(checkbox)) {
246                        checkbox.addEventListener("click", function () {
247                            checkboxHandler(checkbox);
248                        });
249                    }
250                });
251
252                tabBlockList.forEach((block) => {
253                    if (checkType(block)) {
254                        const tabList = block.querySelectorAll("[data-tab]");
255                        const tabBlockName = block.dataset.tabList;
256                        const pageLink = block.querySelector(".page-link");
257
258                        tabList.forEach((tab) => {
259                            if (checkType(tab)) {
260                                tab.addEventListener("click", function () {
261                                    const tabName = tab.dataset.tab;
262                                    const tabHref = tab.dataset.href;
263                                    const contentList = document.querySelector(
264                                        `[data-content-list="${tabBlockName}"]`
265                                    );
266                                    const contentItemList =
267                                        contentList.querySelectorAll(
268                                            "[data-content-item]"
269                                        );
270
271                                    contentItemList.forEach((content) => {
272                                        if (checkType(content)) {
273                                            const contentName =
274                                                content.dataset.contentItem;
275
276                                            contentName !== tabName
277                                                ? content.classList.remove(
278                                                      "active"
279                                                  )
280                                                : content.classList.add(
281                                                      "active"
282                                                  );
283                                        }
284                                    });
285
286                                    tabList.forEach((el) => {
287                                        if (checkType(el)) {
288                                            el !== tab
289                                                ? el.classList.remove("active")
290                                                : el.classList.add("active");
291                                        }
292                                    });
293
294                                    if (checkType(pageLink)) {
295                                        pageLink.setAttribute("href", tabHref);
296                                    }
297                                });
298                            }
299                        });
300                    }
301                });
302
303                productSelectionBtnClose.forEach((btn) => {
304                    btn.addEventListener("click", function () {
305                        item.remove();
306                        data.mobileProductSelection.classList.remove("active");
307                        if (
308                            !document
309                                .querySelector(".mobile-menu")
310                                .classList.contains("active")
311                        ) {
312                            windowScrollSwitcher("on");
313                        }
314                    });
315                });
316
317                setupValueList.forEach((item) => {
318                    if (checkType(item)) {
319                        const setupValue = new SetupValue(item);
320

321                        setupValue.init();
322                    }
323                });
324            }
325        });
326    }
327}
328
329export default mobileProductSelection;