মিডিয়াউইকি:Common.js
অবয়ব
লক্ষ্য করুন: প্রকাশ করার পর, পরিবর্তনগুলো দেখতে আপনাকে আপনার ব্রাউজারের ক্যাশে পরিষ্কার করার প্রয়োজন হতে পারে।
- ফায়ারফক্স / সাফারি: পুনরায় লোড-এ ক্লিক করার সময় শিফট টিপে ধরে রাখুন, অথবা হয় Ctrl-F5 বা Ctrl-R টিপুন (ম্যাকে ⌘-R টিপুন)
- গুগল ক্রোম: Ctrl-Shift-R (ম্যাকে ⌘-Shift-R) টিপুন
- এজ: Ctrl ধরে রাখা অবস্থায় Refresh-এ ক্লিক করুন, অথবা Ctrl-F5 টিপুন।
- অপেরা: Ctrl-F5 টিপুন।
// MediaWiki Sticky Header Search Collapse
(function() {
'use strict';
function initSearchToggle() {
// Find the search toggle button
const searchToggle = document.querySelector('.vector-sticky-header-visible .search-toggle');
const searchBox = document.querySelector('.vector-sticky-header-visible .vector-search-box');
const searchContainer = document.querySelector('.vector-sticky-header-visible .vector-typeahead-search-container');
const searchInput = document.querySelector('.vector-sticky-header-visible .cdx-text-input__input');
if (!searchToggle || !searchBox || !searchContainer) return;
// Remove old event listeners by cloning
const newToggle = searchToggle.cloneNode(true);
searchToggle.parentNode.replaceChild(newToggle, searchToggle);
// Toggle search on icon click
newToggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
searchContainer.classList.add('search-active');
newToggle.classList.add('search-hidden');
// Focus the input
if (searchInput) {
setTimeout(function() {
searchInput.focus();
}, 50);
}
});
// Close when clicking outside
document.addEventListener('click', function(e) {
if (!searchBox.contains(e.target)) {
searchContainer.classList.remove('search-active');
newToggle.classList.remove('search-hidden');
}
});
// Prevent closing when clicking inside search
searchContainer.addEventListener('click', function(e) {
e.stopPropagation();
});
}
// Run when page loads
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(initSearchToggle, 500);
});
} else {
setTimeout(initSearchToggle, 500);
}
// Re-run when sticky header appears (when scrolling)
let scrollTimeout;
window.addEventListener('scroll', function() {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(initSearchToggle, 100);
});
// Also observe for class changes on body
const observer = new MutationObserver(function() {
initSearchToggle();
});
const body = document.querySelector('body');
if (body) {
observer.observe(body, {
attributes: true,
attributeFilter: ['class']
});
}
})();