☰

WME Quick Zoom Button

Fügt einen Button für temporären Zoom hinzu für bessere Chat sichtbarkeit

// ==UserScript==
// @name         WME Quick Zoom Button
// @name:en      WME Quick Zoom Button
// @name:es      Botón de Zoom Rápido WME
// @version      2025.05.16
// @description  Fügt einen Button für temporären Zoom hinzu für bessere Chat sichtbarkeit
// @description:en  Adds a button for temporary zoom for better chat visibility
// @description:es  Agrega un botón para zoom temporal para una mejor visibilidad del chat
// @author       Hiwi234
// @match        https://www.waze.com/editor*
// @match        https://www.waze.com/*/editor*
// @match        https://beta.waze.com/editor*
// @match        https://beta.waze.com/*/editor*
// @grant        none
// @license      MIT
// @namespace https://greasyfork.org/de/users/863740-horst-wittlich
// ==/UserScript==

(function() {
    'use strict';

    const STORAGE_KEY = {
        AUTO: 'wme-quick-zoom-auto',
        ZOOM: 'wme-quick-zoom-level'
    };

    const translations = {
        'de': {
            buttonText: 'Quick Zoom',
            buttonTooltip: 'Temporär auf Zoomstufe zoomen',
            sliderLabel: 'Maximale Zoomstufe:',
            autoLoadLabel: 'Automatisch beim Laden'
        },
        'en': {
            buttonText: 'Quick Zoom',
            buttonTooltip: 'Temporarily zoom to level',
            sliderLabel: 'Maximum zoom level:',
            autoLoadLabel: 'Automatic on load'
        },
        'es': {
            buttonText: 'Zoom Rápido',
            buttonTooltip: 'Zoom temporal al nivel',
            sliderLabel: 'Nivel máximo de zoom:',
            autoLoadLabel: 'Automático al cargar'
        }
    };

    function getLanguage() {
        const lang = navigator.language.split('-')[0];
        return translations[lang] ? lang : 'en';
    }

    function getAutoZoomSetting() {
        return localStorage.getItem(STORAGE_KEY.AUTO) === 'true';
    }

    function setAutoZoomSetting(value) {
        localStorage.setItem(STORAGE_KEY.AUTO, value);
    }

    function getZoomLevel() {
        return parseInt(localStorage.getItem(STORAGE_KEY.ZOOM) || '7');
    }

    function setZoomLevel(value) {
        localStorage.setItem(STORAGE_KEY.ZOOM, value);
    }

    async function performQuickZoom() {
        const originalZoom = W.map.olMap.getZoom();
        W.map.olMap.zoomTo(getZoomLevel());

        return new Promise(resolve => {
            setTimeout(() => {
                W.map.olMap.zoomTo(originalZoom);
                resolve();
            }, 2000);
        });
    }

    async function initializeQuickZoom() {
        const i18n = translations[getLanguage()];
        const { tabLabel, tabPane } = W.userscripts.registerSidebarTab("quick-zoom-script");

        tabLabel.innerText = 'QZ';
        tabLabel.title = i18n.buttonText;

        const container = document.createElement('div');
        container.style.display = 'flex';
        container.style.flexDirection = 'column';
        container.style.gap = '10px';
        container.style.padding = '10px';

        const sidebarButton = document.createElement('button');
        sidebarButton.className = 'waze-btn waze-btn-small';
        sidebarButton.innerText = i18n.buttonText;
        sidebarButton.title = i18n.buttonTooltip;

        const floatingButton = document.createElement('button');
        floatingButton.innerText = 'QZ';
        floatingButton.title = i18n.buttonTooltip;
        floatingButton.style.cssText = `
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 1000;
            background-color: white;
            border: 1px solid #ccc;
            padding: 8px 15px;
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        `;

        floatingButton.addEventListener('mouseenter', () => {
            floatingButton.style.backgroundColor = '#f0f0f0';
            floatingButton.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
        });

        floatingButton.addEventListener('mouseleave', () => {
            floatingButton.style.backgroundColor = 'white';
            floatingButton.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
        });

        const sliderContainer = document.createElement('div');
        sliderContainer.style.display = 'flex';
        sliderContainer.style.flexDirection = 'column';
        sliderContainer.style.gap = '5px';

        const sliderLabel = document.createElement('label');
        sliderLabel.textContent = i18n.sliderLabel;
        sliderLabel.style.fontSize = '12px';

        const sliderValue = document.createElement('span');
        sliderValue.style.fontSize = '12px';
        sliderValue.textContent = getZoomLevel();

        const slider = document.createElement('input');
        slider.type = 'range';
        slider.min = '4';
        slider.max = '12';
        slider.value = getZoomLevel();
        slider.style.width = '100%';

        let isZooming = false;
        const zoomHandler = async () => {
            if (!isZooming) {
                isZooming = true;
                await performQuickZoom();
                isZooming = false;
            }
        };

        slider.addEventListener('input', (e) => {
            const value = e.target.value;
            sliderValue.textContent = value;
            setZoomLevel(value);
            sidebarButton.title = `${i18n.buttonTooltip} ${value}`;
            floatingButton.title = `${i18n.buttonTooltip} ${value}`;
        });

        sidebarButton.addEventListener('click', zoomHandler);
        floatingButton.addEventListener('click', zoomHandler);

        const checkboxContainer = document.createElement('div');
        checkboxContainer.style.display = 'flex';
        checkboxContainer.style.alignItems = 'center';
        checkboxContainer.style.gap = '5px';

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.id = 'auto-quick-zoom';
        checkbox.checked = getAutoZoomSetting();

        const label = document.createElement('label');
        label.htmlFor = 'auto-quick-zoom';
        label.textContent = i18n.autoLoadLabel;
        label.style.fontSize = '12px';

        checkbox.addEventListener('change', (e) => {
            setAutoZoomSetting(e.target.checked);
        });

        sliderContainer.appendChild(sliderLabel);
        sliderContainer.appendChild(slider);
        sliderContainer.appendChild(sliderValue);
        checkboxContainer.appendChild(checkbox);
        checkboxContainer.appendChild(label);
        container.appendChild(sidebarButton);
        container.appendChild(sliderContainer);
        container.appendChild(checkboxContainer);
        tabPane.appendChild(container);
        document.body.appendChild(floatingButton);

        await W.userscripts.waitForElementConnected(tabPane);

        if (getAutoZoomSetting()) {
            await performQuickZoom();
        }
    }

    if (W?.userscripts?.state.isReady) {
        initializeQuickZoom();
    } else {
        document.addEventListener("wme-ready", initializeQuickZoom, {
            once: true,
        });
    }
})();