Simplify sidebar scroll preservation using only x-navigate directive
- Remove custom sessionStorage scroll management logic - Rely solely on x-navigate directive from Alpine for scroll preservation - x-navigate handles automatic scroll position saving and restoring - Cleaner and simpler implementation - Keep x-navigate directive on all sidebar links
This commit is contained in:
@@ -259,72 +259,6 @@ class="fixed inset-y-0 left-0 top-16 w-64 bg-white border-r border-gray-200 over
|
|||||||
|
|
||||||
<!-- Global Keyboard Shortcuts -->
|
<!-- Global Keyboard Shortcuts -->
|
||||||
<script>
|
<script>
|
||||||
// Sidebar scroll position management per page
|
|
||||||
function getSidebarScrollKey() {
|
|
||||||
// Use current page URL to create a unique key for scroll position
|
|
||||||
return 'kb_sidebar_scroll_' + window.location.pathname;
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveSidebarScroll() {
|
|
||||||
const sidebar = document.getElementById('kb-sidebar');
|
|
||||||
if (sidebar) {
|
|
||||||
const scrollPos = sidebar.scrollTop;
|
|
||||||
const key = getSidebarScrollKey();
|
|
||||||
sessionStorage.setItem(key, scrollPos);
|
|
||||||
console.log('Saved sidebar scroll for ' + window.location.pathname + ':', scrollPos);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function restoreSidebarScroll() {
|
|
||||||
const sidebar = document.getElementById('kb-sidebar');
|
|
||||||
if (!sidebar) return;
|
|
||||||
|
|
||||||
// Use requestAnimationFrame to ensure DOM is fully rendered
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
const key = getSidebarScrollKey();
|
|
||||||
const savedPos = sessionStorage.getItem(key);
|
|
||||||
console.log('Retrieved from sessionStorage for ' + window.location.pathname + ':', savedPos);
|
|
||||||
|
|
||||||
if (savedPos !== null && parseInt(savedPos, 10) > 0) {
|
|
||||||
const pos = parseInt(savedPos, 10);
|
|
||||||
sidebar.scrollTop = pos;
|
|
||||||
console.log('Restored sidebar scroll for ' + window.location.pathname + ' to:', pos);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Intercept sidebar link clicks
|
|
||||||
document.addEventListener('click', function(e) {
|
|
||||||
const sidebar = document.getElementById('kb-sidebar');
|
|
||||||
if (!sidebar) return;
|
|
||||||
|
|
||||||
const link = e.target.closest('a');
|
|
||||||
if (sidebar.contains(link)) {
|
|
||||||
console.log('Sidebar link clicked, saving scroll');
|
|
||||||
saveSidebarScroll();
|
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
|
|
||||||
// Save before Alpine navigation
|
|
||||||
document.addEventListener('alpine:navigating', saveSidebarScroll);
|
|
||||||
|
|
||||||
// Restore after Alpine navigation
|
|
||||||
document.addEventListener('alpine:navigated', () => {
|
|
||||||
console.log('Alpine navigated event fired, attempting restore');
|
|
||||||
restoreSidebarScroll();
|
|
||||||
});
|
|
||||||
|
|
||||||
// For page load/reload
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
console.log('DOMContentLoaded - calling restoreSidebarScroll');
|
|
||||||
restoreSidebarScroll();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.log('Document already loaded - calling restoreSidebarScroll');
|
|
||||||
setTimeout(restoreSidebarScroll, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('keydown', function(e) {
|
document.addEventListener('keydown', function(e) {
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|||||||
Reference in New Issue
Block a user