starred/newznab-tmux
1
0
Fork 0
mirror of https://github.com/NNTmux/newznab-tmux.git synced 2026-08-29 01:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix sort dropdowns

Browse Source
This commit is contained in:
DariusIII
2026-02-21 23:32:01 +01:00
parent 1964313bb1
commit 839121b17c
2 changed files with 16 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/alpine/components/search-autocomplete.js
+3 -29
View File
@@ -84,11 +84,12 @@ Alpine.data('sortDropdown', () => ({
open: false,
toggle() { this.open = !this.open; },
close() { this.open = false; }
close() { this.open = false; },
chevronClass() { return this.open ? 'rotate-180' : ''; }
}));
/**
* Document-level delegation for search autocomplete and sort dropdowns
* Document-level delegation for search autocomplete
* without x-data attributes.
*/
(function() {
@@ -161,31 +162,4 @@ Alpine.data('sortDropdown', () => ({
var formId = el.getAttribute('data-autocomplete-form');
if (el.id && ddId) initAutocomplete(el.id, ddId, formId, 'autocomplete-suggestion', 10);
});
// Sort dropdowns delegation
document.querySelectorAll('.sort-dropdown').forEach(function(dd) {
if (dd.closest('[x-data]')) return;
var toggle = dd.querySelector('.sort-dropdown-toggle');
var menu = dd.querySelector('.sort-dropdown-menu');
var chevron = dd.querySelector('.sort-dropdown-chevron');
if (!toggle || !menu) return;
if (toggle.hasAttribute('data-sort-initialized')) return;
toggle.setAttribute('data-sort-initialized', 'true');
toggle.addEventListener('click', function(ev) {
ev.preventDefault(); ev.stopPropagation();
var isOpen = !menu.classList.contains('hidden');
document.querySelectorAll('.sort-dropdown-menu').forEach(function(m) { m.classList.add('hidden'); });
document.querySelectorAll('.sort-dropdown-chevron').forEach(function(c) { c.classList.remove('rotate-180'); });
if (!isOpen) { menu.classList.remove('hidden'); if (chevron) chevron.classList.add('rotate-180'); }
});
});
if (!window._sortDropdownOutsideListenerAdded) {
window._sortDropdownOutsideListenerAdded = true;
document.addEventListener('click', function(ev) {
if (!ev.target.closest('.sort-dropdown')) {
document.querySelectorAll('.sort-dropdown-menu').forEach(function(m) { m.classList.add('hidden'); });
document.querySelectorAll('.sort-dropdown-chevron').forEach(function(c) { c.classList.remove('rotate-180'); });
}
});
}
})();
resources/views/components/sort-dropdown.blade.php
+13 -4
View File
@@ -1,14 +1,23 @@
<div class="relative inline-block sort-dropdown">
<div class="relative inline-block" x-data="sortDropdown" @click.outside="close()">
<button
type="button"
class="sort-dropdown-toggle inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition shadow-sm"
x-on:click="toggle"
class="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition shadow-sm"
>
<i class="fas {{ $currentIcon }} text-gray-500 dark:text-gray-300"></i>
<span>Sort: {{ $currentLabel }}</span>
<i class="fas fa-chevron-down text-xs text-gray-400 dark:text-gray-300 transition-transform sort-dropdown-chevron"></i>
<i class="fas fa-chevron-down text-xs text-gray-400 dark:text-gray-300 transition-transform" x-bind:class="chevronClass()"></i>
</button>
<div class="sort-dropdown-menu hidden absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white dark:bg-gray-700 shadow-lg border border-gray-200 dark:border-gray-600 focus:outline-none">
<div x-show="open"
x-cloak
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white dark:bg-gray-700 shadow-lg border border-gray-200 dark:border-gray-600 focus:outline-none">
<div class="py-1 max-h-80 overflow-y-auto">
@foreach($sortOptions as $sortKey => $sortData)
<a