|
| 1 | +function loadAlgoliaSearchComponent() { |
| 2 | + SiteSearchAskAI.init(getAlgoliaSearchConfig()) |
| 3 | + |
| 4 | + // SiteSearch uses 'modal-backdrop', SiteSearchAskAI uses 'modal-backdrop-askai' |
| 5 | + const bodyObserver = new MutationObserver((mutations) => { |
| 6 | + for (const mutation of mutations) { |
| 7 | + for (const node of mutation.addedNodes) { |
| 8 | + if ( |
| 9 | + node.nodeType === Node.ELEMENT_NODE && |
| 10 | + Array.from(node.classList).some((c) => c.startsWith('modal-backdrop')) |
| 11 | + ) { |
| 12 | + localizationAlgoliaSearchModal(node) |
| 13 | + } |
| 14 | + } |
| 15 | + } |
| 16 | + }) |
| 17 | + bodyObserver.observe(document.body, { childList: true }) |
| 18 | +} |
| 19 | + |
| 20 | +function localizationAlgoliaSearchModal(modal) { |
| 21 | + const lang = getAlgoliaCurrentLang() |
| 22 | + // English is the component default, no need to patch |
| 23 | + if (lang === 'en') return |
| 24 | + |
| 25 | + const i18n = AlgoliaI18nData[lang] |
| 26 | + |
| 27 | + const observer = new MutationObserver((mutations, obs) => { |
| 28 | + // "Clear" button |
| 29 | + const clearBtn = modal.querySelector('.ss-search-clear-button') |
| 30 | + if (clearBtn && clearBtn.textContent.trim() === 'Clear') { |
| 31 | + clearBtn.textContent = i18n.clearText |
| 32 | + } |
| 33 | + |
| 34 | + // Footer kbd groups: first span = "Open", second span = "Navigate" |
| 35 | + const kbdGroups = modal.querySelectorAll('.ss-footer-kbd-group') |
| 36 | + kbdGroups.forEach((group) => { |
| 37 | + const span = group.querySelector('span') |
| 38 | + if (!span) return |
| 39 | + if (span.textContent.trim() === 'Open') { |
| 40 | + span.textContent = i18n.openText |
| 41 | + } else if (span.textContent.trim() === 'Navigate') { |
| 42 | + span.textContent = i18n.navigateText |
| 43 | + } |
| 44 | + }) |
| 45 | + |
| 46 | + // "Ask AI" entry in hits list: <article class="ss-ask-ai-btn"> |
| 47 | + const askAiArticle = modal.querySelector('.ss-ask-ai-btn') |
| 48 | + if (askAiArticle) { |
| 49 | + const titleP = askAiArticle.querySelector('.ss-infinite-hits-item-title') |
| 50 | + if (titleP) { |
| 51 | + const firstText = titleP.childNodes[0] |
| 52 | + if (firstText && firstText.nodeType === Node.TEXT_NODE && firstText.textContent.startsWith('Ask AI')) { |
| 53 | + firstText.textContent = i18n.askAiText + ': ' |
| 54 | + } |
| 55 | + } |
| 56 | + if (askAiArticle.getAttribute('aria-label') === 'Ask AI') { |
| 57 | + askAiArticle.setAttribute('aria-label', i18n.askAiText) |
| 58 | + } |
| 59 | + if (askAiArticle.getAttribute('title') === 'Ask AI') { |
| 60 | + askAiArticle.setAttribute('title', i18n.askAiText) |
| 61 | + } |
| 62 | + } |
| 63 | + }) |
| 64 | + |
| 65 | + observer.observe(modal, { childList: true, subtree: true }) |
| 66 | + // Disconnect after the modal content has fully rendered |
| 67 | + setTimeout(() => observer.disconnect(), 2000) |
| 68 | +} |
0 commit comments