(()=>{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)})})();
|
