Language sort feature now works and doesn't throw errors

This commit is contained in:
Connor Yoh 2025-04-14 14:06:57 +01:00
parent d34b8dac5b
commit 138b00b15a
3 changed files with 9 additions and 5 deletions

View File

@ -57,11 +57,15 @@ function initLanguageSettings() {
function sortLanguageDropdown() {
document.addEventListener('DOMContentLoaded', function () {
const dropdownMenu = document.querySelector('.dropdown-menu .dropdown-item.lang_dropdown-item').parentElement;
const dropdownMenu = document.getElementById('languageSelection');
if (dropdownMenu) {
const items = Array.from(dropdownMenu.children).filter((child) => child.matches('a'));
const items = Array.from(dropdownMenu.children).filter((child) => child.querySelector('a'));
items
.sort((a, b) => a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode))
.sort((wrapperA, wrapperB) => {
const a = wrapperA.querySelector('a');
const b = wrapperB.querySelector('a');
return a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode);
})
.forEach((node) => dropdownMenu.appendChild(node));
}
});

View File

@ -143,7 +143,7 @@
</a>
<div class="dropdown-menu dropdown-menu-tp" aria-labelledby="languageDropdown">
<div class="dropdown-menu-wrapper px-xl-2 px-2">
<div class="scrollable-y lang_dropdown-mw scalable-languages-container">
<div id="languageSelection" class="scrollable-y lang_dropdown-mw scalable-languages-container">
<th:block th:insert="~{fragments/languages :: langs}"></th:block>
</div>
</div>

View File

@ -143,7 +143,7 @@
</button>
<div class="dropdown-menu" aria-labelledby="languageDropdown">
<!-- Here's where the fragment will be included -->
<div class="scrollable-y">
<div id="languageSelection" class="scrollable-y" >
<th:block th:replace="~{fragments/languages :: langs}"></th:block>
</div>
</div>