☰

Map Controls Hide

Toggle the display of the Torn map controls

当前为 2024-08-24 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Map Controls Hide
  3. // @namespace    https://lazerpent.com
  4. // @version      1.0
  5. // @description  Toggle the display of the Torn map controls
  6. // @author       Lazerpent
  7. // @match        https://www.torn.com/city.php*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     const stateKey = 'hide-controls';
  15.  
  16.     const style = document.createElement('style');
  17.     style.textContent = `
  18.         .hidden-container .leaflet-control-container {
  19.             display: none;
  20.         }
  21.     `;
  22.     document.head.appendChild(style);
  23.  
  24.     function injectSwitch() {
  25.         const mapContainer = document.getElementById('map-cont');
  26.         if (mapContainer && !document.getElementById('controls-switcher')) {
  27.             const toggleHTML = document.createElement('div');
  28.             toggleHTML.className = 'territory-info-toggle white-grad border-round m-top10 p10 t-gray-6';
  29.             toggleHTML.innerHTML = `
  30.                 <div class="info">
  31.                     <span class="inactive-mode hide">
  32.                         Enable to hide map controls.
  33.                     </span>
  34.                     <span class="active-mode">
  35.                         Map controls are being hidden.
  36.                     </span>
  37.                 </div>
  38.                 <div class="btn-toggle-wrap torn-switcher">
  39.                     <input type="checkbox" id="controls-switcher" switch="" class="active">
  40.                     <label for="controls-switcher" data-on-label="on" data-off-label="off"></label>
  41.                 </div>`;
  42.             mapContainer.appendChild(toggleHTML);
  43.  
  44.             const switcher = toggleHTML.querySelector('#controls-switcher');
  45.  
  46.             const savedState = localStorage.getItem(stateKey);
  47.             const isHidden = savedState === 'true';
  48.             switcher.checked = isHidden;
  49.             applyState(isHidden, mapContainer, toggleHTML);
  50.  
  51.             switcher.addEventListener('change', function() {
  52.                 const newState = this.checked;
  53.                 localStorage.setItem(stateKey, newState);
  54.                 applyState(newState, mapContainer, toggleHTML);
  55.             });
  56.         }
  57.     }
  58.  
  59.     function applyState(isHidden, mapContainer, toggleHTML) {
  60.         if (isHidden) {
  61.             mapContainer.classList.add('hidden-container');
  62.             toggleHTML.querySelector('.inactive-mode').classList.add('hide');
  63.             toggleHTML.querySelector('.active-mode').classList.remove('hide');
  64.         } else {
  65.             mapContainer.classList.remove('hidden-container');
  66.             toggleHTML.querySelector('.inactive-mode').classList.remove('hide');
  67.             toggleHTML.querySelector('.active-mode').classList.add('hide');
  68.         }
  69.     }
  70.  
  71.     const observer = new MutationObserver(function(mutations) {
  72.         mutations.forEach(function(mutation) {
  73.             if (mutation.type === 'childList' || mutation.type === 'subtree') {
  74.                 injectSwitch();
  75.             }
  76.         });
  77.     });
  78.  
  79.     observer.observe(document.body, { childList: true, subtree: true });
  80.  
  81.     injectSwitch();
  82. })();