Map Controls Hide

Toggle the display of the Torn map controls

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey, το Greasemonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

You will need to install an extension such as Tampermonkey to install this script.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Userscripts για να εγκαταστήσετε αυτόν τον κώδικα.

You will need to install an extension such as Tampermonkey to install this script.

Θα χρειαστεί να εγκαταστήσετε μια επέκταση διαχείρισης κώδικα χρήστη για να εγκαταστήσετε αυτόν τον κώδικα.

(Έχω ήδη έναν διαχειριστή κώδικα χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Έχω ήδη έναν διαχειριστή στυλ χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

// ==UserScript==
// @name         Map Controls Hide
// @namespace    https://lazerpent.com
// @version      1.0
// @description  Toggle the display of the Torn map controls
// @author       Lazerpent
// @match        https://www.torn.com/city.php*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const stateKey = 'hide-controls';

    const style = document.createElement('style');
    style.textContent = `
        .hidden-container .leaflet-control-container {
            display: none;
        }
    `;
    document.head.appendChild(style);

    function injectSwitch() {
        const mapContainer = document.getElementById('map-cont');
        if (mapContainer && !document.getElementById('controls-switcher')) {
            const toggleHTML = document.createElement('div');
            toggleHTML.className = 'territory-info-toggle white-grad border-round m-top10 p10 t-gray-6';
            toggleHTML.innerHTML = `
                <div class="info">
                    <span class="inactive-mode hide">
                        Enable to hide map controls.
                    </span>
                    <span class="active-mode">
                        Map controls are being hidden.
                    </span>
                </div>
                <div class="btn-toggle-wrap torn-switcher">
                    <input type="checkbox" id="controls-switcher" switch="" class="active">
                    <label for="controls-switcher" data-on-label="on" data-off-label="off"></label>
                </div>`;
            mapContainer.appendChild(toggleHTML);

            const switcher = toggleHTML.querySelector('#controls-switcher');

            const savedState = localStorage.getItem(stateKey);
            const isHidden = savedState === 'true';
            switcher.checked = isHidden;
            applyState(isHidden, mapContainer, toggleHTML);

            switcher.addEventListener('change', function() {
                const newState = this.checked;
                localStorage.setItem(stateKey, newState);
                applyState(newState, mapContainer, toggleHTML);
            });
        }
    }

    function applyState(isHidden, mapContainer, toggleHTML) {
        if (isHidden) {
            mapContainer.classList.add('hidden-container');
            toggleHTML.querySelector('.inactive-mode').classList.add('hide');
            toggleHTML.querySelector('.active-mode').classList.remove('hide');
        } else {
            mapContainer.classList.remove('hidden-container');
            toggleHTML.querySelector('.inactive-mode').classList.remove('hide');
            toggleHTML.querySelector('.active-mode').classList.add('hide');
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' || mutation.type === 'subtree') {
                injectSwitch();
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

    injectSwitch();
})();