☰

WME Mobile Support

A userscript that makes the WME more useable on mobile devices

目前为 2018-03-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        WME Mobile Support
  3. // @namespace   http://tomputtemans.com/
  4. // @description A userscript that makes the WME more useable on mobile devices
  5. // @include     /^https:\/\/(www|beta)\.waze\.com\/(?!user\/)(.{2,6}\/)?editor.*$/
  6. // @version     0.2.0
  7. // @grant       none
  8. // ==/UserScript==
  9.  
  10. // Initialisation of the script, this will only run completely one time
  11. function init(e) {
  12.   if (e && e.user == null) {
  13.     return;
  14.   }
  15.   // if you require certain features to be loaded, you can add them here
  16.   if (typeof I18n === 'undefined' || typeof W === 'undefined' ||  typeof W.loginManager === 'undefined') {
  17.     setTimeout(init, 200);
  18.     return;
  19.   }
  20.   setModeChangeListener();
  21.   performScript();
  22. }
  23.  
  24. // Attempt to hook into the controller that can notify us whenever the editor's mode changes
  25. function setModeChangeListener() {
  26.   if (!W.app || !W.app.modeController) {
  27.     setTimeout(setModeChangeListener, 400);
  28.     return;
  29.   }
  30.   W.app.modeController.model.bind('change:mode', function(model, modeId) {
  31.     if (modeId == 0) { // 0 = Default, 1 = Events
  32.       performScript();
  33.     }
  34.   });
  35. }
  36.  
  37. function performScript() {
  38.   var viewportMeta = document.createElement('meta');
  39.   viewportMeta.name = 'viewport';
  40.   viewportMeta.content = 'width=device-width, initial-scale=1';
  41.   document.head.appendChild(viewportMeta);
  42.   var styleElement = document.createElement('style');
  43.   styleElement.textContent = `@media screen and (max-width: 1000px) {
  44.   /* Login dialog modifications */
  45.   .modal-dialog-login { width: 100%; margin: 0 }
  46.   .modal-dialog-login .modal-content { width: 350px }
  47.   #login-popup { padding: 10px; width: auto }
  48.   #login-popup .login-popup-content { display: block }
  49.   #login-popup .login-form { padding: 15px; height: auto }
  50.   .modal-dialog-login .login-title { font-size: 19px }
  51.  
  52.   /* Hide a lot of stuff */
  53.   .login-popup-links, .language-select, .welcome-message p, .title-text, #links, #advanced-tools, .WazeControlMousePosition, #user-box, #chat-overlay, .google-permalink { display: none !important }
  54.  
  55.   /* Set the default width to several objects so they don't stretch the page */
  56.   #editor-container, #editor-container #map { min-width: auto }
  57.  
  58.   /* Adjust the sidebar and map so they appear on top of eachother */
  59.   @media (orientation: portrait) {
  60.     .show-sidebar .row-fluid .fluid-fixed { width: 100%; margin-left: 0 }
  61.     .row-fluid #sidebar { width: auto }
  62.     .edit-area { display: flex; flex-direction: column-reverse }
  63.     #WazeMap { height: 40vh !important }
  64.     #editor-container:before, .show-sidebar #map, .show-sidebar #map:after { border-radius: 0 }
  65.     .toolbar .toolbar-icon { width: 30px }
  66.     #edit-buttons .toolbar-button { padding: 0 5px }
  67.   }
  68.  
  69.   /* Adjust the sidebar and map so they share the space horizontally */
  70.   @media (orientation: landscape) {
  71.     .show-sidebar .row-fluid .fluid-fixed { width: calc(100% - 330px); min-width: 50%; margin-left: 0 }
  72.     .row-fluid #sidebar { max-width: 50% }
  73.     #sidebar .tab-scroll-gradient { width: 100%; margin-left: -15px }
  74.     .edit-area { display: flex }
  75.   }
  76.  
  77.   /* Adjust toolbar */
  78.   .toolbar #search { width: 50px; min-width: auto }
  79.   #app-head aside #brand, .group-title { display: none }
  80.   .toolbar .toolbar-icon { position: relative }
  81.   #edit-buttons .toolbar-button .item-icon { display: block; top: 8px; position: relative }
  82.   #edit-buttons .toolbar-button .menu-title { display: none }
  83.   #edit-buttons { flex-grow: 1 }
  84.   #edit-buttons .toolbar-submenu { margin-right: 0 }
  85.   #toolbar .toolbar, #edit-buttons { min-width: auto }
  86.  
  87.   /* Map adjustments */
  88.   .olControlPanZoomBar { bottom: 50px }
  89. }`;
  90.   document.head.appendChild(styleElement);
  91.  
  92.   var adjustToolbar = function() {
  93.     if (!document.querySelector('#mode-switcher') || !document.querySelector('#edit-buttons')) {
  94.       setTimeout(adjustToolbar, 100);
  95.       return;
  96.     }
  97.     document.querySelector('#mode-switcher .short-title').textContent = 'Mode';
  98.     var addStickyClasses = function(el, classes) {
  99.       var observer = new MutationObserver(function() {
  100.         el.querySelector('.item-icon').classList.add(...classes);
  101.       });
  102.       observer.observe(el, {
  103.         childList: true
  104.       });
  105.       el.querySelector('.item-icon').classList.add(...classes);
  106.     };
  107.     addStickyClasses(document.querySelector('#edit-buttons .toolbar-button.waze-icon-save'), ['fa', 'fa-save']);
  108.     addStickyClasses(document.querySelector('#edit-buttons .toolbar-button.waze-icon-redo'), ['fa', 'fa-chevron-right']);
  109.     addStickyClasses(document.querySelector('#edit-buttons .toolbar-button.waze-icon-undo'), ['fa', 'fa-chevron-left']);
  110.   };
  111.   adjustToolbar();
  112. }
  113.  
  114. init();