MediaWiki:Minerva.js: Difference between revisions

Revision as of 03:14, 13 November 2026

/* VaniSearch Popup Launcher for Desktop and Mobile */
(function() {
    var modalOpenTimestamp = 0;

    function launchMspuModal(sourceInput) {
        if (!sourceInput) return false;
        var modal = document.getElementById('mspu_div_wrapper');
        var inpSearch = document.getElementById('mspu_txt_input');
        if (!modal || !inpSearch) return false;

        var strayBtn = modal.querySelector('.vani-search-trigger-btn');
        if (strayBtn) strayBtn.remove();

        modalOpenTimestamp = Date.now();

        if (typeof window.sync_but_search === 'function') {
            try { window.sync_but_search(); } catch (e) {}
        }

        inpSearch.value = sourceInput.value;
        modal.style.display = 'block';

        setTimeout(function() {
            inpSearch.focus();
        }, 100);

        return false;
    }

    function setupTopBarSearch() {
        // 1. Protect the popup form from auto-submitting during the first 350ms after opening
        var modal = document.getElementById('mspu_div_wrapper');
        if (modal && !modal.dataset.vaniPopupGuard) {
            modal.dataset.vaniPopupGuard = 'true';
            var stray = modal.querySelector('.vani-search-trigger-btn');
            if (stray) stray.remove();

            var modalForm = modal.querySelector('form');
            if (modalForm) {
                modalForm.addEventListener('submit', function(e) {
                    if (Date.now() - modalOpenTimestamp < 350) {
                        e.preventDefault();
                        e.stopPropagation();
                        return false;
                    }
                }, true);
            }
        }

        // 2. Mobile (Minerva Header): Replace form with standalone div
        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, form#searchform');
            if (mForm && !minervaHeader.querySelector('.vani-mobile-search-wrap')) {
                var wrap = document.createElement('div');
                wrap.className = 'vani-mobile-search-wrap';
                wrap.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 = 'text';
                inp.id = 'ori_search';
                inp.className = 'vani-clean-search-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';
                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;';

                ['click', 'focus', 'focusin', 'touchstart', 'input'].forEach(function(evtType) {
                    inp.addEventListener(evtType, function(e) {
                        e.stopPropagation();
                    }, true);
                });

                inp.addEventListener('keydown', function(e) {
                    e.stopPropagation();
                    if (e.key === 'Enter' || e.keyCode === 13) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        launchMspuModal(inp);
                    }
                }, true);

                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    launchMspuModal(inp);
                }, true);

                wrap.appendChild(inp);
                wrap.appendChild(btn);
                mForm.replaceWith(wrap);
            }
        }

        // 3. Desktop (Vector Header): Replace form with standalone div (same as mobile) so Vue/form submit cannot redirect
        var desktopSearchContainer = document.querySelector('#p-search, .vector-search-box');
        if (desktopSearchContainer && !desktopSearchContainer.querySelector('.vani-desktop-search-wrap')) {
            var dForm = desktopSearchContainer.querySelector('form');
            if (dForm) {
                var dWrap = document.createElement('div');
                dWrap.className = 'vani-desktop-search-wrap';
                dWrap.style.cssText = 'display:flex !important; align-items:center !important; position:relative !important;';

                var dInp = document.createElement('input');
                dInp.type = 'text';
                dInp.id = 'ori_search';
                dInp.className = 'cdx-text-input__input vani-clean-search-input';
                dInp.placeholder = 'Search Vanipedia';
                dInp.autocomplete = 'off';
                dInp.style.cssText = '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 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;';

                ['click', 'focus', 'focusin', 'input'].forEach(function(evtType) {
                    dInp.addEventListener(evtType, function(e) {
                        e.stopPropagation();
                    }, true);
                });

                dInp.addEventListener('keydown', function(e) {
                    e.stopPropagation();
                    if (e.key === 'Enter' || e.keyCode === 13) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        launchMspuModal(dInp);
                    }
                }, true);

                dBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    launchMspuModal(dInp);
                }, true);

                dWrap.appendChild(dInp);
                dWrap.appendChild(dBtn);
                dForm.replaceWith(dWrap);
            }
        }
    }

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