From 3e58163f0d2742d31fe719e3f34af0ba24edc3bd Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sat, 16 Jan 2021 19:57:20 -0800
Subject: [PATCH] refactors content warning button

---
 bookwyrm/static/css/format.css                |  5 +++
 bookwyrm/static/js/shared.js                  | 26 ++++++++++++++-
 .../snippets/content_warning_field.html       | 22 ++-----------
 .../templates/snippets/create_status.html     | 18 +++++++++--
 .../snippets/create_status_form.html          | 32 +++++++++++++++----
 .../templates/snippets/privacy_select.html    |  2 +-
 bookwyrm/templates/snippets/status_body.html  |  4 +--
 7 files changed, 76 insertions(+), 33 deletions(-)

diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index e99513b04..870152d57 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -14,6 +14,11 @@
 }
 
 /* --- TOGGLES --- */
+[aria-pressed=true] {
+    background-color: hsl(171, 100%, 41%);
+    color: white;
+}
+
 input.toggle-control {
     display: none;
 }
diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index b2de57368..49859fbfc 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -29,6 +29,10 @@ window.onload = function() {
     // update localstorage
     Array.from(document.getElementsByClassName('set-display'))
         .forEach(t => t.onclick = updateDisplay);
+
+    // toggle display
+    Array.from(document.getElementsByClassName('toggle-button'))
+        .forEach(t => t.onclick = toggleDisplay);
 };
 
 function updateDisplay(e) {
@@ -51,11 +55,31 @@ function setDisplay(el) {
 }
 
 function toggleAction(e) {
+    var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false';
+    e.currentTarget.setAttribute('aria-pressed', pressed);
+
+    var targetId = e.currentTarget.getAttribute('data-controls');
+    if (targetId) {
+        var target = document.getElementById(targetId);
+        if (pressed) {
+            target.className = target.className.replace('hidden', '');
+        } else {
+            target.className += ' hidden';
+        }
+
+    }
+
     // set hover, if appropriate
-    var hover = e.target.getAttribute('data-hover-target');
+    var hover = e.currentTarget.getAttribute('data-hover-target');
     if (hover) {
         document.getElementById(hover).focus();
     }
+
+    // set checkbox, if appropriate
+    var checkbox = e.currentTarget.getAttribute('data-controls-checkbox');
+    if (checkbox) {
+        document.getElementById(checkbox).checked = !!pressed;
+    }
 }
 
 
diff --git a/bookwyrm/templates/snippets/content_warning_field.html b/bookwyrm/templates/snippets/content_warning_field.html
index 91bc8ba44..79494378c 100644
--- a/bookwyrm/templates/snippets/content_warning_field.html
+++ b/bookwyrm/templates/snippets/content_warning_field.html
@@ -1,20 +1,4 @@
-{% load bookwyrm_tags %}
-{% with 0|uuid as uuid %}
-<div class="control">
-    <div>
-        <input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %} data-hover-target="id_content_warning_{{ uuid }}">
-        <div class="toggle-content hidden">
-            <label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</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 %}>
-            {% include 'snippets/toggle/toggle_button.html' with controls_text="hide-spoilers" controls_uid=uuid text="Remove spoilers/content warning" small=True %}
-        </div>
-    </div>
-
-    <div>
-        <input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}>
-        <div class="toggle-content hidden">
-            {% include 'snippets/toggle/toggle_button.html' with controls_text="include-spoilers" controls_uid=uuid text="Add spoilers/content warning" small=True %}
-        </div>
-    </div>
+<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 %}>
 </div>
-{% endwith %}
diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html
index 26f63508d..c843f926c 100644
--- a/bookwyrm/templates/snippets/create_status.html
+++ b/bookwyrm/templates/snippets/create_status.html
@@ -29,15 +29,27 @@
 
 <div>
     <input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="review-{{ book.id }}" checked>
-    {% include 'snippets/create_status_form.html' with type='review' %}
+    <div class="toggle-content hidden tab-option-{{ book.id }}">
+        {% with 0|uuid as uuid %}
+        {% include 'snippets/create_status_form.html' with type='review' %}
+        {% endwith %}
+    </div>
 </div>
 
 <div>
     <input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="comment-{{ book.id }}">
