|
ট্যাগ: খালি করা পুনর্বহাল |
| (একই ব্যবহারকারী দ্বারা সম্পাদিত ৩টি মধ্যবর্তী সংশোধন দেখানো হচ্ছে না) |
| ১ নং লাইন: |
১ নং লাইন: |
| // 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']
| |
| });
| |
| }
| |
| })();
| |
