https://gastro-nsk.ru/bitrix/templates/aspro-priority2/js/index-tabs.js

1(function () {
2	const ajaxRequest = function (method, url, obConfig) {
3		const objUrl = parseUrlQuery();
4		const obData = {
5			ajax_get: "Y",
6			AJAX_REQUEST: "Y",
7			AJAX_POST: "Y",
8			bitrix_include_areas: "N",
9			TABS_REQUEST: "Y",
10		};
11		const obDataExt = obConfig["data"] || {};
12		const methods = method || "GET";
13		let add_url = "";
14
15		// add clear_cache
16		if (
17			typeof objUrl === "object" &&
18			objUrl &&
19			"clear_cache" in objUrl &&
20			objUrl.clear_cache == "Y"
21		) {
22			add_url = "?clear_cache=Y";
23		}
24
25		//merge data
26		const obTransferData = Object.assign({}, obData, obDataExt);
27
28		//set data to FormData
29		const formData = new FormData();
30		const arData = Object.keys(obTransferData);
31		for (let i = 0; i < arData.length; i++) {
32			formData.append(arData[i], obTransferData[arData[i]]);
33		}
34
35		//new xhr request
36		const xhr = new XMLHttpRequest();
37
38		xhr.open(methods, url + add_url);
39		xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
40
41		xhr.send(formData);
42
43		//set event
44		xhr.onload = function () {
45			let responseObj = xhr.response;
46			obConfig["context"].classList.remove("loading-state");
47			if (xhr.status != 200) {
48				obConfig["context"].innerHTML =
49					"Error " + xhr.status + ": " + xhr.statusText;
50			} else {
51				const obData = BX.processHTML(responseObj);
52				obConfig["context"].innerHTML = obData.HTML;
53				BX.onCustomEvent("onSetHeightBanner");
54				setTimeout(function () {
55					BX.ajax.processScripts(obData.SCRIPT);
56				}, 0);
57			}
58		};
59
60		//set event
61		xhr.onerror = function () {
62			obConfig["context"].classList.remove("loading-state");
63			obConfig["context"].innerHTML = "Error";
64		};
65	};
66
67	const readyHandler = function () {
68		document.addEventListener("click", function (e) {
69			const $tab = e.target.closest(".element-list .tab-nav .tab-nav__item");
70
71			if ($tab) {
72				const $tabContainer = $tab.closest(".element-list");
73				const $tabItems = $tabContainer.querySelectorAll(".tab-nav__item");
74				const $jsParamsBlock = $tabContainer.querySelector(".js-request-data");
75
76				if ($tabItems.length) {
77					// check target element - is tab-nav__item
78					if (
79						$tab.classList.contains("tab-nav__item") &&
80						!$tab.classList.contains("active")
81					) {
82						const tabCode = $tab.dataset["code"];
83						const $tabsContent =
84							$tabContainer.querySelectorAll(".tab-content-block");
85						const $curTab = $tabContainer.querySelector(
86							".tab-content-block[data-code='" + tabCode + "']"
87						);
88
89						// remove all class nav link
90						for (let i = 0; i < $tabItems.length; i++) {
91							$tabItems[i].classList.remove("active");
92						}
93						//set active nav link
94						$tab.classList.toggle("active");
95
96						// remove all class nav content
97						for (let i = 0; i < $tabsContent.length; i++) {
98							$tabsContent[i].classList.remove("active");
99						}
100
101						//set active nav content
102						$curTab.classList.toggle("active");
103
104						// ajax request
105						if (!$tab.classList.contains("clicked")) {
106							let action =
107								$jsParamsBlock.dataset.action || window.location.href;
108							const obData = {
109								FILTER_HIT_PROP: tabCode,
110								AJAX_PARAMS: $jsParamsBlock.dataset["value"],
111								GLOBAL_FILTER: $curTab.dataset["filter"],
112								TYPE_TEMPLATE:
113									$tabContainer.querySelector(".tab-nav").dataset["template"],
114							};
115
116							if (document.querySelector(".body.index")) {
117								const url = action.split("?");
118								const class_block = e.target
119									.closest(".drag-block")
120									.dataset.class.replace("_drag", "")
121									.replace(/\s/g, "");
122
123								action = url[0] + "?BLOCK=" + class_block;
124
125								if (url.length === 2) {
126									action += "&" + url[1];
127								}
128							}
129							ajaxRequest("POST", action, {
130								data: obData,
131								context: $curTab,
132							});
133
134							//set clicked to prevent same ajax
135							$tab.classList.add("clicked");
136						} else {
137							BX.onCustomEvent("onSetHeightBanner");
138						}
139					}
140				}
141			}
142		});
143	};
144	document.addEventListener("DOMContentLoaded", readyHandler);
145})();
146
147window.tabsInitOnReady = function (block) {
148	$(".element-list[data-block_key='" + block + "'] .tab-nav-wrapper").scrollTab(
149		{
150			tabs_wrapper: ".tab-nav",
151			tab_item: "> .tab-nav__item",
152			width_grow: 3,
153			outer_wrapper: `.element-list[data-block_key='${block}'] .index-block__title-wrapper`,
154			onResize1: function (options) {
155				const top_wrapper = options.outer_wrapper_node;
156				let all_width = top_wrapper[0].getBoundingClientRect().width;
157
158				if (top_wrapper.length) {
159					const tabs_wrapper = options.scrollTab;
160
161					if (window.matchMedia("(max-width: 767px)").matches) {
162						tabs_wrapper.css({
163							"max-width": all_width,
164						});
165						return true;
166					}
167

168					const title = top_wrapper.find(".index-block__part--left");
169					const right_link = top_wrapper.find(".index-block__part--right");
170
171					if (title.length) {
172						all_width -= title.outerWidth(true);
173					}
174
175					if (right_link.length) {
176						all_width -= right_link.outerWidth(true);
177					}
178
179					all_width -= Number.parseInt(tabs_wrapper.css("margin-left"));
180					all_width -= Number.parseInt(tabs_wrapper.css("margin-right"));
181
182					tabs_wrapper.css({
183						"max-width": all_width,
184						width: "",
185					});
186				}
187				options.width = all_width;
188			},
189		}
190	);
191};