class OnThisPage extends window.UIHandler {
|
constructor() {
|
super();
|
|
// Initialize state tracking
|
this.navOpen = false;
|
|
// Bind methods
|
this.toggleNav = this.toggleNav.bind(this);
|
|
// Bind elements first
|
this.bindElements();
|
|
|
if (this.elements.nav) {
|
if(this.elements.toggle){
|
// Bind click directly
|
this.elements.toggle.addEventListener('click', this.toggleNav);
|
|
// Bind UIHandler events for escape and outside clicks
|
this.bindEvents();
|
}
|
|
|
// Set up section observer
|
this.setupSectionObserver();
|
}
|
}
|
|
bindElements() {
|
const nav = document.querySelector('nav.on-this-page');
|
|
if (!nav) return;
|
this.elements = {
|
nav,
|
links: nav.querySelectorAll('a'),
|
sections: Array.from(nav.querySelectorAll('a'))
|
.map(a => {
|
const id = a.getAttribute('href');
|
return document.querySelector(id);
|
})
|
.filter(Boolean)
|
};
|
if(nav.querySelector('button.toggle')){
|
this.elements.toggle = nav.querySelector('button.toggle');
|
}
|
}
|
|
// Override to prevent UIHandler's component event binding
|
bindComponentEvents() {
|
// Intentionally empty
|
}
|
|
toggleNav(event) {
|
event?.preventDefault();
|
event?.stopPropagation();
|
|
const { nav, toggle } = this.elements;
|
if (!nav || !toggle) return;
|
|
// Toggle state
|
this.navOpen = !this.navOpen;
|
|
// Update DOM
|
if (this.navOpen) {
|
nav.classList.add('open');
|
toggle.setAttribute('aria-label', 'Hide Index');
|
toggle.setAttribute('aria-expanded', 'true');
|
this.bindLinkHandlers();
|
} else {
|
nav.classList.remove('open');
|
toggle.setAttribute('aria-label', 'Show Index');
|
toggle.setAttribute('aria-expanded', 'false');
|
this.cleanupLinkHandlers();
|
}
|
}
|
|
bindLinkHandlers() {
|
const { links } = this.elements;
|
links?.forEach(link => {
|
link._boundHandler = () => {
|
this.navOpen = false;
|
this.elements.nav.classList.remove('open');
|
this.elements.toggle.setAttribute('aria-label', 'Show Index');
|
this.elements.toggle.setAttribute('aria-expanded', 'false');
|
this.cleanupLinkHandlers();
|
};
|
link.addEventListener('click', link._boundHandler);
|
});
|
}
|
|
cleanupLinkHandlers() {
|
const { links } = this.elements;
|
links?.forEach(link => {
|
if (link._boundHandler) {
|
link.removeEventListener('click', link._boundHandler);
|
delete link._boundHandler;
|
}
|
});
|
}
|
|
setupSectionObserver() {
|
const { sections } = this.elements;
|
|
if (!sections?.length) return;
|
|
this.initializeObserver(
|
'sections',
|
sections,
|
{
|
rootMargin: '-50% 0% -50% 0%',
|
threshold: 0
|
},
|
(entries) => {
|
entries.forEach(entry => {
|
if (!entry.isIntersecting) return;
|
|
const id = entry.target.id;
|
const link = this.elements.nav?.querySelector(`a[href="#${id}"]`);
|
if (link) {
|
this.updateActiveClasses(link);
|
}
|
});
|
}
|
);
|
}
|
|
updateActiveClasses(activeLink) {
|
const listItem = activeLink.closest('li');
|
if (!listItem) return;
|
|
// Remove existing active and adjacent classes
|
const allItems = this.elements.nav.querySelectorAll('li');
|
allItems.forEach(item => {
|
item.classList.remove('active', 'adj');
|
});
|
|
// Add new classes
|
listItem.classList.add('active');
|
|
// Add adjacent classes
|
if (listItem.previousElementSibling) {
|
listItem.previousElementSibling.classList.add('adj');
|
}
|
if (listItem.nextElementSibling) {
|
listItem.nextElementSibling.classList.add('adj');
|
}
|
}
|
|
// Use local state for component active check
|
isComponentActive(componentKey) {
|
if (componentKey === 'nav') {
|
return this.navOpen;
|
}
|
return super.isComponentActive(componentKey);
|
}
|
|
// UIHandler event handlers
|
handleOutsideClick(event) {
|
if (this.navOpen && !this.elements.nav.contains(event.target)) {
|
this.toggleNav(event);
|
}
|
}
|
|
handleEscapeKey(event) {
|
if (event.key === 'Escape' && this.navOpen) {
|
this.toggleNav(event);
|
event.preventDefault();
|
}
|
}
|
|
cleanup() {
|
this.cleanupLinkHandlers();
|
super.cleanup();
|
}
|
}
|
|
// Initialize
|
document.addEventListener('DOMContentLoaded', () => {
|
if (document.querySelector('nav.on-this-page')) {
|
window.onThisPage = new OnThisPage();
|
}
|
});
|
