fix: issue where repeated openings of the chats dropdown would continually add events for mark-read/unread

This commit is contained in:
Julian Lam
2023-02-06 17:19:10 -05:00
parent 8a0afd8683
commit cc1d216d1e
2 changed files with 35 additions and 32 deletions

View File

@@ -4,17 +4,16 @@ define('forum/header/chat', ['components', 'hooks'], function (components, hooks
const chat = {};
chat.prepareDOM = function () {
const chatsToggleEl = components.get('chat/dropdown');
const chatsListEl = components.get('chat/list');
chatsToggleEl.on('click', function () {
if (chatsToggleEl.parent().hasClass('open')) {
return;
}
requireAndCall('loadChatsDropdown', chatsListEl);
});
const chatsToggleEl = document.querySelector('[component="chat/dropdown"]');
if (chatsToggleEl) {
chatsToggleEl.addEventListener('show.bs.dropdown', () => {
requireAndCall('loadChatsDropdown', chatsListEl);
});
}
if (chatsToggleEl.parents('.dropdown').hasClass('open')) {
if (chatsToggleEl.classList.contains('show')) {
requireAndCall('loadChatsDropdown', chatsListEl);
}

View File

@@ -120,30 +120,9 @@ define('chat', [
}
});
listEl.addEventListener('click', function (e) {
const subselector = e.target.closest('.mark-read');
if (!subselector) {
return;
}
e.stopPropagation();
const chatEl = e.target.closest('[data-roomid]');
const state = !chatEl.classList.contains('unread');
const roomId = chatEl.getAttribute('data-roomid');
api[state ? 'put' : 'del'](`/chats/${roomId}/state`, {}).catch((err) => {
alerts.error(err);
// Revert on failure
chatEl.classList[state ? 'remove' : 'add']('unread');
chatEl.querySelector('.unread').classList[state ? 'add' : 'remove']('hidden');
chatEl.querySelector('.read').classList[!state ? 'add' : 'remove']('hidden');
});
// Immediate feedback
chatEl.classList[state ? 'add' : 'remove']('unread');
chatEl.querySelector('.unread').classList[!state ? 'add' : 'remove']('hidden');
chatEl.querySelector('.read').classList[state ? 'add' : 'remove']('hidden');
});
console.log('removinga dding');
listEl.removeEventListener('click', onMarkReadClicked);
listEl.addEventListener('click', onMarkReadClicked);
$('[component="chats/mark-all-read"]').off('click').on('click', function () {
socket.emit('modules.chats.markAllRead', function (err) {
@@ -157,6 +136,31 @@ define('chat', [
});
};
function onMarkReadClicked(e) {
const subselector = e.target.closest('.mark-read');
if (!subselector) {
return;
}
e.stopPropagation();
const chatEl = e.target.closest('[data-roomid]');
const state = !chatEl.classList.contains('unread');
const roomId = chatEl.getAttribute('data-roomid');
api[state ? 'put' : 'del'](`/chats/${roomId}/state`, {}).catch((err) => {
alerts.error(err);
// Revert on failure
chatEl.classList[state ? 'remove' : 'add']('unread');
chatEl.querySelector('.unread').classList[state ? 'add' : 'remove']('hidden');
chatEl.querySelector('.read').classList[!state ? 'add' : 'remove']('hidden');
});
// Immediate feedback
chatEl.classList[state ? 'add' : 'remove']('unread');
chatEl.querySelector('.unread').classList[!state ? 'add' : 'remove']('hidden');
chatEl.querySelector('.read').classList[state ? 'add' : 'remove']('hidden');
}
module.onChatMessageReceived = function (data) {
if (!newMessage) {
newMessage = data.self === 0;