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.
/* Mobile and Desktop VaniSearch Popup Setup (for search_popup.js) */
(function() {
    function setupSearch() {
        var minervaHeader = document.querySelector('.minerva-header');
        if (minervaHeader) {
            document.documentElement.classList.remove('overlay-enabled');
            document.body.classList.remove('search-enabled', 'overlay-enabled');

            var b = minervaHeader.querySelector('.branding-box');
            if (b) b.style.setProperty('display', 'none', 'important');

            var mForm = minervaHeader.querySelector('form.minerva-search-form');
            if (mForm && !mForm.dataset.vaniConverted) {
                mForm.dataset.vaniConverted = 'true';

                // Create a form that never navigates the browser away
                var cleanForm = document.createElement('form');
                cleanForm.id = 'searchform';
                cleanForm.className = 'vani-mobile-search-wrap';
                cleanForm.action = 'javascript:void(0);';
                cleanForm.style.cssText = 'flex:1 1 auto !important; display:flex !important; align-items:center !important; position:relative !important; margin:0 10px !important; z-index:999999 !important;';

                var inp = document.createElement('input');
                inp.type = 'search';
                inp.id = 'searchInput';
                inp.name = 'search';
                inp.className = 'vani-clean-search-input mw-searchInput cdx-text-input__input';
                inp.placeholder = 'Search Vanipedia';
                inp.autocomplete = 'off';
                inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

                var btn = document.createElement('button');
                btn.type = 'button'; // 'button' instead of 'submit' so it never reloads the page
                btn.id = 'searchButton';
                btn.className = 'vani-inline-go';
                btn.innerHTML = '🔍';
                btn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:10 !important;';

                // Block form submission so the browser stays on the current page with the popup open
                cleanForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }, true);

                // Stop focus/click from bubbling to Minerva's header overlay,
                // IMPORTANT: Do NOT stop 'keydown' here so search_popup.js can hear the Enter key!
                ['click', 'focus', 'focusin', 'touchstart', 'input'].forEach(function(evtType) {
                    inp.addEventListener(evtType, function(e) {
                        e.stopPropagation();
                    }, false);
                });

                // On Enter key, prevent native form submit navigation, but let the event bubble to search_popup.js
                inp.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' || e.keyCode === 13) {
                        e.preventDefault();
                    }
                }, false);

                // Clicking the 🔍 icon triggers a single Enter keydown event for search_popup.js
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    inp.focus();
                    var enterEv = new KeyboardEvent('keydown', {
                        key: 'Enter',
                        code: 'Enter',
                        keyCode: 13,
                        which: 13,
                        bubbles: true,
                        cancelable: true
                    });
                    inp.dispatchEvent(enterEv);
                }, false);

                cleanForm.appendChild(inp);
                cleanForm.appendChild(btn);
                mForm.replaceWith(cleanForm);

                // Re-run search_popup.js binding if it only bound on initial page load
                if (typeof window.initSearchPopup === 'function') window.initSearchPopup();
            }
        }

        // 2. Desktop (Vector): Stop form submit from navigating away after search_popup.js opens the popup
        var desktopForm = document.querySelector('#p-search form, form#searchform');
        if (desktopForm && !desktopForm.classList.contains('vani-mobile-search-wrap') && !desktopForm.dataset.vaniPopupFixed) {
            desktopForm.dataset.vaniPopupFixed = 'true';
            desktopForm.addEventListener('submit', function(e) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }, true);
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', setupSearch);
    } else {
        setupSearch();
    }
    setTimeout(setupSearch, 250);
})();
Vanipedia Search ×
