☰

WME Map Nav History

Navigate through map history using Alt + arrow keys, mouse control, clickable history sidebar, and location highlighting

// ==UserScript==
// @name WME Map Nav History
// @name:de WME Karten-Navigations-Historie
// @name:es WME Historial de Navegación del Mapa
// @name:fr WME Historique de Navigation de Carte
// @name:it WME Cronologia di Navigazione Mappa
// @description Navigate through map history using Alt + arrow keys, mouse control, clickable history sidebar, and location highlighting
// @description:de Ermöglicht die Navigation durch die Kartenhistorie mit Alt + Pfeiltasten, Maussteuerung, klickbarer Historie-Sidebar und Ortsmarkierungen
// @description:es Permite navegar por el historial del mapa usando Alt + teclas de flecha, control del ratón, barra lateral de historial clicable y resaltado de ubicaciones
// @description:fr Permet de naviguer dans l'historique de la carte en utilisant Alt + touches fléchées, contrôle de la souris, barre latérale d'historique cliquable et mise en évidence des emplacements
// @description:it Consente di navigare nella cronologia della mappa utilizzando Alt + tasti freccia, controllo del mouse, barra laterale della cronologia cliccabile e evidenziazione delle posizioni
// @namespace https://greasyfork.org/de/users/863740-horst-wittlich
// @version 2025.06.04
// @author hiwi234
// @include https://www.waze.com/editor*
// @include https://www.waze.com/*/editor*
// @include https://beta.waze.com/*
// @exclude https://www.waze.com/user/*editor/*
// @exclude https://www.waze.com/*/user/*editor/*
// @grant none
// @license MIT
// ==/UserScript==

