https://xn----7sbbbucvqex7cwb4i.xn--p1ai/local/templates/beltech/js/spollers.js

1//=================
2//Spollers
3let spollers = document.querySelectorAll("._spoller");
4let spollersGo = true;
5if (spollers.length > 0) {
6	for (let index = 0; index < spollers.length; index++) {
7		const spoller = spollers[index];
8		spoller.addEventListener("click", function (e) {
9			e.preventDefault();
10			if (spollersGo) {
11				spollersGo = false;
12				if (spoller.classList.contains('_spoller-992') && window.innerWidth > 992) {
13					return false;
14				}
15				if (spoller.classList.contains('_spoller-768') && window.innerWidth > 768) {
16					return false;
17				}
18				if (spoller.closest('._spollers').classList.contains('_one')) {
19					let curent_spollers = spoller.closest('._spollers').querySelectorAll('._spoller');
20					for (let i = 0; i < curent_spollers.length; i++) {
21						let el = curent_spollers[i];
22						if (el != spoller) {
23							el.classList.remove('_active');
24							_slideUp(el.nextElementSibling);
25						}
26					}
27				}
28				spoller.classList.toggle('_active');
29				_slideToggle(spoller.nextElementSibling);
30
31				setTimeout(function () {
32					spollersGo = true;
33				}, 500);
34			}
35		});
36	}
37}
38//=================
39//=================
40//SlideToggle
41let _slideUp = (target, duration = 500) => {
42	target.style.transitionProperty = 'height, margin, padding';
43	target.style.transitionDuration = duration + 'ms';
44	target.style.height = target.offsetHeight + 'px';
45	target.offsetHeight;
46	target.style.overflow = 'hidden';
47	target.style.height = 0;
48	target.style.paddingTop = 0;
49	target.style.paddingBottom = 0;
50	target.style.marginTop = 0;
51	target.style.marginBottom = 0;
52	window.setTimeout(() => {
53		target.style.display = 'none';
54		target.style.removeProperty('height');
55		target.style.removeProperty('padding-top');
56		target.style.removeProperty('padding-bottom');
57		target.style.removeProperty('margin-top');
58		target.style.removeProperty('margin-bottom');
59		target.style.removeProperty('overflow');
60		target.style.removeProperty('transition-duration');
61		target.style.removeProperty('transition-property');
62		target.classList.remove('_slide');
63	}, duration);
64}
65let _slideDown = (target, duration = 500) => {
66	target.style.removeProperty('display');
67	let display = window.getComputedStyle(target).display;
68	if (display === 'none')
69		display = 'block';
70
71	target.style.display = display;
72	let height = target.offsetHeight;
73	target.style.overflow = 'hidden';
74	target.style.height = 0;
75	target.style.paddingTop = 0;
76	target.style.paddingBottom = 0;
77	target.style.marginTop = 0;
78	target.style.marginBottom = 0;
79	target.offsetHeight;
80	target.style.transitionProperty = "height, margin, padding";
81	target.style.transitionDuration = duration + 'ms';
82	target.style.height = height + 'px';
83	target.style.removeProperty('padding-top');
84	target.style.removeProperty('padding-bottom');
85	target.style.removeProperty('margin-top');
86	target.style.removeProperty('margin-bottom');
87	window.setTimeout(() => {
88		target.style.removeProperty('height');
89		target.style.removeProperty('overflow');
90		target.style.removeProperty('transition-duration');
91		target.style.removeProperty('transition-property');
92		target.classList.remove('_slide');
93	}, duration);
94}
95

96let _slideDownGrid = (target, duration = 500) => {
97	target.style.removeProperty('display');
98	let display = window.getComputedStyle(target).display;
99	if (display === 'none')
100		display = 'grid';
101
102	target.style.display = display;
103	let height = target.offsetHeight;
104	target.style.overflow = 'hidden';
105	target.style.height = 0;
106	target.style.paddingTop = 0;
107	target.style.paddingBottom = 0;
108	target.style.marginTop = 0;
109	target.style.marginBottom = 0;
110	target.offsetHeight;
111	target.style.transitionProperty = "height, margin, padding";
112	target.style.transitionDuration = duration + 'ms';
113	target.style.height = height + 'px';
114	target.style.removeProperty('padding-top');
115	target.style.removeProperty('padding-bottom');
116	target.style.removeProperty('margin-top');
117	target.style.removeProperty('margin-bottom');
118	window.setTimeout(() => {
119		target.style.removeProperty('height');
120		target.style.removeProperty('overflow');
121		target.style.removeProperty('transition-duration');
122		target.style.removeProperty('transition-property');
123		target.classList.remove('_slide');
124	}, duration);
125}
126
127let _slideToggle = (target, duration = 500) => {
128	if (!target.classList.contains('_slide')) {
129		target.classList.add('_slide');
130		if (window.getComputedStyle(target).display === 'none') {
131			return _slideDown(target, duration);
132		} else {
133			return _slideUp(target, duration);
134		}
135	}
136}
137
138// let catalogSortingList = document.querySelectorAll('.new-faq__items')
139
140// if (catalogSortingList.length > 0) {
141// 	for (let index = 0; index < catalogSortingList.length; index++) {
142
143// 		const list = catalogSortingList[index];
144// 		list.addEventListener('click', function (e) {
145// 			const items = list.querySelectorAll('.new-faq__item');
146// 			const target = e.target;
147// 			Array.from(items).forEach(item => {
148// 				item.classList.remove('active');
149// 			})
150// 			target.closest('label').classList.add('active');
151// 		})
152// 	}
153// }
154
155$('.new-faq__item').on('click', function () {
156	$(this).parents('form').submit();
157
158});
159
160$(".new-faq__items").find('input[type="radio"]:checked').closest('.new-faq__item').addClass('active');
161// if ($(".new-faq__items").find('input[type="radio"]').is(':checked')) {
162// 	console.log($(this));
163// 	$(this).closest('.new-faq__item').addClass('active');
164// }
165
166$(".new-faq__items").find('input[type="radio"]').change(function () {
167	if ($(this).is(":checked")) {
168		$(this).closest('.new-faq__item').addClass('active');
169		
170	} else {
171		$(this).closest('.new-faq__item').removeClass('active');
172	}
173});
174
175// sorting menu
176
177const sortingBtn = document.querySelector('.new-catalog-sorting__spoller');
178const body1 = document.querySelector('body');
179const sortingMenu = document.querySelector('.new-catalog-sorting__criterion-wrapper');
180
181if (document.documentElement.clientWidth < 1600) {
182    body1.addEventListener('click', function (evt) {
183        if (evt.target !== sortingMenu) {
184            sortingMenu.style.display = 'none';
185            sortingBtn.classList.remove('_active');
186        }
187    });
188    
189    sortingBtn.addEventListener('click', function (evt) {
190        evt.stopPropagation();
191    });
192    
193    sortingMenu.addEventListener('click', function (evt) {
194        evt.stopPropagation();
195    });
196}