https://www.esl.ch/themes/custom/esl_theme/assets/styles/pages/hom…/homepage-country-list.js?tlvj14

1(function(Drupal, $) {
2  Drupal.behaviors.homepageCountryList = {
3    attach: function(context, settings) {
4
5      // Avoid multiple triggers of this
6      if (context !== document) {
7          return;
8      }
9
10      let currentSwiper = null;
11      let activeTab = $(".language-list-wrapper .form-radios .form-item:first-child");
12      activeTab.addClass('active');
13
14      // Breakpoint for dual-column layout without Swiper.
15      const breakpoint = window.matchMedia('(min-width:768px)');
16
17      const breakpointChecker = function () {
18        // if larger viewport and multi-row layout needed
19        if (breakpoint.matches === true) {
20          destroySwiper();
21        }
22        else if (breakpoint.matches === false) {
23          buildSwiper();
24        }
25      }
26      // Watch for viewport size changes.
27      breakpoint.addEventListener("change", () => {
28          breakpointChecker();
29      });
30      // Kickstart.
31      breakpointChecker();
32
33      // Check if Swiper should be shown.
34      function showSwiper() {
35        if (breakpoint.matches === false) {
36          return true;
37        } else {
38          return false;
39        }
40      }
41
42      function destroySwiper() {
43        if (currentSwiper) {
44          currentSwiper.destroy(true, true);
45          currentSwiper = undefined;
46        }
47      }
48
49      function getDirection() {
50        let windowWidth = window.innerWidth;
51        let direction = windowWidth <= 375 ? 'horizontal' : 'horizontal';
52        return direction;
53      }
54
55      // Builds the Swiper.
56      function buildSwiper() {
57        if (!showSwiper()) {
58          return;
59        }
60
61        let targetElem = $('.country-container[data-country="'+ activeTab.attr('data-country-label') +'"]');
62        let swiperElem = targetElem.find(".homepage-country-list__container");
63
64        let mySwiper = new Swiper(`#${swiperElem.attr("id")}`, {
65          lazy: true,
66          slidesPerView: "2.2",
67          centeredSlides: false,
68          a11y: true,
69          keyboardControl: true,
70          grabCursor: true,
71          spaceBetween: 10,
72          loop: false,
73          loopFillGroupWithBlank: false,
74          direction: getDirection(),
75          on: {
76            resize: function () {
77              mySwiper.changeDirection(getDirection());
78            }
79          },
80          watchOverflow: true,
81        });
82
83        currentSwiper = mySwiper;
84      }
85
86      // Change tabs action.
87      $(once('click-items', '.language-list-wrapper .form-radios .form-item', context)).click(function() {
88        activeTab = $(this);
89        // Remove all other active classes.
90        $(this, context).addClass('active').siblings().removeClass('active');
91        $('.country-container').hide();
92        // Show the active tab
93        $('.country-container[data-country="'+ $(this).attr('data-country-label') +'"]').show();
94        // Destroy any existing Swipers.
95        destroySwiper();
96        // Add the new Swiper.
97        buildSwiper();
98      });
99
100    }
101  };
102})(Drupal, jQuery);