44 lines
1.5 KiB
JavaScript
44 lines
1.5 KiB
JavaScript
class HelpEntry extends HTMLElement{
|
|
constructor(title, description){
|
|
super();
|
|
this.title = title;
|
|
this.description = description;
|
|
}
|
|
|
|
displayPopup(){
|
|
this.getElementsByTagName("sea-help-popup")[0].style.visibility = "visible";
|
|
}
|
|
|
|
hidePopup(){
|
|
this.getElementsByTagName("sea-help-popup")[0].style.visibility = "hidden";
|
|
}
|
|
|
|
toggleVisibility(){
|
|
if (this.getElementsByTagName("sea-help-popup")[0].style.visibility == "visible")
|
|
this.hidePopup();
|
|
else
|
|
this.displayPopup();
|
|
}
|
|
|
|
connectedCallback(){
|
|
this.render();
|
|
this.getElementsByTagName("img")[0].onmouseenter = () => {this.displayPopup();};
|
|
this.getElementsByTagName("img")[0].onmouseleave = () => {this.hidePopup();};
|
|
// For mobile phones
|
|
this.getElementsByTagName("img")[0].onclick = () => {this.toggleVisibility();};
|
|
}
|
|
|
|
render(){
|
|
this.innerHTML = `
|
|
<link rel="stylesheet" href="./components/help_entry/help_entry.css">
|
|
<script src="./components/help_popup/help_popup.js"></script>
|
|
<div class="help-entry">
|
|
<span class="help-entry-title">${this.title}</span>
|
|
<img src="res/arrow.png" class="help-entry-arrow">
|
|
</div>
|
|
<sea-help-popup style="visibility:hidden;" helptitle="${this.title}" helpdescription="${this.description}"></sea-help-popup>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("sea-help-entry", HelpEntry); |