feat: support for mark-read toggle on chats dropdown and recent chats list

This commit is contained in:
Julian Lam
2023-02-06 12:37:25 -05:00
parent e6f5f2c169
commit 1da13f254d
3 changed files with 46 additions and 5 deletions

View File

@@ -490,6 +490,12 @@ define('forum/chats', [
if (roomEl.length > 0) {
roomEl.addClass('unread');
const markEl = roomEl.find('.mark-read').get(0);
if (markEl) {
markEl.querySelector('.read').classList.add('hidden');
markEl.querySelector('.unread').classList.remove('hidden');
}
} else {
const recentEl = components.get('chat/recent');
app.parseAndTranslate('partials/chats/recent_room', {

View File

@@ -6,10 +6,25 @@ define('forum/chats/recent', ['alerts'], function (alerts) {
recent.init = function () {
require(['forum/chats'], function (Chats) {
$('[component="chat/recent"]').on('click', '[component="chat/recent/room"]', function () {
Chats.switchChat($(this).attr('data-roomid'));
return false;
});
$('[component="chat/recent"]')
.on('click', '[component="chat/recent/room"]', function (e) {
e.stopPropagation();
e.preventDefault();
const roomId = this.getAttribute('data-roomid');
Chats.switchChat(roomId);
})
.on('click', '.mark-read', function (e) {
e.stopPropagation();
const chatEl = this.closest('[data-roomid]');
const unread = chatEl.classList.contains('unread');
if (unread) {
const roomId = chatEl.getAttribute('data-roomid');
socket.emit('modules.chats.markRead', roomId);
chatEl.classList.remove('unread');
this.querySelector('.unread').classList.add('hidden');
this.querySelector('.read').classList.remove('hidden');
}
});
$('[component="chat/recent"]').on('scroll', function () {
const $this = $(this);

View File

@@ -104,10 +104,12 @@ define('chat', [
}
translator.toggleTimeagoShorthand();
app.parseAndTranslate('partials/chats/dropdown', { rooms: rooms }, function (html) {
const listEl = chatsListEl.get(0);
chatsListEl.find('*').not('.navigation-link').remove();
chatsListEl.prepend(html);
chatsListEl.off('click').on('click', '[data-roomid]', function (ev) {
if ($(ev.target).parents('.user-link').length) {
if (['.user-link', '.mark-read'].some(className => ev.target.closest(className))) {
return;
}
const roomId = $(this).attr('data-roomid');
@@ -118,6 +120,24 @@ 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 unread = chatEl.classList.contains('unread');
if (unread) {
const roomId = chatEl.getAttribute('data-roomid');
socket.emit('modules.chats.markRead', roomId);
chatEl.classList.remove('unread');
subselector.querySelector('.unread').classList.add('hidden');
subselector.querySelector('.read').classList.remove('hidden');
}
});
$('[component="chats/mark-all-read"]').off('click').on('click', function () {
socket.emit('modules.chats.markAllRead', function (err) {
if (err) {