···
monthEl.classList.add('active');
1034
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Store the last active month globally
···
timeline.style.display = 'flex';
document.querySelector('.content').style.paddingRight = 'var(--sidebar-width)';
1070
-
// Reset timeline highlighting when switching between posts/links
1069
+
// Reset timeline highlighting
document.querySelectorAll('.timeline-year.active, .timeline-month.active').forEach(el => {
el.classList.remove('active');
1075
-
// Check if we have stored the active year/month
1076
-
// If we don't have stored dates yet, try to find them from the active timeline elements
1077
-
if (!lastActiveYear || !lastActiveMonth) {
1078
-
const activeYearEl = document.querySelector('.timeline-year.active');
1079
-
const activeMonthEl = document.querySelector('.timeline-month.active');
1081
-
if (activeYearEl) {
1082
-
lastActiveYear = activeYearEl.getAttribute('data-year');
1085
-
if (activeMonthEl) {
1086
-
lastActiveMonth = activeMonthEl.getAttribute('data-month');
1088
-
// If still no active month, try to find the first visible item in current view
1089
-
const previousTabName = document.querySelector('.tab-button.active').getAttribute('data-tab');
1090
-
const selector = previousTabName === 'posts' ? '.feed-item' : '.link-item';
1091
-
const visibleItems = Array.from(document.querySelectorAll(selector))
1093
-
const rect = item.getBoundingClientRect();
1094
-
return rect.top >= 0 && rect.bottom <= window.innerHeight;
1097
-
if (visibleItems.length > 0) {
1098
-
lastActiveYear = visibleItems[0].getAttribute('data-year');
1099
-
lastActiveMonth = visibleItems[0].getAttribute('data-month');
1074
+
// Disconnect and recreate the observer to ensure proper tracking
1075
+
if (globalFeedObserver) {
1076
+
globalFeedObserver.disconnect();
1079
+
// Setup a new observer
1080
+
globalFeedObserver = setupObserver({
1082
+
rootMargin: '0px',
1106
-
// If switching to links view, ensure link items are properly observed
1107
-
if (tabName === 'links') {
1108
-
// Disconnect and recreate the observer to ensure proper tracking
1109
-
if (globalFeedObserver) {
1110
-
globalFeedObserver.disconnect();
1113
-
// Setup a new observer
1114
-
globalFeedObserver = setupObserver({
1116
-
rootMargin: '0px',
1120
-
// Observe all items in the active tab
1121
-
observeAllDateItems();
1123
-
// If we have active year/month from previous tab, find closest match
1124
-
if (lastActiveYear && lastActiveMonth) {
1125
-
// Find link items from this time period
1126
-
let selector = `.link-item[data-year="${lastActiveYear}"][data-month="${lastActiveMonth}"]`;
1127
-
let matchingItems = document.querySelectorAll(selector);
1130
-
// If no exact match, try just matching the year
1131
-
if (matchingItems.length === 0) {
1132
-
selector = `.link-item[data-year="${lastActiveYear}"]`;
1133
-
matchingItems = document.querySelectorAll(selector);
1136
-
// If still no match, find the closest date
1137
-
if (matchingItems.length === 0) {
1138
-
const targetDate = new Date(lastActiveYear, lastActiveMonth);
1139
-
const allLinkItems = Array.from(document.querySelectorAll('.link-item'));
1141
-
// Sort by closest date
1142
-
if (allLinkItems.length > 0) {
1143
-
allLinkItems.sort((a, b) => {
1144
-
const dateA = new Date(a.getAttribute('data-year'), a.getAttribute('data-month'));
1145
-
const dateB = new Date(b.getAttribute('data-year'), b.getAttribute('data-month'));
1147
-
return Math.abs(dateA - targetDate) - Math.abs(dateB - targetDate);
1150
-
// Use closest match
1151
-
if (allLinkItems.length > 0) {
1152
-
matchingItems = [allLinkItems[0]];
1157
-
// Scroll to the matching item
1158
-
if (matchingItems.length > 0) {
1159
-
matchingItems[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
1161
-
// Update timeline
1162
-
const year = matchingItems[0].getAttribute('data-year');
1163
-
const month = matchingItems[0].getAttribute('data-month');
1165
-
const yearEl = document.querySelector(`.timeline-year[data-year="${year}"]`);
1166
-
const monthEl = document.querySelector(`.timeline-month[data-year="${year}"][data-month="${month}"]`);
1168
-
if (yearEl) yearEl.classList.add('active');
1170
-
monthEl.classList.add('active');
1171
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
1175
-
// If no active period, default to highlighting first visible
1176
-
const visibleLinks = Array.from(document.querySelectorAll('.link-item'))
1178
-
const rect = item.getBoundingClientRect();
1179
-
return rect.top >= 0 && rect.bottom <= window.innerHeight;
1182
-
if (visibleLinks.length > 0) {
1183
-
const firstVisible = visibleLinks[0];
1184
-
const year = firstVisible.getAttribute('data-year');
1185
-
const month = firstVisible.getAttribute('data-month');
1187
-
if (year && month) {
1188
-
const yearEl = document.querySelector(`.timeline-year[data-year="${year}"]`);
1189
-
const monthEl = document.querySelector(`.timeline-month[data-year="${year}"][data-month="${month}"]`);
1191
-
if (yearEl) yearEl.classList.add('active');
1193
-
monthEl.classList.add('active');
1194
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
1199
-
} else if (tabName === 'posts') {
1200
-
// Same for posts view
1201
-
if (globalFeedObserver) {
1202
-
globalFeedObserver.disconnect();
1205
-
globalFeedObserver = setupObserver({
1207
-
rootMargin: '0px',
1211
-
observeAllDateItems();
1213
-
// If we have active year/month from previous tab, find closest match
1214
-
if (lastActiveYear && lastActiveMonth) {
1215
-
// Find feed items from this time period
1216
-
let selector = `.feed-item[data-year="${lastActiveYear}"][data-month="${lastActiveMonth}"]`;
1217
-
let matchingItems = document.querySelectorAll(selector);
1220
-
// If no exact match, try just matching the year
1221
-
if (matchingItems.length === 0) {
1222
-
selector = `.feed-item[data-year="${lastActiveYear}"]`;
1223
-
matchingItems = document.querySelectorAll(selector);
1226
-
// If still no match, find the closest date
1227
-
if (matchingItems.length === 0) {
1228
-
const targetDate = new Date(lastActiveYear, lastActiveMonth);
1229
-
const allFeedItems = Array.from(document.querySelectorAll('.feed-item'));
1231
-
// Sort by closest date
1232
-
if (allFeedItems.length > 0) {
1233
-
allFeedItems.sort((a, b) => {
1234
-
const dateA = new Date(a.getAttribute('data-year'), a.getAttribute('data-month'));
1235
-
const dateB = new Date(b.getAttribute('data-year'), b.getAttribute('data-month'));
1237
-
return Math.abs(dateA - targetDate) - Math.abs(dateB - targetDate);
1240
-
// Use closest match
1241
-
if (allFeedItems.length > 0) {
1242
-
matchingItems = [allFeedItems[0]];
1247
-
// Scroll to the matching item
1248
-
if (matchingItems.length > 0) {
1249
-
matchingItems[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
1251
-
// Update timeline
1252
-
const year = matchingItems[0].getAttribute('data-year');
1253
-
const month = matchingItems[0].getAttribute('data-month');
1255
-
const yearEl = document.querySelector(`.timeline-year[data-year="${year}"]`);
1256
-
const monthEl = document.querySelector(`.timeline-month[data-year="${year}"][data-month="${month}"]`);
1258
-
if (yearEl) yearEl.classList.add('active');
1260
-
monthEl.classList.add('active');
1261
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
1265
-
// If no active period, default to highlighting first visible
1266
-
const visiblePosts = Array.from(document.querySelectorAll('.feed-item'))
1268
-
const rect = item.getBoundingClientRect();
1269
-
return rect.top >= 0 && rect.bottom <= window.innerHeight;
1272
-
if (visiblePosts.length > 0) {
1273
-
const firstVisible = visiblePosts[0];
1274
-
const year = firstVisible.getAttribute('data-year');
1275
-
const month = firstVisible.getAttribute('data-month');
1277
-
if (year && month) {
1278
-
const yearEl = document.querySelector(`.timeline-year[data-year="${year}"]`);
1279
-
const monthEl = document.querySelector(`.timeline-month[data-year="${year}"][data-month="${month}"]`);
1281
-
if (yearEl) yearEl.classList.add('active');
1283
-
monthEl.classList.add('active');
1284
-
monthEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
1086
+
// Observe all items in the active tab
1087
+
observeAllDateItems();
1089
+
// Always scroll to top when switching tabs
1090
+
window.scrollTo({ top: 0, behavior: 'smooth' });
anil.recoil.org