https://plazkat.ru/bitrix/templates/aspro-allcorp3/js/scrollTabs.js

1// Инициализация меню с пролистыванием: все элементы с классом .arrow_scroll при document.ready
2InitTabsScroll = function () {
3  $(".arrow_scroll:not(.arrow_scroll_init)").scrollTab();
4};
5
6ResizeScrollTabs = function () {
7  var scrollTabs = $(".arrow_scroll_init");
8
9  if (scrollTabs.length) {
10    scrollTabs.each(function (i, scrollTab) {
11      var _scrollTab = $(scrollTab);
12      _scrollTab.data("scrollTabOptions").resize();
13    });
14  }
15};
16
17$(document).ready(function () {
18  InitTabsScroll();
19});
20
21$(window).on("resize", function () {
22  if (window.scrollTabsTimeout !== undefined) {
23    clearTimeout(window.scrollTabsTimeout);
24  }
25
26  window.scrollTabsTimeout = setTimeout(ResizeScrollTabs, 20);
27});
28
29$.fn.scrollTab = function (options) {
30  function _scrollTab(element, options) {
31    var _scrollTab = $(element);
32    var tabs_wrapper = _scrollTab.find(options.tabs_wrapper);
33    if (tabs_wrapper === undefined || !tabs_wrapper.length) return false;
34
35    var tabs = tabs_wrapper.find(options.tab_item);
36    if (!tabs.length) return false;
37
38    var arrow_svg =
39      '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">' +
40      '<rect width="12" height="8" fill="#333" fill-opacity="0" />' +
41      '<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)"/>' +
42      "</svg>";
43    var arrows_wrapper =
44      '<div class="arrows_wrapper">' +
45      '<div class="arrow arrow_left colored_theme_hover_text fill-dark-light-block">' +
46      arrow_svg +
47      "</div>" +
48      '<div class="arrow arrow_right colored_theme_hover_text fill-dark-light-block">' +
49      arrow_svg +
50      "</div>" +
51      "</div>";
52
53    var arrows = $(arrows_wrapper).insertAfter(tabs_wrapper);
54    var arrow_left = arrows.find(".arrow_left");
55    var arrow_right = arrows.find(".arrow_right");
56
57    var thisOoptions = $.extend({}, options);
58
59    if (thisOoptions.outer_wrapper) {
60      thisOoptions.outer_wrapper_node = $(thisOoptions.outer_wrapper);
61    }
62
63    thisOoptions.scrollTab = _scrollTab;
64    thisOoptions.wrapper = tabs_wrapper;
65    thisOoptions.tabs = tabs;
66    thisOoptions.arrows = {};
67    thisOoptions.arrows.wrapper = arrows;
68    thisOoptions.arrows.arrow_left = arrow_left;
69    thisOoptions.arrows.arrow_right = arrow_right;
70
71    if (
72      thisOoptions.linked_tabs !== undefined &&
73      thisOoptions.linked_tabs.length &&
74      thisOoptions.linked_tabs.data("scrollTabOptions") !== undefined
75    ) {
76      thisOoptions.linked_options = thisOoptions.linked_tabs.data("scrollTabOptions");
77      thisOoptions.linked_options.linked_options = thisOoptions;
78    }
79
80    if (options.arrows_css) {
81      thisOoptions.arrows.arrow_left.css(options.arrows_css);
82      thisOoptions.arrows.arrow_right.css(options.arrows_css);
83    }
84
85    thisOoptions.initTabs = function () {
86      thisOoptions.wrapperBounds = thisOoptions.wrapper[0].getBoundingClientRect();
87      thisOoptions.scrollBounds = thisOoptions.scrollTab[0].getBoundingClientRect();
88      elements = $(thisOoptions.tabs);
89      if (elements.length) {
90        thisOoptions.firstTabBound = elements[0].getBoundingClientRect().left;
91        thisOoptions.lastTabBound = elements[elements.length - 1].getBoundingClientRect().right;
92      }
93      thisOoptions.minTranslate =
94        thisOoptions.wrapperBounds.right < thisOoptions.lastTabBound
95          ? thisOoptions.wrapperBounds.right - thisOoptions.lastTabBound - 3
96          : 0;
97      thisOoptions.disabled =
98        thisOoptions.lastTabBound - thisOoptions.wrapperBounds.left <= thisOoptions.scrollBounds.width;
99    };
100
101    thisOoptions.wrapper.css({
102      "white-space": "nowrap",
103      "min-width": "auto",
104      overflow: "visible",
105      "z-index": "1",
106    });
107    thisOoptions.scrollTab.css({
108      overflow: "hidden",
109      position: "relative",
110    });
111
112    thisOoptions.checkArrows = function (translate) {
113      if (translate === undefined) {
114        translate = thisOoptions.translate;
115      }
116
117      if (thisOoptions.disabled) {
118        thisOoptions.arrows.arrow_left.addClass("disabled");
119        thisOoptions.arrows.arrow_right.addClass("disabled");
120      } else {
121        if (translate >= thisOoptions.maxTranslate) {
122          thisOoptions.arrows.arrow_left.addClass("disabled");
123          thisOoptions.arrows.arrow_right.removeClass("disabled");
124        } else if (translate <= thisOoptions.minTranslate) {
125          thisOoptions.arrows.arrow_right.addClass("disabled");
126          thisOoptions.arrows.arrow_left.removeClass("disabled");
127        } else {
128          thisOoptions.arrows.arrow_left.removeClass("disabled");
129          thisOoptions.arrows.arrow_right.removeClass("disabled");
130        }
131      }
132    };
133
134    thisOoptions.directScroll = function (distance, delay, step) {
135      if (delay === undefined) {

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

353
354  el.each(function (i, scrollTab) {
355    _scrollTab(scrollTab, options);
356  });
357};