document.addEventListener('DOMContentLoaded', () => {
const root = document.querySelector('.mi20');
if (!root) return;
const yearRows = Array.from(root.querySelectorAll('.mi-year-row[data-year]'));
const yearButtons = Array.from(root.querySelectorAll('.year-nav__btn[data-year]'));
const topBtn = document.getElementById('year-nav-top');
const nextSectionBtn = document.querySelector('.mi-next-section-btn');
const todaySection = document.getElementById('mi-today');
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const getNavHeight = () => {
const navWrap = root.querySelector('.year-nav-wrapper');
return navWrap ? navWrap.offsetHeight : 0;
};
/* --- Раскрытие / сворачивание карточек --- */
root.querySelectorAll('.mi-card-toggle').forEach(btn => {
btn.addEventListener('click', (e) => {
const card = e.target.closest('.mi-card');
const row = card.closest('.mi-year-row');
const isExpanded = card.classList.contains('is-expanded');
if (!isExpanded) {
card.classList.add('is-expanded');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Свернуть';
} else {
card.classList.remove('is-expanded');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Подробнее';
if (row) {
const navHeight = getNavHeight();
const y = window.scrollY + row.getBoundingClientRect().top - navHeight - 10;
window.scrollTo({
top: y,
behavior: reduceMotion ? 'auto' : 'smooth'
});
}
}
});
});
/* --- Переход по клику на год --- */
const scrollToYear = (year) => {
const target = root.querySelector(`.mi-year-row[data-year="${year}"]`);
if (!target) return;
const navHeight = getNavHeight();
const y = window.scrollY + target.getBoundingClientRect().top - navHeight - 10;
window.scrollTo({
top: y,
behavior: reduceMotion ? 'auto' : 'smooth'
});
};
yearButtons.forEach(btn => {
btn.addEventListener('click', () => {
const year = btn.dataset.year;
yearButtons.forEach(b => b.classList.remove('year-nav__btn--active'));
btn.classList.add('year-nav__btn--active');
scrollToYear(year);
});
});
/* --- Кнопка "Наверх" --- */
if (topBtn) {
topBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: reduceMotion ? 'auto' : 'smooth'
});
});
}
/* --- Стрелка вниз --- */
const getSectionsFlow = () => {
const sections = Array.from(root.querySelectorAll('.mi-year-row[data-year]'));
if (todaySection) sections.push(todaySection);
return sections;
};
const updateNextButtonState = () => {
if (!nextSectionBtn) return;
const sections = getSectionsFlow();
const currentY = window.scrollY + window.innerHeight * 0.35;
let nextTarget = null;
for (const section of sections) {
const top = section.getBoundingClientRect().top + window.scrollY;
if (top > currentY) {
nextTarget = section;
break;
}
}
if (!nextTarget) {
nextSectionBtn.classList.add('is-end');
nextSectionBtn.setAttribute('aria-label', 'Наверх');
nextSectionBtn.textContent = '↑';
} else {
nextSectionBtn.classList.remove('is-end');
nextSectionBtn.setAttribute('aria-label', 'К следующему разделу');
nextSectionBtn.textContent = '↓';
}
};
if (nextSectionBtn) {
nextSectionBtn.addEventListener('click', () => {
const sections = getSectionsFlow();
const currentY = window.scrollY + window.innerHeight * 0.35;
let nextTarget = null;
for (const section of sections) {
const top = section.getBoundingClientRect().top + window.scrollY;
if (top > currentY) {
nextTarget = section;
break;
}
}
if (!nextTarget) {
window.scrollTo({
top: 0,
behavior: reduceMotion ? 'auto' : 'smooth'
});
return;
}
const navHeight = getNavHeight();
const y = window.scrollY + nextTarget.getBoundingClientRect().top - navHeight - 10;
window.scrollTo({
top: y,
behavior: reduceMotion ? 'auto' : 'smooth'
});
});
}
window.addEventListener('scroll', updateNextButtonState, { passive: true });
window.addEventListener('resize', updateNextButtonState);
updateNextButtonState();
});