/* global W, OpenLayers */
(function() {
'use strict';

let navigationHistory = [];
let currentIndex = -1;
let isInitialized = false;
let lastSaveTime = 0;
let currentLanguage = (navigator.language || navigator.userLanguage).substring(0, 2);
let highlightedPositions = {};

const translations = {
    en: {
        scriptActive: "Script active",
        back: "Back",
        forward: "Forward",
        controls: "Controls",
        previousPosition: "Previous position",
        nextPosition: "Next position",
        backButton: "Back button",
        forwardButton: "Forward button",
        hints: "Hints",
        historyLimit: "History stores up to 100 positions",
        autoSave: "New positions are automatically saved when moving the map",
        history: "History",
        clearHistory: "Clear History",
        noHistory: "No history available",
        currentPosition: "Current Position",
        markPosition: "Mark Position",
        unmarkPosition: "Unmark Position",
        markedPositions: "Marked Positions",
        clickToNavigate: "Click on history entry for direct jump",
        autoSaveDescription: "Automatic save and loading on next start",
        confirmClearHistory: "Are you sure you want to delete the entire history?",
        locationName: "Location",
        zoomLevel: "Zoom Level"
    },
    de: {
        scriptActive: "Script aktiv",
        back: "Zurück",
        forward: "Vorwärts",
        controls: "Steuerung",
        previousPosition: "Vorherige Position",
        nextPosition: "Nächste Position",
        backButton: "Zurück-Button",
        forwardButton: "Vorwärts-Button",
        hints: "Hinweise",
        historyLimit: "Die Historie speichert bis zu 100 Positionen",
        autoSave: "Neue Positionen werden beim Verschieben der Karte automatisch gespeichert",
        history: "Verlauf",
        clearHistory: "Verlauf löschen",
        noHistory: "Kein Verlauf verfügbar",
        currentPosition: "Aktuelle Position",
        markPosition: "Position markieren",
        unmarkPosition: "Position entfernen",
        markedPositions: "Markierte Positionen",
        clickToNavigate: "Klick auf Historie-Eintrag für direkten Sprung",
        autoSaveDescription: "Verlauf wird automatisch gespeichert und beim nächsten Start geladen",
        confirmClearHistory: "Sind Sie sicher, dass Sie den gesamten Verlauf löschen möchten?",
        locationName: "Ort",
        zoomLevel: "Zoom-Stufe"
    },
    es: {
        scriptActive: "Script activo",
        back: "Atrás",
        forward: "Adelante",
        controls: "Controles",
        previousPosition: "Posición anterior",
        nextPosition: "Siguiente posición",
        backButton: "Botón atrás",
        forwardButton: "Botón adelante",
        hints: "Consejos",
        historyLimit: "El historial almacena hasta 100 posiciones",
        autoSave: "Las nuevas posiciones se guardan automáticamente al mover el mapa",
        history: "Historial",
        clearHistory: "Limpiar Historial",
        noHistory: "Sin historial disponible",
        currentPosition: "Posición Actual",
        markPosition: "Marcar Posición",
        unmarkPosition: "Desmarcar Posición",
        markedPositions: "Posiciones Marcadas",
        clickToNavigate: "Haz clic en la entrada del historial para saltar directamente",
        autoSaveDescription: "Guardado automático y carga en el próximo inicio",
        confirmClearHistory: "¿Estás seguro de que quieres eliminar todo el historial?",
        locationName: "Ubicación",
        zoomLevel: "Nivel de Zoom"
    },
    fr: {
        scriptActive: "Script actif",
        back: "Retour",
        forward: "Avancer",
        controls: "Contrôles",
        previousPosition: "Position précédente",
        nextPosition: "Position suivante",
        backButton: "Bouton retour",
        forwardButton: "Bouton avancer",
        hints: "Conseils",
        historyLimit: "L'historique stocke jusqu'à 100 positions",
        autoSave: "Les nouvelles positions sont automatiquement sauvegardées lors du déplacement de la carte",
        history: "Historique",
        clearHistory: "Effacer l'Historique",
        noHistory: "Aucun historique disponible",
        currentPosition: "Position Actuelle",
        markPosition: "Marquer la Position",
        unmarkPosition: "Démarquer la Position",
        markedPositions: "Positions Marquées",
        clickToNavigate: "Cliquez sur l'entrée d'historique pour un saut direct",
        autoSaveDescription: "Sauvegarde automatique et chargement au prochain démarrage",
        confirmClearHistory: "Êtes-vous sûr de vouloir supprimer tout l'historique?",
        locationName: "Emplacement",
        zoomLevel: "Niveau de Zoom"
    },
    it: {
        scriptActive: "Script attivo",
        back: "Indietro",
        forward: "Avanti",
        controls: "Controlli",
        previousPosition: "Posizione precedente",
        nextPosition: "Posizione successiva",
        backButton: "Pulsante indietro",
        forwardButton: "Pulsante avanti",
        hints: "Suggerimenti",
        historyLimit: "La cronologia memorizza fino a 100 posizioni",
        autoSave: "Le nuove posizioni vengono salvate automaticamente quando si sposta la mappa",
        history: "Cronologia",
        clearHistory: "Cancella Cronologia",
        noHistory: "Nessuna cronologia disponibile",
        currentPosition: "Posizione Attuale",
        markPosition: "Marca Posizione",
        unmarkPosition: "Rimuovi Marcatura",
        markedPositions: "Posizioni Marcate",
        clickToNavigate: "Clicca sulla voce della cronologia per il salto diretto",
        autoSaveDescription: "Salvataggio automatico e caricamento al prossimo avvio",
        confirmClearHistory: "Sei sicuro di voler eliminare l'intera cronologia?",
        locationName: "Posizione",
        zoomLevel: "Livello di Zoom"
    }
};

const t = (key) => {
    return (translations[currentLanguage] && translations[currentLanguage][key]) || translations.en[key];
};

// Hilfsfunktion um Koordinaten zu formatieren
function formatCoords(lat, lon) {
    return `${lat.toFixed(5)}, ${lon.toFixed(5)}`;
}

// Hilfsfunktion um Zeitstempel zu formatieren
function formatTime(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleTimeString();
}

// Hilfsfunktion um Ortsname zu generieren (vereinfacht)
function generateLocationName(lat, lon, zoom) {
    return `${t('zoomLevel')} ${zoom} - ${formatCoords(lat, lon)}`;
}

// Markierte Position hinzufügen/entfernen
function togglePositionHighlight(index) {
    const position = navigationHistory[index];
    if (!position) return;

    if (highlightedPositions[index]) {
        // Hervorhebung entfernen
        delete highlightedPositions[index];
        position.marked = false;
    } else {
        // Hervorhebung hinzufügen
        highlightedPositions[index] = true;
        position.marked = true;
    }

    updateHistoryList();
    saveToLocalStorage();
}

function saveCurrentPosition() {
    if (!isInitialized || !W.map) return;

    const now = Date.now();
    // Mindestens 2 Sekunden zwischen den Speicherungen
    if (now - lastSaveTime < 2000) return;

    const center = W.map.getCenter();
    const zoom = W.map.getZoom();

    const lastEntry = navigationHistory[currentIndex];
    if (lastEntry &&
        Math.abs(lastEntry.lat - center.lat) < 0.00001 &&
        Math.abs(lastEntry.lon - center.lon) < 0.00001 &&
        lastEntry.zoom === zoom) {
        return;
    }

    // Entferne alle Einträge nach dem aktuellen Index (für Verzweigungen)
    navigationHistory = navigationHistory.slice(0, currentIndex + 1);

    navigationHistory.push({
        lat: center.lat,
        lon: center.lon,
        zoom: zoom,
        timestamp: now,
        name: generateLocationName(center.lat, center.lon, zoom),
        marked: false
    });

    currentIndex++;
    lastSaveTime = now;

    // Begrenze auf 100 Einträge
    if (navigationHistory.length > 100) {
        const removedEntry = navigationHistory.shift();
        currentIndex--;

        // Entferne Hervorhebung des gelöschten Eintrags
        if (removedEntry.marked && highlightedPositions[0]) {
            delete highlightedPositions[0];
        }

        // Aktualisiere Hervorhebungs-Indizes
        const newHighlightedPositions = {};
        Object.keys(highlightedPositions).forEach(oldIndex => {
            const newIndex = parseInt(oldIndex) - 1;
            if (newIndex >= 0) {
                newHighlightedPositions[newIndex] = highlightedPositions[oldIndex];
            }
        });
        highlightedPositions = newHighlightedPositions;
    }

    updateNavigationButtons();
    updateHistoryList();
    saveToLocalStorage();
}

function navigateToPosition(position, index) {
    if (!position || !isInitialized || !W.map) return;

    try {
        const lonlat = new OpenLayers.LonLat(position.lon, position.lat);
        W.map.setCenter(lonlat, position.zoom);

        if (typeof index !== 'undefined') {
            currentIndex = index;
            updateNavigationButtons();
            updateHistoryList();
        }
    } catch (error) {
        console.error('WME Map Nav History: Navigation error:', error);
    }
}

function handleKeyDown(e) {
    if (!isInitialized) return;

    if (e.altKey && e.keyCode === 37) { // Alt + Left
        navigateBack();
        e.preventDefault();
    }
    else if (e.altKey && e.keyCode === 39) { // Alt + Right
        navigateForward();
        e.preventDefault();
    }
}

function navigateBack() {
    if (currentIndex > 0) {
        currentIndex--;
        navigateToPosition(navigationHistory[currentIndex]);
        updateNavigationButtons();
        updateHistoryList();
    }
}

function navigateForward() {
    if (currentIndex < navigationHistory.length - 1) {
        currentIndex++;
        navigateToPosition(navigationHistory[currentIndex]);
        updateNavigationButtons();
        updateHistoryList();
    }
}

function updateNavigationButtons() {
    const backBtn = document.getElementById('nav-history-back');
    const forwardBtn = document.getElementById('nav-history-forward');

    if (backBtn) {
        backBtn.disabled = currentIndex <= 0;
        backBtn.style.opacity = currentIndex <= 0 ? '0.5' : '1';
    }

    if (forwardBtn) {
        forwardBtn.disabled = currentIndex >= navigationHistory.length - 1;
        forwardBtn.style.opacity = currentIndex >= navigationHistory.length - 1 ? '0.5' : '1';
    }
}

function updateHistoryList() {
    const historyContainer = document.getElementById('nav-history-list');
    if (!historyContainer) return;

    if (navigationHistory.length === 0) {
        historyContainer.innerHTML = `<div class="no-history">${t('noHistory')}</div>`;
        return;
    }

    let html = '';
    navigationHistory.forEach((entry, index) => {
        const isCurrent = index === currentIndex;
        const isMarked = entry.marked || false;
        const time = formatTime(entry.timestamp);

        html += `
            <div class="history-item ${isCurrent ? 'current' : ''} ${isMarked ? 'marked' : ''}" data-index="${index}">
                <div class="history-item-header">
                    <span class="history-item-time">${time}</span>
                    <div class="history-item-controls">
                        ${isCurrent ? `<span class="current-marker">${t('currentPosition')}</span>` : ''}
                        <button class="mark-button ${isMarked ? 'marked' : ''}" data-index="${index}" title="${isMarked ? t('unmarkPosition') : t('markPosition')}">
                            ${isMarked ? '★' : '☆'}
                        </button>
                    </div>
                </div>
                <div class="history-item-location">
                    ${entry.name}
                </div>
                <div class="history-item-coords">
                    ${formatCoords(entry.lat, entry.lon)}
                </div>
            </div>
        `;
    });

    historyContainer.innerHTML = html;

    // Event Listener für Klicks auf Historie-Einträge
    historyContainer.querySelectorAll('.history-item').forEach(item => {
        item.addEventListener('click', function(e) {
            if (e.target.classList.contains('mark-button')) {
                return; // Lass den Button-Handler das übernehmen
            }
            const index = parseInt(this.dataset.index);
            navigateToPosition(navigationHistory[index], index);
        });
    });

    // Event Listener für Marker-Buttons
    historyContainer.querySelectorAll('.mark-button').forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const index = parseInt(this.dataset.index);
            togglePositionHighlight(index);
        });
    });
}

