-
-
-
-
+
@@ -306,34 +307,31 @@ function markAllNotifsRead() {
}
// ── Búsqueda de usuarios ─────────────────────────────────
-(function () {
- const input = document.getElementById('global-search');
- const results = document.getElementById('search-results');
- if (!input) return;
+function friendshipLabel(f) {
+ if (f.status === 'accepted') return { label: 'Amigos', cls: 'btn-outline-secondary', icon: 'fa-user-check' };
+ if (f.status === 'pending' && !f.is_receiver) return { label: 'Solicitud enviada', cls: 'btn-outline-secondary', icon: 'fa-user-clock' };
+ if (f.status === 'pending' && f.is_receiver) return { label: 'Aceptar', cls: 'btn-success', icon: 'fa-user-plus' };
+ return { label: 'Agregar', cls: 'btn-primary', icon: 'fa-user-plus' };
+}
+function initSearchWidget(inputEl, resultsEl) {
+ if (!inputEl || !resultsEl) return;
let timer;
- function friendshipLabel(f) {
- if (f.status === 'accepted') return { label: 'Amigos', cls: 'btn-outline-secondary', icon: 'fa-user-check' };
- if (f.status === 'pending' && !f.is_receiver) return { label: 'Solicitud enviada', cls: 'btn-outline-secondary', icon: 'fa-user-clock' };
- if (f.status === 'pending' && f.is_receiver) return { label: 'Aceptar', cls: 'btn-success', icon: 'fa-user-plus' };
- return { label: 'Agregar', cls: 'btn-primary', icon: 'fa-user-plus' };
- }
-
function renderResults(users) {
if (!users.length) {
- results.innerHTML = `
+ resultsEl.innerHTML = `
Sin resultados
`;
- results.classList.remove('d-none');
+ resultsEl.classList.remove('d-none');
return;
}
- results.innerHTML =
+ resultsEl.innerHTML =
`
Personas
` +
users.map((u, i) => {
- const btn = friendshipLabel(u.friendship);
+ const btn = friendshipLabel(u.friendship);
const isLast = i === users.length - 1;
return `
`;
}).join('');
- results.classList.remove('d-none');
+ resultsEl.classList.remove('d-none');
- // Bind toggle buttons
- results.querySelectorAll('.friend-toggle-btn').forEach(btn => {
+ resultsEl.querySelectorAll('.friend-toggle-btn').forEach(btn => {
btn.addEventListener('click', function (e) {
e.stopPropagation();
- const userId = this.dataset.userId;
- axios.post(`/friends/${userId}/toggle`)
- .then(res => {
- // Re-search to refresh states
- doSearch(input.value);
- });
+ axios.post(`/friends/${this.dataset.userId}/toggle`)
+ .then(() => doSearch(inputEl.value));
});
});
}
function doSearch(q) {
- if (q.length < 2) { results.classList.add('d-none'); return; }
+ if (q.length < 2) { resultsEl.classList.add('d-none'); return; }
axios.get('/search', { params: { q } }).then(res => renderResults(res.data));
}
- input.addEventListener('input', function () {
+ inputEl.addEventListener('input', function () {
clearTimeout(timer);
timer = setTimeout(() => doSearch(this.value.trim()), 300);
});
- // Evita que el dropdown se cierre al hacer mousedown dentro de él
- // (mousedown dispara antes que click, y blur del input cierra antes de registrar la acción)
- let interactingWithResults = false;
- results.addEventListener('mousedown', () => { interactingWithResults = true; });
- document.addEventListener('mouseup', () => { interactingWithResults = false; });
+ inputEl.addEventListener('focus', function () {
+ if (this.value.trim().length >= 2) resultsEl.classList.remove('d-none');
+ });
+ // Evita cierre al interactuar con el dropdown
+ let busy = false;
+ resultsEl.addEventListener('mousedown', () => { busy = true; });
+ document.addEventListener('mouseup', () => { busy = false; });
document.addEventListener('click', function (e) {
- if (interactingWithResults) return;
- if (!input.contains(e.target) && !results.contains(e.target)) {
- results.classList.add('d-none');
+ if (busy) return;
+ if (!inputEl.contains(e.target) && !resultsEl.contains(e.target)) {
+ resultsEl.classList.add('d-none');
+ }
+ });
+}
+
+// Desktop
+initSearchWidget(
+ document.getElementById('global-search'),
+ document.getElementById('search-results')
+);
+
+// Móvil: toggle del panel y widget de búsqueda
+(function () {
+ const toggle = document.getElementById('mobile-search-toggle');
+ const panel = document.getElementById('mobile-search-panel');
+ const mInput = document.getElementById('global-search-mobile');
+ const mResult = document.getElementById('search-results-mobile');
+ if (!toggle) return;
+
+ toggle.addEventListener('click', function (e) {
+ e.preventDefault();
+ const isHidden = panel.classList.contains('d-none');
+ panel.classList.toggle('d-none', !isHidden);
+ if (!isHidden) { mInput.focus(); }
+ });
+
+ // Cerrar panel al tocar fuera
+ document.addEventListener('click', function (e) {
+ if (!panel.contains(e.target) && !toggle.contains(e.target)) {
+ panel.classList.add('d-none');
}
});
- input.addEventListener('focus', function () {
- if (this.value.trim().length >= 2) results.classList.remove('d-none');
- });
+ initSearchWidget(mInput, mResult);
})();
