https://proplastic.pro/bitrix/templates/aspro-lite/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      if (thisOoptions.offset) {
88        thisOoptions.scrollBounds.width += thisOoptions.offset;
89      }
90      elements = $(thisOoptions.tabs);
91      if (elements.length) {
92        thisOoptions.firstTabBound = elements[0].getBoundingClientRect().left;
93        thisOoptions.lastTabBound = elements[elements.length - 1].getBoundingClientRect().right;
94      }
95      thisOoptions.minTranslate =
96        thisOoptions.wrapperBounds.right < thisOoptions.lastTabBound
97          ? thisOoptions.wrapperBounds.right - thisOoptions.lastTabBound - 3
98          : 0;
99      thisOoptions.disabled =
100        thisOoptions.lastTabBound - thisOoptions.wrapperBounds.left <= thisOoptions.scrollBounds.width;
101    };
102
103    thisOoptions.wrapper.css({
104      "white-space": "nowrap",
105      "min-width": "auto",
106      overflow: "visible",
107      "z-index": "1",
108    });
109    thisOoptions.scrollTab.css({
110      overflow: "hidden",
111      position: "relative",
112    });
113
114    thisOoptions.checkArrows = function (translate) {
115      if (translate === undefined) {
116        translate = thisOoptions.translate;
117      }
118      // if (!translate && thisOoptions.maxTranslate === thisOoptions.minTranslate) {
119      //   return;
120      // }
121      if (thisOoptions.disabled) {
122        thisOoptions.arrows.arrow_left.addClass("disabled");
123        thisOoptions.arrows.arrow_right.addClass("disabled");
124      } else {
125        if (translate >= thisOoptions.maxTranslate) {
126          thisOoptions.arrows.arrow_left.addClass("disabled");
127          thisOoptions.arrows.arrow_right.removeClass("disabled");
128        } else if (translate <= thisOoptions.minTranslate) {
129          thisOoptions.arrows.arrow_right.addClass("disabled");
130          thisOoptions.arrows.arrow_left.removeClass("disabled");
131        } else {
132          thisOoptions.arrows.arrow_left.removeClass("disabled");
133          thisOoptions.arrows.arrow_right.removeClass("disabled");
134        }
135      }
136    };
137
138    thisOoptions.directScroll = function (distance, delay, step) {
139      if (delay === undefined) {

140        delay = 5;
141      }
142      clearInterval(thisOoptions.timerMoveDirect);
143      var newTranslate = thisOoptions.translate + distance;
144
145      if (newTranslate > thisOoptions.maxTranslate) {
146        newTranslate = thisOoptions.maxTranslate;
147      } else if (newTranslate < thisOoptions.minTranslate) {
148        newTranslate = thisOoptions.minTranslate;
149      }
150      var tmpTranslate = thisOoptions.translate;
151      thisOoptions.translate = newTranslate;
152
153      if (delay == 0) {
154        thisOoptions.translate = newTranslate;
155        thisOoptions.wrapper.css({
156          transform: "translateX(" + thisOoptions.translate + "px)",
157        });
158      } else {
159        if (step === undefined) {
160          step = 1;
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    thisOoptions.addArrowsEvents = function () {
184      thisOoptions.arrows.arrow_right.on("mouseenter", function () {
185        thisOoptions.arrows.arrow_left.removeClass("disabled");
186        thisOoptions.timerMoveLeft = setInterval(function () {
187          if (thisOoptions.translate < thisOoptions.minTranslate) {
188            clearInterval(thisOoptions.timerMoveLeft);
189            thisOoptions.arrows.arrow_right.addClass("disabled");
190          } else {
191            thisOoptions.translate -= thisOoptions.translateSpeed;
192            thisOoptions.wrapper.css({
193              transform: "translateX(" + thisOoptions.translate + "px)",
194            });
195          }
196        }, 10);
197      });
198
199      thisOoptions.arrows.arrow_right.on("mouseleave", function () {
200        clearInterval(thisOoptions.timerMoveLeft);
201      });
202
203      thisOoptions.arrows.arrow_right.on("click", function () {
204        thisOoptions.directScroll(-thisOoptions.directTranslate);
205        thisOoptions.arrows.arrow_left.removeClass("disabled");
206      });
207
208      thisOoptions.arrows.arrow_right.on("touchend", function () {
209        setTimeout(function () {
210          clearInterval(thisOoptions.timerMoveLeft);
211        }, 1);
212      });
213
214      thisOoptions.arrows.arrow_left.on("mouseenter", function () {
215        thisOoptions.arrows.arrow_right.removeClass("disabled");
216        thisOoptions.timerMoveRight = setInterval(function () {
217          if (thisOoptions.translate >= thisOoptions.maxTranslate) {
218            clearInterval(thisOoptions.timerMoveRight);
219            thisOoptions.arrows.arrow_left.addClass("disabled");
220          } else {
221            thisOoptions.translate += thisOoptions.translateSpeed;
222            thisOoptions.wrapper.css({
223              transform: "translateX(" + thisOoptions.translate + "px)",
224            });
225          }
226        }, 10);
227      });
228
229      thisOoptions.arrows.arrow_left.on("mouseleave", function () {
230        clearInterval(thisOoptions.timerMoveRight);
231      });
232
233      thisOoptions.arrows.arrow_left.on("click", function () {
234        thisOoptions.directScroll(thisOoptions.directTranslate);
235        thisOoptions.arrows.arrow_right.removeClass("disabled");
236      });
237
238      thisOoptions.arrows.arrow_left.on("touchend", function () {
239        setTimeout(function () {
240          clearInterval(thisOoptions.timerMoveRight);
241        }, 1);
242      });
243    };
244
245    thisOoptions.addTabsEvents = function () {
246      thisOoptions.tabs.on("click", function () {
247        var leftScrollBound = thisOoptions.scrollBounds.left;
248        var rightScrollBound = thisOoptions.scrollBounds.right;
249
250        var tabBounds = this.getBoundingClientRect();
251        var leftTabScrollBound = tabBounds.left - thisOoptions.arrows.arrow_width;
252        var rightTabScrollBound = tabBounds.right + thisOoptions.arrows.arrow_width;
253
254        if (leftTabScrollBound < leftScrollBound) {
255          thisOoptions.directScroll(leftScrollBound - leftTabScrollBound, 1, 2);
256        } else if (rightTabScrollBound > rightScrollBound) {
257          thisOoptions.directScroll(rightScrollBound - rightTabScrollBound, 1, 2);
258        }
259
260        thisOoptions.activeTab = $(this);
261
262        if (thisOoptions.linked_options !== undefined) {
263          var this_index = $(this).index();
264          var linked_tab = $(thisOoptions.linked_options.tabs[this_index]);
265          var linked_tabs = {
266            leftScrollBound: thisOoptions.linked_options.scrollBounds.left,
267            rightScrollBound: thisOoptions.linked_options.scrollBounds.right,
268            tabBounds: linked_tab[0].getBoundingClientRect(),
269          };
270          if (linked_tabs.tabBounds.left < linked_tabs.leftScrollBound) {
271            thisOoptions.linked_options.directScroll(
272              linked_tabs.leftScrollBound -
273                linked_tabs.tabBounds.left +
274                thisOoptions.linked_options.arrows.arrow_width +
275                1,
276              0
277            );
278          } else if (linked_tabs.tabBounds.right > linked_tabs.rightScrollBound) {
279            thisOoptions.linked_options.directScroll(
280              linked_tabs.rightScrollBound -
281                linked_tabs.tabBounds.right -
282                thisOoptions.linked_options.arrows.arrow_width -
283                1,
284              0
285            );
286          }
287
288          thisOoptions.linked_options.activeTab = linked_tab;
289        }
290      });
291    };
292
293    thisOoptions.addWrapperEvents = function () {
294      thisOoptions.wrapper.on("touchstart", function (event) {
295        thisOoptions.touch.posPrev = event.originalEvent.changedTouches[0].pageX;
296        clearInterval(thisOoptions.timerMoveRight);
297        clearInterval(thisOoptions.timerMoveLeft);
298        clearInterval(thisOoptions.timerMoveDirect);
299      });
300
301      thisOoptions.wrapper.on("touchmove", function (event) {
302        thisOoptions.touch.posCurrent = event.originalEvent.changedTouches[0].pageX - thisOoptions.touch.posPrev;
303        thisOoptions.directScroll(thisOoptions.touch.posCurrent, 0);
304        thisOoptions.touch.posPrev = event.originalEvent.changedTouches[0].pageX;
305      });
306    };
307
308    thisOoptions.resize = function () {
309      if (thisOoptions.onBeforeResize && typeof thisOoptions.onBeforeResize == "function") {
310        thisOoptions.onBeforeResize(thisOoptions);
311      }
312
313      if (thisOoptions.onResize && typeof thisOoptions.onResize == "function") {
314        thisOoptions.onResize(thisOoptions);
315      }
316
317      if (thisOoptions.translate < thisOoptions.minTranslate) {
318        thisOoptions.directScroll(thisOoptions.minTranslate - thisOoptions.translate);
319      } else if (thisOoptions.translate > thisOoptions.maxTranslate) {
320        thisOoptions.directScroll(thisOoptions.maxTranslate - thisOoptions.translate);
321      }
322
323      if (thisOoptions.activeTab !== undefined && thisOoptions.activeTab.length) {
324        var activeTabBounds = thisOoptions.activeTab[0].getBoundingClientRect();
325        if (activeTabBounds.left < thisOoptions.scrollBounds.left) {
326          thisOoptions.directScroll(thisOoptions.scrollBounds.left - activeTabBounds.left);
327        } else if (activeTabBounds.right > thisOoptions.scrollBounds.right) {
328          thisOoptions.directScroll(thisOoptions.scrollBounds.right - activeTabBounds.right);
329        }
330      }
331
332      thisOoptions.initTabs();

333      thisOoptions.checkArrows();
334
335      if (thisOoptions.onAfterResize && typeof thisOoptions.onAfterResize == "function") {
336        thisOoptions.onAfterResize(thisOoptions);
337      }
338    };
339
340    _scrollTab.data("scrollTabOptions", thisOoptions);
341    _scrollTab.data("scrollTabOptions").addArrowsEvents();
342    _scrollTab.data("scrollTabOptions").addTabsEvents();
343    _scrollTab.data("scrollTabOptions").addWrapperEvents();
344    _scrollTab.addClass("arrow_scroll_init").addClass("swipeignore");
345    if (arrow_right !== undefined && arrow_right.length) {
346      thisOoptions.arrows.arrow_width = thisOoptions.arrows.arrow_right[0].getBoundingClientRect().width;
347    }
348    _scrollTab.data("scrollTabOptions").resize();
349    delete thisOoptions;
350  }
351
352  var options = $.extend(
353    {
354      translate: 1,
355      translateSpeed: 2,
356      directTranslate: 150,
357      maxTranslate: 0,
358      touch: {},
359      arrows_css: false,
360      tabs_wrapper: ".nav-tabs",
361      tab_item: "> li",
362      onResize: false,
363      outer_wrapper: "",
364      width_grow: 9,
365      offset: 0,
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};