Update from Git Manager GUI
This commit is contained in:
@@ -1,61 +1,174 @@
|
||||
( function() {
|
||||
// FIX: Null-Check – Script bricht auf Login-Seite & Seiten ohne Nav nicht mehr ab
|
||||
const siteNavigation = document.getElementById( 'site-navigation' );
|
||||
if ( ! siteNavigation ) {
|
||||
( function () {
|
||||
'use strict';
|
||||
|
||||
var isSidebarLayout = document.querySelector( '.site-header--sidebar' ) !== null;
|
||||
|
||||
if ( isSidebarLayout ) {
|
||||
|
||||
// --- Panel öffnen / schließen ---
|
||||
var panel = document.getElementById( 'header-sidebar' );
|
||||
var overlay = document.getElementById( 'sidebar-overlay' );
|
||||
var openBtn = document.querySelector( '.sidebar-menu-toggle' );
|
||||
var closeBtn = document.querySelector( '.sidebar-menu-close' );
|
||||
|
||||
function openPanel() {
|
||||
if ( ! panel ) return;
|
||||
panel.classList.add( 'is-open' );
|
||||
panel.setAttribute( 'aria-hidden', 'false' );
|
||||
if ( openBtn ) openBtn.setAttribute( 'aria-expanded', 'true' );
|
||||
if ( overlay ) overlay.classList.add( 'is-visible' );
|
||||
document.body.classList.add( 'sidebar-nav-open' );
|
||||
}
|
||||
|
||||
function closePanel() {
|
||||
if ( ! panel ) return;
|
||||
panel.classList.remove( 'is-open' );
|
||||
panel.setAttribute( 'aria-hidden', 'true' );
|
||||
if ( openBtn ) openBtn.setAttribute( 'aria-expanded', 'false' );
|
||||
if ( overlay ) overlay.classList.remove( 'is-visible' );
|
||||
document.body.classList.remove( 'sidebar-nav-open' );
|
||||
}
|
||||
|
||||
if ( openBtn ) openBtn.addEventListener( 'click', openPanel );
|
||||
if ( closeBtn ) closeBtn.addEventListener( 'click', closePanel );
|
||||
if ( overlay ) overlay.addEventListener( 'click', closePanel );
|
||||
document.addEventListener( 'keydown', function ( e ) {
|
||||
if ( e.key === 'Escape' ) closePanel();
|
||||
} );
|
||||
|
||||
// --- Submenu Flyout ---
|
||||
var sidebarNav = document.getElementById( 'site-navigation' );
|
||||
if ( sidebarNav ) {
|
||||
sidebarNav.querySelectorAll( '.menu-item-has-children' ).forEach( function ( item ) {
|
||||
var subMenu = item.querySelector( ':scope > .sub-menu' );
|
||||
if ( ! subMenu ) return;
|
||||
|
||||
var isOpen = false;
|
||||
var moveHdlr = null;
|
||||
|
||||
function showFlyout() {
|
||||
if ( isOpen ) return;
|
||||
isOpen = true;
|
||||
subMenu.style.top = item.getBoundingClientRect().top + 'px';
|
||||
item.classList.add( 'flyout-open' );
|
||||
|
||||
// Erkennungszone berechnen:
|
||||
// - vertikal: Höhe des li-Elements
|
||||
// - horizontal: von linkem Rand der Sidebar (0) bis
|
||||
// rechtem Rand des Flyout-Panels
|
||||
// → voller horizontaler Streifen für diesen Menüpunkt
|
||||
moveHdlr = function ( e ) {
|
||||
var ir = item.getBoundingClientRect();
|
||||
var sr = subMenu.getBoundingClientRect();
|
||||
|
||||
var zoneLeft = 0; // Bildschirmrand links
|
||||
var zoneRight = Math.max( ir.right, sr.right ); // bis Ende Flyout
|
||||
var zoneTop = ir.top; // oberer Rand des li
|
||||
var zoneBottom = ir.bottom; // unterer Rand des li
|
||||
|
||||
var inZone = e.clientX >= zoneLeft &&
|
||||
e.clientX <= zoneRight &&
|
||||
e.clientY >= zoneTop &&
|
||||
e.clientY <= zoneBottom;
|
||||
|
||||
if ( ! inZone ) hideFlyout();
|
||||
};
|
||||
|
||||
document.addEventListener( 'mousemove', moveHdlr );
|
||||
}
|
||||
|
||||
function hideFlyout() {
|
||||
if ( ! isOpen ) return;
|
||||
isOpen = false;
|
||||
item.classList.remove( 'flyout-open' );
|
||||
if ( moveHdlr ) {
|
||||
document.removeEventListener( 'mousemove', moveHdlr );
|
||||
moveHdlr = null;
|
||||
}
|
||||
}
|
||||
|
||||
item.addEventListener( 'mouseenter', showFlyout );
|
||||
|
||||
// Klick-Toggle für Touch / Tastatur
|
||||
var btn = document.createElement( 'button' );
|
||||
btn.className = 'submenu-toggle';
|
||||
btn.setAttribute( 'aria-expanded', 'false' );
|
||||
btn.innerHTML = '<i class="fas fa-chevron-down"></i>';
|
||||
var link = item.querySelector( ':scope > a' );
|
||||
if ( link ) link.insertAdjacentElement( 'afterend', btn );
|
||||
|
||||
btn.addEventListener( 'click', function ( e ) {
|
||||
e.stopPropagation();
|
||||
var open = item.classList.toggle( 'active' );
|
||||
btn.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
|
||||
if ( open ) {
|
||||
subMenu.style.top = item.getBoundingClientRect().top + 'px';
|
||||
item.classList.add( 'flyout-open' );
|
||||
isOpen = true;
|
||||
} else {
|
||||
hideFlyout();
|
||||
}
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const menuToggle = siteNavigation.querySelector( '.menu-toggle' );
|
||||
if ( ! menuToggle ) {
|
||||
return;
|
||||
}
|
||||
// =========================================================================
|
||||
// CLASSIC / CENTERED / MEGA
|
||||
// =========================================================================
|
||||
var siteNavigation = document.getElementById( 'site-navigation' );
|
||||
if ( ! siteNavigation ) return;
|
||||
|
||||
// Toggle Klassen hinzufügen (Menü öffnen/schließen)
|
||||
menuToggle.addEventListener( 'click', function() {
|
||||
siteNavigation.classList.toggle( 'toggled' );
|
||||
var menuToggle = siteNavigation.querySelector( '.menu-toggle' );
|
||||
var subMenuParents = siteNavigation.querySelectorAll( '.menu-item-has-children' );
|
||||
|
||||
if ( menuToggle.getAttribute( 'aria-expanded' ) === 'true' ) {
|
||||
menuToggle.setAttribute( 'aria-expanded', 'false' );
|
||||
menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
|
||||
} else {
|
||||
menuToggle.setAttribute( 'aria-expanded', 'true' );
|
||||
menuToggle.innerHTML = '<i class="fas fa-times"></i>';
|
||||
}
|
||||
} );
|
||||
|
||||
// FIX: Menü bei Klick außerhalb schließen
|
||||
document.addEventListener( 'click', function( e ) {
|
||||
if ( siteNavigation.classList.contains( 'toggled' ) && ! siteNavigation.contains( e.target ) ) {
|
||||
siteNavigation.classList.remove( 'toggled' );
|
||||
menuToggle.setAttribute( 'aria-expanded', 'false' );
|
||||
menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
|
||||
}
|
||||
} );
|
||||
|
||||
// Mobile Submenu Toggle
|
||||
const subMenuParents = siteNavigation.querySelectorAll( '.menu-item-has-children' );
|
||||
|
||||
subMenuParents.forEach( function( subMenuParent ) {
|
||||
// FIX: Eigenen Toggle-Button erzeugen statt gesamtes <li> klickbar zu machen
|
||||
const toggleBtn = document.createElement( 'button' );
|
||||
toggleBtn.classList.add( 'submenu-toggle' );
|
||||
toggleBtn.setAttribute( 'aria-expanded', 'false' );
|
||||
toggleBtn.innerHTML = '<i class="fas fa-chevron-down"></i>';
|
||||
|
||||
const parentLink = subMenuParent.querySelector( 'a' );
|
||||
if ( parentLink ) {
|
||||
parentLink.insertAdjacentElement( 'afterend', toggleBtn );
|
||||
}
|
||||
|
||||
toggleBtn.addEventListener( 'click', function( e ) {
|
||||
e.stopPropagation();
|
||||
if ( window.innerWidth <= 992 ) {
|
||||
const isOpen = subMenuParent.classList.toggle( 'active' );
|
||||
toggleBtn.setAttribute( 'aria-expanded', isOpen ? 'true' : 'false' );
|
||||
// Icon drehen
|
||||
toggleBtn.querySelector('i').style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
|
||||
if ( menuToggle ) {
|
||||
menuToggle.addEventListener( 'click', function () {
|
||||
var expanded = siteNavigation.classList.toggle( 'toggled' );
|
||||
this.setAttribute( 'aria-expanded', String( expanded ) );
|
||||
this.innerHTML = expanded ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
|
||||
} );
|
||||
document.addEventListener( 'click', function ( e ) {
|
||||
if ( siteNavigation.classList.contains( 'toggled' ) && ! siteNavigation.contains( e.target ) ) {
|
||||
siteNavigation.classList.remove( 'toggled' );
|
||||
menuToggle.setAttribute( 'aria-expanded', 'false' );
|
||||
menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
|
||||
}
|
||||
} );
|
||||
window.addEventListener( 'resize', function () {
|
||||
if ( window.innerWidth > 992 ) {
|
||||
siteNavigation.classList.remove( 'toggled' );
|
||||
menuToggle.setAttribute( 'aria-expanded', 'false' );
|
||||
menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
|
||||
subMenuParents.forEach( function ( i ) { i.classList.remove( 'active' ); } );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
subMenuParents.forEach( function ( item ) {
|
||||
var btn = document.createElement( 'button' );
|
||||
btn.className = 'submenu-toggle';
|
||||
btn.setAttribute( 'aria-expanded', 'false' );
|
||||
btn.innerHTML = '<i class="fas fa-chevron-down"></i>';
|
||||
var link = item.querySelector( ':scope > a' );
|
||||
if ( link ) link.insertAdjacentElement( 'afterend', btn );
|
||||
btn.addEventListener( 'click', function ( e ) {
|
||||
e.stopPropagation();
|
||||
var open = item.classList.toggle( 'active' );
|
||||
btn.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
|
||||
} );
|
||||
} );
|
||||
|
||||
document.addEventListener( 'click', function ( e ) {
|
||||
if ( ! e.target.closest( '.menu-item-has-children' ) ) {
|
||||
subMenuParents.forEach( function ( item ) {
|
||||
item.classList.remove( 'active' );
|
||||
var b = item.querySelector( '.submenu-toggle' );
|
||||
if ( b ) b.setAttribute( 'aria-expanded', 'false' );
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
} )();
|
||||
Reference in New Issue
Block a user