Moves interaction javascript out of html

bookwyrm/static/js/shared.js

@@ -1,9 +1,12 @@
+// set up javascript listeners
 window.onload = function() {
-    var toggles = document.getElementsByClassName('toggle-control');
+    // let buttons set keyboard focus
-    //    .forEach(t => t.onclick = toggle_action);
+    Array.from(document.getElementsByClassName('toggle-control'))
-    for (var i=0; i<toggles.length; i++) {
+        .forEach(t => t.onclick = toggle_action);
-        toggles[i].onclick = toggle_action;
+
-    }
+    // javascript interactions
+    Array.from(document.getElementsByClassName('interaction'))
+        .forEach(t => t.onsubmit = interact);
 };
 
 function toggle_action(e) {

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">

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">

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>