-    {% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %}
+    <div class="toggle-content hidden tab-option-{{ book.id }}">
+        {% with 0|uuid as uuid %}
+        {% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %}
+        {% endwith %}
+    </div>
 </div>
 
 <div>
     <input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="quote-{{ book.id }}">
-    {% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %}
+    <div class="toggle-content hidden tab-option-{{ book.id }}">
+        {% with 0|uuid as uuid %}
+        {% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %}
+        {% endwith %}
+    </div>
 </div>
diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html
index c92b2f3d9..37bd79628 100644
--- a/bookwyrm/templates/snippets/create_status_form.html
+++ b/bookwyrm/templates/snippets/create_status_form.html
@@ -1,7 +1,8 @@
-<form class="toggle-content hidden tab-option-{{ book.id }}" name="{{ type }}" action="/post/{{ type }}" method="post" id="tab-{{ type }}-{{ book.id }}">
+<form class="is-flex-grow-1" name="{{ type }}" action="/post/{{ type }}" method="post" id="tab-{{ type }}-{{ book.id }}{{ reply_parent.id }}">
     {% csrf_token %}
     <input type="hidden" name="book" value="{{ book.id }}">
     <input type="hidden" name="user" value="{{ request.user.id }}">
+    <input type="hidden" name="reply_parent" value="{{ reply_parent.id }}">
     {% if type == 'review' %}
     <div class="control">
         <label class="label" for="id_name_{{ book.id }}_{{ type }}">Title:</label>
@@ -9,8 +10,9 @@
     </div>
     {% endif %}
     <div class="control">
+        {% if not type == 'reply' %}
         <label class="label" for="id_{% if type == 'quotation' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">{{ type|title }}:</label>
-        {% include 'snippets/content_warning_field.html' %}
+        {% endif %}
 
         {% if type == 'review' %}
         <fieldset>
@@ -31,18 +33,34 @@
         {% if type == 'quotation' %}
         <textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
         {% else %}
-        <textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
+        {% include 'snippets/content_warning_field.html' with parent_status=status %}
+        <textarea name="content" class="textarea" id="id_content_{{ book.id }}{{reply_parent.id}}{{ uuid }}_{{ type }}" placeholder="{{ placeholder }}" {% if type == 'reply' %} aria-label="Reply"{% endif %} required></textarea>
         {% endif %}
     </div>
     {% if type == 'quotation' %}
     <div class="control">
         <label class="label" for="id_content_{{ book.id }}_quote">Comment:</label>
+        {% include 'snippets/content_warning_field.html' with parent_status=status %}
         <textarea name="content" class="textarea is-small" id="id_content_{{ book.id }}_quote"></textarea>
     </div>
     {% endif %}
-    <div class="control is-grouped">
-        {% include 'snippets/privacy_select.html' %}
-        <button class="button is-primary" type="submit">post {{ type }}</button>
+    <input type="checkbox" class="hidden" name="sensitive" id="show-spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %}>
+    {# 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>
+            </div>
+            <div class="control">
+                {% include 'snippets/privacy_select.html' %}
+            </div>
+        </div>
+        <div class="column is-narrow">
+            <button class="button is-link" type="submit">post</button>
+        </div>
     </div>
 </form>
-
diff --git a/bookwyrm/templates/snippets/privacy_select.html b/bookwyrm/templates/snippets/privacy_select.html
index dbe11c43b..d648ce8b1 100644
--- a/bookwyrm/templates/snippets/privacy_select.html
+++ b/bookwyrm/templates/snippets/privacy_select.html
@@ -12,7 +12,7 @@
             Unlisted
         </option>
         <option value="followers" {% if current == 'followers' %}selected{% endif %}>
-            Followers only
+            Followers
         </option>
         <option value="direct" {% if current == 'direct' %}selected{% endif %}>
             Private
diff --git a/bookwyrm/templates/snippets/status_body.html b/bookwyrm/templates/snippets/status_body.html
index f4e460240..8181a0c43 100644
--- a/bookwyrm/templates/snippets/status_body.html
+++ b/bookwyrm/templates/snippets/status_body.html
@@ -57,11 +57,11 @@
 {% 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 }}">
+<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">
 <section class="toggle-content hidden">
     <div class="card-footer">
         <div class="card-footer-item">
-            {% include 'snippets/reply_form.html' with status=status %}
+            {% include 'snippets/create_status_form.html' with reply_parent=status type="reply" %}
         </div>
     </div>
 </section>