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.
/* 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;
// Remove any stray magnifying glass injected inside the popup's own text input
var strayBtn = modal.querySelector('.vani-search-trigger-btn');
if (strayBtn) strayBtn.remove();
// Record timestamp so the Enter key release cannot accidentally submit the popup form
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 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 Minerva's form with a standalone search bar
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): Open #mspu_div_wrapper on Enter or 🔍 click without submitting form
var desktopForm = document.querySelector('#p-search form, .vector-header form#searchform');
if (desktopForm && !desktopForm.dataset.vaniPopupBound) {
desktopForm.dataset.vaniPopupBound = 'true';
var dInput = desktopForm.querySelector('input[type="search"], input[name="search"], #searchInput, #ori_search');
if (dInput) {
dInput.id = 'ori_search';
dInput.setAttribute('autocomplete', 'off');
desktopForm.addEventListener('submit', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInput);
return false;
}, true);
dInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInput);
}
}, true);
var dWrap = dInput.parentElement;
if (dWrap) {
// Remove any old .vani-search-trigger-btn that had a direct URL redirect attached
var oldTrigger = dWrap.querySelector('.vani-search-trigger-btn');
if (oldTrigger) oldTrigger.remove();
if (!dWrap.querySelector('.vani-inline-go')) {
dWrap.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();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInput);
}, true);
dWrap.appendChild(dBtn);
}
}
}
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupTopBarSearch);
} else {
setupTopBarSearch();
}
setTimeout(setupTopBarSearch, 250);
setTimeout(setupTopBarSearch, 800);
})();