MyDealz Global Nav Toggle

Blendet Haupt- und Subnavigation auf MyDealz aus und fügt einen globalen Toggle-Button hinzu.

当前为 2025-04-17 提交的版本,查看 最新版本

// ==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
    });

})();