function clearHistory() {
    // Alle Hervorhebungen entfernen
    highlightedPositions = {};

    navigationHistory = [];
    currentIndex = -1;
    updateNavigationButtons();
    updateHistoryList();
    saveToLocalStorage();
}

function saveToLocalStorage() {
    try {
        const data = {
            history: navigationHistory,
            currentIndex: currentIndex,
            highlightedPositions: highlightedPositions
        };
        localStorage.setItem('wme-nav-history', JSON.stringify(data));
    } catch (error) {
        console.error('WME Map Nav History: Error saving to localStorage:', error);
    }
}

function loadFromLocalStorage() {
    try {
        const data = localStorage.getItem('wme-nav-history');
        if (data) {
            const parsed = JSON.parse(data);
            navigationHistory = parsed.history || [];
            currentIndex = parsed.currentIndex || -1;
            highlightedPositions = parsed.highlightedPositions || {};

            // Validiere den currentIndex
            if (currentIndex >= navigationHistory.length) {
                currentIndex = navigationHistory.length - 1;
            }
        }
    } catch (error) {
        console.error('WME Map Nav History: Error loading from localStorage:', error);
        navigationHistory = [];
        currentIndex = -1;
        highlightedPositions = {};
    }
}

async function createSidebarTab() {
    try {
        const { tabLabel, tabPane } = W.userscripts.registerSidebarTab("wme-nav-history");
        tabLabel.innerText = 'NAV';
        tabLabel.title = '<h4>Map Navigation History</h4>';

        await W.userscripts.waitForElementConnected(tabPane);

        const styleSheet = document.createElement("style");
        styleSheet.textContent = `
            .nav-history-button {
                padding: 8px 15px;
                cursor: pointer;
                background: #4a89dc;
                color: white;
                border: none;
                border-radius: 4px;
                font-weight: 600;
                transition: all 0.3s ease;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                min-width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
            }

            .nav-history-button:hover {
                background: #5d9cec;
                box-shadow: 0 4px 8px rgba(0,0,0,0.15);
                transform: translateY(-1px);
            }

            .nav-history-button:active {
                transform: translateY(1px);
                box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            }

            .nav-history-button:disabled {
                background: #b5b5b5;
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
            }

            .nav-history-container {
                background: #f8f9fa;
                border-radius: 8px;
                padding: 20px;
                margin: 10px 0;
                box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            }

            .clear-history-button {
                background: #dc3545;
                padding: 6px 12px;
                font-size: 12px;
                min-width: auto;
            }

            .clear-history-button:hover {
                background: #c82333;
            }

            .history-section {
                margin-top: 20px;
                background: #fff;
                border-radius: 6px;
                border: 1px solid #e1e4e8;
            }

            .history-header {
                padding: 15px;
                border-bottom: 1px solid #e1e4e8;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #f8f9fa;
                border-radius: 6px 6px 0 0;
            }

            .history-controls {
                display: flex;
                gap: 10px;
                align-items: center;
            }

            .history-list {
                max-height: 300px;
                overflow-y: auto;
            }

            .history-item {
                padding: 12px 15px;
                border-bottom: 1px solid #f0f0f0;
                cursor: pointer;
                transition: background-color 0.2s ease;
                position: relative;
            }

            .history-item:hover {
                background-color: #f8f9fa;
            }

            .history-item.current {
                background-color: #e8f4fd;
                border-left: 4px solid #4a89dc;
            }

            .history-item.marked {
                border-left: 4px solid #ffd700;
                background-color: #fffbf0;
            }

            .history-item.current.marked {
                border-left: 4px solid #4a89dc;
                background: linear-gradient(to right, #e8f4fd, #fffbf0);
            }

            .history-item:last-child {
                border-bottom: none;
            }

            .history-item-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 5px;
            }

            .history-item-controls {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .history-item-time {
                font-size: 12px;
                color: #666;
                font-weight: 600;
            }

            .current-marker {
                font-size: 10px;
                background: #4a89dc;
                color: white;
                padding: 2px 6px;
                border-radius: 10px;
                font-weight: 600;
            }

            .mark-button {
                background: none;
                border: none;
                font-size: 16px;
                cursor: pointer;
                padding: 2px 4px;
                border-radius: 3px;
                transition: all 0.2s ease;
                color: #ccc;
            }

            .mark-button:hover {
                background: rgba(0,0,0,0.1);
                color: #ffd700;
            }

            .mark-button.marked {
                color: #ffd700;
            }

            .history-item-location {
                font-weight: 600;
                color: #2c3e50;
                margin-bottom: 3px;
                font-size: 13px;
            }

            .history-item-coords {
                font-size: 11px;
                color: #7f8c8d;
                font-family: monospace;
            }

            .no-history {
                padding: 20px;
                text-align: center;
                color: #666;
                font-style: italic;
            }
        `;
        document.head.appendChild(styleSheet);

        tabPane.innerHTML = `
            <div class="nav-history-container">
                <p style="margin-top: 0; color: #2c3e50;"><h4>WME Map Nav History</h4></p>
                <p style="color: #4CAF50; display: flex; align-items: center; gap: 5px;">
                    <span style="font-size: 18px;">✓</span> ${t('scriptActive')}
                </p>

                <div style="display: flex; gap: 15px; margin: 20px 0;">
                    <button id="nav-history-back" class="nav-history-button">
                        <span style="font-size: 16px;">⬅️</span> ${t('back')}
                    </button>
                    <button id="nav-history-forward" class="nav-history-button">
                        ${t('forward')} <span style="font-size: 16px;">➡️</span>
                    </button>
                </div>

                <div class="history-section">
                    <div class="history-header">
                        <strong>${t('history')}</strong>
                        <div class="history-controls">
                            <button id="clear-history" class="nav-history-button clear-history-button">
                                ${t('clearHistory')}
                            </button>
                        </div>
                    </div>
                    <div id="nav-history-list" class="history-list">
                        <div class="no-history">${t('noHistory')}</div>
                    </div>
                </div>

                <hr style="border: none; height: 1px; background: #e1e4e8; margin: 15px 0;">

                <div style="background: #fff; padding: 15px; border-radius: 6px; border: 1px solid #e1e4e8;">
                    <b style="margin-top: 0; color: #2c3e50;">${t('controls')}:</b>
                    <ul style="padding-left: 20px; color: #4a5568;">
                        <li><strong>Alt + ←</strong> ${t('previousPosition')}</li>
                        <li><strong>Alt + →</strong> ${t('nextPosition')}</li>
                        <li><strong>Click</strong> auf Historie-Eintrag für direkten Sprung</li>
                        <li><strong>★ Button</strong> ${t('markPosition')}</li>
                    </ul>

                    <b style="margin-top: 15px; color: #2c3e50;">${t('hints')}:</b>
                    <ul style="padding-left: 20px; color: #4a5568;">
                        <li>${t('historyLimit')}</li>
                        <li>${t('autoSave')}</li>
                        <li>${t('autoSaveDescription')}</li>
                        <li>Markierte Positionen werden in der Liste hervorgehoben</li>
                        <li>Hervorhebungen bleiben auch nach Neustart erhalten</li>
                    </ul>
                </div>
            </div>
        `;

        const backBtn = tabPane.querySelector('#nav-history-back');
        const forwardBtn = tabPane.querySelector('#nav-history-forward');
        const clearBtn = tabPane.querySelector('#clear-history');

        backBtn.addEventListener('click', navigateBack);
        forwardBtn.addEventListener('click', navigateForward);
        clearBtn.addEventListener('click', () => {
            if (confirm(t('confirmClearHistory'))) {
                clearHistory();
            }
        });

        updateNavigationButtons();
        updateHistoryList();

        return true;
    } catch (error) {
        console.error('WME Map Nav History: Error creating sidebar tab:', error);
        return false;
    }
}

function initializeScript() {
    if (isInitialized) return;

    try {
        // Lade gespeicherten Verlauf
        loadFromLocalStorage();

        W.map.events.register('moveend', null, saveCurrentPosition);
        document.addEventListener('keydown', handleKeyDown);

        createSidebarTab();

        isInitialized = true;
        saveCurrentPosition();

        console.log('WME Map Nav History Extended: Successfully initialized');
    } catch (error) {
        console.error('WME Map Nav History: Initialization error:', error);
        isInitialized = false;
    }
}

if (W?.userscripts?.state.isInitialized) {
    initializeScript();
} else {
    document.addEventListener("wme-initialized", initializeScript, {
        once: true,
    });
}

})();