From a4d920d33ecca1beb92fbe46c5b8cdc8d05634fb Mon Sep 17 00:00:00 2001
From: Alek Ratzloff <alekratz@gmail.com>
Date: Fri, 29 Jul 2022 22:21:02 -0700
Subject: [PATCH] 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              | 47 +++++++++++++++++++++++--
 board/static/board/style.css            | 12 ++++++-
 board/templates/board/post_snippet.html |  2 +-
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/board/static/board/post.js b/board/static/board/post.js
index 959a93a..a6d51a8 100644
--- a/board/static/board/post.js
+++ b/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
diff --git a/board/static/board/style.css b/board/static/board/style.css
index 06b2b1e..76c98be 100644
--- a/board/static/board/style.css
+++ b/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;
diff --git a/board/templates/board/post_snippet.html b/board/templates/board/post_snippet.html
index b4e11fe..01bdaa8 100644
--- a/board/templates/board/post_snippet.html
+++ b/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>