https://lkg.ru/bitrix/templates/aspro_max/js/scrollTabs.js?171646553712996

1InitTabsScroll = function () {
2	$('.arrow_scroll:not(.arrow_scroll_init)').scrollTab();
3}
4
5ResizeScrollTabs = function () {
6	var scrollTabs = $('.arrow_scroll_init');
7
8	if (scrollTabs.length) {
9		scrollTabs.each(function (i, scrollTab) {
10			var _scrollTab = $(scrollTab);
11			_scrollTab.data('scrollTabOptions').resize();
12		});
13	}
14}
15
16$(document).ready(function () {
17	InitTabsScroll();
18});
19
20$(window).on('resize', function () {
21	if (window.scrollTabsTimeout !== undefined) {
22		clearTimeout(window.scrollTabsTimeout);
23	}
24
25	window.scrollTabsTimeout = setTimeout(
26		ResizeScrollTabs,
27		20
28	);
29});
30
31$.fn.scrollTab = function (options) {
32	function _scrollTab(element, options) {
33		var _scrollTab = $(element);
34		var tabs_wrapper = _scrollTab.find(options.tabs_wrapper);
35		var tabs = tabs_wrapper.find('> li');
36
37		var arrow_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">' +
38			'<rect width="12" height="8" fill="#333" fill-opacity="0" />' +
39			'<path d="M1015.69,507.693a0.986,0.986,0,0,1-1.4,0l-4.31-4.316-4.3,4.316a0.993,0.993,0,0,1-1.4-1.408l4.99-5.009a1.026,1.026,0,0,1,1.43,0l4.99,5.009A0.993,0.993,0,0,1,1015.69,507.693Z" fill="#333" transform="translate(-1004 -501)"/>' +
40			'</svg>';
41		var arrows_wrapper = '<div class="arrows_wrapper">' +
42			'<div class="arrow arrow_left colored_theme_hover_text">' + arrow_svg + '</div>' +
43			'<div class="arrow arrow_right colored_theme_hover_text">' + arrow_svg + '</div>' +
44			'</div>';
45
46		var arrows = $(arrows_wrapper).insertAfter(tabs_wrapper);
47		var arrow_left = arrows.find('.arrow_left');
48		var arrow_right = arrows.find('.arrow_right');
49
50		var thisOoptions = $.extend({}, options);
51
52		thisOoptions.scrollTab = _scrollTab;
53		thisOoptions.wrapper = tabs_wrapper;
54		thisOoptions.tabs = tabs;
55		thisOoptions.arrows = {};
56		thisOoptions.arrows.wrapper = arrows;
57		thisOoptions.arrows.arrow_left = arrow_left;
58		thisOoptions.arrows.arrow_right = arrow_right;
59		thisOoptions.arrows.arrow_width = arrow_right[0].getBoundingClientRect().width;
60
61		if (thisOoptions.linked_tabs !== undefined && thisOoptions.linked_tabs.length && thisOoptions.linked_tabs.data('scrollTabOptions') !== undefined) {
62			thisOoptions.linked_options = thisOoptions.linked_tabs.data('scrollTabOptions');
63			thisOoptions.linked_options.linked_options = thisOoptions;
64		}
65
66		if (options.arrows_css) {
67			thisOoptions.arrows.arrow_left.css(options.arrows_css);
68			thisOoptions.arrows.arrow_right.css(options.arrows_css);
69		}
70
71		thisOoptions.GetSummWidth = function (elements) {
72			elements = $(elements);
73			var result = 0;
74			if (elements.length) {
75				elements.each(function (i, element) {
76					var _element = $(element);
77					var elementWidth = _element.outerWidth(true) + thisOoptions.width_grow;
78					elementWidth = Math.ceil(elementWidth * 10) / 10;
79					_element.data('leftBound', result);
80					result += elementWidth;
81					_element.data('rightBound', result);
82				});
83			}
84			return result;
85		}
86
87		var tabs_width = thisOoptions.GetSummWidth(thisOoptions.tabs);
88		thisOoptions.tabs_width = tabs_width;
89		thisOoptions.minTranslate = (thisOoptions.width < thisOoptions.tabs_width ? thisOoptions.width - thisOoptions.tabs_width - 1 : 0);
90
91		if (thisOoptions.tabs_width) {
92			thisOoptions.wrapper.css({
93				'white-space': 'nowrap',
94				'min-width': 'auto',
95			});
96		};
97		thisOoptions.scrollTab.css({
98			'overflow': 'hidden',
99			'position': 'relative',
100		});
101
102		thisOoptions.checkArrows = function (translate) {
103			if (translate === undefined) {
104				translate = thisOoptions.translate;
105			}
106
107			if (translate <= 1) {
108				return;
109			}
110
111			if (translate >= thisOoptions.maxTranslate) {
112				thisOoptions.arrows.arrow_left.addClass('disabled');
113				thisOoptions.arrows.arrow_right.removeClass('disabled');
114			} else if (translate <= thisOoptions.minTranslate) {
115				thisOoptions.arrows.arrow_right.addClass('disabled');
116				thisOoptions.arrows.arrow_left.removeClass('disabled');
117			} else {
118				thisOoptions.arrows.arrow_left.removeClass('disabled');
119				thisOoptions.arrows.arrow_right.removeClass('disabled');
120			}
121
122		}
123
124		thisOoptions.directScroll = function (distance, delay) {
125			if (delay === undefined) {

126				delay = 5;
127			}
128			clearInterval(thisOoptions.timerMoveDirect);
129			var newTranslate = thisOoptions.translate + distance;
130
131			if (newTranslate > thisOoptions.maxTranslate) {
132				newTranslate = thisOoptions.maxTranslate;
133			} else if (newTranslate < thisOoptions.minTranslate) {
134				newTranslate = thisOoptions.minTranslate;
135			}
136
137			if (delay == 0) {
138				thisOoptions.translate = newTranslate;
139				thisOoptions.wrapper.css({
140					'transform': 'translateX(' + thisOoptions.translate + 'px)',
141				});
142			} else {
143				thisOoptions.timerMoveDirect = setInterval(
144					function () {
145						if ((distance < 0 && thisOoptions.translate <= newTranslate) || (distance > 0 && thisOoptions.translate >= newTranslate)) {
146							clearInterval(thisOoptions.timerMoveDirect);
147						}
148
149						if (thisOoptions.translate < newTranslate) {
150							thisOoptions.translate++;
151						} else {
152							thisOoptions.translate--;
153						}
154
155						thisOoptions.wrapper.css({
156							'transform': 'translateX(' + thisOoptions.translate + 'px)',
157						});
158					},
159					delay
160				);
161			}
162			thisOoptions.checkArrows(newTranslate);
163		};
164
165		thisOoptions.addArrowsEvents = function () {
166			thisOoptions.arrows.arrow_right.on('mouseenter', function () {
167				thisOoptions.arrows.arrow_left.removeClass('disabled');
168				thisOoptions.tabs_width = thisOoptions.GetSummWidth(thisOoptions.tabs);
169				thisOoptions.minTranslate = (thisOoptions.width < thisOoptions.tabs_width ? thisOoptions.width - thisOoptions.tabs_width - 1 : 0);
170				thisOoptions.timerMoveLeft = setInterval(
171					function () {
172						if (thisOoptions.translate < thisOoptions.minTranslate) {
173							clearInterval(thisOoptions.timerMoveLeft);
174							thisOoptions.arrows.arrow_right.addClass('disabled');
175						} else {
176							thisOoptions.translate -= thisOoptions.translateSpeed;
177							thisOoptions.wrapper.css({
178								'transform': 'translateX(' + thisOoptions.translate + 'px)',
179							});
180						}
181					},
182					10
183				);
184			});
185
186			thisOoptions.arrows.arrow_right.on('mouseleave', function () {
187				clearInterval(thisOoptions.timerMoveLeft);
188			});
189
190			thisOoptions.arrows.arrow_right.on('click', function () {
191				thisOoptions.directScroll(-thisOoptions.directTranslate);
192				thisOoptions.arrows.arrow_left.removeClass('disabled');
193			});
194
195			thisOoptions.arrows.arrow_right.on('touchend', function () {
196				setTimeout(function () {
197					clearInterval(thisOoptions.timerMoveLeft);
198				}, 1);
199			});
200
201			thisOoptions.arrows.arrow_left.on('mouseenter', function () {
202				thisOoptions.tabs_width = thisOoptions.GetSummWidth(thisOoptions.tabs);
203				thisOoptions.minTranslate = (thisOoptions.width < thisOoptions.tabs_width ? thisOoptions.width - thisOoptions.tabs_width - 1 : 0);
204				thisOoptions.arrows.arrow_right.removeClass('disabled');
205				thisOoptions.timerMoveRight = setInterval(
206					function () {
207						if (thisOoptions.translate >= thisOoptions.maxTranslate) {
208							clearInterval(thisOoptions.timerMoveRight);
209							thisOoptions.arrows.arrow_left.addClass('disabled');
210						} else {
211							thisOoptions.translate += thisOoptions.translateSpeed;
212							thisOoptions.wrapper.css({
213								'transform': 'translateX(' + thisOoptions.translate + 'px)',
214							});
215						}
216					},
217					10
218				);
219			});
220
221			thisOoptions.arrows.arrow_left.on('mouseleave', function () {
222				clearInterval(thisOoptions.timerMoveRight);
223			});
224
225			thisOoptions.arrows.arrow_left.on('click', function () {
226				thisOoptions.directScroll(thisOoptions.directTranslate);
227				thisOoptions.arrows.arrow_right.removeClass('disabled');
228			});
229
230			thisOoptions.arrows.arrow_left.on('touchend', function () {
231				setTimeout(function () {
232					clearInterval(thisOoptions.timerMoveRight);
233				}, 1);
234			});
235		};
236
237		thisOoptions.addTabsEvents = function () {
238			thisOoptions.tabs.on('click', function () {
239				var leftScrollBound = thisOoptions.scrollTab[0].getBoundingClientRect().left;
240				var rightScrollBound = thisOoptions.scrollTab[0].getBoundingClientRect().right;
241				var tabBounds = this.getBoundingClientRect();
242
243				if (tabBounds.left < leftScrollBound) {
244					thisOoptions.directScroll(leftScrollBound - tabBounds.left + thisOoptions.arrows.arrow_width, 1);
245				} else if (tabBounds.right > rightScrollBound) {
246					thisOoptions.directScroll(rightScrollBound - tabBounds.right - thisOoptions.arrows.arrow_width, 1);
247				}
248
249				if (thisOoptions.linked_options !== undefined) {
250					var this_index = $(this).index();
251					var linked_tab = $(thisOoptions.linked_options.tabs[this_index]);
252					var linked_tabs = {
253						leftScrollBound: thisOoptions.linked_options.scrollTab[0].getBoundingClientRect().left,
254						rightScrollBound: thisOoptions.linked_options.scrollTab[0].getBoundingClientRect().right,
255						tabBounds: linked_tab[0].getBoundingClientRect(),
256					};
257					if (linked_tabs.tabBounds.left < linked_tabs.leftScrollBound) {
258						thisOoptions.linked_options.directScroll(linked_tabs.leftScrollBound - linked_tabs.tabBounds.left + thisOoptions.linked_options.arrows.arrow_width + 1, 0);
259					} else if (linked_tabs.tabBounds.right > linked_tabs.rightScrollBound) {
260						thisOoptions.linked_options.directScroll(linked_tabs.rightScrollBound - linked_tabs.tabBounds.right - thisOoptions.linked_options.arrows.arrow_width - 1, 0);
261					}
262				}
263
264
265			});
266		};
267
268		thisOoptions.addWrapperEvents = function () {
269			thisOoptions.wrapper.on('touchstart', function (event) {
270				thisOoptions.touch.posPrev = event.originalEvent.changedTouches[0].pageX;
271				clearInterval(thisOoptions.timerMoveRight);
272				clearInterval(thisOoptions.timerMoveLeft);
273				clearInterval(thisOoptions.timerMoveDirect);
274				thisOoptions.tabs_width = thisOoptions.GetSummWidth(thisOoptions.tabs);
275				thisOoptions.minTranslate = (thisOoptions.width < thisOoptions.tabs_width ? thisOoptions.width - thisOoptions.tabs_width - 1 : 0);
276			});
277
278			thisOoptions.wrapper.on('touchmove', function (event) {
279				thisOoptions.touch.posCurrent = event.originalEvent.changedTouches[0].pageX - thisOoptions.touch.posPrev;
280				thisOoptions.directScroll(thisOoptions.touch.posCurrent, 0);
281				thisOoptions.touch.posPrev = event.originalEvent.changedTouches[0].pageX;
282			});
283		};
284
285		thisOoptions.resize = function () {
286			if (thisOoptions.onBeforeResize && typeof (thisOoptions.onBeforeResize) == 'function') {
287				thisOoptions.onBeforeResize(thisOoptions);
288			}
289			thisOoptions.width = Math.ceil(thisOoptions.scrollTab[0].getBoundingClientRect().width);
290			thisOoptions.tabs_width = thisOoptions.GetSummWidth(thisOoptions.tabs);
291			thisOoptions.minTranslate = (thisOoptions.width < thisOoptions.tabs_width ? thisOoptions.width - thisOoptions.tabs_width - 1 : 0);
292
293			if (thisOoptions.onResize && typeof (thisOoptions.onResize) == 'function') {
294				thisOoptions.onResize(thisOoptions);
295			}
296
297			if (thisOoptions.translate < thisOoptions.minTranslate) {
298				thisOoptions.directScroll(thisOoptions.minTranslate - thisOoptions.translate);
299			} else if (thisOoptions.translate > thisOoptions.maxTranslate) {
300				thisOoptions.directScroll(thisOoptions.maxTranslate - thisOoptions.translate);
301			}
302
303			if (thisOoptions.tabs_width < thisOoptions.width) {
304				thisOoptions.arrows.wrapper.css('display', 'none');
305			} else {
306				thisOoptions.arrows.wrapper.css('display', '');
307				thisOoptions.arrows.arrow_left.removeClass('disabled');
308				thisOoptions.arrows.arrow_right.removeClass('disabled');
309				if (thisOoptions.translate >= 0) {
310					thisOoptions.arrows.arrow_left.addClass('disabled');
311				}
312				if (thisOoptions.translate <= thisOoptions.minTranslate) {
313					thisOoptions.arrows.arrow_right.addClass('disabled');
314				}
315			}
316
317			if (thisOoptions.onAfterResize && typeof (thisOoptions.onAfterResize) == 'function') {
318				thisOoptions.onAfterResize(thisOoptions);
319			}
320		};
321
322
323		_scrollTab.data('scrollTabOptions', thisOoptions);
324		_scrollTab.data('scrollTabOptions').addArrowsEvents();
325		_scrollTab.data('scrollTabOptions').addTabsEvents();
326		_scrollTab.data('scrollTabOptions').addWrapperEvents();
327		_scrollTab.addClass('arrow_scroll_init').addClass('swipeignore');
328		_scrollTab.data('scrollTabOptions').resize();
329		delete thisOoptions;
330	}
331
332	var options = $.extend({
333		translate: 0,
334		translateSpeed: 2,
335		directTranslate: 150,
336		maxTranslate: 1,
337		touch: {},
338		arrows_css: false,
339		tabs_wrapper: '.nav-tabs',
340		onResize: false,
341		width_grow: 9,
342	}, options);
343
344	var el = $(this);
345
346	if (el.hasClass('arrow_scroll_init'))
347		return false;
348
349	el.each(function (i, scrollTab) {
350		_scrollTab(scrollTab, options);
351	});
352}