From d28efe54dd4296b196df0d4a836b1614dc16602d Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 15 Mar 2020 18:12:45 -0700
Subject: [PATCH] Javascript boost/favorite button

---
 fedireads/static/format.css                   |  4 +-
 fedireads/static/js/shared.js                 | 42 ++++++++++++++++++-
 fedireads/templates/layout.html               |  2 +-
 fedireads/templates/snippets/interaction.html | 10 ++---
 4 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index 4c0231cf..417edd69 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -395,7 +395,7 @@ blockquote {
     box-shadow: #247BA0 0em 0em 1em 0em;
     color: #247BA0;
 }
-.interaction button.active:hover .icon {
+.interaction .active button:hover .icon {
     color: #888;
 }
 .interaction button {
@@ -405,7 +405,7 @@ blockquote {
     padding: 0;
     color: #888;
 }
-.interaction button.active .icon {
+.interaction .active button .icon {
     color: #FF1654;
 }
 .interaction textarea {
diff --git a/fedireads/static/js/shared.js b/fedireads/static/js/shared.js
index 6c041f54..da4a9c0c 100644
--- a/fedireads/static/js/shared.js
+++ b/fedireads/static/js/shared.js
@@ -3,6 +3,44 @@ function hide_element(element) {
     element.parentElement.className = classes.replace('visible', '');
 }
 
-function favorite(element) {
-
+function interact(e) {
+    e.preventDefault();
+    ajaxPost(e.target);
+    if (e.target.className.includes('active')) {
+        e.target.className = '';
+    } else {
+        e.target.className += ' active';
+    }
+    return true;
+}
+
+function comment(e) {
+    e.preventDefault();
+    ajaxPost(e.target);
+    // TODO: display comment
+    return true;
+}
+
+function ajaxPost(form, callback) {
+    // jeez. https://stackoverflow.com/questions/33021995
+    var url = form.action;
+    var xhr = new XMLHttpRequest();
+
+    var params = [].filter.call(form.elements, function(el) {
+        return typeof(el.checked) === 'undefined' || el.checked;
+    })
+    .filter(function(el) { return !!el.name; })
+    .filter(function(el) { return el.disabled; })
+    .map(function(el) {
+        return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
+    }).join('&');
+
+    xhr.open('POST', url);
+    xhr.setRequestHeader('Content-type', 'application/x-form-urlencoded');
+    xhr.setRequestHeader('X-CSRFToken', csrf_token);
+
+    if (callback) {
+        xhr.onload = callback.bind(xhr);
+    }
+    xhr.send(params);
 }
diff --git a/fedireads/templates/layout.html b/fedireads/templates/layout.html
index 55b91178..257ff4ca 100644
--- a/fedireads/templates/layout.html
+++ b/fedireads/templates/layout.html
@@ -70,7 +70,7 @@
 </div>
 
 <script>
-    var csrf_token = {{ csrf_token }};
+    var csrf_token = '{{ csrf_token }}';
 </script>
 <script src="/static/js/shared.js"></script>
 </body>
diff --git a/fedireads/templates/snippets/interaction.html b/fedireads/templates/snippets/interaction.html
index 8d530109..c411334a 100644
--- a/fedireads/templates/snippets/interaction.html
+++ b/fedireads/templates/snippets/interaction.html
@@ -1,7 +1,7 @@
 {% load fr_display %}
 <div class="interaction">
 
-    <form name="comment" action="/comment" method="post">
+    <form name="comment" action="/comment" method="post" onsubmit="return comment(e_">
         {% csrf_token %}
         <input type="hidden" name="parent" value="{{ activity.id }}"></input>
         <textarea name="content" placeholder="Leave a comment..." id="id_content" required="true"></textarea>
@@ -12,18 +12,18 @@
         </button>
     </form>
 
-    <form name="boost" action="/boost/{{ activity.id }}" method="post">
+    <form name="boost" action="/boost/{{ activity.id }}" method="POST" onsubmit="return interact(event)" class="{% if False %}active{% endif %}">
         {% csrf_token %}
-        <button type="submit" class="{% if False %}active{% endif %}">
+        <button type="submit">
             <span class="icon icon-boost">
                 <span class="hidden-text">Boost status</span>
             </span>
         </button>
     </form>
 
-    <form name="favorite" action="/favorite/{{ activity.id }}" method="post">
+    <form name="favorite" action="/favorite/{{ activity.id }}" method="POST" onsubmit="return interact(event)" class="{% if request.user|liked:status %}active{% endif %}">
         {% csrf_token %}
-        <button type="submit" class="{% if request.user|liked:status %}active{% endif %}">
+        <button type="submit">
             <span class="icon icon-heart">
                 <span class="hidden-text">Like status</span>
             </span>