https://www.nordsee-zeitung.de/Scripts/Custom/NavSlider.js?_=419e15c6

1
2
3function Init_SliderNav() {
4   var swiper = new Swiper('#SliderNav .swiper-container', {
5      preventClicks: true,
6      slidesPerView: 'auto',
7      spaceBetween: 0,
8      navigation: {
9         nextEl: '#SliderNav .swiper-button-next.SwiperNavIcon',
10         prevEl: '#SliderNav .swiper-button-prev.SwiperNavIcon'
11      },
12      on: {
13         click: function (swiper, event) {
14            let oClickedItem = event.target;
15
16            var sliderDropDown = $('#SliderNav').parent().find('.SliderDropDown');
17
18            //check second click if alread opened
19            if ($(sliderDropDown).find('ul[class*="dropdown-menu"]').is(':visible')) {
20               let classList = $(oClickedItem).closest('.dropdown').find('.wcms-nav-second-level').attr('class');
21               console.log('class ' + classList);
22               var openClassList = $(sliderDropDown).find('ul[class*="dropdown-menu"]').attr('class');
23               console.log('class ' + openClassList);
24               console.log('already opened....' + $(oClickedItem).attr('href'));
25
26
27
28               if (classList == openClassList) {
29                  //close if it is a structure node
30                  if ($(oClickedItem).attr('href') == '#') {
31                     $('.DesktopDropDown').empty();
32                     event.stopPropagation();
33                     return;
34                  }
35
36                  console.log('stopPropagation...');
37                  $(sliderDropDown).empty();
38                  window.location.href = $(oClickedItem).attr('href');
39                  event.stopPropagation();
40                  return;
41               }
42               else {
43                  console.log('close thisone');
44                  $(sliderDropDown).empty();
45               }
46            }
47
48            console.log('item ' + oClickedItem);
49            if ($(oClickedItem).hasClass("dropdown-toggle")) {
50
51               let classList = $(oClickedItem).closest('.dropdown').find('.wcms-nav-second-level').attr('class');
52               console.log('class ' + classList);
53
54               $(sliderDropDown).empty();
55
56
57               let oDropdown = $(oClickedItem).closest('.dropdown').find('.wcms-nav-second-level').clone().appendTo(sliderDropDown);
58
59               var isMobile = window.matchMedia("only screen and (max-width: 767px)").matches;
60
61               if (isMobile) {
62                  // set mobile layout and add header              
63                  $(sliderDropDown).prepend('<div class="DropDownNavHeader"><img class="logo" src="/Layout/Custom/Images/Logos/Logo.svg"/><img class="mobileclose" src="/Layout/Custom/Images/Titelseiten/BurgerMenuClose.svg"/></div>');
64                  let NavHeader = '<li class="DropDownNavHeader"><a href=' + $(oClickedItem).attr('href') + '>' + $(oClickedItem).html() + '</a></li>';
65                  $(sliderDropDown).find('ul').prepend(NavHeader);
66                  $(sliderDropDown).css('width', '0px');
67                  $(oDropdown).show(0, $(sliderDropDown).animate({ 'width': '90%' }, 175));
68               }
69               else {
70                  //set desktop layout
71                  let oNavLeft = document.getElementsByClassName("SliderNavMenu")[0].getBoundingClientRect().x;
72                  let oleftPosition = oClickedItem.getBoundingClientRect().x - oNavLeft;
73                  $(sliderDropDown).css('left', oNavLeft + oleftPosition + 'px');
74                  $(sliderDropDown).css('top', oClickedItem.getBoundingClientRect().y + 52 + 'px');
75                  $(sliderDropDown).css('width', 'unset');
76                  $(sliderDropDown).css('height', '0px');
77                  $(oDropdown).show(0, $(sliderDropDown).animate({ 'height': 'auto' }, 100));
78               }
79               event.stopPropagation();
80            }
81
82         }
83      },
84   });
85
86   let isMobile = window.matchMedia("only screen and (max-width: 767px)").matches;
87   if (!isMobile) {
88      $('#SliderNav').on('mouseover', function (event) {
89
90         let oHoverItem = event.target;
91         if ($(oHoverItem).hasClass("dropdown-toggle")) {
92
93            let sliderDropDown = $('#SliderNav').parent().find('.SliderDropDown');
94            $(sliderDropDown).empty();
95            let oDropdown = $(oHoverItem).closest('.dropdown').find('.wcms-nav-second-level').clone().appendTo(sliderDropDown);
96
97
98            //set desktop layout
99            let oNavLeft = document.getElementsByClassName("SliderNavMenu")[0].getBoundingClientRect().x;
100            let oleftPosition = oHoverItem.getBoundingClientRect().x - oNavLeft;
101            $(sliderDropDown).css('left', oNavLeft + oleftPosition + 'px');
102            $(sliderDropDown).css('top', oHoverItem.getBoundingClientRect().y + 52 + 'px');
103            $(sliderDropDown).css('width', 'unset');
104            $(sliderDropDown).css('height', '0px');

105            $(oDropdown).show(0, $(sliderDropDown).animate({ 'height': 'auto' }, 100));
106            event.stopPropagation();
107         }
108      });
109      //todo close on scroll
110      $(window).scroll(function () {
111         //PMODIF JST 2023-07-27 empty special dropdown desktop nav
112         if ($('.SliderDropDown').find('ul[class*="wcms-nav-second-level"]').is(':visible')) {
113            $('.SliderDropDown').empty();
114         }
115      });
116
117      //PMODIF JST 2023-07-27 empty special dropdown desktop nav
118      $(document).click(function (event)
119      {
120         if ($('.SliderDropDown').find('ul[class*="wcms-nav-second-level"]').is(':visible')) {
121            $('.SliderDropDown').empty();
122         }
123      });
124   }
125
126   if (isMobile) {
127      //PMODIF JST 2023-07-27 empty special dropdown mobile
128      $(document).click(function (event)
129      {
130         if ($('.SliderDropDown').find('ul[class*="wcms-nav-second-level"]').is(':visible')) {
131            $('.SliderDropDown').empty();
132            $('.SliderDropDown').css('width', '0px');
133         }
134      });
135   }
136}
137
138
139$(document).ready(function () {
140   Init_SliderNav();
141});