148 lines
4.6 KiB
JavaScript
148 lines
4.6 KiB
JavaScript
Router
|
||
.add('auth', function () {
|
||
pageActive('');
|
||
Auth.init();
|
||
page = "Auth";
|
||
})
|
||
.add('territory/map', function () {
|
||
pageActive();
|
||
Territory_Map.init();
|
||
page = "Territory_Map";
|
||
})
|
||
.add('territory/constructor', function () {
|
||
pageActive();
|
||
Territory_constructor.init();
|
||
page = "Territory_constructor";
|
||
})
|
||
.add('territory/manager/(.*)/(.*)', function (type, id) {
|
||
pageActive();
|
||
Territory_Manager.init(type, id);
|
||
page = "Territory_Manager";
|
||
})
|
||
.add('territory/editor/(.*)/(.*)', function (type, id) {
|
||
pageActive();
|
||
Territory_editor.init(type, id);
|
||
page = "Territory_editor";
|
||
})
|
||
.add('territory/card/(.*)/(.*)', function (type, id) {
|
||
pageActive();
|
||
Territory_card.init(type, id);
|
||
page = "Territory_card";
|
||
})
|
||
.add('territory/history', function () {
|
||
pageActive();
|
||
Territory_History.init();
|
||
page = "Territory_History";
|
||
})
|
||
.add('territory', function () {
|
||
pageActive('territory');
|
||
Territory_list.init();
|
||
page = "Territory_list";
|
||
})
|
||
.add('sheeps/(.*)', function (name) {
|
||
pageActive('sheeps');
|
||
Sheeps.init(name);
|
||
page = "Sheeps";
|
||
})
|
||
.add('sheeps', function () {
|
||
pageActive('sheeps');
|
||
Sheeps.init();
|
||
page = "Sheeps";
|
||
})
|
||
.add('home', function () {
|
||
pageActive('home');
|
||
Home.init();
|
||
page = "Home";
|
||
})
|
||
.add('schedule/constructor', function () {
|
||
pageActive();
|
||
Schedule_constructor.init();
|
||
page = "Schedule_constructor";
|
||
})
|
||
.add('schedule', function () {
|
||
pageActive('schedule');
|
||
Schedule_list.init();
|
||
page = "Schedule_list";
|
||
})
|
||
.add('stand/constructor', function () {
|
||
pageActive();
|
||
Stand_constructor.init();
|
||
page = "Stand_constructor";
|
||
})
|
||
.add('stand/editor/(.*)', function (id) {
|
||
pageActive();
|
||
Stand_editor.init(id);
|
||
page = "Stand_editor";
|
||
})
|
||
.add('stand/card/(.*)', function (id) {
|
||
pageActive();
|
||
Stand_card.init(id);
|
||
page = "Stand_card";
|
||
})
|
||
.add('stand', function () {
|
||
pageActive('stand');
|
||
Stand_list.init();
|
||
page = "Stand_list";
|
||
})
|
||
.add('options', function () {
|
||
pageActive('options');
|
||
Options.init();
|
||
page = "Options";
|
||
})
|
||
.add(function () {
|
||
page_404();;
|
||
pageActive();
|
||
})
|
||
|
||
// function pageActive(element) {
|
||
// const active = document.querySelector("nav-item[data-state='active']");
|
||
// if (active) active.setAttribute('data-state', '');
|
||
|
||
// if (element) {
|
||
// const target = document.getElementById(`menu-${element}`);
|
||
// if (target) target.setAttribute('data-state', 'active');
|
||
// }
|
||
// }
|
||
function pageActive(element) {
|
||
// 1. Знаходимо контейнер меню
|
||
const navContainer = document.querySelector('navigation-container');
|
||
|
||
if (!navContainer) {
|
||
console.warn('Компонент <navigation-container> не знайдено.');
|
||
return;
|
||
}
|
||
|
||
// 2. Видаляємо активний стан у всіх елементів.
|
||
// Шукаємо як у Light DOM (через querySelectorAll на документі),
|
||
// так і у Shadow DOM (через shadowRoot).
|
||
const activeInLight = document.querySelector("nav-item[data-state='active']");
|
||
if (activeInLight) {
|
||
activeInLight.setAttribute('data-state', '');
|
||
}
|
||
|
||
const activeInShadow = navContainer.shadowRoot.querySelector("nav-item[data-state='active']");
|
||
if (activeInShadow) {
|
||
activeInShadow.setAttribute('data-state', '');
|
||
}
|
||
|
||
// 3. Знаходимо цільовий елемент
|
||
if (element) {
|
||
const targetId = `menu-${element}`;
|
||
let target = null;
|
||
|
||
// Спробуємо знайти в основному DOM
|
||
target = document.getElementById(targetId);
|
||
|
||
// Якщо не знайдено, шукаємо у Shadow DOM контейнера
|
||
if (!target) {
|
||
// Використовуємо querySelector для пошуку по всьому shadowRoot
|
||
// Якщо елементи переміщені у itemsHiddenContainer, вони будуть тут
|
||
target = navContainer.shadowRoot.querySelector(`#${targetId}`);
|
||
}
|
||
|
||
// 4. Встановлюємо активний стан, якщо знайдено
|
||
if (target) {
|
||
target.setAttribute('data-state', 'active');
|
||
}
|
||
}
|
||
} |