Implement reply rich rendering. Add jump to and highlight/hovering functionality for them

web/static/index.css

@@ -111,6 +111,11 @@ body {
     margin-left: auto;
 }
 
+#newPostBody {
+    width: 270px;
+    height: 100px;
+}
+
 .new-post-container {
     width: max-content;
     margin: auto;
@@ -145,6 +150,23 @@ body {
     margin-right: 5px;
 }
 
+.post-op {
+    margin-bottom: 10px;
+}
+
+.post {
+    display: inline-block;
+    margin: 5x;
+    padding: 10px;
+    background-color: #D6DAF0;
+    border: 1px solid #282a2e;
+    margin-bottom: 10px;
+}
+
+.post-highlighted {
+    background: #D6BAD0;
+}
+
 .post-header {
     display: flex;
     margin-bottom: 10px;
@@ -174,23 +196,21 @@ body {
     line-height: 1.3;
 }
 
-.op-post {
-    margin-bottom: 10px;
-}
-
-.post {
-    display: inline-block;
-    margin: 5x;
-    padding: 10px;
-    background-color: #D6DAF0;
-    border: 1px solid #282a2e;
-    margin-bottom: 10px;
+.post-num:hover {
+    cursor: pointer;
+    color: #ff0000;
 }
 
 .greentext {
     color: #789922
 }
 
+.reply-link {
+    color: #D00;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
 /* GENERAL LAYOUT */
 
 .container {

web/static/index.js

@@ -1 +1,57 @@
 const $ = (id) => document.getElementById(id);
+
+function isOffScreen(el) {
+    const rect = el.getBoundingClientRect();
+    const vh = window.innerHeight || document.documentElement.clientHeight;
+    const vw = window.innerWidth || document.documentElement.clientWidth;
+
+    return (
+        rect.bottom < 0 ||
+        rect.top > vh ||
+        rect.right < 0 ||
+        rect.left > vw
+    );
+}
+
+function insertAfter(referenceNode, newNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+
+function onReplyLinkClick(e) {
+    const hoveringPost = document.getElementById("hoveringPost");
+    hoveringPost?.remove();
+}
+
+function highlightPost(postId, e, status = true) {
+    const posts = Array.from(document.querySelectorAll("article"));
+    const postToHighlight = posts.find(p => +p.id.split("-")[1] === +postId);
+    if (!postToHighlight) return;
+
+    const isOp = postToHighlight.id === posts[0]?.id;
+    if (isOffScreen(postToHighlight) || isOp) {
+        if (e.type === "mouseleave") {
+            const hoveringPost = document.querySelector("#hoveringPost")
+            hoveringPost.remove();
+        }
+        else {
+            const postCopy = postToHighlight.cloneNode(true);
+            postCopy.style.position = "absolute";
+            postCopy.id = "hoveringPost";
+
+            if (isOp) {
+                postCopy.classList.remove("post-op");
+                postCopy.classList.add("post");
+            }
+
+            insertAfter(e.target, postCopy);
+        }
+    }
+    else {
+        if (status) {
+            postToHighlight.classList.add("post-highlighted");
+        }
+        else {
+            postToHighlight.classList.remove("post-highlighted");
+        }
+    }
+}