menubar.min.js

/*menubar.js by C. Mames is licensed under the GNU General Public License v3.0 https://github.com/cmames/menubar.js */var font,fonti,col={},bgcol="",styleElem=document.head.appendChild(document.createElement("style"));function menuElement(n){n.style.zIndex=1e3,n.style.position="relative";let e=document.createElement("div");n.insertBefore(e,n.firstChild),e.innerHTML="<ul class='menubarnav'></ul>",Object.assign(e.style,{position:"absolute",width:"100%",top:0,left:0,zIndex:1e3}),n.addEventListener("scroll",(()=>{e.style.top=n.scrollTop+"px",e.style.left=n.scrollLeft+"px"}));var o=window["__"+n.id];void 0!==o.textColor?col.t=o.textColor:col.t="black",bgcol=void 0!==o.backgroundColor?o.backgroundColor:"white",font=void 0!==o.fontFamily?o.fontFamily:"system-ui",fonti=void 0!==o.iconFontFamily?o.iconFontFamily:"monospace";let t=document.createElement("span");t.style.color=col.t,t.style.backgroundColor=bgcol.t,t.textContent="CMames",document.body.appendChild(t),bgcol.t=""+window.getComputedStyle(t).getPropertyValue("background-color"),col.t=""+window.getComputedStyle(t).getPropertyValue("color"),document.body.removeChild(t),t=col.t.split(","),col.r=t[0].split("(")[1],col.g=t[1],col.b=t[2].split(")")[0],styleElem.innerHTML=styleElem.innerHTML+"\n  #"+n.id+" > div {\n    background-color: "+bgcol+";\n    font-family:"+font+";\n  }\n  #"+n.id+" .menubarnav a{\n    text-decoration: none;\n    display: block;\n    color:"+col.t+";\n  }\n  #"+n.id+" .menubarnav li:hover {\n    background-color: rgba("+col.r+","+col.g+","+col.b+",0.25);\n  }\n  #"+n.id+" .menubarnav ul {\n    border: solid 1px "+col.t+";\n    box-shadow: 3px 3px rgba("+col.r+","+col.g+","+col.b+",0.25);\n    background-color: "+bgcol+";\n  }\n  ",void 0!==o&&parseMenu(n,e.querySelector("ul"),o.menu);let l=window.getComputedStyle(n,null).getPropertyValue("padding-top");n.style.paddingTop=parseInt(l)+e.offsetHeight+"px"}function parseMenu(n,e,o){var t;e.style.backgroundColor=bgcol,e.style.color=col.t;for(var l=0;l<o.length;l++){t="",void 0===o[l].name&&(o[l].name="");var i=document.createElement("li");void 0!==o[l].icon&&(t='<span style="font-family:'+fonti+';">'+o[l].icon+"</span> "),void 0!==o[l].img&&(t=t+'<img src="'+o[l].img+'"/> '),void 0===o[l].action&&(i.innerHTML="<a href='#'>"+t+o[l].name+"</a>"),"link"===o[l].action?i.innerHTML="<a href='"+o[l].dest+"'>"+t+o[l].name+"</a>":"event"===o[l].action?(i.innerHTML=t+o[l].name,i.dest=o[l].dest,i.addEventListener("click",(e=>{n.dispatchEvent(new CustomEvent(i.dest,e))}))):"spacer"===o[l].action&&(i=document.createElement("hr")),e.appendChild(i),null!=o[l].sub&&(i.innerHTML=i.innerHTML+"<ul></ul>",parseMenu(n,i.querySelector("ul"),o[l].sub))}}styleElem.innerHTML="\n.menubarnav {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  z-index: 1000;\n}\n.menubarnav li {\n  cursor: pointer;\n  padding: 0.25em 0.5em 0.25em 0.5em;\n  display: inline-block;\n  background-color: inherit;\n}\n.menubarnav ul li {\n  width: auto;\n  display: inherit;\n}\n.menubarnav hr {\n  display: inherit;\n}\n.menubarnav img {\n  height: 1em;\n}\n.menubarnav ul {\n  width: max-content;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  position: absolute;\n  left: -999em;\n  text-align: left;\n}\n.menubarnav li:hover>ul {\n  left: auto;\n  margin-left: -0.4em;\n  margin-top: 0.1em;\n}\n.menubarnav li ul li:hover ul {\n  margin-top: -1.4em;\n  margin-left: 3em;\n}\n",document.querySelectorAll(".menubar").forEach((n=>{menuElement(n)}));