bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dropdown menu not opening when navigating between pages

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-09-16 12:02:44 +07:00
parent dd8d0c0f4f
commit cfd3bbb985
15 changed files with 330 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
view/client/file/file.templ
View File

@ -131,7 +131,7 @@ templ MainContent(files []types.FileData, user types.User, allowance *types.Allo
</td>
<td class="px-6 py-4">
<div class="dropdown relative inline-block text-left">
<button class="dropdown-button bg-white border border-gray-300 rounded-md px-4 py-2 inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<button onClick={ toggleDropDown() } id="dropdown-button" class="dropdown-button bg-white border border-gray-300 rounded-md px-4 py-2 inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<svg fill="#000000" height="12px" width="12px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32.055 32.055" xml:space="preserve"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><g><path d="M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967 C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967 s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967 c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z"></path> </g> </g></svg>
</button>
<div class="dropdown-menu hidden absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
@ -247,26 +247,26 @@ templ MainContent(files []types.FileData, user types.User, allowance *types.Allo
await handleFile(file)
});
</script>
<script type="text/javascript">
document.addEventListener('click', function(event) {
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(dropdown => {
const button = dropdown.querySelector('.dropdown-button');
const menu = dropdown.querySelector('.dropdown-menu');
}
if (button.contains(event.target)) {
dropdowns.forEach(otherDropdown => {
if (otherDropdown !== dropdown) {
otherDropdown.querySelector('.dropdown-menu').classList.add('hidden');
}
});
menu.classList.toggle('hidden');
} else if (!menu.contains(event.target)) {
menu.classList.add('hidden');
}
});
script toggleDropDown() {
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(dropdown => {
const button = dropdown.querySelector('.dropdown-button');
const menu = dropdown.querySelector('.dropdown-menu');
if (button.contains(event.target)) {
dropdowns.forEach(otherDropdown => {
if (otherDropdown !== dropdown) {
otherDropdown.querySelector('.dropdown-menu').classList.add('hidden');
}
});
menu.classList.toggle('hidden');
} else if (!menu.contains(event.target)) {
menu.classList.add('hidden');
}
});
</script>
}
templ JustFile(file types.FileData) {
@ -331,7 +331,7 @@ templ JustFile(file types.FileData) {
</td>
<td class="px-6 py-4">
<div class="dropdown relative inline-block text-left">
<button class="dropdown-button bg-white border border-gray-300 rounded-md px-4 py-2 inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<button onClick={ toggleDropDown() } class="dropdown-button bg-white border border-gray-300 rounded-md px-4 py-2 inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<svg fill="#000000" height="12px" width="12px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32.055 32.055" xml:space="preserve"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><g><path d="M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967 C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967 s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967 c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z"></path> </g> </g></svg>
</button>
<div class="dropdown-menu hidden absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">