https://www.voestalpine.com/blog/wp-content/themes/l2child23/assets/js/scripts.js?ver=1.0.0

1document.addEventListener("DOMContentLoaded", function() {
2  const containers = document.querySelectorAll('.dce-acf-repeater-item');
3  if (containers.length > 0) {
4    containers.forEach(container => {
5      const widthElement = container.querySelector('[l2-data-width]');
6      if (widthElement) {
7        const width = widthElement.getAttribute('l2-data-width');
8        container.style.cssText = `flex-basis: ${width} !important;`;
9      } else {
10      }
11    });
12  } else {
13  }
14});
15
16
17
18// Get all answer options
19const answerOptions = document.querySelectorAll('.ays-quiz-answers label');
20
21// Loop through each answer option
22answerOptions.forEach(answer => {
23  // Add click event listener to each answer option
24  answer.addEventListener('click', function() {
25    // Delay execution for 500 milliseconds
26    setTimeout(() => {
27      // Check if the selected answer is correct
28      if (this.classList.contains('correct')) {
29        // Add 'answered' class to the grandparent div of the answer option
30        this.parentElement.parentElement.classList.add('answered');
31      }
32    }, 500);
33  });
34});
35
36
37// theiaStickySidebar
38
39jQuery(document).ready(function() {
40  jQuery('.l2-content-container, .l2-scroll-container').theiaStickySidebar({
41    // Settings
42    additionalMarginTop: 80,
43    disableOnResponsiveLayouts: true
44  });
45});
46
47// LOAD MORE BTN
48
49document.addEventListener('DOMContentLoaded', function() {
50  // Get references to the articles and the load more button
51  var articles = document.querySelectorAll('.l2-load-more-grid article');
52  var loadMoreBtn = document.querySelector('.l2-load-more-btn');
53
54  // Set the initial display of articles
55  for (var i = 0; i < articles.length; i++) {
56    if (i >= 3) {
57      articles[i].style.display = 'none';
58    }
59  }
60
61  var visibleArticles = document.querySelectorAll('.l2-load-more-grid article');
62  if (visibleArticles.length > 3) {
63    loadMoreBtn.style.display = 'block';
64  }
65  // Add event listener to the load more button
66  if (loadMoreBtn) {
67    loadMoreBtn.addEventListener('click', function() {
68      event.preventDefault();
69      // Get the number of currently visible articles
70
71      var invisibleArticles = document.querySelectorAll('.l2-load-more-grid article:not([style*="display: none"])').length;
72
73      // Calculate the index of the next set of articles to show
74      var startIndex = invisibleArticles;
75      var endIndex = invisibleArticles + 9;
76
77      // Display the next set of articles
78      for (var i = startIndex; i < endIndex; i++) {
79        if (articles[i]) {
80          articles[i].style.display = 'block';
81        }
82      }
83
84      // Disable the load more button if all articles have been shown
85      if (endIndex >= articles.length) {
86        loadMoreBtn.disabled = true;
87        loadMoreBtn.style.display = 'none';
88      }
89    });
90  }
91});
92
93document.addEventListener('click', function(event) {
94  // Check if the clicked element matches the specified selector
95  if (event.target.matches('.l2-scroll-headline h6') || event.target.matches('.l2-scroll-guide a') || event.target.matches('.l2-scroll-guide li')) {
96    // If the clicked element matches either of the two selectors, toggle the 'l2-open' class on the '.l2-scroll-guide' element
97    var scrollGuideDiv = document.querySelector('.l2-scroll-guide');
98    var scrollHeadline = document.querySelector('.l2-scroll-headline');
99    scrollGuideDiv.classList.toggle('l2-open');
100    scrollHeadline.classList.toggle('l2-minus');
101  }
102});
103
104jQuery(document).ready(function($) {
105  $('#totop_button').click(function(e) {
106    e.preventDefault();
107
108    // Scroll to top
109    $('html, body').animate({ scrollTop: 0 }, 'slow', function() {
110      // After scrolling is done, move focus to a top element
111      const focusTarget = document.getElementById('page-top') || document.querySelector('main') || document.body;
112      if (focusTarget) {
113        focusTarget.setAttribute('tabindex', '-1'); // Make sure it can be focused
114        focusTarget.focus();
115      }
116    });
117  });
118});
119
120
121/* NEWS CAROUSEL POSITION - SCROLLING */
122
123document.addEventListener("DOMContentLoaded", function() {
124    let observer = new MutationObserver(mutations => {
125        mutations.forEach(mutation => {
126            if (mutation.target.style.display === 'none') {
127                let dceWrapperCarousel = document.querySelector('.dce-posts-container .dce-wrapper-carousel');
128                if (dceWrapperCarousel) {
129                    dceWrapperCarousel.style.transform = 'none !important';
130                }
131            }
132        });
133    });
134
135    let target = document.querySelector('.dce-posts-container .swiper-pagination-lock');
136    if(target) {
137        observer.observe(target, { attributes: true, attributeFilter: ['style'] });
138    }
139});
140
141/* BOX SHADOW STICKY TITLE */
142
143window.addEventListener('scroll', function() {
144    var progressBar = document.querySelector('.l2-progress-bar-container');
145
146    // Only proceed if the progressBar container exists
147    if (!progressBar) return;
148
149    var theBar = progressBar.querySelector('.elementor-scrolling-tracker-horizontal');
150    var footer = document.querySelector('footer');
151
152    var rect1 = progressBar.getBoundingClientRect();
153    var rect2 = footer.getBoundingClientRect();
154
155    var overlap = !(rect1.right < rect2.left || 
156                    rect1.left > rect2.right || 
157                    rect1.bottom < rect2.top || 
158                    rect1.top > rect2.bottom);
159
160    if (overlap) {
161        theBar.style.opacity = '0';

162        progressBar.style.boxShadow = 'none';
163    } else {
164        progressBar.style.boxShadow = '0px 4px 4px 0px #E3E3E3';
165        theBar.style.opacity = '1';
166    }
167});
168
169
170document.addEventListener('DOMContentLoaded', function() {
171    if(document.body.classList.contains('home')) {
172        window.dispatchEvent(new Event('resize'));
173    }
174});
175
176// BLOCK MOUSE OVER WHEN TABBBING
177// document.addEventListener('DOMContentLoaded', () => {
178//   const body = document.body;
179
180//   let usingKeyboard = false;
181
182//   // Detect tab key (keyboard navigation)
183//   document.addEventListener('keydown', (e) => {
184//     if (e.key === 'Tab') {
185//       if (!usingKeyboard) {
186//         usingKeyboard = true;
187//         body.classList.add('using-keyboard');
188//       }
189//     }
190//   });
191
192//   // Detect mouse movement and switch back
193//   document.addEventListener('mousemove', () => {
194//     if (usingKeyboard) {
195//       usingKeyboard = false;
196//       body.classList.remove('using-keyboard');
197//     }
198//   });
199// });
200
201
202/* FIXES ELEMENTOS -1 FOR SUBMENU ITEMS */
203document.addEventListener('DOMContentLoaded', function () {
204  // console.log('Fixing Elementor submenus tabindex...');
205
206  const menuToggles = document.querySelectorAll('[aria-expanded]');
207  // console.log(`Found ${menuToggles.length} menu toggles.`);
208
209  menuToggles.forEach(function(toggle, index) {
210      // const label = toggle.innerText.trim() || `Toggle ${index}`;
211      // console.log(`Analyzing toggle: "${label}"`);
212
213      // Try to find the submenu inside the parent or sibling elements
214      let submenu = toggle.nextElementSibling;
215
216      // fallback if next sibling is not a UL
217      if (!submenu || submenu.tagName.toLowerCase() !== 'ul') {
218          submenu = toggle.parentElement.querySelector('ul');
219      }
220
221      if (submenu) {
222          const links = submenu.querySelectorAll('a');
223          // console.log(`  -> Found submenu with ${links.length} links.`);
224
225          // Set initial tabindex based on expanded state
226          const expanded = toggle.getAttribute('aria-expanded') === 'true';
227          // console.log(`  -> Menu is initially ${expanded ? 'OPEN' : 'CLOSED'}`);
228
229          links.forEach(function(link) {
230              link.setAttribute('tabindex', expanded ? '0' : '-1');
231          });
232
233          // Observer to monitor aria-expanded changes dynamically
234          const observer = new MutationObserver(function(mutations) {
235              mutations.forEach(function(mutation) {
236                  if (mutation.attributeName === 'aria-expanded') {
237                      const nowExpanded = toggle.getAttribute('aria-expanded') === 'true';
238                      // console.log(`Toggle "${label}" changed: now ${nowExpanded ? 'OPEN' : 'CLOSED'}`);
239
240                      links.forEach(function(link) {
241                          link.setAttribute('tabindex', nowExpanded ? '0' : '-1');
242                      });
243                  }
244              });
245          });
246
247          observer.observe(toggle, { attributes: true });
248      } else {
249          // console.warn(`  -> No submenu found for "${label}"`);
250      }
251  });
252
253  // console.log('Finished setting up observers.');
254});
255
256
257// DISABLE MOUSE ON TABBING
258(function() {
259  let mouseEnabled = true;
260  function disableMouse() {
261    if (mouseEnabled) {
262      document.body.style.pointerEvents = 'none';
263      mouseEnabled = false;
264    }
265  }
266  function enableMouse() {
267    if (!mouseEnabled) {
268      document.body.style.pointerEvents = 'auto';
269      mouseEnabled = true;
270    }
271  }
272  document.addEventListener('keydown', (e) => {
273    if (e.key === 'Tab') {
274      disableMouse();
275    }
276  });
277  document.addEventListener('mousemove', () => {
278    enableMouse();
279  });
280})();
281
282
283
284
285// // SCROLLGUIDE AND READ PROGRESS ACCESSIBILITY FIX
286// function getZoomLevel() {
287//   return window.devicePixelRatio || 1;
288// }
289
290// function applyZoomStyles() {
291//   const zoomLevel = getZoomLevel();
292
293//   const progressContainers = document.querySelectorAll(
294//     '.l2-progress-bar-container, .l2-read-progress'
295//   );
296//   const scrollContainer = document.querySelector('.l2-scroll-container');
297
298//   if (zoomLevel > 2) {
299//     // Hide progress containers

