https://www.hologic.es/themes/custom/hologic/site-studio-helper/st-tabs.js?tm4wcr

1(function($, Drupal, drupalSettings, once){
2  "use strict";
3
4  Drupal.behaviors.HologicSTTabs = {
5    attach: function (context, settings) {
6      $(document).ready(function() {
7
8        var mediaQuery = window.matchMedia("(min-width: 993px)");
9
10        $(once('st-tabs', '.st-tab', context)).each(function() {
11
12          var classes = {
13            activeClass: 'current',
14            tabList: '.st-tab-list',
15            tabContent: '.st-tab__inner',
16            tabTrigger: '.st-tab__trigger',
17            decorativeElement: '.st-decorative-nav',
18          };
19          var container = $(this);
20          var tabNav = $(container, context).find(classes.tabTrigger);
21          var heightTabNav = tabNav.innerHeight();
22          var widthTabNav = tabNav.innerWidth();
23
24          // Add support when the browser is resized.
25          $(window).resize(function(){
26            heightTabNav = tabNav.innerHeight();
27            widthTabNav = tabNav.innerWidth();
28          });
29
30          var decorativeElement = $(container, context).find(classes.decorativeElement);
31          var navWrapper = $(container, context).find(classes.tabList);
32          var needScroll = false;
33          if (tabNav.length > 2) {
34            navWrapper.addClass('st-tab-list--d-flex');
35            needScroll = true;
36          }
37
38           // Activate Tab item.
39           function activateTab(index){
40             // Parse each tab container.
41             // Apply changes for tab item.
42             $(container, context)
43               .find(classes.tabContent)
44               .eq(index)

45               .addClass(classes.activeClass)
46               .siblings(classes.tabContent)
47               .removeClass(classes.activeClass);
48             // Apply changes for tab button.
49            $(container, context)
50              .find(classes.tabTrigger)
51              .eq(index)
52              .addClass(classes.activeClass)
53              .attr('aria-selected', true)
54              .attr('tabindex', 0)
55              .siblings()
56              .removeClass(classes.activeClass)
57              .attr('tabindex', -1)
58              .attr('aria-selected', false);
59           }
60
61          function  scrollToItem(step) {
62            if (needScroll) {
63              navWrapper.animate({scrollLeft: step}, 500);
64            }
65          }
66
67          // Set decorativeElement to correct item if resolution changes.
68          function handleTabletChange(e) {
69            var activeTabIndex = $(classes.tabTrigger, context).parents(classes.tabList).children(`${classes.tabTrigger}.current`).index(`${classes.tabTrigger}.current`);
70            var heightNav = $(container, context).find(classes.tabTrigger).innerHeight();
71            var widthNav = $(container, context).find(classes.tabTrigger).innerWidth();
72            var stepForElement;
73            if (e.matches) {
74              stepForElement = heightNav * activeTabIndex;
75              decorativeElement.css({
76                left: 0,
77                top: stepForElement + "px"
78              });
79            }
80            else {
81              stepForElement = widthNav * activeTabIndex;
82              decorativeElement.css({
83                top: 0,
84                left: stepForElement + "px"
85              });
86              scrollToItem(stepForElement);
87            }
88          }
89
90          var tagInfo = $(container, context).find('.st-tab__utm-tag');
91          if (tagInfo.length) {
92            var text = tagInfo.text();
93            var parentButtonIndex = tagInfo.parent(classes.tabTrigger).index();
94            if (window.location.href.includes(text)) {
95              activateTab(parentButtonIndex);
96            } else {
97              activateTab(0);
98            }
99          }
100          else {
101            // Set active by default first tab.
102            activateTab(0);
103          }
104
105          mediaQuery.addListener(handleTabletChange)
106
107          handleTabletChange(mediaQuery)
108
109          // On click event processing.
110          $(container, context)
111            .find(`${classes.tabTrigger}`)
112            .on('click', function tabTrigger(e) {
113              // Disable the default action on clicking item.
114              e.preventDefault();
115
116              var tabIndex = $(this).parents(classes.tabList).children(classes.tabTrigger).index(this);
117              var stepForBlock;
118              if (mediaQuery.matches) {
119                stepForBlock = heightTabNav * tabIndex;
120                decorativeElement.css({
121                  top: stepForBlock + "px"
122                });
123              }
124              else {
125                stepForBlock = widthTabNav * tabIndex;
126                // Start scroll block if more than 2 nav buttons.
127                scrollToItem(stepForBlock);
128                decorativeElement.css({
129                  left: stepForBlock + "px"
130                });
131              }
132              activateTab(tabIndex);
133            });
134        });
135      })
136    }
137  };
138
139})(jQuery, Drupal, drupalSettings, once);