mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2025-01-08 16:25:27 +00:00
Code Issues Projects Releases Wiki Activity

Moves toggle menu javascript out of html

Browse source
This commit is contained in:
Mouse Reeve 2021-01-14 15:45:30 -08:00
parent 7abe39b7d5
commit 861249080b
4 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
bookwyrm/static/js/shared.js
View file

@ -17,6 +17,10 @@ window.onload = function() {
.forEach(t => t.onclick = tabChangeNested); .forEach(t => t.onclick = tabChangeNested);
Array.from(document.getElementsByClassName('tab-change')) Array.from(document.getElementsByClassName('tab-change'))
.forEach(t => t.onclick = tabChange); .forEach(t => t.onclick = tabChange);
// handle aria settings on menus
Array.from(document.getElementsByClassName('pulldown-menu'))
.forEach(t => t.onclick = toggleMenu);
}; };
function toggleAction(e) { function toggleAction(e) {
@ -71,7 +75,8 @@ function handleTabChange(target, parentElement) {
target.className = 'is-active'; 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'); el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') == 'false');
} }

4
bookwyrm/templates/layout.html
View file

@ -41,7 +41,7 @@
</div> </div>
</form> </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="navbar-item mt-3">
<div class="icon icon-dots-three-vertical" title="Main navigation menu"> <div class="icon icon-dots-three-vertical" title="Main navigation menu">
<span class="is-sr-only">Main navigation menu</span> <span class="is-sr-only">Main navigation menu</span>
@ -66,7 +66,7 @@
<div class="navbar-end"> <div class="navbar-end">
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<div class="navbar-item has-dropdown is-hoverable"> <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/avatar.html' with user=request.user %}
{% include 'snippets/username.html' with user=request.user %} {% include 'snippets/username.html' with user=request.user %}
</p></div> </p></div>

2
bookwyrm/templates/snippets/shelf_selector.html
View file

@ -1,6 +1,6 @@
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-trigger"> <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"> <div class="button">
<span>Change shelf</span> <span>Change shelf</span>
<span class="icon icon-arrow-down" aria-hidden="true"></span> <span class="icon icon-arrow-down" aria-hidden="true"></span>

2
bookwyrm/templates/snippets/shelve_button.html
View file

@ -27,7 +27,7 @@
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-trigger"> <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"> <div class="button is-small">
<span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span> <span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span>
</div> </div>