Change link hover behaviour

Highlight div if the target status is inside the viewport
and show popup otherwise.

2 files changed, 53 insertions, 20 deletions

diff --git a/static/fluoride.js b/static/fluoride.js
index 3c0d7f2..6be61c0 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -112,47 +112,71 @@ function handleRetweetForm(id, f) {
 	}
 }
 
-function handleReplyToLink(link) {
-	if (!link) {
+function isInView(el) {
+	var ract = el.getBoundingClientRect();
+	if (ract.top > 0 && ract.bottom < window.innerHeight) {
+		return true;
+	}
+	return false;
+}
+
+function handleReplyToLink(div) {
+	if (!div) {
 		return;
 	}
-	var id = link.firstElementChild.getAttribute('href');
+	var id = div.firstElementChild.getAttribute('href');
 	if (!id || id[0] != '#') {
 		return;
 	}
-	link.onmouseenter = function(event) {
-		var id = event.target.firstElementChild.getAttribute('href');
+	div.firstElementChild.onmouseenter = function(event) {
+		var id = event.target.getAttribute('href');
 		var status = document.querySelector(id);
 		if (!status) {
 			return;
 		}
-		var copy = status.cloneNode(true);
-		copy.id = "reply-to-popup";
-		link.appendChild(copy);
+		if (isInView(status)) {
+			status.classList.add("highlight");
+		} else {
+			var copy = status.cloneNode(true);
+			copy.id = "reply-to-popup";
+			event.target.parentElement.appendChild(copy);
+		}
 	}
-	link.onmouseleave = function(event) {
+	div.firstElementChild.onmouseleave = function(event) {
 		var popup = document.getElementById("reply-to-popup");
 		if (popup) {
-			event.target.removeChild(popup);    
+			event.target.parentElement.removeChild(popup);    
+		} else {
+			var id = event.target.getAttribute('href');
+			document.querySelector(id)
+				.classList.remove("highlight");
 		}
 	}
 }
 
-function handleReplyLink(link) {
-	link.onmouseenter = function(event) {
-		var id = event.target.firstElementChild.getAttribute('href');
+function handleReplyLink(div) {
+	div.firstElementChild.onmouseenter = function(event) {
+		var id = event.target.getAttribute('href');
 		var status = document.querySelector(id);
 		if (!status) {
 			return;
 		}
-		var copy = status.cloneNode(true);
-		copy.id = "reply-popup";
-		link.appendChild(copy);
+		if (isInView(status)) {
+			status.classList.add("highlight");
+		} else {
+			var copy = status.cloneNode(true);
+			copy.id = "reply-popup";
+			event.target.parentElement.appendChild(copy);
+		}
 	}
-	link.onmouseleave = function(event) {
+	div.firstElementChild.onmouseleave = function(event) {
 		var popup = document.getElementById("reply-popup");
 		if (popup) {
-			event.target.removeChild(popup);    
+			event.target.parentElement.removeChild(popup);    
+		} else {
+			var id = event.target.getAttribute('href');
+			document.querySelector(id)
+				.classList.remove("highlight");
 		}
 	}
 }
diff --git a/static/main.css b/static/main.css
index acbca05..602f2ef 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,6 +1,6 @@
 .status-container-container {
-	margin: 16px 0 16px -4px;
-	padding: 0 4px;
+	margin: 12px 0 12px -4px;
+	padding: 4px;
 	border-left: 4px solid transparent;
 }
 
@@ -8,6 +8,10 @@
 	border-color: #777777;
 }
 
+.status-container-container.highlight {
+	background-color: #cccccc;
+}
+
 .status-container {
 	display: flex;
 }
@@ -468,3 +472,8 @@
 	background-color: #222222;
 	border-color: #444444;
 }
+
+.dark .status-container-container.highlight {
+	background-color: #333333;
+}
+