https://vesservice.com/bitrix/templates/aspro_max/js/scrollTabs.js

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		if( tabs_wrapper === undefined || !tabs_wrapper.length )
36			return false;
37		
38		var tabs = tabs_wrapper.find('> li');
39		if(!tabs.length)
40			return false;
41
42		var arrow_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">'+
43							'<rect width="12" height="8" fill="#333" fill-opacity="0" />'+
44							'<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)"/>'+
45						'</svg>';
46		var arrows_wrapper = '<div class="arrows_wrapper">'+
47								'<div class="arrow arrow_left colored_theme_hover_text">'+arrow_svg+'</div>'+
48								'<div class="arrow arrow_right colored_theme_hover_text">'+arrow_svg+'</div>'+
49							'</div>';
50
51		var arrows = $(arrows_wrapper).insertAfter(tabs_wrapper);
52		var arrow_left = arrows.find('.arrow_left');
53		var arrow_right = arrows.find('.arrow_right');
54
55		var thisOoptions = $.extend({}, options);
56
57		thisOoptions.scrollTab = _scrollTab;
58		thisOoptions.wrapper = tabs_wrapper;
59		thisOoptions.tabs = tabs;
60		thisOoptions.arrows = {};
61		thisOoptions.arrows.wrapper = arrows;
62		thisOoptions.arrows.arrow_left = arrow_left;
63		thisOoptions.arrows.arrow_right = arrow_right;
64
65		if(thisOoptions.linked_tabs !== undefined && thisOoptions.linked_tabs.length && thisOoptions.linked_tabs.data('scrollTabOptions') !== undefined) {
66			thisOoptions.linked_options = thisOoptions.linked_tabs.data('scrollTabOptions');
67			thisOoptions.linked_options.linked_options = thisOoptions;
68		}
69
70		if(options.arrows_css) {
71			thisOoptions.arrows.arrow_left.css(options.arrows_css);
72			thisOoptions.arrows.arrow_right.css(options.arrows_css);
73		}
74
75		thisOoptions.initTabs = function(){
76			thisOoptions.wrapperBounds = thisOoptions.wrapper[0].getBoundingClientRect();
77			thisOoptions.scrollBounds = thisOoptions.scrollTab[0].getBoundingClientRect();
78			elements = $(thisOoptions.tabs);
79			if(elements.length) {
80				thisOoptions.firstTabBound = elements[0].getBoundingClientRect().left;
81				thisOoptions.lastTabBound = elements[ elements.length - 1 ].getBoundingClientRect().right;
82			}
83			thisOoptions.minTranslate = (thisOoptions.wrapperBounds.right < thisOoptions.lastTabBound ? thisOoptions.wrapperBounds.right - thisOoptions.lastTabBound - 2 : 0);
84			thisOoptions.disabled = ( thisOoptions.lastTabBound - thisOoptions.wrapperBounds.left ) <= thisOoptions.scrollBounds.width;
85		}
86
87		thisOoptions.wrapper.css({
88			'white-space': 'nowrap',
89			'min-width': 'auto',
90			'overflow': 'visible',
91			'z-index': '1',
92		});
93		thisOoptions.scrollTab.css({
94			'overflow': 'hidden',
95			'position': 'relative',
96		});
97
98		thisOoptions.checkArrows = function(translate){
99			if(translate === undefined) {
100				translate = thisOoptions.translate;
101			}
102			
103			if( thisOoptions.disabled ) {
104				thisOoptions.arrows.arrow_left.addClass('disabled');
105				thisOoptions.arrows.arrow_right.addClass('disabled');
106			} else {
107				if(translate >= thisOoptions.maxTranslate) {
108					thisOoptions.arrows.arrow_left.addClass('disabled');
109					thisOoptions.arrows.arrow_right.removeClass('disabled');
110				} else if(translate <= thisOoptions.minTranslate) {
111					thisOoptions.arrows.arrow_right.addClass('disabled');
112					thisOoptions.arrows.arrow_left.removeClass('disabled');
113				} else {
114					thisOoptions.arrows.arrow_left.removeClass('disabled');
115					thisOoptions.arrows.arrow_right.removeClass('disabled');
116				}
117			}
118
119		}
120
121		thisOoptions.directScroll = function(distance, delay, step){
122			if(delay === undefined) {

123				delay = 5;
124			}
125			clearInterval(thisOoptions.timerMoveDirect);
126			var newTranslate = thisOoptions.translate + distance;
127
128			if(newTranslate > thisOoptions.maxTranslate) {
129				newTranslate = thisOoptions.maxTranslate;
130			} else if(newTranslate < thisOoptions.minTranslate) {
131				newTranslate = thisOoptions.minTranslate;
132			}
133			var tmpTranslate = thisOoptions.translate;
134			thisOoptions.translate = newTranslate;
135			
136			if(delay == 0) {
137				thisOoptions.translate = newTranslate;
138				thisOoptions.wrapper.css({
139					'transform': 'translateX('+thisOoptions.translate+'px)',
140				});
141			} else {
142				if(step === undefined) {
143					step = 1;
144				}
145				thisOoptions.timerMoveDirect = setInterval(
146					function() {
147						thisOoptions.wrapper.css({
148							'transform': 'translateX('+tmpTranslate+'px)',
149						});
150						
151						if( (distance < 0 && tmpTranslate <= newTranslate) || (distance > 0 && tmpTranslate >= newTranslate) ) {
152							thisOoptions.initTabs();
153							clearInterval(thisOoptions.timerMoveDirect);
154						}
155
156						if(tmpTranslate < newTranslate) {
157							tmpTranslate += step;
158						} else {
159							tmpTranslate -= step;
160						}
161					},
162					delay
163				);
164			}
165			
166			thisOoptions.checkArrows(newTranslate);
167		};
168		
169		thisOoptions.addArrowsEvents = function() {
170			thisOoptions.arrows.arrow_right.on('mouseenter', function() {
171				thisOoptions.arrows.arrow_left.removeClass('disabled');
172				thisOoptions.timerMoveLeft = setInterval(
173					function() {
174						if( thisOoptions.translate < thisOoptions.minTranslate ){
175							clearInterval(thisOoptions.timerMoveLeft);
176							thisOoptions.arrows.arrow_right.addClass('disabled');
177						} else {
178							thisOoptions.translate -= thisOoptions.translateSpeed;
179							thisOoptions.wrapper.css({
180								'transform': 'translateX('+thisOoptions.translate+'px)',
181							});
182						}
183					},
184					10
185				);
186			});
187
188			thisOoptions.arrows.arrow_right.on('mouseleave', function() {
189				clearInterval(thisOoptions.timerMoveLeft);
190			});
191
192			thisOoptions.arrows.arrow_right.on('click', function() {
193				thisOoptions.directScroll(-thisOoptions.directTranslate);
194				thisOoptions.arrows.arrow_left.removeClass('disabled');
195			});
196
197			thisOoptions.arrows.arrow_right.on('touchend', function() {
198				setTimeout(function() {
199					clearInterval(thisOoptions.timerMoveLeft);
200				}, 1);
201			});
202
203			thisOoptions.arrows.arrow_left.on('mouseenter', function() {
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.scrollBounds.left;
240				var rightScrollBound = thisOoptions.scrollBounds.right;
241
242				var tabBounds = this.getBoundingClientRect();
243				var leftTabScrollBound = tabBounds.left - thisOoptions.arrows.arrow_width;
244				var rightTabScrollBound = tabBounds.right + thisOoptions.arrows.arrow_width;
245
246				if(leftTabScrollBound < leftScrollBound) {
247					thisOoptions.directScroll(leftScrollBound - leftTabScrollBound, 1, 2);
248				} else if(rightTabScrollBound > rightScrollBound) {
249					thisOoptions.directScroll(rightScrollBound - rightTabScrollBound, 1, 2);
250				}
251
252				thisOoptions.activeTab = $(this);
253
254				if(thisOoptions.linked_options !== undefined) {
255					var this_index = $(this).index();
256					var linked_tab = $(thisOoptions.linked_options.tabs[this_index]);
257					var linked_tabs = {
258						leftScrollBound: thisOoptions.linked_options.scrollBounds.left,
259						rightScrollBound: thisOoptions.linked_options.scrollBounds.right,
260						tabBounds: linked_tab[0].getBoundingClientRect(),
261					};
262					if(linked_tabs.tabBounds.left < linked_tabs.leftScrollBound) {
263						thisOoptions.linked_options.directScroll(linked_tabs.leftScrollBound - linked_tabs.tabBounds.left + thisOoptions.linked_options.arrows.arrow_width + 1, 0);
264					} else if(linked_tabs.tabBounds.right > linked_tabs.rightScrollBound) {
265						thisOoptions.linked_options.directScroll(linked_tabs.rightScrollBound - linked_tabs.tabBounds.right - thisOoptions.linked_options.arrows.arrow_width - 1, 0);
266					}
267
268					thisOoptions.linked_options.activeTab = linked_tab;
269				}
270
271				
272			});
273		};
274
275		thisOoptions.addWrapperEvents = function() {
276			thisOoptions.wrapper.on('touchstart', function(event) {
277				thisOoptions.touch.posPrev = event.originalEvent.changedTouches[0].pageX;
278				clearInterval(thisOoptions.timerMoveRight);
279				clearInterval(thisOoptions.timerMoveLeft);
280				clearInterval(thisOoptions.timerMoveDirect);
281			});
282
283			thisOoptions.wrapper.on('touchmove', function(event) {
284				thisOoptions.touch.posCurrent = event.originalEvent.changedTouches[0].pageX - thisOoptions.touch.posPrev;
285				thisOoptions.directScroll(thisOoptions.touch.posCurrent, 0);
286				thisOoptions.touch.posPrev = event.originalEvent.changedTouches[0].pageX;
287			});
288		};
289
290		thisOoptions.resize = function(){
291			if(thisOoptions.onBeforeResize && typeof(thisOoptions.onBeforeResize) == 'function') {
292				thisOoptions.onBeforeResize(thisOoptions);
293			}
294
295			if(thisOoptions.onResize && typeof(thisOoptions.onResize) == 'function') {
296				thisOoptions.onResize(thisOoptions);
297			}
298
299			if(thisOoptions.translate < thisOoptions.minTranslate) {
300				thisOoptions.directScroll(thisOoptions.minTranslate - thisOoptions.translate);
301			} else if(thisOoptions.translate > thisOoptions.maxTranslate) {
302				thisOoptions.directScroll(thisOoptions.maxTranslate - thisOoptions.translate);
303			}
304
305			if( thisOoptions.activeTab !== undefined && thisOoptions.activeTab.length ) {
306				var activeTabBounds = thisOoptions.activeTab[0].getBoundingClientRect();
307				if(activeTabBounds.left < thisOoptions.scrollBounds.left) {
308					thisOoptions.directScroll(thisOoptions.scrollBounds.left - activeTabBounds.left);
309				} else if(activeTabBounds.right > thisOoptions.scrollBounds.right) {
310					thisOoptions.directScroll(thisOoptions.scrollBounds.right - activeTabBounds.right);
311				}
312			}
313
314			thisOoptions.initTabs();

315			thisOoptions.checkArrows();
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		if (arrow_right !== undefined && arrow_right.length) {
329			thisOoptions.arrows.arrow_width = thisOoptions.arrows.arrow_right[0].getBoundingClientRect().width;
330		}
331		_scrollTab.data('scrollTabOptions').resize();
332		delete thisOoptions;
333	}
334
335	var options = $.extend({
336		translate: 1,
337		translateSpeed: 2,
338		directTranslate: 150,
339		maxTranslate: 1,
340		touch: {},
341		arrows_css: false,
342		tabs_wrapper: '.nav-tabs',
343		onResize: false,
344		width_grow: 9,
345	}, options);
346
347	var el = $(this);
348
349	if(el.hasClass('arrow_scroll_init'))
350		return false;
351
352	el.each(function(i, scrollTab){
353		_scrollTab(scrollTab, options);
354	});
355}