MediaWiki:Mobile.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* PERMANENT VANI-SEARCH ICON & KEYBOARD ROUTER (DESKTOP + MOBILE) */
(function() {
    function setupVaniSearch() {
        // 1. Force the #p-search box to stay open on mobile Vector (defeats the collapsed icon toggle)
        var searchBox = document.querySelector('#p-search');
        if (searchBox) {
            searchBox.classList.add('vector-search-box-show-thumbnail');
        }

        // 2. Find all search inputs on the page
        var inputs = document.querySelectorAll('input[type="search"], input[name="search"], #searchInput');
        inputs.forEach(function(input) {
            // Turn off native browser autocomplete
            input.setAttribute('autocomplete', 'off');

            var wrapper = input.parentElement;
            if (!wrapper) return;

            // Only inject the 🔍 button once per search bar
            if (!wrapper.querySelector('.vani-search-trigger-btn')) {
                wrapper.style.setProperty('position', 'relative', 'important');
                wrapper.style.setProperty('display', 'flex', 'important');
                wrapper.style.setProperty('align-items', 'center', 'important');

                var btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'vani-search-trigger-btn';
                btn.innerHTML = '🔍';
                btn.title = 'Search VaniSearch';
                btn.style.cssText = 'position:absolute !important; right:6px !important; top:50% !important; transform:translateY(-50%) !important; background:transparent !important; border:none !important; font-size:15px !important; line-height:1 !important; padding:4px !important; cursor:pointer !important; z-index:9999 !important; display:flex !important; align-items:center !important; justify-content:center !important;';

                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    var val = input.value.trim();
                    if (val !== '') {
                        window.location.href = '/wiki/Special:VaniSearch?search=' + encodeURIComponent(val);
                    } else {
                        input.focus();
                    }
                });

                wrapper.appendChild(btn);
            }
        });
    }

    // Intercept Enter / Mobile Keyboard "Search/Go" key in Capture Phase (beats Vue.js)
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            var el = e.target;
            if (el && el.tagName === 'INPUT' && (el.type === 'search' || el.name === 'search' || el.id === 'searchInput')) {
                e.preventDefault();
                e.stopImmediatePropagation();
                var val = el.value.trim();
                if (val !== '') {
                    window.location.href = '/wiki/Special:VaniSearch?search=' + encodeURIComponent(val);
                }
            }
        }
    }, true);

    // Intercept any form submission as a backup for mobile virtual keyboards
    document.addEventListener('submit', function(e) {
        var form = e.target;
        var input = form && form.querySelector('input[type="search"], input[name="search"], #searchInput');
        if (input) {
            e.preventDefault();
            e.stopImmediatePropagation();
            var val = input.value.trim();
            if (val !== '') {
                window.location.href = '/wiki/Special:VaniSearch?search=' + encodeURIComponent(val);
            }
        }
    }, true);

    // Run immediately, on DOM ready, and briefly poll in case Vue rebuilds the input
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', setupVaniSearch);
    } else {
        setupVaniSearch();
    }
    setInterval(setupVaniSearch, 800);
})();
Vanipedia Search ×
