From 861249080ba846e6697bde0cec52c7487da039cf Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 15:45:30 -0800
Subject: [PATCH] Moves toggle menu javascript out of html

---
 bookwyrm/static/js/shared.js                    | 7 ++++++-
 bookwyrm/templates/layout.html                  | 4 ++--
 bookwyrm/templates/snippets/shelf_selector.html | 2 +-
 bookwyrm/templates/snippets/shelve_button.html  | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index 3cb85d110..de6d44f99 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -17,6 +17,10 @@ window.onload = function() {
         .forEach(t => t.onclick = tabChangeNested);
     Array.from(document.getElementsByClassName('tab-change'))
         .forEach(t => t.onclick = tabChange);
+
+    // handle aria settings on menus
+    Array.from(document.getElementsByClassName('pulldown-menu'))
+        .forEach(t => t.onclick = toggleMenu);
 };
 
 function toggleAction(e) {
@@ -71,7 +75,8 @@ function handleTabChange(target, parentElement) {
     target.className = 'is-active';
 }
 
-function toggleMenu(el) {
+function toggleMenu(e) {
+    var el = e.target.closest('.pulldown-menu');
     el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') == 'false');
 }
 
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index e625343b3..7a09f60dd 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -41,7 +41,7 @@
             </div>
         </form>
 
-        <label for="main-nav" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainNav" onclick="toggleMenu(this)" tabindex="0">
+        <label for="main-nav" role="button" class="navbar-burger pulldown-menu" aria-label="menu" aria-expanded="false" data-target="mainNav" tabindex="0">
             <div class="navbar-item mt-3">
                 <div class="icon icon-dots-three-vertical" title="Main navigation menu">
                     <span class="is-sr-only">Main navigation menu</span>
@@ -66,7 +66,7 @@
         <div class="navbar-end">
 	    {% if request.user.is_authenticated %}
             <div class="navbar-item has-dropdown is-hoverable">
-                <div class="navbar-link" role="button" aria-expanded=false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="navbar-dropdown"><p>
+                <div class="navbar-link pulldown-menu" role="button" aria-expanded="false" tabindex="0" aria-haspopup="true" aria-controls="navbar-dropdown"><p>
                     {% include 'snippets/avatar.html' with user=request.user %}
                     {% include 'snippets/username.html' with user=request.user %}
                 </p></div>
diff --git a/bookwyrm/templates/snippets/shelf_selector.html b/bookwyrm/templates/snippets/shelf_selector.html
index cf82bcb58..1946b1229 100644
--- a/bookwyrm/templates/snippets/shelf_selector.html
+++ b/bookwyrm/templates/snippets/shelf_selector.html
@@ -1,6 +1,6 @@
 <div class="dropdown">
     <div class="dropdown-trigger">
-        <label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
+        <label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
             <div class="button">
                 <span>Change shelf</span>
                 <span class="icon icon-arrow-down" aria-hidden="true"></span>
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index 9723d3a13..663e99044 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -27,7 +27,7 @@
 
     <div class="dropdown">
         <div class="dropdown-trigger">
-            <label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
+            <label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
                 <div class="button is-small">
                     <span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span>
                 </div>