43 строки
1.3 KiB
JavaScript
43 строки
1.3 KiB
JavaScript
|
class Menu {
|
||
|
|
#application;
|
||
|
|
#root;
|
||
|
|
#items;
|
||
|
|
|
||
|
|
constructor(application) {
|
||
|
|
this.#application = application;
|
||
|
|
this.#root = document.querySelector('#menu');
|
||
|
|
this.#items = this.#root.querySelectorAll('input[data-page]');
|
||
|
|
this.#items.forEach(item => {
|
||
|
|
item.addEventListener('click', () => this.#application.open(item.dataset.page));
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
setActive(pageId) {
|
||
|
|
this.#items.forEach(item => item.classList.remove('active'));
|
||
|
|
this.#items.forEach(item => item.dataset.page === pageId ? item.classList.add('active') : null);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
class Application {
|
||
|
|
static DEFAULT_PAGE = 'dashboard';
|
||
|
|
|
||
|
|
#inputContainer;
|
||
|
|
#outputContainer;
|
||
|
|
#menu;
|
||
|
|
#pageId;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
this.#inputContainer = document.querySelector('#input');
|
||
|
|
this.#outputContainer = document.querySelector('#output');
|
||
|
|
this.#menu = new Menu(this);
|
||
|
|
};
|
||
|
|
|
||
|
|
open(pageId) {
|
||
|
|
this.#pageId = pageId;
|
||
|
|
document.querySelectorAll('#input [data-page]').forEach(page => page.classList.remove('active'));
|
||
|
|
document.querySelector(`#input [data-page="${pageId}"]`).classList.add('active');
|
||
|
|
document.querySelectorAll('#output [data-page]').forEach(page => page.classList.remove('active'));
|
||
|
|
this.#menu.setActive(pageId);
|
||
|
|
};
|
||
|
|
}
|