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

সম্পাদনা সারাংশ নেই
ট্যাগ: পুনর্বহালকৃত
সম্পাদনা সারাংশ নেই
ট্যাগ: পুনর্বহালকৃত
৩ নং লাইন: ৩ নং লাইন:
     'use strict';
     'use strict';
      
      
     let isInitialized = false;
     let initialized = false;
      
      
     function initSearchToggle() {
     function setupSearchToggle() {
         // Prevent multiple initializations
         // Check if already initialized or if sticky header is not visible
         if (isInitialized) return;
        const stickyBody = document.body.classList.contains('vector-sticky-header-visible');
         if (!stickyBody || initialized) return;
          
          
         // Wait for sticky header to be visible
         // Find elements
         if (!document.querySelector('.vector-sticky-header-visible')) {
        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;
         }
         }
          
          
         // Find the search toggle button
         console.log('Initializing search toggle');
        const searchToggle = document.querySelector('.vector-sticky-header-visible .search-toggle');
        initialized = true;
         const searchBox = document.querySelector('.vector-sticky-header-visible .vector-search-box');
       
         const searchContainer = document.querySelector('.vector-sticky-header-visible .vector-typeahead-search-container');
        // Create a clickable overlay div
         const searchInput = document.querySelector('.vector-sticky-header-visible .cdx-text-input__input');
         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 (!searchToggle || !searchBox || !searchContainer) {
        // Find the button container and add overlay
             return;
        const buttonContainer = searchToggle.parentElement;
         if (buttonContainer) {
             buttonContainer.style.position = 'relative';
            buttonContainer.appendChild(overlay);
         }
         }
          
          
        isInitialized = true;
         // Click handler
       
         function expandSearch(e) {
         // Toggle search on icon click
         searchToggle.addEventListener('click', function(e) {
             e.preventDefault();
             e.preventDefault();
             e.stopPropagation();
             e.stopPropagation();
              
              
             console.log('Search toggle clicked');
             console.log('Search icon clicked');
              
              
             // Show search container and hide toggle
             searchBox.classList.add('search-expanded');
            searchContainer.classList.add('search-active');
            searchToggle.classList.add('search-hidden');
              
              
             // Focus the input
             // Focus input
             if (searchInput) {
            const input = searchContainer.querySelector('input[type="search"]');
             if (input) {
                 setTimeout(function() {
                 setTimeout(function() {
                     searchInput.focus();
                     input.focus();
                 }, 100);
                 }, 100);
             }
             }
         });
         }
       
        // Add click to overlay
        overlay.addEventListener('click', expandSearch);
       
        // Also try original button
        searchToggle.addEventListener('click', expandSearch);
          
          
         // Close when clicking outside
         // Click outside to close
         function closeSearch(e) {
         document.addEventListener('click', function(e) {
             if (searchBox && !searchBox.contains(e.target)) {
             if (!searchBox.contains(e.target) && !overlay.contains(e.target)) {
                 searchContainer.classList.remove('search-active');
                 searchBox.classList.remove('search-expanded');
                searchToggle.classList.remove('search-hidden');
             }
             }
         }
         });
       
        document.addEventListener('click', closeSearch);
          
          
         // Prevent closing when clicking inside search
         // Prevent clicks inside from closing
         searchContainer.addEventListener('click', function(e) {
         searchBox.addEventListener('click', function(e) {
             e.stopPropagation();
             e.stopPropagation();
         });
         });
          
          
         console.log('Search toggle initialized');
         console.log('Search toggle ready with overlay');
     }
     }
      
      
     // Run when page loads
     // Try to initialize on load
     function init() {
     function tryInit() {
         setTimeout(function() {
         setTimeout(setupSearchToggle, 500);
            initSearchToggle();
        setTimeout(setupSearchToggle, 1000);
         }, 1000);
         setTimeout(setupSearchToggle, 2000);
     }
     }
      
      
     if (document.readyState === 'loading') {
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', init);
         document.addEventListener('DOMContentLoaded', tryInit);
     } else {
     } else {
         init();
         tryInit();
     }
     }
      
      
     // Re-run when sticky header appears (when scrolling)
     // Watch for scroll to reinitialize if needed
     let scrollTimeout;
     let lastScroll = 0;
     window.addEventListener('scroll', function() {
     window.addEventListener('scroll', function() {
         clearTimeout(scrollTimeout);
         const currentScroll = window.pageYOffset;
         scrollTimeout = setTimeout(function() {
         if (currentScroll > 100 && lastScroll <= 100) {
            if (!isInitialized) {
            setTimeout(function() {
                initSearchToggle();
                if (!initialized) setupSearchToggle();
             }
             }, 500);
         }, 300);
         }
        lastScroll = currentScroll;
     });
     });
      
      
     // Also observe for class changes on body
     // Watch for body class changes
     const observer = new MutationObserver(function(mutations) {
     const observer = new MutationObserver(function(mutations) {
         mutations.forEach(function(mutation) {
         for (let mutation of mutations) {
             if (mutation.attributeName === 'class') {
             if (mutation.attributeName === 'class') {
                const body = mutation.target;
                 if (document.body.classList.contains('vector-sticky-header-visible') && !initialized) {
                 if (body.classList.contains('vector-sticky-header-visible') && !isInitialized) {
                     setTimeout(setupSearchToggle, 500);
                     setTimeout(initSearchToggle, 300);
                }
                if (!document.body.classList.contains('vector-sticky-header-visible')) {
                    initialized = false;
                 }
                 }
             }
             }
         });
         }
     });
     });
      
      
     const body = document.querySelector('body');
     observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
    if (body) {
      
        observer.observe(body, {
            attributes: true,
            attributeFilter: ['class']
        });
     }
})();
})();