PopupMenuもどき
mobile未対応
2021-08-02
15:35:21 githubに移動した
bundle & minifyしたもの
code:script.js
function s(){let{popupMenu:t,render:e}=a();document.getElementById("editor")?.append(t);let n=document.getElementsByClassName("cursor")0;return new MutationObserver(()=>t.style.top=${parseInt(n.style.top)+parseInt(n.style.height)+4}px).observe(document.getElementsByClassName("lines")0,{attributes:!0,subtree:!0,attributeFilter:"class"}),{render:e,visible:()=>!t.hidden,open:()=>t.hidden=!1,close:()=>t.hidden=!0,toggle:()=>t.hidden=!t.hidden}}function a(){let t=document.createElement("div"),e=t.attachShadow({mode:"open"});e.innerHTML=` <style>
:host {
position: absolute;
left: 0px;
width:100%;
z-index:300;
user-select:none;
font-family:"Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif;
pointer-events:none
}
.button-container {
position: relative;
display:inline-block;
max-width:70vw;
min-width:80px;
text-align:center;
background-color:#111;
padding:0 1px;
border-radius:4px;
pointer-events:auto
}
max-width:90vw
}
max-width:90vw
}
.button {
font-size:11px;
color:#eee;
cursor:pointer;
display:inline-block;
padding:0 5px
}
.button:not(:first-of-type) {
border:0;
border-left:1px solid #eee }
.button.selected {
background-color:#222;
text-decoration:underline
}
font-size:13px;
padding:6px;
min-width:12vw
}
font-size:13px;
padding:6px;
min-width:12vw
}
.button div.icon {
height:2em;
max-width:10em;
display:inline-block;
overflow:hidden;
margin-left:1px;
vertical-align:top
}
.button div.icon img {
max-height:100%;
vertical-align:unset
}
</style>
<div class="button-container"></div>
`;let i=e.lastElementChild;return{popupMenu:t,render(n){i.textContent="",i.append(...n.map(({text:r,onClick:d})=>{let o=document.createElement("div");return o.classList.add("button"),o.textContent=r,d&&o.addEventListener("click",()=>d()),o}))}}}export{s as createPopupMenuBar};