56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
class Control extends HTMLElement{
|
|
|
|
constructor(imgSrcMain, imgSrcAlt, tooltipDescription, callbackMain, callbackAlt = undefined){
|
|
super();
|
|
this.imgSrcMain = imgSrcMain;
|
|
this.imgSrcAlt = imgSrcAlt;
|
|
this.tooltipDescription = tooltipDescription;
|
|
this.callbackMain = callbackMain;
|
|
this.callbackAlt = callbackAlt;
|
|
}
|
|
|
|
changeToMain(){
|
|
this.permute("control-global-alt", "control-global-main");
|
|
}
|
|
|
|
changeToAlt(){
|
|
this.permute("control-global-main", "control-global-alt");
|
|
}
|
|
|
|
permute(from, to){
|
|
let fromElm = this.getElementsByClassName(from)[0];
|
|
let toElm = this.getElementsByClassName(to)[0];
|
|
|
|
fromElm.classList.remove("control-global-active");
|
|
toElm.classList.remove("control-global-inactive");
|
|
|
|
fromElm.classList.add("control-global-inactive");
|
|
toElm.classList.add("control-global-active");
|
|
|
|
this.getAnimations()
|
|
}
|
|
|
|
connectedCallback(){
|
|
this.render();
|
|
this.getElementsByClassName("control-global-active")[0].onclick = this.callbackMain;
|
|
if (this.callbackAlt !== undefined){
|
|
let altElm = this.getElementsByClassName("control-global-inactive")[0];
|
|
altElm.onclick = this.callbackAlt;
|
|
altElm.classList.add("animated");
|
|
}
|
|
}
|
|
|
|
render(){
|
|
this.innerHTML = `
|
|
<link rel="stylesheet" href="components/control/control.css">
|
|
<div class="tooltip">
|
|
<img class="control-global control-global-main control-global-active animated" src="${this.imgSrcMain}"/>
|
|
<img class="control-global control-global-alt control-global-inactive" src="${this.imgSrcAlt}"/>
|
|
<span class="tooltiptext">${this.tooltipDescription}</span>
|
|
</div>
|
|
`;
|
|
|
|
}
|
|
}
|
|
|
|
customElements.define("sea-control", Control) |