https://authentikare.com/js/main.js

1
2
3// Manage navbar styles
4const navbar = document.querySelector('.header');
5window.onscroll = () => {
6  if (window.scrollY > 10) {
7    navbar.classList.add('nav-active');
8  } else {
9    navbar.classList.remove('nav-active');
10  }
11};
12
13(function () {
14  // slide our values
15  const meetSectionExists = document.getElementById("our-values-slide");
16
17  if (meetSectionExists) {
18    const splide = new Splide('#our-values-slide', {
19      type: 'slide',
20      focus: 'left',
21      gap: 0,
22      classes: {
23        arrows: 'splide__arrows your-class-arrows',
24        arrow : 'splide__arrow your-class-arrow',
25        prev  : 'splide__arrow--prev your-class-prev',
26        next  : 'splide__arrow--next your-class-next',
27      },
28      autoWidth: false,
29      arrows: false,
30      pagination: false,
31      drag: false, 
32      breakpoints: {
33        960: {
34          perPage: 1,
35          gap: 24,
36          arrows: true,
37          pagination: true,
38          drag: true, 
39        },
40      },
41    });
42
43    splide.mount();
44  }
45
46  // slide standards
47  const standardsSectionExists = document.getElementById("standards-slide");
48
49  if (standardsSectionExists) {
50    const splidestandards = new Splide('#standards-slide', {
51      type: 'slide',
52      focus: 'left',
53      gap: 0,
54      classes: {
55        arrows: 'splide__arrows your-class-arrows',
56        arrow : 'splide__arrow your-class-arrow',
57        prev  : 'splide__arrow--prev your-class-prev',
58        next  : 'splide__arrow--next your-class-next',
59      },
60      autoWidth: false,
61      arrows: false,
62      pagination: false,
63      drag: false, 
64      breakpoints: {
65        1030: {
66          perPage: 1,
67          gap: 16,
68          arrows: true,
69          pagination: true,
70          drag: true, 
71        },
72      },
73    });
74
75    splidestandards.mount();
76  }
77}());
78
79// tabs navigation
80function onTabClick(event) {
81  let activeTabs = document.querySelectorAll('.active');
82  if (event.target && event.target.dataset && event.target.dataset.id) {
83
84    activeTabs.forEach(function (tab) {
85      tab.className = tab.className.replace('active', '');
86    });
87
88    event.target.className += ' active';
89    document.getElementById(event.target.dataset.id).className += ' active';
90  }
91}
92
93// mobile navigation
94let currentIndex = 0;
95
96function onClickArrows(event) {
97  let activeTabs = document.querySelectorAll('.active');
98  let allTabs = document.querySelectorAll('.our-solutions__section-info-header');
99  const adFormatLabel = document.getElementById('ad-format__current');
100
101  let allTabsLabels = [];
102  allTabs.forEach((tab => allTabsLabels.push(tab.innerHTML)));
103
104  if (event.target && event.target.dataset && event.target.dataset.arrow) {
105    const current = event.target.dataset.arrow === 'left' ? -1 : 1;
106    currentIndex = currentIndex + current;
107    currentIndex = currentIndex >= allTabsLabels.length ? 0 : currentIndex;
108    currentIndex = currentIndex < 0 ? allTabsLabels.length - 1 : currentIndex;
109
110    adFormatLabel.innerHTML = allTabsLabels[currentIndex];
111
112    activeTabs.forEach(function (tab) {
113      tab.className = tab.className.replace('active', '');
114    });
115
116    event.target.className += ' active';
117    document.getElementById(currentIndex).className += ' active';
118  }
119}
120
121const adFormatButtons = document.getElementById('our-solutions__options');
122const signupButtons = document.getElementById('signup__options');
123const adFromatMobileNavigation = document.getElementById('our-solutions__options-mobile');
124
125if (adFormatButtons) {
126  adFormatButtons.addEventListener('click', onTabClick, false);
127}
128
129if (signupButtons) {
130  signupButtons.addEventListener('click', onTabClick, false);
131}
132
133if (adFromatMobileNavigation) {
134  adFromatMobileNavigation.addEventListener('click', onClickArrows, false);
135}
136
137// toggle component on our solutions page
138$(document).ready(function () {
139  function toggleComponentsBasedOnWidth() {
140    if ($(window).width() < 960) {
141      $('.our-solutions__solution__key-features__component p').not('.active p').slideUp();
142      $('.our-solutions__solution__key-features__component.active .arrow img').attr('src', './img/ui/arrow-dropdown-open.svg');
143    } else {
144      $('.our-solutions__solution__key-features__component p').slideDown();
145      $('.our-solutions__solution__key-features__component .arrow img').attr('src', './img/ui/arrow-dropdown-close.svg');
146    }
147  }
148
149  toggleComponentsBasedOnWidth();
150
151  $('.key-features__component-header').click(function () {
152    if ($(window).width() < 960) {
153      var component = $(this).closest('.our-solutions__solution__key-features__component');
154      var paragraph = component.find('p');
155      var arrow = component.find('.arrow img');
156
157      paragraph.slideToggle(400, function () {
158        if (paragraph.is(":visible")) {
159          arrow.attr('src', './img/ui/arrow-dropdown-open.svg');
160          component.addClass('active');
161        } else {
162          arrow.attr('src', './img/ui/arrow-dropdown-close.svg');
163          component.removeClass('active');
164        }
165      });
166
167      $('.our-solutions__solution__key-features__component').not(component).find('p').slide

167Up();
168      $('.our-solutions__solution__key-features__component').not(component).find('.arrow img').attr('src', './img/ui/arrow-dropdown-close.svg');
169      $('.our-solutions__solution__key-features__component').not(component).removeClass('active');
170    }
171  });
172
173  $(window).resize(toggleComponentsBasedOnWidth);
174});
175
176$(document).ready(function () {
177  $('.side-menu').change(function () {
178    if ($(this).is(':checked')) {
179      $('.header.nav-active').css('opacity', '1');
180    } else {
181      $('.header.nav-active').css('opacity', '0.95');
182    }
183  });
184});