মিডিয়াউইকি:Common.js: সংশোধিত সংস্করণের মধ্যে পার্থক্য

সম্পাদনা সারাংশ নেই
ট্যাগ: পুনর্বহালকৃত
সম্পাদনা সারাংশ নেই
ট্যাগ: পুনর্বহালকৃত
১ নং লাইন: ১ নং লাইন:
// MediaWiki Search Collapse for Sticky Header
// MediaWiki Sticky Header Search Collapse
(function() {
(function() {
     'use strict';
     'use strict';
      
      
    // Wait for DOM to be ready
     function initSearchToggle() {
    if (document.readyState === 'loading') {
         // Find the search toggle button
        document.addEventListener('DOMContentLoaded', init);
         const searchToggle = document.querySelector('.vector-sticky-header-visible .search-toggle');
    } else {
         const searchBox = document.querySelector('.vector-sticky-header-visible .vector-search-box');
        init();
         const searchContainer = document.querySelector('.vector-sticky-header-visible .vector-typeahead-search-container');
    }
         const searchInput = document.querySelector('.vector-sticky-header-visible .cdx-text-input__input');
   
     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
         if (!searchToggle || !searchBox || !searchContainer) return;
        searchForm.style.display = 'none';
          
          
         // Insert toggle button
         // Remove old event listeners by cloning
         searchBox.insertBefore(toggleBtn, searchForm);
         const newToggle = searchToggle.cloneNode(true);
        searchToggle.parentNode.replaceChild(newToggle, searchToggle);
          
          
         // Toggle functionality
         // Toggle search on icon click
         toggleBtn.addEventListener('click', function(e) {
         newToggle.addEventListener('click', function(e) {
            e.preventDefault();
             e.stopPropagation();
             e.stopPropagation();
             searchForm.style.display = 'flex';
              
             toggleBtn.style.display = 'none';
            searchContainer.classList.add('search-active');
             searchInput.focus();
             newToggle.classList.add('search-hidden');
              
            // Focus the input
            if (searchInput) {
                setTimeout(function() {
                    searchInput.focus();
                }, 50);
            }
         });
         });
          
          
         // Click outside to close
         // Close when clicking outside
         document.addEventListener('click', function(e) {
         document.addEventListener('click', function(e) {
             if (!searchBox.contains(e.target)) {
             if (!searchBox.contains(e.target)) {
                 searchForm.style.display = 'none';
                 searchContainer.classList.remove('search-active');
                 toggleBtn.style.display = 'inline-flex';
                 newToggle.classList.remove('search-hidden');
             }
             }
         });
         });
          
          
         // Prevent closing when clicking inside search
         // Prevent closing when clicking inside search
         searchBox.addEventListener('click', function(e) {
         searchContainer.addEventListener('click', function(e) {
             e.stopPropagation();
             e.stopPropagation();
         });
         });
     }
     }
      
      
     // Re-run when header becomes sticky
     // Run when page loads
     const observer = new MutationObserver(function(mutations) {
     if (document.readyState === 'loading') {
        mutations.forEach(function(mutation) {
        document.addEventListener('DOMContentLoaded', function() {
            if (mutation.target.classList.contains('vector-header--sticky') ||
            setTimeout(initSearchToggle, 500);
                mutation.target.classList.contains('vector-sticky-header')) {
                init();
            }
         });
         });
    } 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();
     });
     });
      
      
    // Observe the header
     const body = document.querySelector('body');
     const header = document.querySelector('.vector-header, header');
     if (body) {
     if (header) {
         observer.observe(body, {
         observer.observe(header, {
             attributes: true,
             attributes: true,
             attributeFilter: ['class']
             attributeFilter: ['class']