মিডিয়াউইকি:Common.js-এর উৎস দেখুন

// MediaWiki Sticky Header Search Collapse
(function() {
    'use strict';
    
    let initialized = false;
    
    function setupSearchToggle() {
        // Check if already initialized or if sticky header is not visible
        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;
        }
        
        console.log('Initializing search toggle');
        initialized = true;
        
        // 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';
        
        // 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.stopPropagation();
            
            console.log('Search icon clicked');
            
            searchBox.classList.add('search-expanded');
            
            // Focus input
            const input = searchContainer.querySelector('input[type="search"]');
            if (input) {
                setTimeout(function() {
                    input.focus();
                }, 100);
            }
        }
        
        // Add click to overlay
        overlay.addEventListener('click', expandSearch);
        
        // Also try original button
        searchToggle.addEventListener('click', expandSearch);
        
        // Click outside to close
        document.addEventListener('click', function(e) {
            if (!searchBox.contains(e.target) && !overlay.contains(e.target)) {
                searchBox.classList.remove('search-expanded');
            }
        });
        
        // Prevent clicks inside from closing
        searchBox.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        
        console.log('Search toggle ready with overlay');
    }
    
    // Try to initialize on load
    function tryInit() {
        setTimeout(setupSearchToggle, 500);
        setTimeout(setupSearchToggle, 1000);
        setTimeout(setupSearchToggle, 2000);
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', tryInit);
    } else {
        tryInit();
    }
    
    // Watch for scroll to reinitialize if needed
    let lastScroll = 0;
    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) {
        for (let mutation of mutations) {
            if (mutation.attributeName === 'class') {
                if (document.body.classList.contains('vector-sticky-header-visible') && !initialized) {
                    setTimeout(setupSearchToggle, 500);
                }
                if (!document.body.classList.contains('vector-sticky-header-visible')) {
                    initialized = false;
                }
            }
        }
    });
    
    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
    
})();