[feature/frontend] Hide "engagement" stats, edits, and other info under a little drop down to unclutter status info bar (#4021)

* dick about with stats a bit

* more dicking abuot

* lil tweaks

* more about-dicking

* weee

* comments

* fixie uppie

1 files changed, 22 insertions, 0 deletions

diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js
index 860d6d10a..da158ed77 100644
--- a/web/source/frontend/index.js
+++ b/web/source/frontend/index.js
@@ -338,3 +338,25 @@ Array.from(document.getElementsByTagName('time')).forEach(timeTag => {
 		timeTag.textContent = dateTimeFormat.format(date);
 	}
 });
+
+// When clicking anywhere that's not an open
+// stats-info-more-content details dropdown,
+// close that open dropdown.
+document.body.addEventListener("click", (e) => {
+	const openStats = document.querySelector("details.stats-more-info[open]");
+	if (!openStats) {
+		// No open stats
+		// details element.
+		return;
+	}
+
+	if (openStats.contains(e.target)) {
+		// Click is within stats
+		// element, leave it alone.
+		return;
+	}
+
+	// Click was outside of
+	// stats elements, close it. 
+	openStats.removeAttribute("open");
+});