Menu module for KameSame Open Framework
This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/451522/1126912/KameSame%20Open%20Framework%20-%20Menu%20module.js
// ==UserScript==
// @name KameSame Open Framework - Menu module
// @version 0.3
// @author Robin Findley, Timberpile
// @description Menu module for KameSame Open Framework
// @homepage https://github.com/timberpile/kamesame-open-framework#readme
// @supportURL https://github.com/timberpile/kamesame-open-framework/issues
// @match http*://*.kamesame.com/*
// @copyright 2022+, Robin Findley, Timberpile
// @namespace timberpile@proton.me
// @run-at document-start
// @grant none
// @license MIT
// ==/UserScript==
(()=>{"use strict";const e=()=>window.ksof;class t{menu;style;submenus;configs;constructor(){this.style=void 0,this.menu=void 0,this.submenus=new Map,this.configs=[];const t=()=>{this.style&&this.style.remove(),this.style=this.#e(),this.menu&&this.menu.remove();try{this.menu=this.#t(),this.menu.setAttribute("display","none")}catch(e){throw new Error(`Can't install ksof menu: ${e}`)}},n={name:"menu",query:"#scripts-menu"};e().domObserver.add(n),e().waitState(e().domObserver.stateName(n),"absent",(()=>{t();const e=this.configs;this.configs=[];for(const t of e)this.insertScriptLink(t)}),!0)}get header(){return this.dropdownMenu?.querySelector(":scope > li.scripts-header")}get scriptsIcon(){return e().pageInfo.on,this.menu.querySelector(":scope > a.scripts-icon")}get dropdownMenu(){return this.menu.querySelector("ul.dropdown-menu")}#e(){return document.head.querySelector('style[name="scripts_submenu"]')||(document.head.insertAdjacentHTML("beforeend",'<style name="scripts_submenu">\n #scripts-menu {text-shadow:none}\n #scripts-menu.scripts-menu-icon {display:inline-block}\n #scripts-menu .scripts-icon {display:inline-block cursor: pointer font-size: 1.2em margin-right: auto opacity: .65 position: relative top: 3px}\n #scripts-menu:not(.open) > .dropdown-menu {display:none}\n #scripts-menu .scripts-submenu:not(.open) > .dropdown-menu {display:none}\n #scripts-menu ul.dropdown-menu {position:absolute background-color:#eee margin:0 padding:5px 0 list-style-type:none border:1px solid #333 display:block}\n #scripts-menu ul.dropdown-menu > li {text-align:left color:#333 white-space:nowrap line-height:20px padding:3px 0 display:list-item}\n #scripts-menu ul.dropdown-menu > li.scripts-header {text-transform:uppercase font-size:.8rem font-weight:bold padding:3px 12px display:list-item}\n #scripts-menu ul.dropdown-menu > li:hover:not(.scripts-header) {background-color:rgba(0,0,0,0.15)}\n #scripts-menu ul.dropdown-menu a {padding:3px 20px color:#333 opacity:1}\n #scripts-menu .scripts-submenu {position:relative font-size: 1rem}\n #scripts-menu .scripts-submenu > a:after {content:">" font-family:"FontAwesome" position:absolute top:0 right:0 padding:3px 4px 3px 0}\n #scripts-menu .scripts-submenu .dropdown-menu {left:100% top:-6px}\n #app.kamesame nav li #scripts-menu {\n display: flex\n flex-direction: column\n height: 100%\n width: 100%\n color: var(--gray)\n }\n </style>'),document.head.querySelector('style[name="scripts_submenu"]'))}#t(){let t=document.querySelector("#scripts-menu");if(t)return t;if("review"==e().pageInfo.on){const e=document.querySelector(".header a.exit");if(!e)throw new Error("Exit button not found");e.insertAdjacentHTML("afterend",'\n <div id="scripts-menu" class="scripts-menu-icon">\n <a class="scripts-icon state" href="#"><i title="Script Menu">⚙️</i></a>\n <ul class="dropdown-menu">\n <li class="scripts-header">Script Menu</li>\n </ul>\n </div>')}else{const e=o();if(!e)throw new Error("Search icon not found");e.parentElement?.insertAdjacentHTML("afterend",'\n <li>\n <div id="scripts-menu" class="scripts-menu-icon">\n <a class="scripts-icon" href="#">\n <div class="icon">\n <div>⚙</div>\n </div>\n <div class="label">\n <span>Scripts Menu</span>\n </div>\n </a>\n <ul class="dropdown-menu">\n <li class="scripts-header label">Scripts Menu</li>\n </ul>\n </div>\n </li>')}if(t=document.querySelector("#scripts-menu"),!t)throw new Error("Menu not found after insertion");return this.menu=t,this.scriptsIcon.addEventListener("click",(e=>{this.menu.classList.toggle("open"),this.menu.classList.contains("open")&&document.body.addEventListener("click",this.onBodyClick),e.stopPropagation()})),this.menu.addEventListener("click",(t=>{const n=t.target;if(!n.matches(".scripts-submenu>a"))return!1;const s=n.parentElement;if(!s)return!1;if(!s.parentElement)return!1;for(const e of s.parentElement.querySelectorAll(".scripts-submenu.open"))e!==s&&e.classList.remove("open");if(null===e().pageInfo.on){const e=document.querySelector('#sitemap__account,[id="#sitemap__account"]'),t=s.querySelector(".dropdown-menu");if(e&&t){t.style.fontSize="12px",t.style.maxHeight="";let n=Math.max(0,s.offsetTop);s.classList.toggle("open"),s.classList.contains("open")&&(t.style.top=`${n}px`,e.offsetHeight-n<t.offsetHeight&&(n=Math.max(0,e.offsetHeight-t.offsetHeight),t.style.top=`${n}px`,t.style.maxHeight=String(e.offsetHeight-n)))}}else s.classList.toggle("open");s.classList.contains("open")?document.body.addEventListener("click",this.onBodyClick):document.body.removeEventListener("click",this.onBodyClick),t.stopPropagation()})),t}getSubmenu(e){const t=s(e);return this.submenus.get(t)}installScriptsSubmenu(e){const t=this.getSubmenu(e);if(t)return t;const o=s(e),r=i(e),c=document.createElement("a");c.href="#",c.innerText=r;const u=document.createElement("ul");u.className="dropdown-menu";const a=document.createElement("li");a.setAttribute("name",o),a.appendChild(c),a.appendChild(u),this.dropdownMenu.appendChild(a),this.submenus.set(o,a);const l=this.dropdownMenu.querySelectorAll(":scope > .scripts-submenu, :scope > .script-link");if(l){for(const e of Array.from(l).sort(n))e.parentNode?.append(e);return a}}insertScriptLink(t){const s=`${t.name}_script_link`,o=i(t.title);if(document.querySelector(`#${s}`))return;if(this.configs.indexOf(t)>=0)return;let r;this.configs.push(t),this.menu.hasAttribute("display")&&this.menu.removeAttribute("display");const c=this.header;if(!c)return;const u=document.createElement("li");if(u.id=s,u.setAttribute("name",t.name),u.innerHTML=`<a href="#">${o}</a>`,t.submenu){const e=this.installScriptsSubmenu(t.submenu);if(!e)return;const n=e.querySelector(".dropdown-menu");if(!n)return;r=["sitemap__page"],t.class&&r.push(t.classHTML||""),u.setAttribute("class",r.join(" ")),u.innerHTML=`<a href="#">${o}</a>`,n.append(u)}else r=["sitemap__page","script-link"],t.class&&r.push(t.classHTML||""),u.setAttribute("class",r.join(" ")),"review"==e().pageInfo.on?c.after(u):c.append(u);const a=c.parentElement?.querySelectorAll(":scope > .scripts-submenu, :scope > .script-link");if(a)for(const e of Array.from(a).sort(n))e.parentNode?.append(e);document.querySelector(`#${s}`)?.addEventListener("click",(e=>{document.body.removeEventListener("click",this.onBodyClick),document.querySelector("#scripts-menu")?.classList.remove("open");for(const e of document.querySelectorAll(".scripts-submenu"))e.classList.remove("open");const n=document.querySelector('#sitemap__account,[id="#sitemap__account"]');if(n){const e=n.parentElement?.querySelector("[data-expandable-navigation-target],[data-navigation-section-toggle]");e.click();const t=document.querySelector(".navigation__toggle");(t.offsetWidth>0||t.offsetWidth>0)&&t.click()}return t.onClick(e),!1}))}onBodyClick(){this.menu.classList.remove("open");for(const e of document.querySelectorAll(".scripts-submenu.open"))e.classList.remove("open");document.body.removeEventListener("click",this.onBodyClick)}}const n=(e,t)=>{const n=e.querySelector("a");if(!n)return-1;const s=t.querySelector("a");return s?n.innerText.localeCompare(s.innerText):-1},s=e=>e.replace(/"/g,"'"),i=e=>e.replace(/[<&>]/g,(e=>{switch(e){case"<":return"<";case">":return">";case"&":return"&";default:return e}})),o=()=>{const e=Array.from(document.querySelectorAll("#nav_container .real ul li a div.icon div")).find((e=>"🔍"===e.textContent));if(e)return e.parentElement?.parentElement};(async e=>{const n=window.ksof;await n.ready("document");const s=new t;n.Menu={insertScriptLink:s.insertScriptLink,ui:s},setTimeout((()=>{n.setState("ksof.Menu","ready")}),0)})()})();