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

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

373
374  el.each(function (i, scrollTab) {
375    _scrollTab(scrollTab, options);
376  });
377};