বিষয়বস্তুতে চলুন

মিডিয়াউইকি: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';
    
    let isInitialized = false;
    
    function initSearchToggle() {
        // Prevent multiple initializations
        if (isInitialized) return;
        
        // Wait for sticky header to be visible
        if (!document.querySelector('.vector-sticky-header-visible')) {
            return;
        }
        
        // 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;
        }
        
        isInitialized = true;
        
        // Toggle search on icon click
        searchToggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            console.log('Search toggle clicked');
            
            // Show search container and hide toggle
            searchContainer.classList.add('search-active');
            searchToggle.classList.add('search-hidden');
            
            // Focus the input
            if (searchInput) {
                setTimeout(function() {
                    searchInput.focus();
                }, 100);
            }
        });
        
        // Close when clicking outside
        function closeSearch(e) {
            if (searchBox && !searchBox.contains(e.target)) {
                searchContainer.classList.remove('search-active');
                searchToggle.classList.remove('search-hidden');
            }
        }
        
        document.addEventListener('click', closeSearch);
        
        // Prevent closing when clicking inside search
        searchContainer.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        
        console.log('Search toggle initialized');
    }
    
    // Run when page loads
    function init() {
        setTimeout(function() {
            initSearchToggle();
        }, 1000);
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
    
    // Re-run when sticky header appears (when scrolling)
    let scrollTimeout;
    window.addEventListener('scroll', function() {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(function() {
            if (!isInitialized) {
                initSearchToggle();
            }
        }, 300);
    });
    
    // Also observe for class changes on body
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'class') {
                const body = mutation.target;
                if (body.classList.contains('vector-sticky-header-visible') && !isInitialized) {
                    setTimeout(initSearchToggle, 300);
                }
            }
        });
    });
    
    const body = document.querySelector('body');
    if (body) {
        observer.observe(body, {
            attributes: true,
            attributeFilter: ['class']
        });
    }
})();