মিডিয়াউইকি:Common.js: সংশোধিত সংস্করণের মধ্যে পার্থক্য
সম্পাদনা সারাংশ নেই ট্যাগ: পুনর্বহালকৃত |
সম্পাদনা সারাংশ নেই ট্যাগ: পুনর্বহালকৃত |
||
| ৩ নং লাইন: | ৩ নং লাইন: | ||
'use strict'; | 'use strict'; | ||
let | let initialized = false; | ||
function | function setupSearchToggle() { | ||
// | // Check if already initialized or if sticky header is not visible | ||
if ( | const stickyBody = document.body.classList.contains('vector-sticky-header-visible'); | ||
if (!stickyBody || initialized) return; | |||
// | // Find elements | ||
const searchBox = document.querySelector('.vector-sticky-header-visible #p-search'); | |||
const searchContainer = document.querySelector('.vector-sticky-header-visible .vector-typeahead-search-container'); | |||
const searchToggle = document.querySelector('.vector-sticky-header-visible .search-toggle'); | |||
if (!searchBox || !searchContainer || !searchToggle) { | |||
console.log('Elements not found yet'); | |||
return; | return; | ||
} | } | ||
console.log('Initializing search toggle'); | |||
initialized = true; | |||
const | |||
// Create a clickable overlay div | |||
const overlay = document.createElement('div'); | |||
overlay.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; cursor: pointer;'; | |||
overlay.className = 'search-icon-overlay'; | |||
if ( | // Find the button container and add overlay | ||
const buttonContainer = searchToggle.parentElement; | |||
if (buttonContainer) { | |||
buttonContainer.style.position = 'relative'; | |||
buttonContainer.appendChild(overlay); | |||
} | } | ||
// Click handler | |||
function expandSearch(e) { | |||
// | |||
e.preventDefault(); | e.preventDefault(); | ||
e.stopPropagation(); | e.stopPropagation(); | ||
console.log('Search | console.log('Search icon clicked'); | ||
searchBox.classList.add('search-expanded'); | |||
// Focus | // Focus input | ||
if ( | const input = searchContainer.querySelector('input[type="search"]'); | ||
if (input) { | |||
setTimeout(function() { | setTimeout(function() { | ||
input.focus(); | |||
}, 100); | }, 100); | ||
} | } | ||
}); | } | ||
// Add click to overlay | |||
overlay.addEventListener('click', expandSearch); | |||
// Also try original button | |||
searchToggle.addEventListener('click', expandSearch); | |||
// | // Click outside to close | ||
function | document.addEventListener('click', function(e) { | ||
if (searchBox && ! | if (!searchBox.contains(e.target) && !overlay.contains(e.target)) { | ||
searchBox.classList.remove('search-expanded'); | |||
} | } | ||
} | }); | ||
// Prevent closing | // Prevent clicks inside from closing | ||
searchBox.addEventListener('click', function(e) { | |||
e.stopPropagation(); | e.stopPropagation(); | ||
}); | }); | ||
console.log('Search toggle | console.log('Search toggle ready with overlay'); | ||
} | } | ||
// | // Try to initialize on load | ||
function | function tryInit() { | ||
setTimeout( | setTimeout(setupSearchToggle, 500); | ||
setTimeout(setupSearchToggle, 1000); | |||
setTimeout(setupSearchToggle, 2000); | |||
} | } | ||
if (document.readyState === 'loading') { | if (document.readyState === 'loading') { | ||
document.addEventListener('DOMContentLoaded', | document.addEventListener('DOMContentLoaded', tryInit); | ||
} else { | } else { | ||
tryInit(); | |||
} | } | ||
// | // Watch for scroll to reinitialize if needed | ||
let | let lastScroll = 0; | ||
window.addEventListener('scroll', function() { | window.addEventListener('scroll', function() { | ||
const currentScroll = window.pageYOffset; | |||
if (currentScroll > 100 && lastScroll <= 100) { | |||
setTimeout(function() { | |||
if (!initialized) setupSearchToggle(); | |||
} | }, 500); | ||
} | } | ||
lastScroll = currentScroll; | |||
}); | }); | ||
// | // Watch for body class changes | ||
const observer = new MutationObserver(function(mutations) { | const observer = new MutationObserver(function(mutations) { | ||
for (let mutation of mutations) { | |||
if (mutation.attributeName === 'class') { | if (mutation.attributeName === 'class') { | ||
if (document.body.classList.contains('vector-sticky-header-visible') && !initialized) { | |||
if (body.classList.contains('vector-sticky-header-visible') && ! | setTimeout(setupSearchToggle, 500); | ||
setTimeout( | } | ||
if (!document.body.classList.contains('vector-sticky-header-visible')) { | |||
initialized = false; | |||
} | } | ||
} | } | ||
} | } | ||
}); | }); | ||
observer.observe(document.body, { attributes: true, attributeFilter: ['class'] }); | |||
})(); | })(); | ||