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

মিডিয়াউইকি:Common.js

বইপিডিয়া থেকে

লক্ষ্য করুন: প্রকাশ করার পর, পরিবর্তনগুলো দেখতে আপনাকে আপনার ব্রাউজারের ক্যাশে পরিষ্কার করার প্রয়োজন হতে পারে।

  • ফায়ারফক্স / সাফারি: পুনরায় লোড-এ ক্লিক করার সময় শিফট টিপে ধরে রাখুন, অথবা হয় Ctrl-F5 বা Ctrl-R টিপুন (ম্যাকে ⌘-R টিপুন)
  • গুগল ক্রোম: Ctrl-Shift-R (ম্যাকে ⌘-Shift-R) টিপুন
  • এজ: Ctrl ধরে রাখা অবস্থায় Refresh-এ ক্লিক করুন, অথবা Ctrl-F5 টিপুন।
  • অপেরা: Ctrl-F5 টিপুন।
// MediaWiki Search Collapse for Sticky Header
(function() {
    'use strict';
    
    // Wait for DOM to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
    
    function init() {
        // Find the search box in sticky header
        const stickyHeader = document.querySelector('.vector-header--sticky, .vector-sticky-header');
        if (!stickyHeader) return;
        
        const searchBox = stickyHeader.querySelector('.vector-search-box');
        if (!searchBox) return;
        
        const searchInput = searchBox.querySelector('input[type="search"], .cdx-search-input__input');
        const searchForm = searchBox.querySelector('form');
        
        if (!searchInput || !searchForm) return;
        
        // Create toggle button
        const toggleBtn = document.createElement('button');
        toggleBtn.className = 'search-collapse-toggle';
        toggleBtn.innerHTML = '🔍';
        toggleBtn.type = 'button';
        toggleBtn.style.cssText = `
            width: 32px;
            height: 32px;
            background: #f8f9fa;
            border: 1px solid #a2a9b1;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        `;
        
        // Initially hide the form
        searchForm.style.display = 'none';
        
        // Insert toggle button
        searchBox.insertBefore(toggleBtn, searchForm);
        
        // Toggle functionality
        toggleBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            searchForm.style.display = 'flex';
            toggleBtn.style.display = 'none';
            searchInput.focus();
        });
        
        // Click outside to close
        document.addEventListener('click', function(e) {
            if (!searchBox.contains(e.target)) {
                searchForm.style.display = 'none';
                toggleBtn.style.display = 'inline-flex';
            }
        });
        
        // Prevent closing when clicking inside search
        searchBox.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    }
    
    // Re-run when header becomes sticky
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.target.classList.contains('vector-header--sticky') || 
                mutation.target.classList.contains('vector-sticky-header')) {
                init();
            }
        });
    });
    
    // Observe the header
    const header = document.querySelector('.vector-header, header');
    if (header) {
        observer.observe(header, {
            attributes: true,
            attributeFilter: ['class']
        });
    }
})();