From 9ae653bb8a72bcb14d8f56cd1423cd06f0fce811 Mon Sep 17 00:00:00 2001
From: fatchan <tom@69420.me>
Date: Wed, 29 Jan 2020 10:42:03 +1100
Subject: [PATCH] hover user ID for post count in thread and dbl click to
 highlight all posts

---
 gulp/res/css/style.css    |  5 +++++
 gulp/res/js/threadstat.js | 47 +++++++++++++++++++++++++++++++++------
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css
index 6402ef1e..560b9539 100644
--- a/gulp/res/css/style.css
+++ b/gulp/res/css/style.css
@@ -536,6 +536,11 @@ details.actions div {
 	padding: 0px 2px;
 	border: 1px solid rgba(0, 0, 0, 0.4);
 	border-radius: 1px;
+	cursor: pointer;
+}
+
+.user-id:hover::after {
+	content: attr(data-count);
 }
 
 .post-check {
diff --git a/gulp/res/js/threadstat.js b/gulp/res/js/threadstat.js
index 8ad7256c..19f8c1e8 100644
--- a/gulp/res/js/threadstat.js
+++ b/gulp/res/js/threadstat.js
@@ -1,12 +1,42 @@
 window.addEventListener('DOMContentLoaded', (event) => {
 
 	const statsElem = document.getElementById('threadstats');
-	if (statsElem) {
-		const uidElems = document.getElementsByClassName('user-id');
-		const uidSet = new Set();
-		for(let i = 0; i < uidElems.length; i++) {
-			uidSet.add(uidElems[i].innerText);
+	const idElems = [];
+	const idMap = new Map();
+
+	const incrementMap = (id) => {
+		idMap.set(id, idMap.get(id)+1 || 1);
+	}
+
+	const updateCounts = () => {
+		for(let i = 0; i < idElems.length; i++) {
+			idElems[i].setAttribute('data-count', ` (${idMap.get(idElems[i].innerText)})`);
+		}
+	}
+
+	const toggleHighlightPosts = (e) => {
+		const id = e.target.innerText;
+		const idPosts = document.querySelectorAll(`.post-container[data-user-id="${id}"]`);
+		for(let i = 0; i < idPosts.length; i++) {
+			idPosts[i].classList.toggle('highlighted');
 		}
+	}
+
+	//fetch starting ids
+	const startElems = document.getElementsByClassName('user-id');
+	for(let i = 0; i < startElems.length; i++) {
+		idElems.push(startElems[i]);
+		startElems[i].addEventListener('dblclick', toggleHighlightPosts);
+	}
+	//set counts
+	for(let i = 0; i < idElems.length; i++) {
+		incrementMap(idElems[i].innerText);
+	}
+
+	if (isThread) {
+		//set the attr for css hover count
+		updateCounts();
+
 		window.addEventListener('addPost', function(e) {
 			if (e.detail.hover) {
 				return; //dont need to handle hovered posts for this
@@ -19,7 +49,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
 			statsElem.children[0].innerText = `${postTotal} repl${postTotal === 1 ? 'y' : 'ies'}`;
 			statsElem.children[1].innerText = `${filesTotal} file${filesTotal === 1 ? '' : 's'}`;
 			if (e.detail.json.userId) {
-				uidSet.add(e.detail.json.userId);
+				const userId = e.detail.post.querySelector('.user-id');
+				idElems.push(userId);
+				incrementMap(e.detail.json.userId);
+				updateCounts();
 				if (!statsElem.children[2]) {
 					//UIDs enabled after thread generated
 					const spacer = document.createTextNode(' |  ');
@@ -27,7 +60,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
 					statsElem.appendChild(spacer);
 					statsElem.appendChild(uidSpan);
 				}
-				statsElem.children[2].innerText = `${uidSet.size} UID${uidSet.size === 1 ? '' : 's'}`;
+				statsElem.children[2].innerText = `${idMap.size} UID${idMap.size === 1 ? '' : 's'}`;
 			}
 		});
 	}