☰

WME Quick Zoom Button

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

  1. // ==UserScript==
  2. // @name         WME Quick Zoom Button
  3. // @name:en      WME Quick Zoom Button
  4. // @name:es      Botón de Zoom Rápido WME
  5. // @version      2025.05.16
  6. // @description  Fügt einen Button für temporären Zoom hinzu für bessere Chat sichtbarkeit
  7. // @description:en  Adds a button for temporary zoom for better chat visibility
  8. // @description:es  Agrega un botón para zoom temporal para una mejor visibilidad del chat
  9. // @author       Hiwi234
  10. // @match        https://www.waze.com/editor*
  11. // @match        https://www.waze.com/*/editor*
  12. // @match        https://beta.waze.com/editor*
  13. // @match        https://beta.waze.com/*/editor*
  14. // @grant        none
  15. // @license      MIT
  16. // @namespace https://greasyfork.org/de/users/863740-horst-wittlich
  17. // ==/UserScript==
  18.  
  19. (function() {
  20.     'use strict';
  21.  
  22.     const STORAGE_KEY = {
  23.         AUTO: 'wme-quick-zoom-auto',
  24.         ZOOM: 'wme-quick-zoom-level'
  25.     };
  26.  
  27.     const translations = {
  28.         'de': {
  29.             buttonText: 'Quick Zoom',
  30.             buttonTooltip: 'Temporär auf Zoomstufe zoomen',
  31.             sliderLabel: 'Maximale Zoomstufe:',
  32.             autoLoadLabel: 'Automatisch beim Laden'
  33.         },
  34.         'en': {
  35.             buttonText: 'Quick Zoom',
  36.             buttonTooltip: 'Temporarily zoom to level',
  37.             sliderLabel: 'Maximum zoom level:',
  38.             autoLoadLabel: 'Automatic on load'
  39.         },
  40.         'es': {
  41.             buttonText: 'Zoom Rápido',
  42.             buttonTooltip: 'Zoom temporal al nivel',
  43.             sliderLabel: 'Nivel máximo de zoom:',
  44.             autoLoadLabel: 'Automático al cargar'
  45.         }
  46.     };
  47.  
  48.     function getLanguage() {
  49.         const lang = navigator.language.split('-')[0];
  50.         return translations[lang] ? lang : 'en';
  51.     }
  52.  
  53.     function getAutoZoomSetting() {
  54.         return localStorage.getItem(STORAGE_KEY.AUTO) === 'true';
  55.     }
  56.  
  57.     function setAutoZoomSetting(value) {
  58.         localStorage.setItem(STORAGE_KEY.AUTO, value);
  59.     }
  60.  
  61.     function getZoomLevel() {
  62.         return parseInt(localStorage.getItem(STORAGE_KEY.ZOOM) || '7');
  63.     }
  64.  
  65.     function setZoomLevel(value) {
  66.         localStorage.setItem(STORAGE_KEY.ZOOM, value);
  67.     }
  68.  
  69.     async function performQuickZoom() {
  70.         const originalZoom = W.map.olMap.getZoom();
  71.         W.map.olMap.zoomTo(getZoomLevel());
  72.  
  73.         return new Promise(resolve => {
  74.             setTimeout(() => {
  75.                 W.map.olMap.zoomTo(originalZoom);
  76.                 resolve();
  77.             }, 2000);
  78.         });
  79.     }
  80.  
  81.     async function initializeQuickZoom() {
  82.         const i18n = translations[getLanguage()];
  83.         const { tabLabel, tabPane } = W.userscripts.registerSidebarTab("quick-zoom-script");
  84.  
  85.         tabLabel.innerText = 'QZ';
  86.         tabLabel.title = i18n.buttonText;
  87.  
  88.         const container = document.createElement('div');
  89.         container.style.display = 'flex';
  90.         container.style.flexDirection = 'column';
  91.         container.style.gap = '10px';
  92.         container.style.padding = '10px';
  93.  
  94.         const sidebarButton = document.createElement('button');
  95.         sidebarButton.className = 'waze-btn waze-btn-small';
  96.         sidebarButton.innerText = i18n.buttonText;
  97.         sidebarButton.title = i18n.buttonTooltip;
  98.  
  99.         const floatingButton = document.createElement('button');
  100.         floatingButton.innerText = 'QZ';
  101.         floatingButton.title = i18n.buttonTooltip;
  102.         floatingButton.style.cssText = `
  103.             position: fixed;
  104.             bottom: 20px;
  105.             left: 20px;
  106.             z-index: 1000;
  107.             background-color: white;
  108.             border: 1px solid #ccc;
  109.             padding: 8px 15px;
  110.             border-radius: 20px;
  111.             box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  112.             cursor: pointer;
  113.             font-weight: bold;
  114.             transition: all 0.3s ease;
  115.         `;
  116.  
  117.         floatingButton.addEventListener('mouseenter', () => {
  118.             floatingButton.style.backgroundColor = '#f0f0f0';
  119.             floatingButton.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
  120.         });
  121.  
  122.         floatingButton.addEventListener('mouseleave', () => {
  123.             floatingButton.style.backgroundColor = 'white';
  124.             floatingButton.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
  125.         });
  126.  
  127.         const sliderContainer = document.createElement('div');
  128.         sliderContainer.style.display = 'flex';
  129.         sliderContainer.style.flexDirection = 'column';
  130.         sliderContainer.style.gap = '5px';
  131.  
  132.         const sliderLabel = document.createElement('label');
  133.         sliderLabel.textContent = i18n.sliderLabel;
  134.         sliderLabel.style.fontSize = '12px';
  135.  
  136.         const sliderValue = document.createElement('span');
  137.         sliderValue.style.fontSize = '12px';
  138.         sliderValue.textContent = getZoomLevel();
  139.  
  140.         const slider = document.createElement('input');
  141.         slider.type = 'range';
  142.         slider.min = '4';
  143.         slider.max = '12';
  144.         slider.value = getZoomLevel();
  145.         slider.style.width = '100%';
  146.  
  147.         let isZooming = false;
  148.         const zoomHandler = async () => {
  149.             if (!isZooming) {
  150.                 isZooming = true;
  151.                 await performQuickZoom();
  152.                 isZooming = false;
  153.             }
  154.         };
  155.  
  156.         slider.addEventListener('input', (e) => {
  157.             const value = e.target.value;
  158.             sliderValue.textContent = value;
  159.             setZoomLevel(value);
  160.             sidebarButton.title = `${i18n.buttonTooltip} ${value}`;
  161.             floatingButton.title = `${i18n.buttonTooltip} ${value}`;
  162.         });
  163.  
  164.         sidebarButton.addEventListener('click', zoomHandler);
  165.         floatingButton.addEventListener('click', zoomHandler);
  166.  
  167.         const checkboxContainer = document.createElement('div');
  168.         checkboxContainer.style.display = 'flex';
  169.         checkboxContainer.style.alignItems = 'center';
  170.         checkboxContainer.style.gap = '5px';
  171.  
  172.         const checkbox = document.createElement('input');
  173.         checkbox.type = 'checkbox';
  174.         checkbox.id = 'auto-quick-zoom';
  175.         checkbox.checked = getAutoZoomSetting();
  176.  
  177.         const label = document.createElement('label');
  178.         label.htmlFor = 'auto-quick-zoom';
  179.         label.textContent = i18n.autoLoadLabel;
  180.         label.style.fontSize = '12px';
  181.  
  182.         checkbox.addEventListener('change', (e) => {
  183.             setAutoZoomSetting(e.target.checked);
  184.         });
  185.  
  186.         sliderContainer.appendChild(sliderLabel);
  187.         sliderContainer.appendChild(slider);
  188.         sliderContainer.appendChild(sliderValue);
  189.         checkboxContainer.appendChild(checkbox);
  190.         checkboxContainer.appendChild(label);
  191.         container.appendChild(sidebarButton);
  192.         container.appendChild(sliderContainer);
  193.         container.appendChild(checkboxContainer);
  194.         tabPane.appendChild(container);
  195.         document.body.appendChild(floatingButton);
  196.  
  197.         await W.userscripts.waitForElementConnected(tabPane);
  198.  
  199.         if (getAutoZoomSetting()) {
  200.             await performQuickZoom();
  201.         }
  202.     }
  203.  
  204.     if (W?.userscripts?.state.isReady) {
  205.         initializeQuickZoom();
  206.     } else {
  207.         document.addEventListener("wme-ready", initializeQuickZoom, {
  208.             once: true,
  209.         });
  210.     }
  211. })();