From dc57a28c159915cba774eb633aa3745c3324b2b8 Mon Sep 17 00:00:00 2001
From: Nikey646 <Nikey646@users.noreply.github.com>
Date: Mon, 22 Jul 2019 15:31:01 +1000
Subject: [PATCH] [Feat] Favorite Posts from Preview Panel

This makes the preview panel slightly more useful, especially since the heart icon has a hover effect indicating that it should be usable, despite the fact that all it does is send you to the top of the page (Well, at least in firefox)

The way I did this is a wee bit hacky, but it works (Well, at least in firefox... Don't see why it wouldn't work in Chrome)... It however doesn't take into account if the user is logged in already or not, but I imagine danbooru will complain bitterly (or stop working) when the user isn't.

I would have done the same for the Up / Down vote buttons, however the API doesn't provide that information, even the main posts page waits for you try to up / down vote before offering the chance to remove your vote.
---
 src/ui/preview_panel.js | 48 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/ui/preview_panel.js b/src/ui/preview_panel.js
index a7ff201..d5b931a 100644
--- a/src/ui/preview_panel.js
+++ b/src/ui/preview_panel.js
@@ -7,6 +7,8 @@ import Tag from "../tag.js";
 import _ from "lodash";
 import moment from "moment";
 
+let _previewPanelPost = null
+
 export default class PreviewPanel {
   static initialize() {
     // This is the main content panel that comes before the preview panel.
@@ -66,10 +68,50 @@ export default class PreviewPanel {
 
   static async update($post) {
     const postId = $post.data("id");
-    const post = await Post.get(postId);
+    const post = _previewPanelPost = await Post.get(postId);
     const html = PreviewPanel.renderPost(post);
 
-    $("#ex-preview-panel > div").children().first().replaceWith(html);
+    const panelParent = $("#ex-preview-panel > div");
+
+    let $html = panelParent.children().first();
+
+    let favButton = $html.find(".fa-heart").parent();
+
+    if (favButton.length > 0) {
+      favButton[0].removeEventListener('click', PreviewPanel.favoritePost, false);
+    }
+
+    $html.replaceWith(html);
+    $html = panelParent.children().first();
+
+    favButton = $html.find('.fa-heart').parent();
+    if (favButton.length > 0) {
+      favButton[0].addEventListener('click', PreviewPanel.favoritePost, false);
+    }  
+  }
+  
+  static async favoritePost(e) {
+    const post = _previewPanelPost;
+
+    if (post == null) {
+      return;
+    }
+
+    e.preventDefault()
+
+    let isFav = post.is_favorited;
+
+    const type = isFav ? "DELETE" : "POST";
+    const params = isFav ? {} : { post_id: post.id };
+    const url = `/favorites${(isFav ? `/${post.id}` : "")}`;
+
+    await Post.request(type, url, params);
+    isFav = post.is_favorited = !isFav; // For future use, incase they unfavorite without changing the post
+
+    const remove = isFav ? "far" : "fas";
+    const add = isFav ? "fas" : "far";
+
+    $("#ex-preview-panel > div").children().first().find(".fa-heart").removeClass(remove).addClass(add);
   }
 
   static get $panel() {
@@ -129,7 +171,7 @@ export default class PreviewPanel {
                 ${post.fav_count}
 
                 <a href="#">
-                  <i class="far fa-heart" aria-hidden="true"></i>
+                  <i class="fa${(post.is_favorited ? "s" : "r")} fa-heart" aria-hidden="true"></i>
                 </a>
               </span>