|
| 1 | +(function () { |
| 2 | + function isChangelogPage() { |
| 3 | + const path = location.pathname || ""; |
| 4 | + return /\/changelog\//.test(path); |
| 5 | + } |
| 6 | + |
| 7 | + function getLang() { |
| 8 | + return /\.en\//.test(location.pathname) ? "en" : "ru"; |
| 9 | + } |
| 10 | + |
| 11 | + function initToggle() { |
| 12 | + if (!isChangelogPage()) return; |
| 13 | + |
| 14 | + const toc = document.querySelector('.md-sidebar--secondary .md-nav--secondary'); |
| 15 | + if (!toc) return; |
| 16 | + |
| 17 | + const title = toc.querySelector('.md-nav__title'); |
| 18 | + if (!title) return; |
| 19 | + |
| 20 | + if (toc.querySelector('.cs-toc-toggle')) return; |
| 21 | + |
| 22 | + const root = document.documentElement; |
| 23 | + const lang = getLang(); |
| 24 | + |
| 25 | + const btn = document.createElement('button'); |
| 26 | + btn.type = 'button'; |
| 27 | + btn.className = 'cs-toc-toggle'; |
| 28 | + btn.setAttribute('aria-expanded', 'true'); |
| 29 | + btn.setAttribute('aria-label', lang === 'en' ? 'Hide sections' : 'Скрыть секции'); |
| 30 | + btn.innerHTML = '<span class="cs-toc-toggle__thumb" aria-hidden="true"></span>'; |
| 31 | + |
| 32 | + let tooltipEl = null; |
| 33 | + let tooltipText = lang === 'en' ? 'Hide\nsections' : 'Скрыть\nсекции'; |
| 34 | + |
| 35 | + function positionTooltip() { |
| 36 | + if (!tooltipEl) return; |
| 37 | + const rect = btn.getBoundingClientRect(); |
| 38 | + const top = rect.top + rect.height / 2 - tooltipEl.offsetHeight / 2; |
| 39 | + const left = rect.right + 8; |
| 40 | + tooltipEl.style.top = `${Math.max(8, top)}px`; |
| 41 | + tooltipEl.style.left = `${left}px`; |
| 42 | + } |
| 43 | + |
| 44 | + function showTooltip() { |
| 45 | + if (tooltipEl) return; |
| 46 | + tooltipEl = document.createElement('div'); |
| 47 | + tooltipEl.className = 'cs-toc-tooltip'; |
| 48 | + tooltipEl.textContent = tooltipText; |
| 49 | + document.body.appendChild(tooltipEl); |
| 50 | + positionTooltip(); |
| 51 | + // Keep tooltip aligned on scroll/resize while hovering. |
| 52 | + window.addEventListener('scroll', positionTooltip, true); |
| 53 | + window.addEventListener('resize', positionTooltip); |
| 54 | + } |
| 55 | + |
| 56 | + function hideTooltip() { |
| 57 | + if (!tooltipEl) return; |
| 58 | + tooltipEl.remove(); |
| 59 | + tooltipEl = null; |
| 60 | + window.removeEventListener('scroll', positionTooltip, true); |
| 61 | + window.removeEventListener('resize', positionTooltip); |
| 62 | + } |
| 63 | + |
| 64 | + btn.addEventListener('mouseenter', showTooltip); |
| 65 | + btn.addEventListener('focus', showTooltip); |
| 66 | + btn.addEventListener('mouseleave', hideTooltip); |
| 67 | + btn.addEventListener('blur', hideTooltip); |
| 68 | + |
| 69 | + btn.addEventListener('click', () => { |
| 70 | + const collapsed = root.classList.toggle('cs-changelog-toc-collapsed'); |
| 71 | + btn.classList.toggle('is-collapsed', collapsed); |
| 72 | + btn.setAttribute('aria-expanded', String(!collapsed)); |
| 73 | + btn.setAttribute('aria-label', collapsed |
| 74 | + ? (lang === 'en' ? 'Show sections' : 'Показать секции') |
| 75 | + : (lang === 'en' ? 'Hide sections' : 'Скрыть секции')); |
| 76 | + tooltipText = collapsed |
| 77 | + ? (lang === 'en' ? 'Show\nsections' : 'Показать\nсекции') |
| 78 | + : (lang === 'en' ? 'Hide\nsections' : 'Скрыть\nсекции'); |
| 79 | + if (tooltipEl) { |
| 80 | + tooltipEl.textContent = tooltipText; |
| 81 | + positionTooltip(); |
| 82 | + } |
| 83 | + }); |
| 84 | + |
| 85 | + title.classList.add('cs-toc-title'); |
| 86 | + title.appendChild(btn); |
| 87 | + } |
| 88 | + |
| 89 | + if (document.readyState === 'loading') { |
| 90 | + document.addEventListener('DOMContentLoaded', initToggle); |
| 91 | + } else { |
| 92 | + initToggle(); |
| 93 | + } |
| 94 | +})(); |
0 commit comments