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. })();