1/* ================================================== 2 JS / ... / navigation-branch-functions.js 3 ==================================================*/ 4// version 1.0 07.05.2024 (km) 5// description: Alle Funktionen unabhängig von den Settings z.B. CalcHeight, AddScroll, 6 7// ==== INHALT ==== 8// 1. SETTING: openBranch 9// 2. SETTING: addBranchTitle 10// 3. SETTING: showCurrentPath 11 12 13// =========== SETTING: Ãffne Kinderbranch ========== 14/// @description: Ãffnet Unterseiten, Elemente bis zum vorgegebenen Level bekommen Pfeil über Klasse "hasChild" 15/// @require function: openChild, interaction_openChild 16/// @require setting: interaction_child_open, child_level 17 18export function openBranch(interaction, level){ 19 var topNavItemLink = jQuery('.accessible-megamenu-top-nav-item') 20 jQuery(topNavItemLink).each(function (i) { 21 jQuery('> ul', this).addClass('children-' + level) 22 jQuery('.sub-nav-group', this).each(function(){ 23 jQuery(this).wrapInner('<li><ul></ul></li>') 24 jQuery('> li', this).prepend(jQuery('> li > ul > .title-ebene', this)) 25 jQuery('> li', this).prepend(jQuery('> li > ul > .close-ebene', this)) 26 //Add back button 27 if( jQuery('> li', this).closest('.li-ebene-2').length > 0){ 28 jQuery('> li', this).prepend('<div class="back-ebene"><a class="back" href="javascript:void(0)">zurück</a></div>') 29 } 30 jQuery('.li-ebene-3 > a', this).last().focusout(function(e){ 31 var element = jQuery(this) 32 setTimeout(function() { 33 jQuery('.back-ebene a', element.closest('.sub-nav-group')).focus() 34 }, 100); 35 }) 36 }) 37 jQuery('li.li-ebene-1 > ul', this).wrap('<div></div>') 38 //jQuery('.l-navigation .accessible-megamenu-top-nav-item > ul').prepend('<li class="brand">' + jQuery('.l-header__brand')[0].innerHTML + '</li>') 39 for(var i=1; i<=level; i++){ 40 var child = '.li-ebene-2.hasChild' 41 var topParent = jQuery(child, this); 42 jQuery(topParent).each(function () { 43 //Bei touchdevice immer onclick 44 if(window.matchMedia("(pointer: coarse)").matches) { 45 jQuery(this).addClass('touchDevice') 46 if(jQuery(this).hasClass('hasChild')){ 47 if(jQuery('button.openChild', this).length == 0){ 48 jQuery('<button class="openChild" aria-label="Ãffne das Untermenü"><i class="fa-regular fa-arrow-right-long"></i></button>').insertAfter(jQuery('> a', this)) 49 interaction_openChild('click', jQuery('> button.openChild', this)) 50 } 51 52 } 53 } 54 // kleinere Bildschirme 55 if(window.matchMedia("(max-width: 992px)").matches) { 56 jQuery(this).addClass('smallerDevice') 57 } 58 // Titel sind vergeben und verlinkt 59 if(jQuery('> button.arrow', this).length == 0){ 60 interaction_openChild(interaction, jQuery('> a', this)) 61 } 62 // Keine Titel vergeben, nächste Ebene öffnet auf Klick des Buttons 63 else{ 64 interaction_openChild(interaction, jQuery('> button.arrow', this)) 65 } 66 }) 67 } 68 // var hideLevel = 1 + level 69 // var hideChild = '.li-ebene-' + hideLevel + '.hasChild' 70 // jQuery('> button.arrow', hideChild).remove() 71 // jQuery(hideChild).removeClass('hasChild') 72 73 74 }) 75 76 jQuery('.li-ebene-2 a.back').click(function(e){ 77 e.preventDefault() 78 jQuery(this).closest('ul').removeClass('ebene-open'); 79 jQuery(this).closest('ul').attr('aria-hidden', 'true').attr('aria-expanded', 'false'); 80 jQuery(this).closest('ul').removeClass('open'); 81 jQuery(this).closest('ul').prev().removeClass('open') 82 jQuery(this).closest('.currentParent').removeClass('currentParent'); 83 84 //Höhe auf geöffnete Ebene anpassen 85 var height = jQuery('> ul', jQuery(this).closest('.li-ebene-1')).attr('data-height') 86 jQuery('> ul', jQuery(this).closest('.li-ebene-1')).css('min-height', height + 'px') 87 }) 88 89 90 jQuery('.li-ebene-3 a.back').click(function(e){
91 e.preventDefault() 92 jQuery(this).closest('ul').removeClass('ebene-open'); 93 jQuery(this).closest('ul').attr('aria-hidden', 'true').attr('aria-expanded', 'false'); 94 jQuery(this).closest('ul').removeClass('open'); 95 jQuery(this).closest('ul').prev().removeClass('open') 96 jQuery(this).closest('.currentParent').removeClass('currentParent'); 97 98 //Höhe auf geöffnete Ebene anpassen 99 var height = jQuery('> ul', jQuery(this).closest('.li-ebene-2')).attr('data-height') 100 jQuery('> ul', jQuery(this).closest('.li-ebene-2')).css('min-height', height + 'px') 101 jQuery('> ul', jQuery(this).closest('.li-ebene-1')).css('min-height', height + 'px') 102 }) 103} 104 105/// @require function: openChild 106function interaction_openChild(interaction, element){ 107 // On Click 108 if(interaction == "click"){ 109 element.on("click", function (evnt) { 110 evnt.preventDefault(); 111 var ebeneUL = jQuery('+ ul', this); 112 // if(jQuery(this).hasClass('open')){ 113 // closeChild(ebeneUL, 'ebene-open', jQuery(this)) 114 // } 115 // else{ 116 // openChild(ebeneUL, 'ebene-open', jQuery(this)) 117 // } 118 openChild(ebeneUL, 'ebene-open', jQuery(this)) 119 }) 120 } 121 // On hover 122 else if(interaction == "hover"){ 123 element.on("mouseenter", function (evnt) { 124 evnt.preventDefault(); 125 var ebeneUL = jQuery('+ div > ul', this); 126 openChild(ebeneUL, 'ebene-open', jQuery(this)) 127 }) 128 element.on("focusin", function (evnt) { 129 evnt.preventDefault(); 130 var ebeneUL = jQuery('+ div > ul', this); 131 openChild(ebeneUL, 'ebene-open', jQuery(this)) 132 }) 133 } 134 // On Enter 135 element.keypress(function (evnt) { 136 evnt.preventDefault(); 137 var key = evnt.which; 138 var ebeneUL = jQuery('+ div > ul', this); 139 if (key == 13){ 140 openChild(ebeneUL, 'ebene-open', jQuery(this)) 141 } 142 }) 143} 144 145function openChild(ebeneUL, ebeneName, element){ 146 // Hide all open levels 147 jQuery('.sub-nav-group', element.closest('ul')).attr('aria-hidden', 'true'); 148 jQuery('.sub-nav-group', element.closest('ul')).attr('aria-expanded', 'false'); 149 jQuery('.sub-nav-group', element.closest('ul')).removeClass(ebeneName); 150 jQuery('.nav-item .currentParent').addClass('closeChild'); 151 jQuery('.nav-item').removeClass('openParent'); 152 jQuery('.nav-item button.openChild').removeClass('open') 153 jQuery('.nav-item > a').removeClass('open') 154 155 // Show current open level 156 setTimeout(function() { 157 jQuery(ebeneUL).addClass(ebeneName); 158 jQuery(ebeneUL).parent().addClass('currentParent'); 159 jQuery(ebeneUL).attr('aria-hidden', 'false').attr('aria-expanded', 'true'); 160 }, 100); 161 162 // Mark Parent 163 jQuery('li.nav-item').removeClass('open'); 164 element.parent().addClass('openParent'); 165 element.closest('.accessible-megamenu-top-nav-item').addClass('openParent'); 166 167 jQuery(element).addClass('open') 168 169 //Höhe auf geöffnete Ebene anpassen 170 jQuery('> ul', jQuery(element).closest('.li-ebene-2')).css('min-height', 'auto') 171 var height = 0 172 if(jQuery('> ul', jQuery(element).closest('.li-ebene-1')).attr("data-height")){ 173 console.log('inb') 174 } 175 else{ 176 var initialHeight = jQuery('> ul', jQuery(element).closest('.li-ebene-1')).outerHeight(true) || 0 177 jQuery('> ul', jQuery(element).closest('.li-ebene-1')).attr('data-height', initialHeight) 178 } 179 if(jQuery(ebeneUL).attr("data-height")){ 180 height = jQuery(ebeneUL).attr('data-height') 181 } 182 else{ 183 height = jQuery(ebeneUL).outerHeight(true) || 0 184 jQuery(ebeneUL).attr('data-height', height) 185 } 186 187 jQuery(element).closest('.sub-nav-group').css('min-height', height + 'px') 188 jQuery('> ul', jQuery(element).closest('.li-ebene-2')).css('min-height', '100%') 189 190} 191 192function closeChild(ebeneUL, ebeneName, element){ 193 // Hide all open levels 194 jQuery('.sub-nav-group', element.closest('ul')).attr('aria-hidden', 'true'); 195 jQuery('.sub-nav-group', element.closest('ul')).attr('aria-expanded', 'false'); 196 jQuery('.sub-nav-group', element.closest('ul')).removeClass(ebeneName); 197 jQuery('.nav-item .currentParent').addClass('closeChild'); 198 jQuery('.nav-item').removeClass('openParent'); 199 200 jQuery('.nav-item button.openChild').removeClass('open') 201} 202// =========== SETTING: Füge Titel zu Kinderbereichen hinzu ========== 203/// @description: Fügt auf jeder Ebene einen Titel hinzu 204/// @require function:
205/// @require setting: child_title__link 206 207export function addBranchTitle(link){ 208 var subNavGroup = jQuery('.accessible-megamenu-top-nav-item .sub-nav-group') 209 jQuery(subNavGroup).each(function (i) { 210 // Get Title 211 var title = jQuery('> a', jQuery(this).parent()).clone() 212 var title_text = title.text() 213 214 // Add Title 215 if(link){ 216 // Add link to title 217 jQuery(this).prepend("<div class='title-ebene'></div>"); 218 jQuery('.title-ebene', this).append(title) 219 } 220 else{ 221 // Add title without link 222 jQuery(this).parent().prepend("<div class='title-ebene'><span>" + title_text + "</span></div>"); 223 } 224 225 }); 226} 227 228// =========== SETTING: Füge Pfeile als Element zu Kinderbereichen hinzu ========== 229/// @description: Fügt auf jedem Element mit Kinder einen Pfiel hinzu 230/// @require function: 231/// @require setting: 232 233export function addBranchArrow(){ 234 var itemParent = jQuery('.accessible-megamenu-top-nav-item .hasChild') 235 jQuery(itemParent).each(function (i) { 236 jQuery('> a', this).addClass('removeArrow') 237 jQuery('<button class="arrow" aria-label="öffne Unterseiten" title="öffne Unterseiten" tabindex="0">--></button>').insertAfter(jQuery('> a', this)) 238 }); 239} 240 241// =========== SETTING: Zeigt aktuellen Pfad der Ebenen an ========== 242/// @require function: 243/// @require setting: current_path__show 244 245export function showCurrentPath(){ 246 var currentParents = jQuery('.accessible-megamenu-top-nav-item .currentParent') 247 jQuery('> ul', currentParents).addClass('ebene-open') 248 249 var currentElement = jQuery('.hasChild.current', currentParents) 250 jQuery('> ul', currentElement).addClass('ebene-open') 251 252} 253 254 255// =========== SETTING: Fügt einen backdrop hinzu ========== 256/// @require function: 257/// @require setting: 258 259export function addBackdrop(interaction){ 260 /*add Element with class menu-overlay at end of source code*/ 261 jQuery('.l-page .l-header__row2').append('<div class="menu-overlay"></div>') 262 263 //dim on click 264 if(interaction == "click"){ 265 jQuery(".l-navigation ul.nav-menu li.nav-item.li-ebene-1").on("click", function () { 266 dim() 267 }); 268 } 269 //dim on hover 270 if(interaction == "hover"){ 271 jQuery(".l-navigation ul.nav-menu li.nav-item.li-ebene-1").on("mouseenter", function () { 272 dim() 273 }); 274 } 275} 276 277/*---dim background if menu is open------*/ 278function dim(){ 279 var CONTROL_INTERVAL = setInterval(function(){ 280 // Check if element exist 281 if(jQuery('ul.accessible-megamenu-panel.open').length > 0){ 282 jQuery('.menu-overlay').addClass('open'); 283 jQuery('body').addClass('menuOverlayOpen'); 284 } 285 if(jQuery('ul.accessible-megamenu-panel.open').length == 0){ 286 var topParent = ".accessible-megamenu li.li-ebene-1.accessible-megamenu-top-nav-item" 287 var topParentA = jQuery('> a', topParent); 288 jQuery('.menu-overlay').removeClass('open'); 289 jQuery('body').removeClass('menuOverlayOpen') 290 jQuery(topParent).removeClass('closeParent') 291 jQuery(topParentA).removeClass('opened') 292 jQuery('.text', topParentA).text('Menü') 293 jQuery('.mbutton', topParentA).removeClass('mbutton--close') 294 clearInterval(CONTROL_INTERVAL); 295 } 296 }, 100); // check for every 100ms 297}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.