300//     progressContainers.forEach(el => {
301//       el.style.display = 'none';
302//     });
303
304//     // Override fixed positioning
305//     if (scrollContainer) {
306//       scrollContainer.style.setProperty('position', 'relative', 'important');
307//     }
308//   } else {
309//     // Restore default display (optional, in case they zoom back out)
310//     progressContainers.forEach(el => {
311//       el.style.display = '';
312//     });
313
314//     if (scrollContainer) {
315//       scrollContainer.style.setProperty('position', '', 'important');
316//     }
317//   }
318// }
319
320// // Initial check and bind to resize
321// applyZoomStyles();
322// window.addEventListener('resize', applyZoomStyles);
323
324
325
326(function ($) {
327  $(function () {
328    var $btn = $('#trigger_search');
329    if (!$btn.length) return;
330
331    var $region = $('.l2-search-bar').first();
332    if (!$region.length) return;
333
334    // Ensure region has a unique ID for aria-controls
335    if (!$region.attr('id')) {
336      var baseId = 'l2-search-bar';
337      var uniqueId = baseId;
338      var i = 1;
339      while (document.getElementById(uniqueId)) uniqueId = baseId + '-' + i++;
340      $region.attr('id', uniqueId);
341    }
342
343    // Wire up ARIA
344    $btn.attr({
345      'aria-controls': $region.attr('id'),
346      'aria-expanded': 'false',
347      'aria-controls': 'id'
348    });
349    $region.attr({
350      'role': 'region',
351      'hidden': '' // enforce hidden as default
352    });
353
354    // Provide an accessible label if missing
355    if (!$region.attr('aria-labelledby') && !$region.attr('aria-label')) {
356      var $heading = $region.find('h1,h2,h3,h4,h5,h6,[role="heading"]').first();
357      if ($heading.length) {
358        if (!$heading.attr('id')) $heading.attr('id', $region.attr('id') + '-label');
359        $region.attr('aria-labelledby', $heading.attr('id'));
360      } else {
361        $region.attr('aria-label', 'Search');
362      }
363    }
364
365    function openRegion() {
366      $btn.attr('aria-expanded', 'true');
367      $region.removeAttr('hidden');
368
369      var $focusTarget = $region.find('input, select, textarea, button, [tabindex]:not([tabindex="-1"])').filter(':visible').first();
370      if ($focusTarget.length) $focusTarget.trigger('focus');
371    }
372
373    function closeRegion() {
374      $btn.attr('aria-expanded', 'false');
375      $region.attr('hidden', '');
376      $btn.trigger('focus');
377    }
378
379    function toggleRegion() {
380      if ($btn.attr('aria-expanded') === 'true') {
381        closeRegion();
382      } else {
383        openRegion();
384      }
385    }
386
387    $btn.on('click', function (e) {
388      e.preventDefault();
389      toggleRegion();
390    });
391
392    $region.on('keydown', function (e) {
393      if (e.key === 'Escape' || e.key === 'Esc') {
394        e.stopPropagation();
395        closeRegion();
396      }
397    });
398
399    $(document).on('mousedown', function (e) {
400      if ($btn.attr('aria-expanded') === 'true') {
401        var isClickInside = $(e.target).closest($region).length || $(e.target).closest($btn).length;
402        if (!isClickInside) closeRegion();
403      }
404    });
405  });
406})(jQuery);