50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
class MenuPopup extends HTMLElement{
|
|
constructor(){
|
|
super();
|
|
this.entries = [new HorizontalDivider()]
|
|
}
|
|
|
|
hide(){
|
|
this.style.visibility = "hidden";
|
|
}
|
|
|
|
show(){
|
|
this.style.visibility = "visible";
|
|
}
|
|
|
|
getContainer(){
|
|
return this.getElementsByClassName("menu")[0];
|
|
}
|
|
|
|
addEntry(entry){
|
|
this.entries.push(entry);
|
|
}
|
|
|
|
addHorizontalDivider(){
|
|
this.entries.push(new HorizontalDivider());
|
|
}
|
|
|
|
connectedCallback(){
|
|
this.render();
|
|
this.hide();
|
|
this.getElementsByClassName("menu-title-container")[0].getElementsByTagName("img")[0].onclick = () => {this.hide()};
|
|
}
|
|
|
|
render(){
|
|
this.innerHTML = `
|
|
<link rel="stylesheet" href="components/menu_popup/menu_popup.css">
|
|
<div class="menu">
|
|
<div class="menu-title-container">
|
|
<span>Menu</span>
|
|
<img src="res/close.png">
|
|
</div>
|
|
</div>
|
|
`;
|
|
let menuContainer = this.getElementsByClassName("menu")[0];
|
|
for (let entry of this.entries){
|
|
menuContainer.appendChild(entry);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("sea-menu", MenuPopup); |