Add reply highlighting and post reply list.

If a user hovers over a reply link to a post, it will highlight that
reply (if it exists). Also, all replies to a post (that are visible) are
added as another element to that post.

Signed-off-by: Alek Ratzloff <alekratz@gmail.com>

board/static/board/post.js

@@ -346,12 +346,12 @@ $(window).on("load", () => {
         }
     });
 
-    $(".post_link").on("mouseover", (e) => {
+    $(document).on("mouseover", ".post_link", (e) => {
         let postId = $(e.target).attr("data-post-id");
         $("#p" + postId + ".post").addClass("post_highlight");
     });
 
-    $(".post_link").on("mouseout", (e) => {
+    $(document).on("mouseout", ".post_link", (e) => {
         let postId = $(e.target).attr("data-post-id");
         $("#p" + postId + ".post").removeClass("post_highlight");
     });
@@ -376,6 +376,49 @@ $(window).on("load", () => {
             fullEnt.find(".youtube_embed_container").append(embed);
         }
     });
+
+    // Add "replies to this post" links
+    $(".post_link").each((_index, postLink) => {
+        let replyToId = $(postLink).attr("data-post-id");
+        let replyTo = $("#p" + replyToId);
+        let replyFrom = $(postLink).parents(".post");
+        let replyFromId = replyFrom.attr("id").substring(1);
+        let replyFromUrl = replyFrom.find(".post_permalink").attr("href");
+
+        // Couldn't find the reply-to post
+        if (replyTo.length === 0) {
+            return;
+        }
+
+        let repliesContainer = replyTo.find(".post_replies");
+        // replies container doesn't exist, create it
+        if (repliesContainer.length === 0) {
+            repliesContainer = $("<div>").addClass("post_replies").text("Replies: ");
+            // put this after post_title element
+            replyTo.find(".post_title").after(repliesContainer);
+        } else {
+            // Make sure that reply doesn't already exist in this list
+            let containsReply = false;
+            repliesContainer.find(".post_reply").each((_index, reply) => {
+                if ($(reply).attr("href") === replyFromUrl) {
+                    // this reply is contained, return
+                    containsReply = true;
+                    return;
+                }
+            });
+            if (containsReply) {
+                return;
+            }
+        }
+        repliesContainer.append(
+            $("<a>")
+                .addClass("post_reply")
+                .addClass("post_link")
+                .attr("data-post-id", replyFromId)
+                .attr("href", replyFromUrl)
+                .text(">>" + replyFromId)
+        );
+    });
 });
 
 // Load event that actually does stuff

board/static/board/style.css

@@ -1,6 +1,6 @@
 :root {
     --body: #ededed;
-    --highlight: #aaa;
+    --highlight: #c7c7c7;
     --link: #555;
     --border-color: #555;
     --name: #060;
@@ -72,6 +72,10 @@ th {
 /*******************************************************************************
  Posts
 ********************************************************************************/
+.post {
+    display: table;
+}
+
 .post_body {
     overflow-wrap: break-word;
 }
@@ -86,6 +90,12 @@ th {
     padding-right: 5px;
 }
 
+
+.post_replies {
+    font-size: smaller;
+    margin-left: 4px;
+}
+
 .post_content:after {
     content: "";
     display: table;

board/templates/board/post_snippet.html

@@ -19,7 +19,7 @@
     {% endif %}
 
     {# Post ID, status icons, username, time, admin info #}
-    <a href="#p{{post.id}}">#.</a>
+    <a class="post_permalink" href="{{post.get_absolute_url}}">#.</a>
     <span class="post_id">{{post.id}}</span>
     {% if post.subject %}
         <span class="post_subject">{{post.subject}}</span>