···
monthEl.classList.add('active');
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Store the last active month globally
···
timeline.style.display = 'flex';
document.querySelector('.content').style.paddingRight = 'var(--sidebar-width)';
-
// Reset timeline highlighting when switching between posts/links
document.querySelectorAll('.timeline-year.active, .timeline-month.active').forEach(el => {
el.classList.remove('active');
-
// Check if we have stored the active year/month
-
// If we don't have stored dates yet, try to find them from the active timeline elements
-
if (!lastActiveYear || !lastActiveMonth) {
-
const activeYearEl = document.querySelector('.timeline-year.active');
-
const activeMonthEl = document.querySelector('.timeline-month.active');
-
lastActiveYear = activeYearEl.getAttribute('data-year');
-
lastActiveMonth = activeMonthEl.getAttribute('data-month');
-
// If still no active month, try to find the first visible item in current view
-
const previousTabName = document.querySelector('.tab-button.active').getAttribute('data-tab');
-
const selector = previousTabName === 'posts' ? '.feed-item' : '.link-item';
-
const visibleItems = Array.from(document.querySelectorAll(selector))
-
const rect = item.getBoundingClientRect();
-
return rect.top >= 0 && rect.bottom <= window.innerHeight;
-
if (visibleItems.length > 0) {
-
lastActiveYear = visibleItems[0].getAttribute('data-year');
-
lastActiveMonth = visibleItems[0].getAttribute('data-month');
-
// If switching to links view, ensure link items are properly observed
-
if (tabName === 'links') {
-
// Disconnect and recreate the observer to ensure proper tracking
-
if (globalFeedObserver) {
-
globalFeedObserver.disconnect();
-
// Setup a new observer
-
globalFeedObserver = setupObserver({
-
// Observe all items in the active tab
-
// If we have active year/month from previous tab, find closest match
-
if (lastActiveYear && lastActiveMonth) {
-
// Find link items from this time period
-
let selector = `.link-item[data-year="${lastActiveYear}"][data-month="${lastActiveMonth}"]`;
-
let matchingItems = document.querySelectorAll(selector);
-
// If no exact match, try just matching the year
-
if (matchingItems.length === 0) {
-
selector = `.link-item[data-year="${lastActiveYear}"]`;
-
matchingItems = document.querySelectorAll(selector);
-
// If still no match, find the closest date
-
if (matchingItems.length === 0) {
-
const targetDate = new Date(lastActiveYear, lastActiveMonth);
-
const allLinkItems = Array.from(document.querySelectorAll('.link-item'));
-
// Sort by closest date
-
if (allLinkItems.length > 0) {
-
allLinkItems.sort((a, b) => {
-
const dateA = new Date(a.getAttribute('data-year'), a.getAttribute('data-month'));
-
const dateB = new Date(b.getAttribute('data-year'), b.getAttribute('data-month'));
-
return Math.abs(dateA - targetDate) - Math.abs(dateB - targetDate);
-
if (allLinkItems.length > 0) {
-
matchingItems = [allLinkItems[0]];
-
// Scroll to the matching item
-
if (matchingItems.length > 0) {
-
matchingItems[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
-
const year = matchingItems[0].getAttribute('data-year');
-
const month = matchingItems[0].getAttribute('data-month');
-
const yearEl = document.querySelector(`.timeline-year[data-year="${year}"]`);
-
const monthEl = document.querySelector(`.timeline-month[data-year="${year}"][data-month="${month}"]`);
-
if (yearEl) yearEl.classList.add('active');
-
monthEl.classList.add('active');
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-
// If no active period, default to highlighting first visible
-
const visibleLinks = Array.from(document.querySelectorAll('.link-item'))
-
const rect = item.getBoundingClientRect();
-
return rect.top >= 0 && rect.bottom <= window.innerHeight;
-
if (visibleLinks.length > 0) {
-
const firstVisible = visibleLinks[0];
-
const year = firstVisible.getAttribute('data-year');
-
const month = firstVisible.getAttribute('data-month');
-
const yearEl = document.querySelector(`.timeline-year[data-year="${year}"]`);
-
const monthEl = document.querySelector(`.timeline-month[data-year="${year}"][data-month="${month}"]`);
-
if (yearEl) yearEl.classList.add('active');
-
monthEl.classList.add('active');
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-
} else if (tabName === 'posts') {
-
if (globalFeedObserver) {
-
globalFeedObserver.disconnect();
-
globalFeedObserver = setupObserver({
-
// If we have active year/month from previous tab, find closest match
-
if (lastActiveYear && lastActiveMonth) {
-
// Find feed items from this time period
-
let selector = `.feed-item[data-year="${lastActiveYear}"][data-month="${lastActiveMonth}"]`;
-
let matchingItems = document.querySelectorAll(selector);
-
// If no exact match, try just matching the year
-
if (matchingItems.length === 0) {
-
selector = `.feed-item[data-year="${lastActiveYear}"]`;
-
matchingItems = document.querySelectorAll(selector);
-
// If still no match, find the closest date
-
if (matchingItems.length === 0) {
-
const targetDate = new Date(lastActiveYear, lastActiveMonth);
-
const allFeedItems = Array.from(document.querySelectorAll('.feed-item'));
-
// Sort by closest date
-
if (allFeedItems.length > 0) {
-
allFeedItems.sort((a, b) => {
-
const dateA = new Date(a.getAttribute('data-year'), a.getAttribute('data-month'));
-
const dateB = new Date(b.getAttribute('data-year'), b.getAttribute('data-month'));
-
return Math.abs(dateA - targetDate) - Math.abs(dateB - targetDate);
-
if (allFeedItems.length > 0) {
-
matchingItems = [allFeedItems[0]];
-
// Scroll to the matching item
-
if (matchingItems.length > 0) {
-
matchingItems[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
-
const year = matchingItems[0].getAttribute('data-year');
-
const month = matchingItems[0].getAttribute('data-month');
-
const yearEl = document.querySelector(`.timeline-year[data-year="${year}"]`);
-
const monthEl = document.querySelector(`.timeline-month[data-year="${year}"][data-month="${month}"]`);
-
if (yearEl) yearEl.classList.add('active');
-
monthEl.classList.add('active');
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-
// If no active period, default to highlighting first visible
-
const visiblePosts = Array.from(document.querySelectorAll('.feed-item'))
-
const rect = item.getBoundingClientRect();
-
return rect.top >= 0 && rect.bottom <= window.innerHeight;
-
if (visiblePosts.length > 0) {
-
const firstVisible = visiblePosts[0];
-
const year = firstVisible.getAttribute('data-year');
-
const month = firstVisible.getAttribute('data-month');
-
const yearEl = document.querySelector(`.timeline-year[data-year="${year}"]`);
-
const monthEl = document.querySelector(`.timeline-month[data-year="${year}"][data-month="${month}"]`);
-
if (yearEl) yearEl.classList.add('active');
-
monthEl.classList.add('active');
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
anil.recoil.org