Add post hiding

This allows users to hide posts that they may find unsavory. On threads
themselves in the board view, this adds a minus/plus button that will
toggle back and forth if hidden. This also adds a post menu item that
will toggle a post being hidden.

This also changes the post snippet layout a little bit. This caused
minor issues with the other menu items, but it should be fixed in this
set of changes too.

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

board/static/board/post.js

@@ -65,7 +65,8 @@ function openMenu(e) {
         .append($("<lh><strong>Actions</strong></lh>").addClass("post_menu_item"))
         .addClass("post_menu_items");
     window.menuItemFactories.forEach(factory => {
-        item = factory(sender.parentElement);
+        let postElement = $(sender).closest(".post");
+        item = factory(postElement[0]);
         menuList.append(
             $("<li></li>")
                 .addClass("post_menu_item")
@@ -204,6 +205,52 @@ function openReportWindow(reportUrl) {
     reportWindow.show();
 }
 
+////////////////////////////////////////////////////////////////////////////////
+// Post hiding
+////////////////////////////////////////////////////////////////////////////////
+
+function getHiddenPosts() {
+    let hiddenPosts = JSON.parse(localStorage.getItem("hidden_posts"));
+    if (hiddenPosts === null) {
+        return [];
+    } else {
+        return hiddenPosts;
+    }
+}
+
+function addHiddenPost(postId) {
+    let hiddenPosts = getHiddenPosts();
+    if (!hiddenPosts.includes(postId)) {
+        hiddenPosts.push(postId);
+    }
+    localStorage.setItem("hidden_posts", JSON.stringify(hiddenPosts));
+}
+
+function removeHiddenPost(postId) {
+    let hiddenPosts = getHiddenPosts().filter((item) => item !== postId);
+    localStorage.setItem("hidden_posts", JSON.stringify(hiddenPosts));
+}
+
+function hidePost(postId) {
+    $(postId + " > .reply").addClass("post_hidden");
+    $(postId + " > .post_content").addClass("post_hidden");
+    $(postId + " >>> .thread_hide_button")
+        .addClass("fa-plus-square")
+        .addClass("thread_show_button")
+        .removeClass("fa-minus-square")
+        .removeClass("thread_hide_button");
+}
+
+function unhidePost(postId) {
+    $(postId + " > .reply").removeClass("post_hidden");
+    $(postId + " > .post_content").removeClass("post_hidden");
+    $(postId + " >>> .thread_show_button")
+        .removeClass("fa-plus-square")
+        .removeClass("thread_show_button")
+        .addClass("fa-minus-square")
+        .addClass("thread_hide_button");
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // Events
 ////////////////////////////////////////////////////////////////////////////////
@@ -215,7 +262,8 @@ $(window.top).on("load", () => {
         window.top.jsFrame = new JSFrame();
     }
 });
-$(window).on("load", (e) => {
+// This on("load") sets up more events
+$(window).on("load", () => {
     $(".post_image").on("mouseover", (e) => {
         // Load the original image and display it
         let thumbnail = e.target;
@@ -267,6 +315,29 @@ $(window).on("load", (e) => {
     });
 });
 
+// Load event that actually does stuff
+$(window).on("load", () => {
+    getHiddenPosts().forEach(item => hidePost(item));
+});
+
+// $(document).on("click", ...) is used for dynamic event dispatch.
+// Since these elements are going to have their classes changed, doing a typical
+// $(".class").on(...) method won't fire on elements that don't have the
+// expected class name when the hook is created.
+// Don't change this.
+$(document).on("click", ".thread_hide_button", (e) => {
+    e.preventDefault();
+    let id = "#" + $(e.target).closest(".post").attr("id");
+    hidePost(id);
+    addHiddenPost(id);
+});
+$(document).on("click", ".thread_show_button", (e) => {
+    e.preventDefault();
+    let id = "#" + $(e.target).closest(".post").attr("id");
+    unhidePost(id);
+    removeHiddenPost(id);
+});
+
 window.menuItemFactories = [];
 window.menuItemFactories.push(
     (postElement) =>
@@ -277,4 +348,22 @@ window.menuItemFactories.push(
                 e.preventDefault();
                 openReportWindow($(postElement).attr("data-report-url"));
             })
+);
+window.menuItemFactories.push(
+    (postElement) =>
+        $("<a>")
+            .text("Toggle hide")
+            .attr("href", "#")
+            .on("click", (e) => {
+                e.preventDefault();
+                let id = "#" + $(postElement).attr("id");
+                let hiddenPosts = getHiddenPosts();
+                if (hiddenPosts.includes(id)) {
+                    unhidePost(id);
+                    removeHiddenPost(id);
+                } else {
+                    hidePost(id);
+                    addHiddenPost(id);
+                }
+            })
 );

board/static/board/style.css

@@ -112,7 +112,7 @@ th {
     float: right;
 }
 
-.post {
+.thread {
     background-color: var(--post-background);
     padding: 10px;
 }
@@ -140,6 +140,18 @@ th {
     text-decoration: line-through;
 }
 
+.thread_hide_button {
+    cursor: pointer;
+}
+
+.thread_show_button {
+    cursor: pointer;
+}
+
+.post_hidden {
+    display: none;
+}
+
 #image_hover {
     position: fixed;
     top: 0px;