var islandSwitch = function(elementID){ this.elementID = elementID; this.element = document.getElementById(elementID); if(!this.element) return; this.element.style.display = "block"; this.layout(); this.events(); }; islandSwitch.prototype.events = function(){ this.element.querySelectorAll("a").forEach(li=>{ li.addEventListener("click",(e)=>{ e.preventDefault(); var focusEl = this.element.querySelector(".active"); if(focusEl){ focusEl.classList.remove("active"); } li.classList.add("active"); this.focus(); }); }); }; islandSwitch.prototype.layout = function(){ var elementBounds = this.element.querySelector("ul").getBoundingClientRect(); var focusEl = this.element.querySelector(".active"); if(!focusEl){ this.element.querySelector("li").classList.add("active"); } this.highlightEl = document.createElement("li"); this.highlightEl.classList.add("highlight"); this.element.querySelector("ul").append(this.highlightEl);
Aloha, World!