Javascript boost/favorite button

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 {

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);
 }

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>

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>