+11
-47
@@ -1213,35 +1213,18 @@ if (!isset($_SESSION['user_id'])) {
|
||||
});
|
||||
|
||||
if (isAtBottom) {
|
||||
// Usuario está al final: recargar mensajes y mostrar un indicador 'Ver mensaje' para que el usuario confirme el scroll
|
||||
// Usuario está al final: agregar mensaje automáticamente con highlight
|
||||
console.log('✅ Usuario AL FINAL, recargando mensajes...');
|
||||
|
||||
|
||||
// Marcar que el próximo mensaje nuevo debe tener highlight
|
||||
this._nextMessageUnread = true;
|
||||
|
||||
// Recargar mensajes (esto hará el fetch y renderizará). Al terminar, mostrar indicador con acción personalizada
|
||||
|
||||
// Recargar mensajes (esto hará el fetch y renderizará)
|
||||
this.loadMessages(this.currentUserId, true, true).then(() => {
|
||||
try {
|
||||
this.showNewMessagesIndicator(1, {
|
||||
label: 'Ver mensaje',
|
||||
onClick: async () => {
|
||||
try {
|
||||
this.hideNewMessagesIndicator();
|
||||
// Asegurar que el contenedor baje al final y aplicar highlight temporal
|
||||
await this.scrollToBottom();
|
||||
const container = document.getElementById('chat-conversations');
|
||||
const msgs = container ? container.querySelectorAll('[data-message-id]') : null;
|
||||
const last = msgs && msgs.length ? msgs[msgs.length - 1] : null;
|
||||
if (last) {
|
||||
last.classList.add('unread');
|
||||
setTimeout(() => { try { last.classList.remove('unread'); } catch(e){} }, 3000);
|
||||
}
|
||||
} catch (e) { console.warn('Ver mensaje click failed', e); }
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('Failed to show Ver mensaje indicator', e);
|
||||
}
|
||||
// Después de cargar, quitar el highlight después de 3 segundos
|
||||
setTimeout(() => {
|
||||
this._removeUnreadHighlights();
|
||||
}, 3000);
|
||||
});
|
||||
} else {
|
||||
// Usuario está leyendo arriba: mostrar indicador de nuevos mensajes
|
||||
@@ -4188,13 +4171,11 @@ if (!isset($_SESSION['user_id'])) {
|
||||
}
|
||||
|
||||
// --- New messages indicator helpers ---
|
||||
showNewMessagesIndicator(count, opts = {}) {
|
||||
showNewMessagesIndicator(count) {
|
||||
try {
|
||||
if (this._applyingStaged) return; // avoid toggling while applying
|
||||
const container = document.getElementById('chat-area') || document.body;
|
||||
let el = document.getElementById('new-messages-indicator');
|
||||
const label = opts.label || null;
|
||||
const customHandler = typeof opts.onClick === 'function' ? opts.onClick : null;
|
||||
if (!el) {
|
||||
el = document.createElement('div');
|
||||
el.id = 'new-messages-indicator';
|
||||
@@ -4208,8 +4189,7 @@ if (!isset($_SESSION['user_id'])) {
|
||||
el.style.borderRadius = '20px';
|
||||
el.style.boxShadow = '0 6px 18px rgba(2,6,23,0.12)';
|
||||
el.style.cursor = 'pointer';
|
||||
// default handler
|
||||
el._defaultHandler = async () => {
|
||||
el.onclick = async () => {
|
||||
try {
|
||||
// Hide indicator immediately and suspend auto-refresh to avoid races
|
||||
this.hideNewMessagesIndicator();
|
||||
@@ -4228,30 +4208,14 @@ if (!isset($_SESSION['user_id'])) {
|
||||
try { this._suspendAutoRefresh = false; } catch(e) {}
|
||||
}
|
||||
};
|
||||
el.onclick = el._defaultHandler;
|
||||
|
||||
// subtle fade-in
|
||||
el.style.opacity = '0';
|
||||
el.style.transition = 'opacity 220ms ease, transform 220ms ease';
|
||||
container.appendChild(el);
|
||||
setTimeout(() => { try { el.style.opacity = '1'; el.style.transform = 'translateX(-50%) translateY(-6px)'; } catch(e) {} }, 20);
|
||||
}
|
||||
|
||||
// If a custom handler is provided, set it; otherwise ensure default
|
||||
if (customHandler) {
|
||||
el.onclick = async (ev) => {
|
||||
try { await customHandler(ev); } catch (e) { console.warn('Custom indicator handler failed', e); }
|
||||
};
|
||||
} else {
|
||||
el.onclick = el._defaultHandler;
|
||||
}
|
||||
|
||||
const c = (typeof count === 'number') ? count : (this._stagedMessages ? this._stagedMessages.length : 0);
|
||||
if (label) {
|
||||
el.textContent = label;
|
||||
} else {
|
||||
el.textContent = (c && c > 1) ? `Nuevos mensajes (${c})` : 'Nuevo mensaje';
|
||||
}
|
||||
el.textContent = (c && c > 1) ? `Nuevos mensajes (${c})` : 'Nuevo mensaje';
|
||||
el.style.display = 'inline-block';
|
||||
} catch (e) { console.warn('showNewMessagesIndicator failed', e); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user