Blendet Haupt- und Subnavigation auf MyDealz aus und fügt einen globalen Toggle-Button hinzu.
当前为
// ==UserScript==
// @name MyDealz Global Nav Toggle
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Blendet Haupt- und Subnavigation auf MyDealz aus und fügt einen globalen Toggle-Button hinzu.
// @author MD928835
// @match https://www.mydealz.de/*
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @license MIT
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
// --- Konfiguration ---
const NAV_SELECTOR = '.nav'; // Hauptnavigationsleiste [1]
const SUBNAV_SELECTOR = '.subNav--light'; // Sub-Navigationsleiste [1]
// Container, in den der Button eingefügt wird (das <header>-Element selbst)
const HEADER_SELECTOR = 'header[role="banner"].header';
const BUTTON_ID = 'mydealzGlobalNavToggle';
const STORAGE_KEY = 'mydealzGlobalNavVisible'; // Zustandsspeicherung
const HIDDEN_CLASS = 'mydealz-nav-hidden-by-script'; // Eigene Klasse zum Ausblenden
const ICON_BURGER = '☰';
const ICON_CLOSE = '✕';
// --- CSS hinzufügen ---
GM_addStyle(`
/* Klasse zum Ausblenden der Navigationsbereiche */
.${HIDDEN_CLASS} {
display: none !important; /* Wichtig, um andere Styles zu überschreiben */
}
/* Styling für den Toggle-Button */
#${BUTTON_ID} {
position: fixed; /* Bleibt beim Scrollen sichtbar */
top: 8px; /* Abstand von oben */
left: 10px; /* Abstand von links */
z-index: 10001; /* Muss über anderen Elementen liegen (MyDealz hat z-index bis ~10000) */
background-color: rgba(240, 240, 240, 0.9); /* Leicht transparenter Hintergrund */
border: 1px solid #cccccc;
border-radius: 5px;
padding: 6px 12px;
font-size: 22px; /* Größe des Icons */
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Kleiner Schatten */
transition: background-color 0.2s;
}
/* Hover-Effekt für den Button */
#${BUTTON_ID}:hover {
background-color: rgba(220, 220, 220, 0.95);
}
`);
// --- Elemente selektieren ---
const navElement = document.querySelector(NAV_SELECTOR);
const subNavElement = document.querySelector(SUBNAV_SELECTOR);
const headerElement = document.querySelector(HEADER_SELECTOR); // Header für Button-Platzierung
// --- Prüfen, ob kritische Elemente vorhanden sind ---
// Das subNavElement ist optional (könnte auf manchen Seiten fehlen)
if (!navElement || !headerElement) {
console.error('MyDealz Global Nav Toggle: Hauptnavigation (.nav) oder Header (<header>) nicht gefunden. Skript wird beendet.');
return;
}
// --- Toggle-Button erstellen ---
const toggleButton = document.createElement('button');
toggleButton.id = BUTTON_ID;
toggleButton.title = "Navigation ein-/ausblenden";
// Icon wird in updateNavState gesetzt
// --- Button einfügen ---
// Fügt den Button als erstes Kind in das <header>-Element ein,
// damit er außerhalb der Elemente liegt, die ausgeblendet werden.
headerElement.prepend(toggleButton);
// --- Zustand initialisieren (aus Speicher oder Standard = unsichtbar) ---
let isVisible = GM_getValue(STORAGE_KEY, false);
// --- Funktion zum Aktualisieren des Navigationszustands ---
function updateNavState(visible) {
// Hauptnavigation ein-/ausblenden
navElement.classList.toggle(HIDDEN_CLASS, !visible);
// Subnavigation ein-/ausblenden, falls vorhanden
if (subNavElement) {
subNavElement.classList.toggle(HIDDEN_CLASS, !visible);
}
// Button-Icon ändern
toggleButton.textContent = visible ? ICON_CLOSE : ICON_BURGER;
// Zustand speichern
GM_setValue(STORAGE_KEY, visible);
}
// --- Initialen Zustand beim Laden setzen ---
updateNavState(isVisible);
// --- Event Listener für den Klick auf den Button hinzufügen ---
toggleButton.addEventListener('click', () => {
isVisible = !isVisible; // Zustand umschalten
updateNavState(isVisible); // Anzeige aktualisieren und speichern
});
})();