Mobile Menu Control iOS

Tombol MENU/Q/E/J untuk userscript di HP iOS

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name         Mobile Menu Control iOS
// @namespace    mobile-menu-control-ios
// @version      1.0.0
// @description  Tombol MENU/Q/E/J untuk userscript di HP iOS
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    function ready(callback) {
        if (document.body) {
            callback();
        } else {
            window.addEventListener('DOMContentLoaded', callback);
        }
    }

    function sendKey(key, code, keyCode) {
        const options = {
            key: key,
            code: code,
            keyCode: keyCode,
            which: keyCode,
            bubbles: true,
            cancelable: true,
            composed: true
        };

        const down = new KeyboardEvent('keydown', options);
        const up = new KeyboardEvent('keyup', options);

        document.dispatchEvent(down);
        window.dispatchEvent(down);

        setTimeout(() => {
            document.dispatchEvent(up);
            window.dispatchEvent(up);
        }, 30);
    }

    function keyInfo(key) {
        const map = {
            Insert: { key: 'Insert', code: 'Insert', keyCode: 45 },
            q: { key: 'q', code: 'KeyQ', keyCode: 81 },
            e: { key: 'e', code: 'KeyE', keyCode: 69 },
            J: { key: 'J', code: 'KeyJ', keyCode: 74 }
        };

        return map[key];
    }

    function createMobileControl() {
        if (document.getElementById('mobile-menu-control-ios')) return;

        const style = document.createElement('style');
        style.textContent = `
            #mobile-menu-control-ios {
                position: fixed;
                right: 15px;
                bottom: 95px;
                z-index: 2147483647;
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding: 8px;
                background: rgba(0,0,0,.58);
                border: 1px solid rgba(255,255,255,.18);
                border-radius: 16px;
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
                user-select: none;
                -webkit-user-select: none;
                touch-action: none;
                font-family: Arial, sans-serif;
            }

            #mobile-menu-control-ios .mobile-row {
                display: flex;
                gap: 8px;
            }

            #mobile-menu-control-ios button {
                min-width: 54px;
                height: 46px;
                border: none;
                border-radius: 13px;
                background: #8b5cf6;
                color: white;
                font-size: 14px;
                font-weight: bold;
                box-shadow: 0 6px 18px rgba(0,0,0,.35);
                touch-action: manipulation;
            }

            #mobile-menu-control-ios button:active {
                transform: scale(.95);
                background: #7c3aed;
            }

            #mobile-menu-control-ios .small-btn {
                min-width: 38px;
                background: rgba(30,30,30,.95);
            }

            #mobile-menu-control-ios.minimized {
                background: transparent;
                border: none;
                padding: 0;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            #mobile-menu-control-ios.minimized .extra-row,
            #mobile-menu-control-ios.minimized .small-btn {
                display: none;
            }

            #mobile-menu-control-ios.minimized #mobile-menu-btn-ios {
                width: 76px;
                height: 52px;
            }
        `;
        document.head.appendChild(style);

        const panel = document.createElement('div');
        panel.id = 'mobile-menu-control-ios';

        panel.innerHTML = `
            <div class="mobile-row">
                <button id="mobile-menu-btn-ios">MENU</button>
                <button id="mobile-min-btn-ios" class="small-btn">−</button>
            </div>

            <div class="mobile-row extra-row">
                <button data-key="q">Q</button>
                <button data-key="e">E</button>
                <button data-key="J">J</button>
            </div>
        `;

        document.body.appendChild(panel);

        const menuBtn = document.getElementById('mobile-menu-btn-ios');
        const minBtn = document.getElementById('mobile-min-btn-ios');

        let locked = false;
        let longPressTimer = null;
        let longPressed = false;

        function pressMenu(e) {
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }

            if (locked) return;
            locked = true;

            const info = keyInfo('Insert');
            sendKey(info.key, info.code, info.keyCode);

            setTimeout(() => {
                locked = false;
            }, 500);
        }

        function toggleMinimize(e) {
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }

            panel.classList.toggle('minimized');
        }

        menuBtn.addEventListener('touchstart', function (e) {
            e.preventDefault();
            e.stopPropagation();

            longPressed = false;

            longPressTimer = setTimeout(() => {
                longPressed = true;
                toggleMinimize(e);
            }, 650);
        }, { passive: false });

        menuBtn.addEventListener('touchend', function (e) {
            e.preventDefault();
            e.stopPropagation();

            clearTimeout(longPressTimer);

            if (!longPressed) {
                pressMenu(e);
            }
        }, { passive: false });

        menuBtn.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();

            if (!('ontouchstart' in window)) {
                pressMenu(e);
            }
        });

        minBtn.addEventListener('click', toggleMinimize);
        minBtn.addEventListener('touchstart', toggleMinimize, { passive: false });

        panel.querySelectorAll('[data-key]').forEach(function (btn) {
            function pressExtra(e) {
                e.preventDefault();
                e.stopPropagation();

                const info = keyInfo(btn.dataset.key);
                sendKey(info.key, info.code, info.keyCode);
            }

            btn.addEventListener('click', pressExtra);
            btn.addEventListener('touchstart', pressExtra, { passive: false });
        });
    }

    ready(createMobileControl);
})();