Update visible shelve buttons on read action

This commit is contained in:
Mouse Reeve 2021-09-09 15:36:58 -07:00
parent 5f584c1403
commit 9ee1a110a9
5 changed files with 105 additions and 53 deletions

View file

@ -57,7 +57,7 @@ let StatusCache = new class {
/**
* Post a status with ajax
*
* @param {Event} event
* @param {} event
* @return {undefined}
*/
submitStatus(event) {
@ -81,6 +81,11 @@ let StatusCache = new class {
if (modal) {
modal.getElementsByClassName("modal-close")[0].click();
// Update shelve buttons
document.querySelectorAll("[data-shelve-button-book='" + form.book.value +"']")
.forEach(button => this.cycleShelveButtons(button, form.reading_status.value));
return;
}
// Close reply panel
@ -89,8 +94,30 @@ let StatusCache = new class {
if (reply) {
document.querySelector("[data-controls=" + reply.id + "]").click();
}
}
// Update shelve buttons
/**
* Change which buttons are available for a shelf
*
* @param {Object} html button dom element
* @param {String} the identifier of the selected shelf
* @return {undefined}
*/
cycleShelveButtons(button, identifier) {
// pressed button
let shelf = button.querySelector("[data-shelf-identifier='" + identifier + "']");
// set all buttons to hidden
button.querySelectorAll("[data-shelf-identifier]")
.forEach(item => BookWyrm.addRemoveClass(item, "is-hidden", true));
// button that should be visible now
let next = button.querySelector("[data-shelf-identifier=" + shelf.dataset.shelfNext + "]");
// show the desired button
BookWyrm.addRemoveClass(next, "is-hidden", false);
// dropdown buttons
}
}();

View file

@ -6,7 +6,7 @@
{% with book.id|uuid as uuid %}
{% active_shelf book as active_shelf %}
{% latest_read_through book request.user as readthrough %}
<div class="field has-addons mb-0">
<div class="field has-addons mb-0" data-shelve-button-book="{{ book.id }}">
{% if switch_mode and active_shelf.book != book %}
<div class="control">
{% include 'snippets/switch_edition_button.html' with edition=book size='is-small' %}

View file

@ -2,64 +2,89 @@
{% load utilities %}
{% load i18n %}
{% for shelf in shelves %}
{% comparison_bool shelf.identifier active_shelf.shelf.identifier as is_current %}
{% if dropdown %}<li role="menuitem" class="dropdown-item p-0">{% endif %}
<div class="{% if not dropdown and active_shelf.shelf.identifier|next_shelf != shelf.identifier %}is-hidden{% endif %}">
{% if shelf.identifier == 'reading' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
{% with next_shelf_identifier=active_shelf.shelf.identifier|next_shelf %}
{% trans "Start reading" as button_text %}
{% url 'reading-status' 'start' book.id as fallback_url %}
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start_reading" controls_uid=button_uuid focus="modal_title_start_reading" disabled=is_current fallback_url=fallback_url %}
{% endif %}{% elif shelf.identifier == 'read' and active_shelf.shelf.identifier == 'read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
{% if not dropdown %}
<div
class="{% if next_shelf_identifier != 'complete' %}is-hidden{% endif %}"
data-shelf-identifier="complete"
>
<button type="button" class="button {{ class }}" disabled>
<span>{% trans "Read" %}</span>
</button>
{% endif %}{% elif shelf.identifier == 'read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
</div>
{% endif %}
{% trans "Finish reading" as button_text %}
{% url 'reading-status' 'finish' book.id as fallback_url %}
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish_reading" controls_uid=button_uuid focus="modal_title_finish_reading" disabled=is_current fallback_url=fallback_url %}
{% for shelf in shelves %}
{% comparison_bool shelf.identifier active_shelf.shelf.identifier boolean=dropdown as is_current %}
{% endif %}{% elif shelf.identifier == 'to-read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
{% if dropdown %}<li role="menuitem" class="dropdown-item p-0">{% endif %}
{% trans "Want to read" as button_text %}
{% url 'reading-status' 'want' book.id as fallback_url %}
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want_to_read" controls_uid=button_uuid focus="modal_title_want_to_read" disabled=is_current fallback_url=fallback_url %}
<div
class="{% if not dropdown and next_shelf_identifier != shelf.identifier %}is-hidden{% endif %}"
data-shelf-identifier="{{ shelf.identifier }}"
data-shelf-next="{{ shelf.identifier|next_shelf }}"
>
{% if shelf.identifier == 'reading' %}
{% if not dropdown or next_shelf_identifier != shelf.identifier %}
{% endif %}{% elif shelf.editable %}
<form name="shelve" action="/shelve/" method="post">
{% trans "Start reading" as button_text %}
{% url 'reading-status' 'start' book.id as fallback_url %}
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start_reading" controls_uid=button_uuid focus="modal_title_start_reading" disabled=is_current fallback_url=fallback_url %}
{% endif %}
{% elif shelf.identifier == 'read' %}
{% if not dropdown or next_shelf_identifier != shelf.identifier %}
{% trans "Finish reading" as button_text %}
{% url 'reading-status' 'finish' book.id as fallback_url %}
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish_reading" controls_uid=button_uuid focus="modal_title_finish_reading" disabled=is_current fallback_url=fallback_url %}
{% endif %}
{% elif shelf.identifier == 'to-read' %}
{% if not dropdown or next_shelf_identifier != shelf.identifier %}
{% trans "Want to read" as button_text %}
{% url 'reading-status' 'want' book.id as fallback_url %}
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want_to_read" controls_uid=button_uuid focus="modal_title_want_to_read" disabled=is_current fallback_url=fallback_url %}
{% endif %}
{% elif shelf.editable %}
<form name="shelve" action="/shelve/" method="post">
{% csrf_token %}
<input type="hidden" name="book" value="{{ active_shelf.book.id }}">
<button class="button {{ class }}" name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>
<span>{{ shelf.name }}</span>
</button>
</form>
{% endif %}
</div>
{% if dropdown %}</li>{% endif %}
{% endfor %}
{% if dropdown %}
{% if readthrough and active_shelf.shelf.identifier != 'read' %}
<li role="menuitem" class="dropdown-item p-0">
{% trans "Update progress" as button_text %}
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="progress_update" controls_uid=button_uuid focus="modal_title_progress_update" %}
</li>
{% endif %}
{% if active_shelf.shelf %}
<li role="menuitem" class="dropdown-item p-0">
<form name="shelve" action="/unshelve/" method="post">
{% csrf_token %}
<input type="hidden" name="book" value="{{ active_shelf.book.id }}">
<button class="button {{ class }}" name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>
<span>{{ shelf.name }}</span>
<input type="hidden" name="shelf" value="{{ active_shelf.shelf.id }}">
<button class="button is-fullwidth is-small{% if dropdown %} is-radiusless{% endif %} is-danger is-light" type="submit">
{% blocktrans with name=active_shelf.shelf.name %}Remove from {{ name }}{% endblocktrans %}
</button>
</form>
</li>
{% endif %}
</div>
{% if dropdown %}</li>{% endif %}
{% endfor %}
{% if dropdown %}
{% if readthrough and active_shelf.shelf.identifier != 'read' %}
<li role="menuitem" class="dropdown-item p-0">
{% trans "Update progress" as button_text %}
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="progress_update" controls_uid=button_uuid focus="modal_title_progress_update" %}
</li>
{% endif %}
{% if active_shelf.shelf %}
<li role="menuitem" class="dropdown-item p-0">
<form name="shelve" action="/unshelve/" method="post">
{% csrf_token %}
<input type="hidden" name="book" value="{{ active_shelf.book.id }}">
<input type="hidden" name="shelf" value="{{ active_shelf.shelf.id }}">
<button class="button is-fullwidth is-small{% if dropdown %} is-radiusless{% endif %} is-danger is-light" type="submit">
{% blocktrans with name=active_shelf.shelf.name %}Remove from {{ name }}{% endblocktrans %}
</button>
</form>
</li>
{% endif %}
{% endif %}
{% endwith %}

View file

@ -49,7 +49,7 @@ def get_next_shelf(current_shelf):
if current_shelf == "reading":
return "read"
if current_shelf == "read":
return "read"
return "complete"
return "to-read"

View file

@ -36,9 +36,9 @@ def get_title(book, too_short=5):
@register.simple_tag(takes_context=False)
def comparison_bool(str1, str2):
"""idk why I need to write a tag for this, it reutrns a bool"""
return str1 == str2
def comparison_bool(str1, str2, boolean=True):
"""idk why I need to write a tag for this, it returns a bool"""
return boolean and str1 == str2
@register.filter(is_safe=True)