WME Mobile View

Mobile-optimierte Ansicht für den Waze Map Editor

Verzia zo dňa 14.05.2025. Pozri najnovšiu verziu.

// ==UserScript==
// @name         WME Mobile View
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Mobile-optimierte Ansicht für den Waze Map Editor
// @author       Hiwi234
// @match        https://www.waze.com/editor*
// @match        https://www.waze.com/*/editor*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Initialisierungsfunktion
    async function initializeMobileView() {
        const { tabLabel, tabPane } = W.userscripts.registerSidebarTab("wme-mobile-view");

        // Tab-Label setzen
        tabLabel.innerText = '📱';
        tabLabel.title = 'Mobile Ansicht';

        // Warten bis das Tab-Panel im DOM verfügbar ist
        await W.userscripts.waitForElementConnected(tabPane);

        // Mobile Styling hinzufügen
        const style = document.createElement('style');
        style.textContent = `
            @media (max-width: 768px) {
                #sidebar {
                    width: 100% !important;
                    height: auto !important;
                    position: fixed;
                    bottom: 0;
                    z-index: 1000;
                }

                #map {
                    width: 100% !important;
                    height: calc(100vh - 60px) !important;
                }

                .nav-tabs {
                    display: flex;
                    overflow-x: auto;
                    -webkit-overflow-scrolling: touch;
                }

                .tab-content {
                    max-height: 60vh;
                    overflow-y: auto;
                }

                .toolbar {
                    position: fixed;
                    top: 0;
                    width: 100%;
                    z-index: 1000;
                }
            }
        `;
        document.head.appendChild(style);

        // Mobile Steuerelemente hinzufügen
        tabPane.innerHTML = `
            <div class="mobile-controls">
                <h3>Mobile Steuerung</h3>
                <button id="toggleSidebar">Seitenleiste Ein/Aus</button>
                <button id="zoomControls">Zoom Steuerung</button>
                <div class="quick-actions">
                    <h4>Schnellzugriff</h4>
                    <button class="quick-action">Segment hinzufügen</button>
                    <button class="quick-action">Ort hinzufügen</button>
                    <button class="quick-action">Problem melden</button>
                </div>
            </div>
        `;

        // Event-Listener für mobile Steuerung
        document.getElementById('toggleSidebar').addEventListener('click', () => {
            const sidebar = document.getElementById('sidebar');
            sidebar.style.display = sidebar.style.display === 'none' ? 'block' : 'none';
        });
    }

    // Warten auf WME Initialisierung
    if (W?.userscripts?.state.isReady) {
        initializeMobileView();
    } else {
        document.addEventListener("wme-ready", initializeMobileView, {
            once: true,
        });
    }
})();