diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js index 6d21c207f..cf3944b35 100644 --- a/bookwyrm/static/js/bookwyrm.js +++ b/bookwyrm/static/js/bookwyrm.js @@ -41,6 +41,7 @@ let BookWyrm = new (class { document .querySelectorAll("[data-duplicate]") .forEach((node) => node.addEventListener("click", this.duplicateInput.bind(this))); + document .querySelectorAll("details.dropdown") .forEach((node) => @@ -60,6 +61,9 @@ let BookWyrm = new (class { .querySelectorAll('input[type="file"]') .forEach(bookwyrm.disableIfTooLarge.bind(bookwyrm)); document.querySelectorAll("[data-copytext]").forEach(bookwyrm.copyText.bind(bookwyrm)); + document + .querySelectorAll(".modal.is-active") + .forEach(bookwyrm.handleActiveModal.bind(bookwyrm)); }); } @@ -405,7 +409,7 @@ let BookWyrm = new (class { } /** - * Handle the modal component. + * Handle the modal component with a button trigger. * * @param {Event} event - Event fired by an element * with the `data-modal-open` attribute @@ -416,6 +420,7 @@ let BookWyrm = new (class { * for information about using the modal. */ handleModalButton(event) { + const { handleFocusTrap } = this; const modalButton = event.currentTarget; const targetModalId = modalButton.dataset.modalOpen; const htmlElement = document.querySelector("html"); @@ -427,6 +432,8 @@ let BookWyrm = new (class { // Helper functions function handleModalOpen(modalElement) { + event.preventDefault(); + htmlElement.classList.add("is-clipped"); modalElement.classList.add("is-active"); modalElement.getElementsByClassName("modal-card")[0].focus(); @@ -455,42 +462,48 @@ let BookWyrm = new (class { modalButton.focus(); } - function handleFocusTrap(event) { - if (event.key !== "Tab") { - return; - } - - const focusableEls = event.currentTarget.querySelectorAll( - [ - "a[href]:not([disabled])", - "button:not([disabled])", - "textarea:not([disabled])", - 'input:not([type="hidden"]):not([disabled])', - "select:not([disabled])", - "details:not([disabled])", - '[tabindex]:not([tabindex="-1"]):not([disabled])', - ].join(",") - ); - const firstFocusableEl = focusableEls[0]; - const lastFocusableEl = focusableEls[focusableEls.length - 1]; - - if (event.shiftKey) { - /* Shift + tab */ if (document.activeElement === firstFocusableEl) { - lastFocusableEl.focus(); - event.preventDefault(); - } - } /* Tab */ else { - if (document.activeElement === lastFocusableEl) { - firstFocusableEl.focus(); - event.preventDefault(); - } - } - } - // Open modal handleModalOpen(modal); } + /** + * Handle the modal component when opened at page load. + * + * @param {Element} modalElement - Active modal element + * @return {undefined} + * + */ + handleActiveModal(modalElement) { + if (!modalElement) { + return; + } + + const { handleFocusTrap } = this; + + modalElement.getElementsByClassName("modal-card")[0].focus(); + + const closeButtons = modalElement.querySelectorAll("[data-modal-close]"); + + closeButtons.forEach((button) => { + button.addEventListener("click", function () { + handleModalClose(modalElement); + }); + }); + + document.addEventListener("keydown", function (event) { + if (event.key === "Escape") { + handleModalClose(modalElement); + } + }); + + modalElement.addEventListener("keydown", handleFocusTrap); + + function handleModalClose(modalElement) { + modalElement.removeEventListener("keydown", handleFocusTrap); + history.back(); + } + } + /** * Display pop up window. * diff --git a/bookwyrm/templates/author/author.html b/bookwyrm/templates/author/author.html index 66ecb0625..2f3ed6f03 100644 --- a/bookwyrm/templates/author/author.html +++ b/bookwyrm/templates/author/author.html @@ -92,10 +92,11 @@ {% trans "View on OpenLibrary" %} {% if request.user.is_authenticated and perms.bookwyrm.edit_book %} - {% with controls_text="ol_sync" controls_uid=author.id %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_ol_sync" class="is-small" icon_with_text="download" %} - {% include "author/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" %} - {% endwith %} + + {% include "author/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" id="openlibrary_sync" %} {% endif %} {% endif %} @@ -107,10 +108,11 @@ {% if request.user.is_authenticated and perms.bookwyrm.edit_book %} - {% with controls_text="iv_sync" controls_uid=author.id %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_iv_sync" class="is-small" icon_with_text="download" %} - {% include "author/sync_modal.html" with source="inventaire.io" source_name="Inventaire" %} - {% endwith %} + + {% include "author/sync_modal.html" with source="inventaire.io" source_name="Inventaire" id="inventaire_sync" %} {% endif %} {% endif %} diff --git a/bookwyrm/templates/author/sync_modal.html b/bookwyrm/templates/author/sync_modal.html index a061ada80..a6e032cbf 100644 --- a/bookwyrm/templates/author/sync_modal.html +++ b/bookwyrm/templates/author/sync_modal.html @@ -19,12 +19,8 @@ {% endblock %} {% block modal-footer %} - - -{% trans "Cancel" as button_text %} -{% include 'snippets/toggle/toggle_button.html' with text=button_text %} + + {% endblock %} {% block modal-form-close %}{% endblock %} diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html index 4903da874..19dbccbd6 100644 --- a/bookwyrm/templates/book/book.html +++ b/bookwyrm/templates/book/book.html @@ -63,7 +63,11 @@
{% if not book.cover %} {% if user_authenticated %} - - {% include 'book/cover_add_modal.html' with book=book controls_text="add_cover" controls_uid=book.id %} + {% join "add_cover" book.id as modal_id %} + {% include 'book/cover_add_modal.html' with id=modal_id %} {% if request.GET.cover_error %}

{% trans "Failed to load cover" %}

{% endif %} @@ -117,23 +122,30 @@ {% trans "Load data" as button_text %} {% if book.openlibrary_key %}

- {% trans "View on OpenLibrary" %} + + {% trans "View on OpenLibrary" %} + {% if request.user.is_authenticated and perms.bookwyrm.edit_book %} - {% with controls_text="ol_sync" controls_uid=book.id %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_ol_sync" class="is-small" icon_with_text="download" %} - {% include "book/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" %} - {% endwith %} + + {% include "book/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" id="openlibrary_sync" %} {% endif %}

{% endif %} {% if book.inventaire_id %}

- {% trans "View on Inventaire" %} + + {% trans "View on Inventaire" %} + + {% if request.user.is_authenticated and perms.bookwyrm.edit_book %} - {% with controls_text="iv_sync" controls_uid=book.id %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_iv_sync" class="is-small" icon_with_text="download" %} - {% include "book/sync_modal.html" with source="inventaire.io" source_name="Inventaire" %} - {% endwith %} + + {% include "book/sync_modal.html" with source="inventaire.io" source_name="Inventaire" id="inventaire_sync" %} {% endif %}

{% endif %} diff --git a/bookwyrm/templates/book/cover_add_modal.html b/bookwyrm/templates/book/cover_add_modal.html index f09b44951..e8207ff44 100644 --- a/bookwyrm/templates/book/cover_add_modal.html +++ b/bookwyrm/templates/book/cover_add_modal.html @@ -29,8 +29,7 @@ {% block modal-footer %} -{% trans "Cancel" as button_text %} -{% include 'snippets/toggle/toggle_button.html' with text=button_text %} + {% endblock %} -{% block modal-form-close %}{% endblock %} +{% block modal-form-close %}{% endblock %} diff --git a/bookwyrm/templates/snippets/delete_readthrough_modal.html b/bookwyrm/templates/book/delete_readthrough_modal.html similarity index 61% rename from bookwyrm/templates/snippets/delete_readthrough_modal.html rename to bookwyrm/templates/book/delete_readthrough_modal.html index 24d0ff98c..5b3a74cc5 100644 --- a/bookwyrm/templates/snippets/delete_readthrough_modal.html +++ b/bookwyrm/templates/book/delete_readthrough_modal.html @@ -2,11 +2,17 @@ {% load i18n %} {% block modal-title %}{% trans "Delete these read dates?" %}{% endblock %} + {% block modal-body %} {% if readthrough.progress_updates|length > 0 %} -{% blocktrans with count=readthrough.progress_updates|length %}You are deleting this readthrough and its {{ count }} associated progress updates.{% endblocktrans %} + {% blocktrans trimmed with count=readthrough.progress_updates|length %} + You are deleting this readthrough and its {{ count }} associated progress updates. + {% endblocktrans %} +{% else %} + {% trans "This action cannot be un-done" %} {% endif %} {% endblock %} + {% block modal-footer %}
{% csrf_token %} @@ -14,7 +20,6 @@ - {% trans "Cancel" as button_text %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="delete_readthrough" controls_uid=readthrough.id %} +
{% endblock %} diff --git a/bookwyrm/templates/book/readthrough.html b/bookwyrm/templates/book/readthrough.html index 12430f75b..e711ecd00 100644 --- a/bookwyrm/templates/book/readthrough.html +++ b/bookwyrm/templates/book/readthrough.html @@ -1,6 +1,7 @@ {% load i18n %} {% load humanize %} {% load tz %} +{% load utilities %}
@@ -10,14 +11,14 @@ {% if readthrough.finish_date or readthrough.progress %}
  • {% if readthrough.finish_date %} - {{ readthrough.finish_date | localtime | naturalday }}: {% trans "finished" %} + {{ readthrough.finish_date | localtime | naturalday }}: {% trans "finished" %} {% else %} - {% if readthrough.progress_mode == 'PG' %} - {% include 'snippets/page_text.html' with page=readthrough.progress total_pages=book.pages %} - {% else %} - {{ readthrough.progress }}% - {% endif %} + {% if readthrough.progress_mode == 'PG' %} + {% include 'snippets/page_text.html' with page=readthrough.progress total_pages=book.pages %} + {% else %} + {{ readthrough.progress }}% + {% endif %} {% endif %} {% if readthrough.progress %} @@ -47,6 +48,7 @@ {% endif %}
  • {% endif %} + {% if readthrough.start_date %}
  • {{ readthrough.start_date | localtime | naturalday }}: {% trans "started" %}
  • {% endif %} @@ -60,7 +62,11 @@
    {% trans "Delete these read dates" as button_text %} - {% include 'snippets/toggle/toggle_button.html' with class="is-small" text=button_text icon="x" controls_text="delete_readthrough" controls_uid=readthrough.id focus="modal_title_delete_readthrough" %} +
    @@ -79,4 +85,5 @@
    -{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete_readthrough" controls_uid=readthrough.id no_body=True %} +{% join "delete_readthrough" readthrough.id as modal_id %} +{% include 'book/delete_readthrough_modal.html' with id=modal_id %} diff --git a/bookwyrm/templates/book/sync_modal.html b/bookwyrm/templates/book/sync_modal.html index d80bf25fd..6e5df0c0f 100644 --- a/bookwyrm/templates/book/sync_modal.html +++ b/bookwyrm/templates/book/sync_modal.html @@ -19,12 +19,8 @@ {% endblock %} {% block modal-footer %} - - -{% trans "Cancel" as button_text %} -{% include 'snippets/toggle/toggle_button.html' with text=button_text %} + + {% endblock %} {% block modal-form-close %}{% endblock %} diff --git a/bookwyrm/templates/components/modal.html b/bookwyrm/templates/components/modal.html index 2eabd2e2b..3e1cc759b 100644 --- a/bookwyrm/templates/components/modal.html +++ b/bookwyrm/templates/components/modal.html @@ -1,40 +1,33 @@ {% load i18n %} - -
    -
    -
    -
    - {% include 'snippets/privacy_select_no_followers.html' with current=group.privacy %} -
    -
    - -
    -
    -
    +
    {% if group.id %} -
    - {% trans "Delete group" as button_text %} - {% include 'snippets/toggle/toggle_button.html' with class="is-danger" text=button_text icon_with_text="x" controls_text="delete_group" controls_uid=group.id focus="modal_title_delete_group" %} +
    +
    {% endif %} +
    +
    + {% include 'snippets/privacy_select_no_followers.html' with current=group.privacy %} +
    +
    + +
    +
    diff --git a/bookwyrm/templates/lists/delete_list_modal.html b/bookwyrm/templates/lists/delete_list_modal.html index 7861e78c6..aad879529 100644 --- a/bookwyrm/templates/lists/delete_list_modal.html +++ b/bookwyrm/templates/lists/delete_list_modal.html @@ -1,4 +1,4 @@ -{% extends 'components/new_modal.html' %} +{% extends 'components/modal.html' %} {% load i18n %} {% block modal-title %}{% trans "Delete this list?" %}{% endblock %} diff --git a/bookwyrm/templates/snippets/progress_field.html b/bookwyrm/templates/snippets/progress_field.html index d61956ba7..4ceed04cf 100644 --- a/bookwyrm/templates/snippets/progress_field.html +++ b/bookwyrm/templates/snippets/progress_field.html @@ -5,7 +5,7 @@ type="number" name="progress" class="input" - id="id_progress_{{ readthrough.id }}{{ controls_uid }}" + id="{{ field_id }}" value="{{ readthrough.progress }}" {% if progress_required %}required{% endif %} > diff --git a/bookwyrm/templates/snippets/reading_modals/progress_update_modal.html b/bookwyrm/templates/snippets/reading_modals/progress_update_modal.html index 3e0fd45e4..919d21002 100644 --- a/bookwyrm/templates/snippets/reading_modals/progress_update_modal.html +++ b/bookwyrm/templates/snippets/reading_modals/progress_update_modal.html @@ -1,5 +1,6 @@ {% extends 'snippets/reading_modals/layout.html' %} {% load i18n %} +{% load utilities %} {% block modal-title %} {% trans "Update progress" %} @@ -12,8 +13,9 @@ {% endblock %} {% block reading-dates %} - -{% include "snippets/progress_field.html" with progress_required=True %} +{% join "id_progress" uuid as field_id %} + +{% include "snippets/progress_field.html" with progress_required=True id=field_id %} {% endblock %} {% block form %} diff --git a/bookwyrm/templates/snippets/reading_modals/start_reading_modal.html b/bookwyrm/templates/snippets/reading_modals/start_reading_modal.html index 60c7a89e7..861f118f9 100644 --- a/bookwyrm/templates/snippets/reading_modals/start_reading_modal.html +++ b/bookwyrm/templates/snippets/reading_modals/start_reading_modal.html @@ -11,7 +11,7 @@ Start "{{ book_title }}" {% block modal-form-open %}
    - + {% csrf_token %} {% endblock %} diff --git a/bookwyrm/templates/snippets/readthrough_form.html b/bookwyrm/templates/snippets/readthrough_form.html index a68306a33..295ad7c6e 100644 --- a/bookwyrm/templates/snippets/readthrough_form.html +++ b/bookwyrm/templates/snippets/readthrough_form.html @@ -1,4 +1,6 @@ {% load i18n %} +{% load utilities %} + {% csrf_token %} @@ -10,10 +12,11 @@
    {# Only show progress for editing existing readthroughs #} {% if readthrough.id and not readthrough.finish_date %} -