MediaWiki:Mobile.js: Difference between revisions

Revision as of 02:39, 13 November 2026

/* Mobile and Desktop VaniSearch Popup Launcher */
(function() {
    function triggerVaniSearchPopup(queryText) {
        // 1. If the VaniSearch extension provides a global popup function on the page, call it
        if (typeof window.openVaniSearch === 'function') {
            window.openVaniSearch(queryText);
            return;
        }
        if (typeof window.VaniSearch === 'object' && typeof window.VaniSearch.open === 'function') {
            window.VaniSearch.open(queryText);
            return;
        }

        // 2. If there is a hidden popup/modal element already in the DOM, open it and fill the input
        var modal = document.querySelector('#vani-search-modal, #vanisearch-popup, .vani-search-modal, .vanisearch-overlay');
        if (modal) {
            modal.style.display = 'flex';
            modal.classList.add('is-open', 'active', 'visible');
            var modalInput = modal.querySelector('input[type="text"], input[type="search"]');
            if (modalInput) {
                modalInput.value = queryText || '';
                modalInput.focus();
            }
            return;
        }

        // 3. Otherwise, open the Special:VaniSearch extension page first (without forcing immediate results)
        // Stores the typed word in sessionStorage so Special:VaniSearch can pre-fill its input box
        if (queryText) {
            try { sessionStorage.setItem('vani_pending_query', queryText); } catch (e) {}
        }
        window.location.href = '/wiki/Special:VaniSearch';
    }

    // If we just landed on Special:VaniSearch, pre-fill the extension's input box with the word the user typed
    if (window.location.pathname.indexOf('Special:VaniSearch') !== -1) {
        window.addEventListener('DOMContentLoaded', function() {
            try {
                var pending = sessionStorage.getItem('vani_pending_query');
                if (pending) {
                    sessionStorage.removeItem('vani_pending_query');
                    setTimeout(function() {
                        var extInput = document.querySelector('#content input[type="text"], #content input[type="search"], .vanisearch-input');
                        if (extInput) {
                            extInput.value = pending;
                            extInput.focus();
                            extInput.dispatchEvent(new Event('input', { bubbles: true }));
                        }
                    }, 150);
                }
            } catch (e) {}
        });
    }

    function installVaniSearch() {
        // 1. Mobile (Minerva header)
        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 f = minervaHeader.querySelector('.minerva-search-form');
            if (f && !document.getElementById('vani-mobile-search-input')) {
                var d = document.createElement('div');
                d.className = 'vani-mobile-search-wrap';
                d.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; pointer-events:auto !important;';

                var inp = document.createElement('input');
                inp.type = 'text';
                inp.id = 'vani-mobile-search-input';
                inp.name = 'search';
                inp.placeholder = 'Search Vanipedia';
                inp.autocomplete = 'off';
                inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !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; pointer-events:auto !important; user-select:text !important; -webkit-user-select:text !important;';

                var btn = document.createElement('button');
                btn.type = 'button';
                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; pointer-events:auto !important;';

                var go = function(e) {
                    if (e) { e.preventDefault(); e.stopPropagation(); }
                    triggerVaniSearchPopup(inp.value.trim());
                };

                btn.addEventListener('click', go, true);
                inp.addEventListener('keydown', function(e) {
                    e.stopPropagation();
                    if (e.key === 'Enter' || e.keyCode === 13) go(e);
                }, true);

                d.appendChild(inp);
                d.appendChild(btn);
                f.replaceWith(d);
            }
        }

        // 2. Desktop (Vector header): Add right-side 🔍 icon without blocking extension's native Enter listener
        var desktopForm = document.querySelector('#p-search form, form#searchform');
        if (desktopForm && !desktopForm.classList.contains('minerva-search-form') && !desktopForm.dataset.vaniBound) {
            desktopForm.dataset.vaniBound = 'true';

            var dInput = desktopForm.querySelector('input[type="search"], input[name="search"], #searchInput');
            if (dInput) {
                dInput.setAttribute('autocomplete', 'off');
                var wrap = dInput.parentElement;
                if (wrap && !wrap.querySelector('.vani-inline-go')) {
                    wrap.style.position = 'relative';
                    var dBtn = document.createElement('button');
                    dBtn.type = 'button';
                    dBtn.className = 'vani-inline-go';
                    dBtn.innerHTML = '🔍';
                    dBtn.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:20 !important;';
                    dBtn.addEventListener('click', function(e) {
                        e.preventDefault();
                        // Dispatch an Enter keypress on the desktop input so the extension's native popup listener fires
                        var enterEvent = new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter', keyCode: 13, which: 13, bubbles: true, cancelable: true });
                        dInput.dispatchEvent(enterEvent);
                    });
                    wrap.appendChild(dBtn);
                }
            }
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', installVaniSearch);
    } else {
        installVaniSearch();
    }
    setTimeout(installVaniSearch, 250);
    setTimeout(installVaniSearch, 800);
})();