Space Station 14 Вики

MediaWiki:Common.js: различия между версиями

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Нет описания правки
мНет описания правки
Строка 458: Строка 458:
// Переменные для категорий, меню и контентных элементов
// Переменные для категорий, меню и контентных элементов
var categories = document.querySelectorAll('.navigation__categories > div');
var categories = document.querySelectorAll('.navigation__categories > div');
var menus = document.querySelectorAll('.navigation__menu');
var menuContainer = document.querySelector('.navigation__menu');
var menuItems = document.querySelectorAll('.navigation__menu > div');
var contentDivs = document.querySelectorAll('.navigation__content > div');
var contentDivs = document.querySelectorAll('.navigation__content > div');
var menuItems = document.querySelectorAll('.navigation__menu > div');
var currentCategoryIndex = 0; // Индекс текущей активной категории
var currentCategoryIndex = 0; // Индекс текущей активной категории


Строка 475: Строка 475:
categories[i].setAttribute('id', categoryId);
categories[i].setAttribute('id', categoryId);


var menu = menus[i];
var menuItem = menuItems[i];
var menuItems = menu.querySelectorAll('div');
var menuItemText = menuItem.textContent || menuItem.innerText;
for (var j = 0; j < menuItems.length; j++) {
var menuItemId = generateIdFromText(menuItemText);
var menuItemText = menuItems[j].textContent || menuItems[j].innerText;
menuItem.setAttribute('id', menuItemId);
var menuItemId = generateIdFromText(menuItemText);
menuItems[j].setAttribute('id', menuItemId);
}
}
}
}
}
Строка 491: Строка 488:
for (var i = 0; i < contentDivs.length; i++) {
for (var i = 0; i < contentDivs.length; i++) {
contentDivs[i].classList.remove('active');
contentDivs[i].classList.remove('active');
}
}
// Удаление класса active у всех меню
function clearActiveMenu() {
for (var i = 0; i < menus.length; i++) {
menus[i].classList.remove('active');
}
}
}
}
Строка 510: Строка 500:
// Переключение категорий
// Переключение категорий
function switchCategory(index) {
function switchCategory(index) {
clearActiveMenu();
clearActiveContent();
clearActiveContent();
clearActiveMenuItems();


// Удаление класса active у всех категорий
// Удаление класса active у всех категорий
Строка 522: Строка 512:
if (selectedCategory) {
if (selectedCategory) {
selectedCategory.classList.add('active'); // Добавление класса active
selectedCategory.classList.add('active'); // Добавление класса active
var categoryClass = selectedCategory.classList[0]; // Получение класса категории
var selectedMenuItem = menuItems[index];
var selectedMenu = document.querySelector('.' + categoryClass + '-menu');
if (selectedMenuItem) {
if (selectedMenu) {
selectedMenuItem.classList.add('active'); // Активирование соответствующего пункта меню
selectedMenu.classList.add('active'); // Активирование меню соответствующей категории
var contentClass = selectedMenuItem.className + '-content';
var firstParagraph = selectedMenu.querySelector('div');
var content = document.querySelector('.' + contentClass);
if (firstParagraph) {
if (content) {
switchContent(firstParagraph); // Открытие первого пункта меню
content.classList.add('active'); // Показ контента для выбранного пункта меню
}
}
}
}
Строка 535: Строка 525:
currentCategoryIndex = index;
currentCategoryIndex = index;
updateArrowStates(); // Обновление состояния стрелок
updateArrowStates(); // Обновление состояния стрелок
}
// Переключение контента в меню
function switchContent(menuItem) {
clearActiveMenuItems();
clearActiveContent();
var contentClass = menuItem.className + '-content';
var content = document.querySelector('.' + contentClass);
if (content) {
content.classList.add('active');
menuItem.classList.add('active');
}
}
}


Строка 596: Строка 574:
var targetMenuItem = document.getElementById(hash);
var targetMenuItem = document.getElementById(hash);
if (targetMenuItem) {
if (targetMenuItem) {
// Если это пункт меню, нужно сначала открыть его категорию
var index = Array.prototype.indexOf.call(menuItems, targetMenuItem);
var menu = targetMenuItem.closest('.navigation__menu > div');
if (index !== -1) {
var categoryIndex = Array.prototype.indexOf.call(menus, menu);
switchCategory(index); // Переключение на категорию и контент по якорю
if (categoryIndex !== -1) {
targetMenuItem.scrollIntoView(); // Прокрутка к пункту меню
switchCategory(categoryIndex);
switchContent(targetMenuItem); // Открытие пункта меню
targetMenuItem.scrollIntoView(); // Прокрутка к пункту
}
} else {
// Поиск категории по ID
var targetCategory = document.getElementById(hash);
if (targetCategory) {
var categoryIndex = Array.prototype.indexOf.call(categories, targetCategory);
if (categoryIndex !== -1) {
switchCategory(categoryIndex); // Открытие категории
targetCategory.scrollIntoView(); // Прокрутка к категории
}
}
}
}
}
}
}


// Инициализация: открытие первой категории и первого пункта
// Инициализация: открытие первой категории и первого пункта меню
if (categories.length > 0) {
if (categories.length > 0) {
switchCategory(currentCategoryIndex);
switchCategory(currentCategoryIndex);
Строка 632: Строка 597:
for (var i = 0; i < categories.length; i++) {
for (var i = 0; i < categories.length; i++) {
categories[i].addEventListener('click', function(event) {
categories[i].addEventListener('click', function(event) {
event.preventDefault(); // Предотвращение любого действия при клике
event.preventDefault(); // Предотвращение клика по категориям
});
});
}
}
Строка 639: Строка 604:
for (var i = 0; i < menuItems.length; i++) {
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function() {
menuItems[i].addEventListener('click', function() {
switchContent(this); // Переключение контента при клике на пункт меню
switchCategory(Array.prototype.indexOf.call(menuItems, this));
});
});
}
}


// Переключение активности всего меню
document.querySelector('.navigation__menu-toggle').addEventListener('click', function() {
document.querySelector('.navigation__menu-toggle').addEventListener('click', function() {
var menu = document.querySelector('.navigation__menu');
menuContainer.classList.toggle('active'); // Показ или скрытие всего меню
menu.classList.toggle('active'); // Переключение класса для показа/скрытия меню
this.classList.toggle('active'); // Переключение состояния кнопки меню
this.classList.toggle('active'); // Переключение для перемещения кнопки
});
});
}
}
Источник — https://station14.ru/wiki/MediaWiki:Common.js