| | |
|---|
| | | (()=>{class e extends window.UIHandler{constructor(){super(),this.navOpen=!1,this.toggleNav=this.toggleNav.bind(this),this.bindElements(),this.elements.nav&&(this.elements.toggle&&(this.elements.toggle.addEventListener("click",this.toggleNav),this.bindEvents()),this.setupSectionObserver())}bindElements(){const e=document.querySelector("nav.on-this-page");e&&(this.elements={nav:e,links:e.querySelectorAll("a"),sections:Array.from(e.querySelectorAll("a")).map((e=>{const t=e.getAttribute("href");return document.querySelector(t)})).filter(Boolean)},e.querySelector("button.toggle")&&(this.elements.toggle=e.querySelector("button.toggle")))}bindComponentEvents(){}toggleNav(e){e?.preventDefault(),e?.stopPropagation();const{nav:t,toggle:n}=this.elements;t&&n&&(this.navOpen=!this.navOpen,this.navOpen?(t.classList.add("open"),n.setAttribute("aria-label","Hide Index"),n.setAttribute("aria-expanded","true"),this.bindLinkHandlers()):(t.classList.remove("open"),n.setAttribute("aria-label","Show Index"),n.setAttribute("aria-expanded","false"),this.cleanupLinkHandlers()))}bindLinkHandlers(){const{links:e}=this.elements;e?.forEach((e=>{e._boundHandler=()=>{this.navOpen=!1,this.elements.nav.classList.remove("open"),this.elements.toggle.setAttribute("aria-label","Show Index"),this.elements.toggle.setAttribute("aria-expanded","false"),this.cleanupLinkHandlers()},e.addEventListener("click",e._boundHandler)}))}cleanupLinkHandlers(){const{links:e}=this.elements;e?.forEach((e=>{e._boundHandler&&(e.removeEventListener("click",e._boundHandler),delete e._boundHandler)}))}setupSectionObserver(){const{sections:e}=this.elements;e?.length&&this.initializeObserver("sections",e,{rootMargin:"-50% 0% -50% 0%",threshold:0},(e=>{e.forEach((e=>{if(!e.isIntersecting)return;const t=e.target.id,n=this.elements.nav?.querySelector(`a[href="#${t}"]`);n&&this.updateActiveClasses(n)}))}))}updateActiveClasses(e){const t=e.closest("li");if(!t)return;this.elements.nav.querySelectorAll("li").forEach((e=>{e.classList.remove("active","adj")})),t.classList.add("active"),t.previousElementSibling&&t.previousElementSibling.classList.add("adj"),t.nextElementSibling&&t.nextElementSibling.classList.add("adj")}isComponentActive(e){return"nav"===e?this.navOpen:super.isComponentActive(e)}handleOutsideClick(e){this.navOpen&&!this.elements.nav.contains(e.target)&&this.toggleNav(e)}handleEscapeKey(e){"Escape"===e.key&&this.navOpen&&(this.toggleNav(e),e.preventDefault())}cleanup(){this.cleanupLinkHandlers(),super.cleanup()}}document.addEventListener("DOMContentLoaded",(()=>{document.querySelector("nav.on-this-page")&&(window.onThisPage=new e)}))})(); |
|---|
| | | (()=>{class e{constructor(){this.initElements(),this.initListeners()}initElements(){this.selectors={nav:"nav.on-this-page",toggle:"button.toggle",icon:"button.toggle .icon"},this.ui=window.uiFromSelectors(this.selectors);let e=this.ui.nav.querySelectorAll("li a");this.ui.items={},this.ui.sections={},this.selectors.items=[];for(let t of e){let e=t.getAttribute("href");this.ui.items[e.replace("#","")]=t.closest("li"),this.selectors.items.push(e),this.ui.sections[e.replace("#","")]=document.querySelector(e)}this.selectors.items=this.selectors.items.join(",")}initListeners(){this.ui.toggle.addEventListener("click",(()=>{let e=this.ui.nav.classList().contains("open")?"icon-x-square":"icon-plus-square";console.log("Changing icon to: "+e),this.ui.icon.className="icon "+e})),this.observer=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){let t=Object.keys(this.ui.items).indexOf(e.target.id),s=0;for(let e of Object.values(this.ui.items))e.classList.toggle("active",t===s),s++}}))}),{rootMargin:"-50% 0px -50% 0px",threshold:0});for(let e of Object.values(this.ui.sections))console.log("Observing section: ",e),this.observer.observe(e)}}document.addEventListener("DOMContentLoaded",(()=>{document.querySelector("nav.on-this-page")&&(window.onThisPage=new e)}))})(); |
|---|
