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

328      thisOoptions.checkArrows();
329
330      if (thisOoptions.onAfterResize && typeof thisOoptions.onAfterResize == "function") {
331        thisOoptions.onAfterResize(thisOoptions);
332      }
333    };
334
335    _scrollTab.data("scrollTabOptions", thisOoptions);
336    _scrollTab.data("scrollTabOptions").addArrowsEvents();
337    _scrollTab.data("scrollTabOptions").addTabsEvents();
338    _scrollTab.data("scrollTabOptions").addWrapperEvents();
339    _scrollTab.addClass("arrow_scroll_init").addClass("swipeignore");
340    if (arrow_right !== undefined && arrow_right.length) {
341      thisOoptions.arrows.arrow_width = thisOoptions.arrows.arrow_right[0].getBoundingClientRect().width;
342    }
343    _scrollTab.data("scrollTabOptions").resize();
344    delete thisOoptions;
345  }
346
347  var options = $.extend(
348    {
349      translate: 1,
350      translateSpeed: 2,
351      directTranslate: 150,
352      maxTranslate: 0,
353      touch: {},
354      arrows_css: false,
355      tabs_wrapper: ".nav-tabs",
356      tab_item: "> li",
357      onResize: false,
358      outer_wrapper: "",
359      width_grow: 9,
360    },
361    options
362  );
363
364  var el = $(this);
365
366  if (el.hasClass("arrow_scroll_init")) return false;
367
368  el.each(function (i, scrollTab) {
369    _scrollTab(scrollTab, options);
370  });
371};