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.
/* ==========================================================================
   DEFINITIVE MOBILE & DESKTOP VANI-SEARCH CONTROLLER
   Defeats Minerva's #/search blank overlay and provides a direct search bar
   ========================================================================== */
(function() {
    // 1. If Minerva's #/search hash is in the URL, strip it immediately so the blank overlay closes
    if (window.location.hash === '#/search') {
        history.replaceState(null, document.title, window.location.pathname + window.location.search);
    }
    window.addEventListener('hashchange', function() {
        if (window.location.hash === '#/search') {
            history.replaceState(null, document.title, window.location.pathname + window.location.search);
            $('.search-overlay, .minerva-search-overlay').remove();
            $('body').removeClass('search-enabled overlay-enabled');
        }
    });

    // 2. Build a dedicated, always-visible mobile search drawer right under the 52px top bar
    function toggleVaniMobileSearch() {
        var existing = document.getElementById('vani-custom-mobile-search');
        if (existing) {
            if (existing.style.display === 'none') {
                existing.style.display = 'flex';
                existing.querySelector('input').focus();
            } else {
                existing.style.display = 'none';
            }
            return;
        }

        var bar = document.createElement('div');
        bar.id = 'vani-custom-mobile-search';
        bar.style.cssText = 'position:fixed !important; top:52px !important; left:0 !important; right:0 !important; height:54px !important; background:#1f3e45 !important; border-bottom:2px solid #b1873d !important; z-index:2147483647 !important; display:flex !important; align-items:center !important; padding:0 12px !important; gap:8px !important; box-shadow:0 6px 16px rgba(0,0,0,0.45) !important; box-sizing:border-box !important;';

        var input = document.createElement('input');
        input.type = 'text';
        input.placeholder = 'Search Vanipedia...';
        input.autocomplete = 'off';
        input.style.cssText = 'flex:1 1 auto !important; height:36px !important; background:#ffffff !important; color:#1e353b !important; -webkit-text-fill-color:#1e353b !important; border:1.5px solid #f5d77f !important; border-radius:18px !important; padding:0 14px !important; font-size:16px !important; outline:none !important; display:block !important; visibility:visible !important; opacity:1 !important;';

        var goBtn = document.createElement('button');
        goBtn.type = 'button';
        goBtn.innerHTML = '🔍';
        goBtn.style.cssText = 'flex:0 0 38px !important; width:38px !important; height:36px !important; border-radius:50% !important; background:#b1873d !important; color:#ffffff !important; border:none !important; font-size:18px !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important;';

        function runSearch() {
            var val = input.value.trim();
            if (val !== '') {
                window.location.href = '/wiki/Special:VaniSearch?search=' + encodeURIComponent(val);
            }
        }

        goBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            runSearch();
        });

        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.keyCode === 13) {
                e.preventDefault();
                e.stopImmediatePropagation();
                runSearch();
            }
        });

        bar.appendChild(input);
        bar.appendChild(goBtn);
        document.body.appendChild(bar);
        setTimeout(function() { input.focus(); }, 50);
    }

    // 3. Intercept the Minerva mobile magnifying glass (#searchIcon) BEFORE Minerva's router sees it
    document.addEventListener('click', function(e) {
        var searchTrigger = e.target.closest('#searchIcon, .minerva-header .minerva-search-form, .minerva-icon--search');
        if (searchTrigger && (window.innerWidth <= 999 || document.body.classList.contains('skin-minerva'))) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            toggleVaniMobileSearch();
            return false;
        }
    }, true); // Capture phase = true beats Minerva's native click handler

    // 4. Desktop Search Bar: Add 🔍 icon and route Enter key to Special:VaniSearch
    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);
})();
Vanipedia Search ×
