refactor popovers

files/assets/js/bottom.js

@@ -134,7 +134,10 @@ function register_new_elements(e) {
 
 	const popover_triggers = document.getElementsByClassName('user-name');
 	for (const element of popover_triggers) {
-		element.onclick = (e) => {popclick(e)};
+		element.onclick = (e) => {
+			if (!(e.ctrlKey || e.metaKey || e.shiftKey || e.altKey))
+				e.preventDefault();
+		};
 	}
 
 	const expandable = document.querySelectorAll('.in-comment-image, img[alt^="![]("]');

files/assets/js/comments+submission_listing.js

@@ -8,71 +8,44 @@ function pinned_timestamp(id) {
 		}
 }
 
-/** @type {HTMLImageElement} */
 const popClickBadgeTemplateDOM = document.createElement("IMG");
 popClickBadgeTemplateDOM.classList.add("pop-badge");
 popClickBadgeTemplateDOM.loading = "lazy";
 popClickBadgeTemplateDOM.alt = "badge";
 
-/**
+document.addEventListener('shown.bs.popover', (e) => {
-* @param {MouseEvent} e
+	let popover = document.getElementsByClassName("popover")
-*/
+	popover = popover[popover.length-1]
-function popclick(e) {
-	// We let through those methods
-	if(e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
-		return;
-	e.preventDefault();
 
-	if(e.currentTarget.dataset.popInfo === undefined)
+	const author = JSON.parse(e.target.dataset.popInfo);
-		throw new SyntaxError("ill formed HTML! data-pop-info not present!!!");
 
-	const author = JSON.parse(e.currentTarget.dataset.popInfo);
+	if (popover.getElementsByClassName('pop-username')[0].innerHTML == author["username"])
-	if(!(author instanceof Object))
+		return
-		throw new SyntaxError("data-pop-info was not valid!");
 
-	// This is terrible lol. in header.js:bs_trigger() we should add
+	if (popover.getElementsByClassName('pop-badges')) {
-	// to the ANCHOR element an event handler for "show.bs.tooltip" to build this
+		const badgesDOM = popover.getElementsByClassName('pop-badges')[0];
-	// when the DOM is ready.
+		badgesDOM.innerHTML = "";
-	// PROBLEM: IT DOES NOT WORK :MARSEYCRAZYTROLL: idk why it should work according to
+		for (const badge of author["badges"]) {
-	// boostrap docs!
+			const badgeDOM = popClickBadgeTemplateDOM.cloneNode();
-	setTimeout(() => {
+			badgeDOM.src = badge + "?b=6";
-		let popover = document.getElementsByClassName("popover")
-		popover = popover[popover.length-1]
 
-		if (popover.getElementsByClassName('pop-badges')) {
+			badgesDOM.append(badgeDOM);
-			const badgesDOM = popover.getElementsByClassName('pop-badges')[0];
-			badgesDOM.innerHTML = "";
-			for (const badge of author["badges"]) {
-				const badgeDOM = popClickBadgeTemplateDOM.cloneNode();
-				badgeDOM.src = badge + "?b=6";
-
-				badgesDOM.append(badgeDOM);
-			}
 		}
-
-		popover.getElementsByClassName('pop-banner')[0].src = author["bannerurl"]
-		popover.getElementsByClassName('pop-picture')[0].src = author["profile_url"]
-		if (author["hat"]) popover.getElementsByClassName('pop-hat')[0].src = author['hat'] + "?h=7"
-		popover.getElementsByClassName('pop-username')[0].innerHTML = author["username"]
-		if (popover.getElementsByClassName('pop-bio').length > 0) {
-			popover.getElementsByClassName('pop-bio')[0].innerHTML = author["bio_html"]
-		}
-		popover.getElementsByClassName('pop-postcount')[0].innerHTML = author["post_count"]
-		popover.getElementsByClassName('pop-commentcount')[0].innerHTML = author["comment_count"]
-		popover.getElementsByClassName('pop-coins')[0].innerHTML = author["coins"]
-		popover.getElementsByClassName('pop-view_more')[0].href = author["url"]
-		popover.getElementsByClassName('pop-created-date')[0].innerHTML = author["created_date"]
-	}, 5);
-}
-
-document.addEventListener("click", function(){
-	active = document.activeElement.getAttributeNode("class");
-	if (active && active.nodeValue == "user-name text-decoration-none"){
-		pops = document.getElementsByClassName('popover')
-		if (pops.length > 1) pops[0].remove()
 	}
-	else document.querySelectorAll('.popover').forEach(e => e.remove());
+
-});
+	popover.getElementsByClassName('pop-banner')[0].src = author["bannerurl"]
+	popover.getElementsByClassName('pop-picture')[0].src = author["profile_url"]
+	if (author["hat"]) popover.getElementsByClassName('pop-hat')[0].src = author['hat'] + "?h=7"
+	popover.getElementsByClassName('pop-username')[0].innerHTML = author["username"]
+	if (popover.getElementsByClassName('pop-bio').length > 0) {
+		popover.getElementsByClassName('pop-bio')[0].innerHTML = author["bio_html"]
+	}
+	popover.getElementsByClassName('pop-postcount')[0].innerHTML = author["post_count"]
+	popover.getElementsByClassName('pop-commentcount')[0].innerHTML = author["comment_count"]
+	popover.getElementsByClassName('pop-coins')[0].innerHTML = author["coins"]
+	popover.getElementsByClassName('pop-view_more')[0].href = author["url"]
+	popover.getElementsByClassName('pop-created-date')[0].innerHTML = author["created_date"]
+})
 
 function post(url) {
 	const xhr = createXhrWithFormKey(url);

files/templates/comments.html

@@ -168,7 +168,7 @@
 					{% if c.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if c.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if c.author.verifiedcolor %}#{{c.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.verified}}"></i>
 					{% endif %}
 
-					<a class="user-name text-decoration-none" href="{{c.author.url}}" data-pop-info='{{c.author.json_popover(v) | tojson}}'' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" tabindex="0" style="color:#{{c.author.name_color}}; font-size:12px; font-weight:bold;">
+					<a class="user-name text-decoration-none" href="{{c.author.url}}" data-pop-info='{{c.author.json_popover(v) | tojson}}'' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover" tabindex="0" style="color:#{{c.author.name_color}}; font-size:12px; font-weight:bold;">
 						<div class="profile-pic-30-wrapper">
 							<img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-30 mr-2">
 							{% if c.author.hat_active(v)[0] -%}

files/templates/util/macros.html

@@ -88,7 +88,7 @@
 
 		{% if p.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if p.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.verified}}"></i>
 		{% endif %}
-		<a class="user-name text-decoration-none" href="{{p.author.url}}" data-pop-info='{{p.author.json_popover(v) | tojson}}' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" tabindex="0" style="color: #{{p.author.name_color}}; font-weight: bold;">
+		<a class="user-name text-decoration-none" href="{{p.author.url}}" data-pop-info='{{p.author.json_popover(v) | tojson}}' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover" tabindex="0" style="color: #{{p.author.name_color}}; font-weight: bold;">
 			<div class="profile-pic-30-wrapper" style="margin-top:9px">
 				<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
 				{% if p.author.hat_active(v)[0] -%}