[hideprofile]
[html]
<div class="tgd-roles fullwidth-template">
<header class="tgd-roles__header">
<div class="tgd-roles__issue">
THE GLORY DAYS · ROLE DATABASE
</div>
<div class="tgd-roles__heading">
<div class="tgd-roles__title">список ролей</div>
<div class="tgd-roles__mark">CHARACTERS</div>
</div>
<div class="tgd-roles__subtitle">
Зарегистрированные персонажи проекта и основная информация о них.
</div>
</header>
<!-- ФИЛЬТРЫ -->
<div class="tgd-roles__filters">
<div class="tgd-roles__filter-group"
data-filter-group="type">
<span class="tgd-roles__filter-title">
<i class="fa-solid fa-dna"></i>
тип
</span>
<button type="button"
class="tgd-roles__filter is-active"
data-value="all">
все
</button>
<button type="button"
class="tgd-roles__filter"
data-value="human">
human
</button>
<button type="button"
class="tgd-roles__filter"
data-value="extra-human">
extra-human
</button>
</div>
<div class="tgd-roles__filter-group"
data-filter-group="gender">
<span class="tgd-roles__filter-title">
<i class="fa-solid fa-venus-mars"></i>
пол
</span>
<button type="button"
class="tgd-roles__filter is-active"
data-value="all">
все
</button>
<button type="button"
class="tgd-roles__filter"
data-value="female">
женщины
</button>
<button type="button"
class="tgd-roles__filter"
data-value="male">
мужчины
</button>
</div>
</div>
<div class="tgd-roles__result">
Показано ролей:
<b class="tgd-roles__count">0</b>
</div>
<!-- СПИСОК КАРТОЧЕК -->
<div class="tgd-roles__grid">
<div class="tgd-roles__empty" hidden>
По выбранным критериям персонажей пока нет.
</div>
</div>
<script>
(function () {
function initTgdRoles() {
var pages = document.querySelectorAll('.tgd-roles');
pages.forEach(function (page) {
/*
* Не подключаем обработчики повторно,
* если список уже был инициализирован.
*/
if (page.getAttribute('data-filter-ready') === 'true') {
return;
}
page.setAttribute('data-filter-ready', 'true');
var buttons = page.querySelectorAll(
'.tgd-roles__filter'
);
var cards = page.querySelectorAll(
'.tgd-role'
);
var counter = page.querySelector(
'.tgd-roles__count'
);
var emptyMessage = page.querySelector(
'.tgd-roles__empty'
);
var selectedType = 'all';
var selectedGender = 'all';
function applyFilters() {
var visibleCount = 0;
cards.forEach(function (card) {
var hideCard = false;
var cardType = card.getAttribute(
'data-type'
);
var cardGender = card.getAttribute(
'data-gender'
);
if (selectedType !== 'all') {
if (cardType !== selectedType) {
hideCard = true;
}
}
if (selectedGender !== 'all') {
if (cardGender !== selectedGender) {
hideCard = true;
}
}
if (hideCard) {
card.classList.add('is-hidden');
} else {
card.classList.remove('is-hidden');
visibleCount++;
}
});
if (counter) {
counter.textContent = visibleCount;
}
if (emptyMessage) {
if (visibleCount === 0) {
emptyMessage.hidden = false;
} else {
emptyMessage.hidden = true;
}
}
}
buttons.forEach(function (button) {
button.addEventListener(
'click',
function () {
var group = this.parentNode;
var groupName = group.getAttribute(
'data-filter-group'
);
var filterValue = this.getAttribute(
'data-value'
);
if (groupName === 'type') {
selectedType = filterValue;
}
if (groupName === 'gender') {
selectedGender = filterValue;
}
var groupButtons =
group.querySelectorAll(
'.tgd-roles__filter'
);
groupButtons.forEach(function (item) {
item.classList.remove('is-active');
});
this.classList.add('is-active');
applyFilters();
}
);
});
applyFilters();
});
}
/*
* Если страница ещё загружается — ждём.
* Если скрипт появился позднее — запускаем сразу.
*/
if (document.readyState === 'loading') {
document.addEventListener(
'DOMContentLoaded',
initTgdRoles
);
} else {
initTgdRoles();
}
})();
</script>
[/html]
