Uses toggle button snippet for content warning

bookwyrm/static/js/shared.js

@@ -1,7 +1,7 @@
 // set up javascript listeners
 window.onload = function() {
     // let buttons set keyboard focus
-    Array.from(document.getElementsByClassName('toggle-control'))
+    document.querySelectorAll('[data-controls]')
         .forEach(t => t.onclick = toggleAction);
 
     // javascript interactions (boost/fav)
@@ -51,8 +51,8 @@ function setDisplay(el) {
 }
 
 function toggleAction(e) {
-    var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false';
     var el = e.currentTarget;
+    var pressed = el.getAttribute('aria-pressed') == 'false';
 
     var targetId = el.getAttribute('data-controls');
     document.querySelectorAll('[data-controls="' + targetId + '"]')
@@ -69,17 +69,17 @@ function toggleAction(e) {
         }
     }
 
-    // set hover, if appropriate
-    var hover = el.getAttribute('data-hover-target');
-    if (hover) {
-        document.getElementById(hover).focus();
-    }
-
     // set checkbox, if appropriate
     var checkbox = el.getAttribute('data-controls-checkbox');
     if (checkbox) {
         document.getElementById(checkbox).checked = !!pressed;
     }
+
+    // set focus, if appropriate
+    var focus = el.getAttribute('data-focus-target');
+    if (focus) {
+        document.getElementById(focus).focus();
+    }
 }
 
 

bookwyrm/templates/book.html

@@ -94,7 +94,7 @@
                 {% include 'snippets/trimmed_text.html' with full=book|book_description %}
 
                 {% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %}
-                {% include 'snippets/toggle/open_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id hover="id_description" hide_active=True id="hide-description" %}
+                {% include 'snippets/toggle/open_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id focus="id_description" hide_active=True id="hide-description" %}
 
                 <div class="box hidden" id="add-description-{{ book.id }}">
                     <form name="add-description" method="POST" action="/add-description/{{ book.id }}">

bookwyrm/templates/goal.html

@@ -6,7 +6,7 @@
     {% if user == request.user %}
     <div class="block">
         {% if goal %}
-        {% include 'snippets/toggle/open_button.html' with text="Edit goal" controls_text="show-edit-goal" hover="edit-form-header" %}
+        {% include 'snippets/toggle/open_button.html' with text="Edit goal" controls_text="show-edit-goal" focus="edit-form-header" %}
         {% endif %}
         {% now 'Y' as year %}
         <section class="card {% if goal %}hidden{% endif %}" id="show-edit-goal">

bookwyrm/templates/snippets/content_warning_field.html

@@ -1,4 +1,4 @@
 <div class="control{% if not parent_status.content_warning %} hidden{% endif %}" id="spoilers-{{ uuid }}">
-    <label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoiler alert:</label>
-    <input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
+    <label class="is-sr-only" for="id_content_warning-{{ uuid }}">Spoiler alert:</label>
+    <input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning-{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
 </div>

bookwyrm/templates/snippets/create_status_form.html

@@ -44,16 +44,12 @@
         <textarea name="content" class="textarea is-small" id="id_content_{{ book.id }}_quote"></textarea>
     </div>
     {% endif %}
-    <input type="checkbox" class="hidden" name="sensitive" id="show-spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %} aria-hidden="true">
+    <input type="checkbox" class="hidden" name="sensitive" id="id_show_spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %} aria-hidden="true">
     {# bottom bar #}
     <div class="columns pt-1">
         <div class="field has-addons column">
             <div class="control">
-                <button type="button" class="button toggle-control" for="show-spoilers-{{ uuid }}" data-controls="spoilers-{{ uuid }}" data-hover-target="id_content_warning_{{ uuid }}" aria-pressed="{% if status.content_warning %}true{% else %}false{% endif %}" data-controls-checkbox="show-spoilers-{{ uuid }}">
-                    <span class="icon icon-warning is-size-4" title="include spoiler alert">
-                        <span class="is-sr-only">include spoiler alert</span>
-                    </span>
-                </button>
+                {% include 'snippets/toggle/toggle_button.html' with text="Include spoiler alert" icon="warning is-size-4" controls_text="spoilers" controls_uid=uuid focus="id_content_warning" checkbox="id_show_spoilers" class="toggle-button" pressed=status.content_warning %}
             </div>
             <div class="control">
                 {% include 'snippets/privacy_select.html' %}

bookwyrm/templates/snippets/status_body.html

@@ -57,7 +57,7 @@
 {% block card-bonus %}
 {% if request.user.is_authenticated %}
 {% with status.id|uuid as uuid %}
-<input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-hover-target="id_content_{{ status.id }}{{ uuid }}_reply">
+<input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-focus-target="id_content_{{ status.id }}{{ uuid }}_reply">
 <section class="toggle-content hidden">
     <div class="card-footer">
         <div class="card-footer-item">

bookwyrm/templates/snippets/toggle/toggle_button.html

@@ -1,10 +1,11 @@
 <button
     type="button"
-    class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% else %}toggle-button{% endif %}"
+    class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% endif %}"
     data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
-    {% if hover %}data-hover-target="{{ hover }}"{% endif %}
+    {% if focus %}data-focus-target="{{ focus }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
+    {% if checkbox %}data-controls-checkbox="{{ checkbox }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
     {% if label %}aria-label="label"{% endif %}
-    aria-pressed="false"
+    aria-pressed="{% if pressed %}true{% else %}false{% endif %}"
     >
 
     {% if icon %}