Visually mark all messages previous to the clicked message as read

twitch-chat-mark-as-read.js

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)