Readthrough interactions

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;
 }
 

bookwyrm/static/js/shared.js

@@ -60,13 +60,14 @@ function toggleAction(e) {
 
     if (targetId) {
         var target = document.getElementById(targetId);
-        if (pressed) {
+        addRemoveClass(target, 'hidden', !pressed);
-            removeClass(target, 'hidden');
+        addRemoveClass(target, 'is-active', pressed);
-            addClass(target, 'is-active');
-        } else {
-            addClass(target, 'hidden');
-            removeClass(target, 'is-active');
     }
+
+    // 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 = []
+    if (el.className) {
         var classes = el.className.split(' ');
+    }
     const idx = classes.indexOf(className);
     if (idx > -1) {
         classes.splice(idx, 1);

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>
+

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 %}

bookwyrm/templates/snippets/finish_reading_modal.html

@@ -1,13 +1,15 @@
-{% load bookwyrm_tags %}
+{% extends 'snippets/components/modal.html' %}
-<div class="modal toggle-content hidden" id="finish-reading-{{ uuid }}">
+
-    <div class="modal-background"></div>
+{% block modal-title %}
-    <div class="modal-card">
+Finish "<em>{{ book.title }}</em>"
-        <header class="modal-card-head">
+{% endblock %}
-            <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>
+{% block modal-form-open %}
-        {% active_read_through book user as readthrough %}
 <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 }}">
@@ -24,7 +26,9 @@
         </label>
     </div>
 </section>
-            <footer class="modal-card-foot">
+{% endblock %}
+
+{% block modal-footer %}
 <div class="columns">
     <div class="column field">
         <label for="post_status-{{ uuid }}">
@@ -38,8 +42,5 @@
         {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
     </div>
 </div>
-            </footer>
+{% endblock %}
-        </form>
+{% block modal-form-close %}</form>{% endblock %}
-    </div>
-    <label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
-</div>

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 id="hide-edit-readthrough-{{ readthrough.id }}">
-    <div class="toggle-content hidden">
         <dl class="mb-1">
             {% if readthrough.start_date %}
             <div class="is-flex">
@@ -16,48 +15,24 @@
             </div>
             {% endif %}
         </dl>
-        <div class="field is-grouped">
+        <div class="field has-addons">
-            {% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
+            <div class="control">
-            {% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
+                {% 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="block">
+<div class="box hidden" id="edit-readthrough-{{ readthrough.id }}">
-    <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 %}
+            {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="edit-readthrough" controls_uid=readthrough.id %}
         </div>
     </form>
 </div>
-    </div>
+{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete-readthrough" controls_uid=readthrough.id %}
-</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>
-</div>

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 %}

bookwyrm/templates/snippets/start_reading_modal.html

@@ -1,11 +1,14 @@
-<div class="modal hidden" id="start-reading-{{ uuid }}">
+{% extends 'snippets/components/modal.html' %}
-    <div class="modal-background"></div>
+
-    <div class="modal-card">
+{% block modal-title %}
-        <header class="modal-card-head">
+Start "<em>{{ book.title }}</em>"
-            <p class="modal-card-title">Start "{{ book.title }}"</p>
+{% endblock %}
-            {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="start-reading" controls_uid=uuid class="delete" %}
+
-        </header>
+{% 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">
@@ -15,7 +18,9 @@
         </label>
     </div>
 </section>
-            <footer class="modal-card-foot">
+{% endblock %}
+
+{% block modal-footer %}
 <div class="columns">
     <div class="column field">
         <label for="post_status_start-{{ uuid }}">
@@ -29,8 +34,5 @@
         {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
     </div>
 </div>
-            </footer>
+{% endblock %}
-        </form>
+{% block modal-form-close %}</form>{% endblock %}
-    </div>
-    <label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
-</div>

bookwyrm/templates/snippets/toggle/close_button.html

@@ -0,0 +1 @@
+{% include 'snippets/toggle/toggle_button.html' with button_type='hide-inactive' %}

bookwyrm/templates/snippets/toggle/open_button.html

@@ -0,0 +1 @@
+{% include 'snippets/toggle/toggle_button.html' with button_type='hide-active' %}

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 %}