From 55910249335d944fb6104262350f6ac2e136a24f Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 14:38:33 -0800
Subject: [PATCH] Moves interaction javascript out of html

---
 bookwyrm/static/js/shared.js                   | 13 ++++++++-----
 bookwyrm/templates/snippets/boost_button.html  |  4 ++--
 bookwyrm/templates/snippets/fav_button.html    |  4 ++--
 bookwyrm/templates/snippets/follow_button.html |  4 ++--
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index 60e78052..55d0d64d 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -1,9 +1,12 @@
+// set up javascript listeners
 window.onload = function() {
-    var toggles = document.getElementsByClassName('toggle-control');
-    //    .forEach(t => t.onclick = toggle_action);
-    for (var i=0; i<toggles.length; i++) {
-        toggles[i].onclick = toggle_action;
-    }
+    // let buttons set keyboard focus
+    Array.from(document.getElementsByClassName('toggle-control'))
+        .forEach(t => t.onclick = toggle_action);
+
+    // javascript interactions
+    Array.from(document.getElementsByClassName('interaction'))
+        .forEach(t => t.onsubmit = interact);
 };
 
 function toggle_action(e) {
diff --git a/bookwyrm/templates/snippets/boost_button.html b/bookwyrm/templates/snippets/boost_button.html
index e6688124..08daae64 100644
--- a/bookwyrm/templates/snippets/boost_button.html
+++ b/bookwyrm/templates/snippets/boost_button.html
@@ -1,7 +1,7 @@
 {% load bookwyrm_tags %}
 
 {% with status.id|uuid as uuid %}
-<form name="boost" action="/boost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status  %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
+<form name="boost" action="/boost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status  %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small" type="submit" {% if not status.boostable %}disabled{% endif %}>
         <span class="icon icon-boost" title="Boost status">
@@ -9,7 +9,7 @@
         </span>
     </button>
 </form>
-<form name="unboost" action="/unboost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
+<form name="unboost" action="/unboost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small is-success" type="submit">
         <span class="icon icon-boost" title="Un-boost status">
diff --git a/bookwyrm/templates/snippets/fav_button.html b/bookwyrm/templates/snippets/fav_button.html
index abd453fd..c413e979 100644
--- a/bookwyrm/templates/snippets/fav_button.html
+++ b/bookwyrm/templates/snippets/fav_button.html
@@ -1,6 +1,6 @@
 {% load bookwyrm_tags %}
 {% with status.id|uuid as uuid %}
-<form name="favorite" action="/favorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
+<form name="favorite" action="/favorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small" type="submit">
         <span class="icon icon-heart" title="Like status">
@@ -8,7 +8,7 @@
         </span>
     </button>
 </form>
-<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
+<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-success is-small" type="submit">
         <span class="icon icon-heart" title="Un-like status">
diff --git a/bookwyrm/templates/snippets/follow_button.html b/bookwyrm/templates/snippets/follow_button.html
index faeb472a..7db69191 100644
--- a/bookwyrm/templates/snippets/follow_button.html
+++ b/bookwyrm/templates/snippets/follow_button.html
@@ -7,7 +7,7 @@ Follow request already sent.
 
 {% else %}
 
-<form action="/follow/" method="POST" onsubmit="interact(event)" class="follow-{{ user.id }} {% if request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
+<form action="/follow/" method="POST" class="interaction follow-{{ user.id }} {% if request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
     {% if user.manually_approves_followers %}
@@ -16,7 +16,7 @@ Follow request already sent.
         <button class="button is-small is-link" type="submit">Follow</button>
     {% endif %}
 </form>
-<form action="/unfollow/" method="POST" onsubmit="interact(event)" class="follow-{{ user.id }} {% if not request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
+<form action="/unfollow/" method="POST" class="interaction follow-{{ user.id }} {% if not request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
     <button class="button is-small is-danger is-light" type="submit">Unfollow</button>