This commit is contained in:
Ondrej Zara 2020-03-28 18:31:28 +01:00
parent 4d6cef24a4
commit 2957ded7d8
2 changed files with 16 additions and 32 deletions

View file

@ -808,29 +808,21 @@ class Component extends HTMLElement {
} }
class Menu extends Component { 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));
});
}
_onAppLoad() { _onAppLoad() {
/** @type HTMLElement[] */
this._tabs = Array.from(this.querySelectorAll("[data-for]"));
this._tabs.forEach(tab => {
tab.addEventListener("click", _ => this._app.setAttribute("component", tab.dataset.for));
});
this._app.addEventListener("queue-length-change", e => { this._app.addEventListener("queue-length-change", e => {
this.querySelector(".queue-length").textContent = `(${e.detail})`; this.querySelector(".queue-length").textContent = `(${e.detail})`;
}); });
} }
async _activate(component) {
const app = await this._app;
app.setAttribute("component", component);
}
_onComponentChange(component) { _onComponentChange(component) {
this._tabs.forEach(/** @param {HTMLElement} tab */ tab => { this._tabs.forEach( tab => {
tab.classList.toggle("active", tab.dataset.for == component); tab.classList.toggle("active", tab.dataset.for == component);
}); });
} }

View file

@ -1,29 +1,21 @@
import Component from "../component.js"; import Component from "../component.js";
class Menu extends Component { 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));
});
}
_onAppLoad() { _onAppLoad() {
/** @type HTMLElement[] */
this._tabs = Array.from(this.querySelectorAll("[data-for]"));
this._tabs.forEach(tab => {
tab.addEventListener("click", _ => this._app.setAttribute("component", tab.dataset.for));
});
this._app.addEventListener("queue-length-change", e => { this._app.addEventListener("queue-length-change", e => {
this.querySelector(".queue-length").textContent = `(${e.detail})`; this.querySelector(".queue-length").textContent = `(${e.detail})`;
}); });
} }
async _activate(component) {
const app = await this._app;
app.setAttribute("component", component);
}
_onComponentChange(component) { _onComponentChange(component) {
this._tabs.forEach(/** @param {HTMLElement} tab */ tab => { this._tabs.forEach( tab => {
tab.classList.toggle("active", tab.dataset.for == component); tab.classList.toggle("active", tab.dataset.for == component);
}); });
} }