Add status reply preview in fluoride mode

2 files changed, 77 insertions, 0 deletions

diff --git a/static/fluoride.js b/static/fluoride.js
index 3020da0..25ab4a3 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -92,6 +92,51 @@ function handleRetweetForm(id, f) {
 	}
 }
 
+function handleReplyToLink(link) {
+	if (!link) {
+		return;
+	}
+	var id = link.firstElementChild.getAttribute('href');
+	if (!id || id[0] != '#') {
+		return;
+	}
+	link.onmouseenter = function(event) {
+		var id = event.target.firstElementChild.getAttribute('href');
+		var status = document.querySelector(id);
+		if (!status) {
+			return;
+		}
+		var copy = status.cloneNode(true);
+		copy.id = "reply-to-popup";
+		link.appendChild(copy);
+	}
+	link.onmouseleave = function(event) {
+		var popup = document.getElementById("reply-to-popup");
+		if (popup) {
+			event.target.removeChild(popup);    
+		}
+	}
+}
+
+function handleReplyLink(link) {
+	link.onmouseenter = function(event) {
+		var id = event.target.firstElementChild.getAttribute('href');
+		var status = document.querySelector(id);
+		if (!status) {
+			return;
+		}
+		var copy = status.cloneNode(true);
+		copy.id = "reply-popup";
+		link.appendChild(copy);
+	}
+	link.onmouseleave = function(event) {
+		var popup = document.getElementById("reply-popup");
+		if (popup) {
+			event.target.removeChild(popup);    
+		}
+	}
+}
+
 document.addEventListener("DOMContentLoaded", function() { 
 	var statuses = document.querySelectorAll(".status-container");
 	statuses.forEach(function(s) {
@@ -102,5 +147,11 @@ document.addEventListener("DOMContentLoaded", function() {
 
 		var retweetForm = s.querySelector(".status-retweet");
 		handleRetweetForm(id, retweetForm);
+
+		var replyToLink = s.querySelector(".status-reply-to");
+		handleReplyToLink(replyToLink);
+
+		var replyLinks = s.querySelectorAll(".status-reply");
+		replyLinks.forEach(handleReplyLink);
 	});
 });
diff --git a/static/main.css b/static/main.css
index 2b067ae..553c9a2 100644
--- a/static/main.css
+++ b/static/main.css
@@ -187,7 +187,11 @@
 }
 
 .status-reply-to {
+	display: inline-block;
 	vertical-align: center;
+}
+
+.status-reply-to-link {
 	font-size: 10pt
 }
 
@@ -202,6 +206,10 @@
 }
 
 .status-reply {
+	display: inline-block;
+}
+
+.status-reply-link {
 	font-size: 10pt;
 }
 
@@ -416,3 +424,21 @@
 .icon.post-emoji {
 	height: 20px;
 }
+
+#reply-popup {
+	position: absolute;
+	background: #ffffff;
+	border: 1px solid #aaaaaa;
+	padding: 4px 8px;
+	z-index: 3;
+	margin: 0 8px 0 8px;
+}
+
+#reply-to-popup {
+	position: absolute;
+	background: #ffffff;
+	border: 1px solid #aaaaaa;
+	padding: 4px 8px;
+	z-index: 3;
+	margin: 0 8px 0 8px;
+}