Inhaltsverzeichnis
keine Gliederung:root {
--menu-width: 500px;
--menu-width-mobile: 320px;
--menu-max-height: 70vh;
--menu-max-height-mobile: 60vh;
--menu-font-size: 18px;
--menu-font-title-size: 22px;
--menu-background: white;
--menu-border-color: #ddd;
--icon-size: 50px;
--icon-size-mobile: 45px;
--icon-background: #333;
--icon-background-hover: #555;
}
.menu-toggle-icon {
position: fixed !important;
bottom: 30px !important;
left: 30px !important;
width: var(--icon-size) !important;
height: var(--icon-size) !important;
background: var(--icon-background) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 9998 !important;
opacity: 0.8 !important;
transition: opacity 0.3s !important;
}
.menu-toggle-icon:hover {
opacity: 1 !important;
background: var(--icon-background-hover) !important;
}
.menu-toggle-icon::before {
content: '\2630' !important;
color: white !important;
font-size: 28px !important;
font-weight: bold !important;
line-height: 1 !important;
margin-left: 5px !important;
}
#menuPageContent {
position: fixed !important;
bottom: 90px !important;
left: 20px !important;
background: var(--menu-background) !important;
border: 1px solid var(--menu-border-color) !important;
width: var(--menu-width) !important;
max-height: var(--menu-max-height) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
z-index: 2147483647 !important;
box-sizing: border-box !important;
}
#menuPageContent *,
#menuPageContent .dmenu-top_m,
#menuPageContent .dmenu-body_m {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
background: var(--menu-background) !important;
}
#menuPageContent .dmenu-top_m,
#menuPageContent .dmenu-body_m {
font-size: var(--menu-font-size) !important;
line-height: 1.8 !important;
}
#menuPageContent .dmenu-body_m ol li a {
font-size: var(--menu-font-title-size) !important;
}
#menuPageContent::-webkit-scrollbar {
width: 8px !important;
}
#menuPageContent::-webkit-scrollbar-track {
background: var(--menu-background) !important;
}
#menuPageContent::-webkit-scrollbar-thumb {
background: #888 !important;
}
#menuPageContent::-webkit-scrollbar-thumb:hover {
background: #555 !important;
}
@media (max-width: 768px) {
.menu-toggle-icon {
width: var(--icon-size-mobile) !important;
height: var(--icon-size-mobile) !important;
bottom: 20px !important;
left: 20px !important;
}
#menuPageContent {
width: var(--menu-width-mobile) !important;
bottom: 75px !important;
max-height: var(--menu-max-height-mobile) !important;
}
}
/* Sidebar toggle transition */
td.left {
transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease !important;
overflow: hidden !important;
}
td.left.sidebar-hidden {
width: 0 !important;
min-width: 0 !important;
opacity: 0 !important;
padding: 0 !important;
}
#trackerPageContent {
transition: opacity 0.3s ease !important;
}
#trackerPageContent.sidebar-hidden {
display: none !important;
}
#tagSphere.sidebar-hidden,
#tagSphere.visible.sidebar-hidden {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
(function() {
if (window._tocMenuInit) {
if (window.console) console.log('[TOC-Menu] SKIP: Bereits initialisiert (Singleton)');
return;
}
window._tocMenuInit = true;
var PREFIX = '[TOC-Menu] ';
var isMenuOpen = false;
var isSidebarVisible = true;
function log(msg) {
if (window.console && console.log) {
console.log(PREFIX + msg);
}
}
log('Init gestartet...');
var menuIcon = document.getElementById('menuToggleIcon');
if (!menuIcon) {
log('ERROR: menuToggleIcon nicht gefunden!');
return;
}
document.body.appendChild(menuIcon);
log('Icon an body verschoben (Stacking Fix)');
var dynamicIds = ['tagSphere', 'trackerPageContent'];
function applyHiddenState(el) {
if (!isSidebarVisible) {
el.classList.add('sidebar-hidden');
if (el.id === 'tagSphere') {
el.classList.remove('visible');
el.style.opacity = '0';
el.style.visibility = 'hidden';
el.style.pointerEvents = 'none';
}
log('MutationObserver: ' + (el.id || el.className) + ' nachtraeglich ausgeblendet');
}
}
var observer = new MutationObserver(function(mutations) {
for (var m = 0; m < mutations.length; m++) {
var nodes = mutations[m].addedNodes;
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
if (node.nodeType !== 1) continue;
for (var d = 0; d < dynamicIds.length; d++) {
if (node.id === dynamicIds[d]) {
applyHiddenState(node);
}
var found = node.querySelector ? node.querySelector('#' + dynamicIds[d]) : null;
if (found) {
applyHiddenState(found);
}
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
log('MutationObserver aktiv fuer: ' + dynamicIds.join(', '));
function forceHideTagSphere() {
var el = document.getElementById('tagSphere');
if (!el) return;
el.classList.remove('visible');
el.style.cssText = el.style.cssText + '; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;';
log('tagSphere: forciert ausgeblendet');
}
function releaseTagSphere() {
var el = document.getElementById('tagSphere');
if (!el) return;
el.style.opacity = '';
el.style.visibility = '';
el.style.pointerEvents = '';
log('tagSphere: freigegeben');
}
function startTagSphereGuard() {
forceHideTagSphere();
/* Scroll-Handler des tagSphere per MutationObserver auf className abfangen */
var tsObserver = new MutationObserver(function(mutations) {
for (var m = 0; m < mutations.length; m++) {
var el = mutations[m].target;
if (el.id === 'tagSphere' && el.classList.contains('visible')) {
el.classList.remove('visible');
el.style.opacity = '0';
el.style.visibility = 'hidden';
el.style.pointerEvents = 'none';
log('tagSphere Guard: visible-Klasse blockiert');
}
}
});
var tagEl = document.getElementById('tagSphere');
if (tagEl) {
tsObserver.observe(tagEl, { attributes: true, attributeFilter: ['class'] });
window._tagSphereObserver = tsObserver;
log('tagSphere Guard (classObserver) gestartet');
}
}
function stopTagSphereGuard() {
if (window._tagSphereObserver) {
window._tagSphereObserver.disconnect();
window._tagSphereObserver = null;
log('tagSphere Guard gestoppt');
}
releaseTagSphere();
}
function toggleSidebar() {
var targets = [
document.querySelector('td.left'),
document.getElementById('tagSphere'),
document.getElementById('trackerPageContent')
];
var anyFound = false;
for (var i = 0; i < targets.length; i++) {
if (!targets[i]) continue;
anyFound = true;
if (isSidebarVisible) {
targets[i].classList.add('sidebar-hidden');
if (targets[i].id === 'tagSphere') {
startTagSphereGuard();
}
} else {
targets[i].classList.remove('sidebar-hidden');
if (targets[i].id === 'tagSphere') {
stopTagSphereGuard();
}
}
}
if (!anyFound) {
log('WARN: Keine Toggle-Targets gefunden');
return;
}
isSidebarVisible = !isSidebarVisible;
log('Sidebar ' + (isSidebarVisible ? 'eingeblendet' : 'ausgeblendet'));
}
menuIcon.addEventListener('click', function(e) {
e.stopPropagation();
toggleSidebar();
var dmenu = document.getElementById('menuPageContent');
if (dmenu) {
if (isMenuOpen) {
dmenu.style.display = 'none';
isMenuOpen = false;
log('Menu geschlossen');
} else {
window.menuBubble = true;
dmenu.style.display = 'block';
isMenuOpen = true;
log('Menu geoeffnet');
}
}
});
document.addEventListener('click', function(e) {
var dmenu = document.getElementById('menuPageContent');
if (isMenuOpen && dmenu) {
var clickedInsideMenu = dmenu.contains(e.target);
var clickedIcon = menuIcon.contains(e.target);
if (!clickedInsideMenu && !clickedIcon) {
dmenu.style.display = 'none';
isMenuOpen = false;
log('Menu geschlossen (Klick aussen)');
} else if (clickedInsideMenu && e.target.tagName === 'A') {
dmenu.style.display = 'none';
isMenuOpen = false;
log('Menu geschlossen (Link geklickt)');
}
}
});
log('Fertig! Handler registriert.');
})();
