claude
84d1efc271
Build and Deploy Verso / deploy (push) Successful in 14m10s
The manual JS click-handler approach (tried with stopPropagation,
containment check, and mousedown variants) never worked reliably on
login/password/settings pages. The browser's native <details>/<summary>
toggle behaviour requires no JavaScript and is immune to Bootstrap JS or
React event delegation interference.
The inline script now only builds the return_to hrefs and handles
outside-click-to-close (setting details.open=false). The CSS gains a
.language-picker-details rule that sets position:relative so the
absolutely-positioned dropdown-menu is positioned correctly, and
details[open] .dropdown-menu { display: block } to show the menu.
The #language-picker-toggle id remains on the <summary> so the existing
CSS (cursor, text-decoration, material-symbols alignment) continues to
apply. The React LanguagePicker is unaffected.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
43 lines
1.4 KiB
Plaintext
43 lines
1.4 KiB
Plaintext
li.language-picker
|
|
details.language-picker-details
|
|
summary#language-picker-toggle.btn-inline-link(
|
|
aria-label=translate('select_a_language')
|
|
translate='no'
|
|
)
|
|
span.material-symbols translate
|
|
|
|
|
span.language-picker-text= settings.translatedLanguages[currentLngCode] || currentLngCode
|
|
ul.dropdown-menu.dropdown-menu-sm-width(
|
|
role='menu'
|
|
aria-labelledby='language-picker-toggle'
|
|
translate='no'
|
|
)
|
|
each lngCode in availableLanguages
|
|
if settings.translatedLanguages[lngCode]
|
|
li(role='none')
|
|
a.dropdown-item(
|
|
role='menuitem'
|
|
data-lng=lngCode
|
|
class=lngCode === currentLngCode ? 'active' : ''
|
|
)= settings.translatedLanguages[lngCode]
|
|
script.
|
|
(function () {
|
|
var details = document.querySelector('.language-picker-details')
|
|
var menu = details && details.querySelector('.dropdown-menu')
|
|
if (!details || !menu) return
|
|
menu.querySelectorAll('a[data-lng]').forEach(function (a) {
|
|
var lng = a.getAttribute('data-lng')
|
|
a.href =
|
|
'/set-language?lng=' +
|
|
encodeURIComponent(lng) +
|
|
'&return_to=' +
|
|
encodeURIComponent(window.location.pathname)
|
|
})
|
|
document.addEventListener('click', function (e) {
|
|
if (!details.contains(e.target)) details.open = false
|
|
})
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') details.open = false
|
|
})
|
|
})()
|