From 47d5b907ac53ba90db1e5b6c72670499f4bb814b Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 17 Jan 2021 10:10:59 -0800
Subject: [PATCH] Readthrough interactions

---
 bookwyrm/static/css/format.css                |  2 +-
 bookwyrm/static/js/shared.js                  | 27 ++++--
 .../templates/snippets/components/modal.html  | 23 +++++
 .../snippets/delete_readthrough_modal.html    | 13 +++
 .../snippets/finish_reading_modal.html        | 87 ++++++++++---------
 bookwyrm/templates/snippets/readthrough.html  | 63 ++++----------
 .../templates/snippets/shelve_button.html     | 10 ++-
 .../snippets/start_reading_modal.html         | 70 +++++++--------
 .../snippets/toggle/close_button.html         |  1 +
 .../snippets/toggle/open_button.html          |  1 +
 .../snippets/toggle/toggle_button.html        |  2 +-
 11 files changed, 165 insertions(+), 134 deletions(-)
 create mode 100644 bookwyrm/templates/snippets/components/modal.html
 create mode 100644 bookwyrm/templates/snippets/delete_readthrough_modal.html
 create mode 100644 bookwyrm/templates/snippets/toggle/close_button.html
 create mode 100644 bookwyrm/templates/snippets/toggle/open_button.html

diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index f08f6739..69ac202d 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -18,7 +18,7 @@
     background-color: hsl(171, 100%, 41%);
     color: white;
 }
