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 Trigger (calls open_modal) */
(function() {
function openPopupWithQuery(inputEl) {
if (!inputEl) return false;
// Ensure the input has id="ori_search" so open_modal() reads its value
var existingOri = document.getElementById('ori_search');
if (existingOri && existingOri !== inputEl) {
existingOri.value = inputEl.value;
} else {
inputEl.id = 'ori_search';
}
// If open_modal() from search_popup.js is loaded on this page, call it directly
if (typeof window.open_modal === 'function' && document.getElementById('mspu_div_wrapper')) {
return window.open_modal();
}
// Fallback if #mspu_div_wrapper is present even if open_modal isn't global
var modal = document.getElementById('mspu_div_wrapper');
var inpSearch = document.getElementById('mspu_txt_input');
if (modal && inpSearch) {
inpSearch.value = inputEl.value;
modal.style.display = 'block';
inpSearch.focus();
return false;
}
// Only if the popup HTML (#mspu_div_wrapper) is not injected on the current skin at all,
// go to Special:VaniSearch
if (inputEl.value.trim() !== '') {
window.location.href = '/wiki/Special:VaniSearch?search=' + encodeURIComponent(inputEl.value.trim());
}
return false;
}
function setupSearch() {
// 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 mForm = minervaHeader.querySelector('form.minerva-search-form');
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.name = '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();
openPopupWithQuery(inp);
}
}, true);
btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
openPopupWithQuery(inp);
}, true);
wrap.appendChild(inp);
wrap.appendChild(btn);
mForm.replaceWith(wrap);
}
}
// 2. Desktop (Vector header)
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('#ori_search, input[type="search"], input[name="search"], #searchInput');
if (dInput) {
dInput.id = 'ori_search';
dInput.setAttribute('autocomplete', 'off');
desktopForm.onsubmit = function(e) {
if (e) {
e.preventDefault();
e.stopPropagation();
}
return openPopupWithQuery(dInput);
};
dInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
openPopupWithQuery(dInput);
}
}, true);
var dWrap = dInput.parentElement;
if (dWrap && !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();
openPopupWithQuery(dInput);
}, true);
dWrap.appendChild(dBtn);
}
}
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupSearch);
} else {
setupSearch();
}
setTimeout(setupSearch, 250);
setTimeout(setupSearch, 800);
})();