Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Visually mark all messages previous to the clicked message as read
var CLASS_CHAT_CONTAINER = 'chat-list__list-container';
var CLASS_CHAT_MESSAGE = 'chat-line__message';
var CLASS_MESSAGE_READ = 'chat-message-marked-as-read';
var styles = document.createElement('style');
styles.innerText = `
.chat-list__list-container .chat-line__message.${CLASS_MESSAGE_READ} {
opacity: 0.5;
}
.chat-list__list-container .chat-line__message {
opacity: 1;
}
`
document.head.append(styles)
var chatContainerElem = document.body.querySelector('.'+CLASS_CHAT_CONTAINER);
var getAllChatMessages = function() {
return chatContainerElem.querySelectorAll('.'+CLASS_CHAT_MESSAGE);
}
var getMessageRow = function(elem) {
while (elem && !elem.classList.contains(CLASS_CHAT_MESSAGE)) {
elem = elem.parentNode;
}
return elem;
}
var processClick = function(event) {
event.stopPropagation();
event.preventDefault();
var clickedMsg = getMessageRow(event.target);
var messagesOld = [];
var messagesNew = [];
var allMessages = getAllChatMessages();
var foundClicked = false;
for (var msgElem of allMessages) {
if (foundClicked) {
if (msgElem.classList.contains(CLASS_MESSAGE_READ)) {
messagesNew.push(msgElem);
}
} else if (msgElem === clickedMsg) {
foundClicked = true;
messagesOld.push(msgElem)
} else {
if (!msgElem.classList.contains(CLASS_MESSAGE_READ)) {
messagesOld.push(msgElem);
}
}
}
window.requestAnimationFrame(function() {
for (var elem of messagesOld) {
elem.classList.add(CLASS_MESSAGE_READ)
}
});
window.requestAnimationFrame(function() {
for (var elem of messagesNew) {
elem.classList.remove(CLASS_MESSAGE_READ)
}
});
}
chatContainerElem.addEventListener('click', processClick, true)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.