-.hide-active[aria-pressed=true] {
+.hide-active[aria-pressed=true], .hide-active {
     display: none;
 }
 
diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index e7b87dd8..f4b9a588 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -60,13 +60,14 @@ function toggleAction(e) {
 
     if (targetId) {
         var target = document.getElementById(targetId);
-        if (pressed) {
-            removeClass(target, 'hidden');
-            addClass(target, 'is-active');
-        } else {
-            addClass(target, 'hidden');
-            removeClass(target, 'is-active');
-        }
+        addRemoveClass(target, 'hidden', !pressed);
+        addRemoveClass(target, 'is-active', pressed);
+    }
+
+    // show/hide container
+    var container = document.getElementById('hide-' + targetId);
+    if (!!container) {
+        addRemoveClass(container, 'hidden', pressed);
     }
 
     // set checkbox, if appropriate
@@ -82,13 +83,23 @@ function toggleAction(e) {
     }
 }
 
+function addRemoveClass(el, classname, bool) {
+    if (bool) {
+        addClass(el, classname)
+    } else {
+        removeClass(el, classname)
+    }
+}
 
 function addClass(el, classname) {
     el.className = el.className.split(' ').concat(classname).join(' ');
 }
 
 function removeClass(el, className) {
-    var classes = el.className.split(' ');
+    var classes = []
+    if (el.className) {
+        var classes = el.className.split(' ');
+    }
     const idx = classes.indexOf(className);
     if (idx > -1) {
         classes.splice(idx, 1);
diff --git a/bookwyrm/templates/snippets/components/modal.html b/bookwyrm/templates/snippets/components/modal.html
new file mode 100644
index 00000000..63db1168
--- /dev/null
+++ b/bookwyrm/templates/snippets/components/modal.html
@@ -0,0 +1,23 @@
+<div class="modal hidden" id="{{ controls_text }}-{{ controls_uid }}">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <h2 class="modal-card-title">
+                {% block modal-title %}{% endblock %}
+            </h2>
+            {% include 'snippets/toggle/toggle_button.html' with label="close" class="delete" nonbutton=True %}
+        </header>
+
+        {% block modal-form-open %}{% endblock %}
+
+        {% block modal-body %}{% endblock %}
+
+        <footer class="modal-card-foot">
+            {% block modal-footer %}{% endblock %}
+        </footer>
+        {% block modal-form-close %}{% endblock %}
+    </div>
+    <label class="modal-close is-large" for="{{ controls_text }}-{{ readthrough.id }}" aria-label="close"></label>
+    {% include 'snippets/toggle/toggle_button.html' with label="close" class="modal-close is-large" nonbutton=True %}
+</div>
+
diff --git a/bookwyrm/templates/snippets/delete_readthrough_modal.html b/bookwyrm/templates/snippets/delete_readthrough_modal.html
new file mode 100644
index 00000000..1456cc76
--- /dev/null
+++ b/bookwyrm/templates/snippets/delete_readthrough_modal.html
@@ -0,0 +1,13 @@
+{% extends 'snippets/components/modal.html' %}
+{% block modal-title %}Delete this read-though?{% endblock %}
+
+{% block modal-footer %}
+<form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
+    {% csrf_token %}
+    <input type="hidden" name="id" value="{{ readthrough.id }}">
+    <button class="button is-danger" type="submit">
+        Delete
+    </button>
+    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
+</form>
+{% endblock %}
diff --git a/bookwyrm/templates/snippets/finish_reading_modal.html b/bookwyrm/templates/snippets/finish_reading_modal.html
index cce89092..10af1162 100644
--- a/bookwyrm/templates/snippets/finish_reading_modal.html
+++ b/bookwyrm/templates/snippets/finish_reading_modal.html
@@ -1,45 +1,46 @@
-{% load bookwyrm_tags %}
-<div class="modal toggle-content hidden" id="finish-reading-{{ uuid }}">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-        <header class="modal-card-head">
-            <p class="modal-card-title">Finish "{{ book.title }}"</p>
-            {% include 'snippets/toggle/close_button.html' with label="close" controls_text="finish-reading" controls_uid=uuid class="delete" %}
-        </header>
-        {% active_read_through book user as readthrough %}
-        <form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
-            <section class="modal-card-body">
-                {% csrf_token %}
-                <input type="hidden" name="id" value="{{ readthrough.id }}">
-                <div class="field">
-                    <label class="label">
-                        Started reading
-                        <input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
-                    </label>
-                </div>
-                <div class="field">
-                    <label class="label">
-                        Finished reading
-                        <input type="date" name="finish_date" class="input" id="id_finish_date-{{ uuid }}" value="{% now "Y-m-d" %}">
-                    </label>
-                </div>
-            </section>
-            <footer class="modal-card-foot">
-                <div class="columns">
-                    <div class="column field">
-                        <label for="post_status-{{ uuid }}">
-                            <input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
-                            Post to feed
-                        </label>
-                        {% include 'snippets/privacy_select.html' %}
-                    </div>
-                    <div class="column">
-                        <button type="submit" class="button is-success">Save</button>
-                        {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
-                    </div>
-                </div>
-            </footer>
-        </form>
+{% extends 'snippets/components/modal.html' %}
+
+{% block modal-title %}
+Finish "<em>{{ book.title }}</em>"
+{% endblock %}
+
+
+{% block modal-form-open %}
+<form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
+{% endblock %}
+
+{% block modal-body %}
+<section class="modal-card-body">
+    {% csrf_token %}
+    <input type="hidden" name="id" value="{{ readthrough.id }}">
+    <div class="field">
+        <label class="label">
+            Started reading
+            <input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
+        </label>
+    </div>
+    <div class="field">
+        <label class="label">
+            Finished reading
+            <input type="date" name="finish_date" class="input" id="id_finish_date-{{ uuid }}" value="{% now "Y-m-d" %}">
+        </label>
+    </div>
+</section>
+{% endblock %}
+
+{% block modal-footer %}
+<div class="columns">
+    <div class="column field">
+        <label for="post_status-{{ uuid }}">
+            <input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
+            Post to feed
+        </label>
+        {% include 'snippets/privacy_select.html' %}
+    </div>
+    <div class="column">
+        <button type="submit" class="button is-success">Save</button>
+        {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
     </div>
-    <label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
 </div>
+{% endblock %}
+{% block modal-form-close %}</form>{% endblock %}
diff --git a/bookwyrm/templates/snippets/readthrough.html b/bookwyrm/templates/snippets/readthrough.html
index 7930b93f..56c22a92 100644
--- a/bookwyrm/templates/snippets/readthrough.html
+++ b/bookwyrm/templates/snippets/readthrough.html
@@ -1,7 +1,6 @@
 {% load humanize %}
 <div class="content block">
-    <input class="toggle-control" type="radio" name="show-edit-readthrough-{{ readthrough.id }}" id="show-readthrough-{{ readthrough.id }}" checked>
-    <div class="toggle-content hidden">
+    <div id="hide-edit-readthrough-{{ readthrough.id }}">
         <dl class="mb-1">
             {% if readthrough.start_date %}
             <div class="is-flex">
@@ -16,48 +15,24 @@
             </div>
             {% endif %}
         </dl>
+        <div class="field has-addons">
+            <div class="control">
+                {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
+            </div>
+            <div class="control">
+                {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="box hidden" id="edit-readthrough-{{ readthrough.id }}">
+    <form name="edit-readthrough" action="/edit-readthrough" method="post">
+        {% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
         <div class="field is-grouped">
-            {% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
-            {% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
+            <button class="button is-primary" type="submit">Save</button>
+            {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="edit-readthrough" controls_uid=readthrough.id %}
         </div>
-    </div>
-</div>
-
-<div class="block">
-    <input class="toggle-control" type="radio" name="show-edit-readthrough-{{ readthrough.id }}" id="edit-readthrough-{{ readthrough.id }}">
-    <div class="toggle-content hidden">
-        <div class="box">
-            <form name="edit-readthrough" action="/edit-readthrough" method="post">
-                {% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
-                <div class="field is-grouped">
-                    <button class="button is-primary" type="submit">Save</button>
-                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="show-readthrough" controls_uid=readthrough.id %}
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
-<div>
-    <input class="toggle-control" type="checkbox" name="delete-readthrough-{{ readthrough.id }}" id="delete-readthrough-{{ readthrough.id }}">
-    <div class="modal toggle-content hidden">
-        <div class="modal-background"></div>
-        <div class="modal-card">
-            <header class="modal-card-head">
-                <p class="modal-card-title">Delete this read-though?</p>
-                <label class="delete" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
-            </header>
-            <footer class="modal-card-foot">
-                <form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
-                    {% csrf_token %}
-                    <input type="hidden" name="id" value="{{ readthrough.id }}">
-                    <button class="button is-danger is-light" type="submit">
-                        Delete
-                    </button>
-                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
-                </form>
-            </footer>
-        </div>
-        <label class="modal-close is-large" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
-    </div>
+    </form>
 </div>
+{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete-readthrough" controls_uid=readthrough.id %}
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index a14ed16f..22c382b5 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -40,7 +40,7 @@
                 <li role="menuitem">
                     {% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
                     <div class="dropdown-item pt-0 pb-0">
-                        {% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
+                        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Start reading" controls_text="start-reading" controls_uid=uuid %}
                     </div>
                     {% else %}
                     <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
@@ -59,7 +59,11 @@
     </div>
     {% endif %}
 </div>
-{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
-{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
+
+{% include 'snippets/start_reading_modal.html' with book=active_shelf.book controls_text="start-reading" controls_uid=uuid %}
+
+{% latest_read_through book request.user as readthrough %}
+{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book controls_text="finish-reading" controls_uid=uuid readthrough=readthrough %}
+
 {% endwith %}
 {% endif %}
diff --git a/bookwyrm/templates/snippets/start_reading_modal.html b/bookwyrm/templates/snippets/start_reading_modal.html
index 267c70f7..50724e11 100644
--- a/bookwyrm/templates/snippets/start_reading_modal.html
+++ b/bookwyrm/templates/snippets/start_reading_modal.html
@@ -1,36 +1,38 @@
-<div class="modal hidden" id="start-reading-{{ uuid }}">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-        <header class="modal-card-head">
-            <p class="modal-card-title">Start "{{ book.title }}"</p>
-            {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="start-reading" controls_uid=uuid class="delete" %}
-        </header>
-        <form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
-            <section class="modal-card-body">
-                {% csrf_token %}
-                <div class="field">
-                    <label class="label">
-                        Started reading
-                        <input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}">
-                    </label>
-                </div>
-            </section>
-            <footer class="modal-card-foot">
-                <div class="columns">
-                    <div class="column field">
-                        <label for="post_status_start-{{ uuid }}">
-                            <input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
-                            Post to feed
-                        </label>
-                        {% include 'snippets/privacy_select.html' %}
-                    </div>
-                    <div class="column">
-                        <button class="button is-success" type="submit">Save</button>
-                        {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
-                    </div>
-                </div>
-            </footer>
-        </form>
+{% extends 'snippets/components/modal.html' %}
+
+{% block modal-title %}
+Start "<em>{{ book.title }}</em>"
+{% endblock %}
+
+{% block modal-form-open %}
+<form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
+{% endblock %}
+
+{% block modal-body %}
+<section class="modal-card-body">
+    {% csrf_token %}
+    <div class="field">
+        <label class="label">
+            Started reading
+            <input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}">
+        </label>
+    </div>
+</section>
+{% endblock %}
+
+{% block modal-footer %}
+<div class="columns">
+    <div class="column field">
+        <label for="post_status_start-{{ uuid }}">
+            <input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
+            Post to feed
+        </label>
+        {% include 'snippets/privacy_select.html' %}
+    </div>
+    <div class="column">
+        <button class="button is-success" type="submit">Save</button>
+        {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
     </div>
-    <label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
 </div>
+{% endblock %}
+{% block modal-form-close %}</form>{% endblock %}
diff --git a/bookwyrm/templates/snippets/toggle/close_button.html b/bookwyrm/templates/snippets/toggle/close_button.html
new file mode 100644
index 00000000..342bd21f
--- /dev/null
+++ b/bookwyrm/templates/snippets/toggle/close_button.html
@@ -0,0 +1 @@
+{% include 'snippets/toggle/toggle_button.html' with button_type='hide-inactive' %}
diff --git a/bookwyrm/templates/snippets/toggle/open_button.html b/bookwyrm/templates/snippets/toggle/open_button.html
new file mode 100644
index 00000000..d2ba579b
--- /dev/null
+++ b/bookwyrm/templates/snippets/toggle/open_button.html
@@ -0,0 +1 @@
+{% include 'snippets/toggle/toggle_button.html' with button_type='hide-active' %}
diff --git a/bookwyrm/templates/snippets/toggle/toggle_button.html b/bookwyrm/templates/snippets/toggle/toggle_button.html
index cd34797f..def44a64 100644
--- a/bookwyrm/templates/snippets/toggle/toggle_button.html
+++ b/bookwyrm/templates/snippets/toggle/toggle_button.html
@@ -1,6 +1,6 @@
 <button
     type="button"
-    class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% endif %}"
+    class="toggle-control {% if not nonbutton %}button{% endif %} {{ class }} {% if button_type %}{{ button_type }}{% endif %}"
     data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% 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 %}