32 lines
710 B
JavaScript
32 lines
710 B
JavaScript
|
import Component from "./component.js";
|
||
|
|
|
||
|
|
class Menu extends Component {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
|
||
|
|
this._tabs = Array.from(this.querySelectorAll("[data-for]"));
|
||
|
|
this._tabs.forEach(tab => {
|
||
|
|
tab.addEventListener("click", _ => this._activate(tab.dataset.for));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async _listen() {
|
||
|
|
const app = await this._app;
|
||
|
|
let mo = new MutationObserver(_ => this._sync())
|
||
|
|
mo.observe(app, {attributes:true});
|
||
|
|
}
|
||
|
|
|
||
|
|
async _activate(component) {
|
||
|
|
const app = await this._app;
|
||
|
|
app.setAttribute("component", component);
|
||
|
|
}
|
||
|
|
|
||
|
|
_onComponentChange(component) {
|
||
|
|
this._tabs.forEach(tab => {
|
||
|
|
tab.classList.toggle("active", tab.dataset.for == component);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define("cyp-menu", Menu);
|