bookwyrm/bookwyrm/templates/book/edit/edit_book_form.html
Jascha Urbach 105144a026
New approach: Event Delegation
This works as follows:

The div where the input fields for the subjects live got an id. The script now listens to all keypresses in this div, but only does something if it is within an INPUT field. If it is an INPUT field within this div, it looks for keyCode 13. If it is 13, preventDefault() is triggered.  Else nothing happens.
2022-12-20 11:36:14 +01:00

382 lines
17 KiB
HTML

{% load i18n %}
{% load static %}
{% if form.non_field_errors %}
<div class="block">
<p class="notification is-danger">{{ form.non_field_errors }}</p>
</div>
{% endif %}
{% csrf_token %}
<input type="hidden" name="last_edited_by" value="{{ request.user.id }}">
<input type="hidden" name="parent_work" value="{% firstof book.parent_work.id form.parent_work %}">
<div class="columns">
<div class="column is-half">
<section class="block">
<h2 class="title is-4">
{% trans "Metadata" %}
</h2>
<div class="box">
<div class="field">
<label class="label" for="id_title">
{% trans "Title:" %}
</label>
<input type="text" name="title" value="{{ form.title.value|default:'' }}" maxlength="255" class="input" required="" id="id_title" aria-describedby="desc_title">
{% include 'snippets/form_errors.html' with errors_list=form.title.errors id="desc_title" %}
</div>
<div class="field">
<label class="label" for="id_subtitle">
{% trans "Subtitle:" %}
</label>
<input type="text" name="subtitle" value="{{ form.subtitle.value|default:'' }}" maxlength="255" class="input" id="id_subtitle" aria-describedby="desc_subtitle">
{% include 'snippets/form_errors.html' with errors_list=form.subtitle.errors id="desc_subtitle" %}
</div>
<div class="field">
<label class="label" for="id_description">
{% trans "Description:" %}
</label>
{{ form.description }}
{% include 'snippets/form_errors.html' with errors_list=form.description.errors id="desc_description" %}
</div>
<div class="columns">
<div class="column is-two-thirds">
<div class="field">
<label class="label" for="id_series">
{% trans "Series:" %}
</label>
<input type="text" class="input" name="series" id="id_series" value="{{ form.series.value|default:'' }}" aria-describedby="desc_series">
{% include 'snippets/form_errors.html' with errors_list=form.series.errors id="desc_series" %}
</div>
</div>
<div class="column is-one-third">
<div class="field">
<label class="label" for="id_series_number">
{% trans "Series number:" %}
</label>
{{ form.series_number }}
{% include 'snippets/form_errors.html' with errors_list=form.series_number.errors id="desc_series_number" %}
</div>
</div>
</div>
<div class="field">
<label class="label" for="id_languages">
{% trans "Languages:" %}
</label>
{{ form.languages }}
<span class="help" id="desc_languages_help">
{% trans "Separate multiple values with commas." %}
</span>
{% include 'snippets/form_errors.html' with errors_list=form.languages.errors id="desc_languages" %}
</div>
<div class="field" id="subjects">
<label class="label" for="id_add_subjects">
{% trans "Subjects:" %}
</label>
{% for subject in book.subjects %}
<label class="label is-sr-only" for="id_add_subject={% if not forloop.first %}-{{forloop.counter}}{% endif %}">
{% trans "Add subject" %}
</label>
<div class="field has-addons" id="subject_field_wrapper_{{ forloop.counter }}">
<div class="control is-expanded">
<input
id="id_add_subject-{{ forloop.counter }}"
type="text"
name="subjects"
value="{{ subject }}"
class="input"
>
</div>
<div class="control">
<button
class="button is-danger is-light"
type="button"
data-remove="subject_field_wrapper_{{ forloop.counter }}"
>
{% trans "Remove subject" as text %}
<span class="icon icon-x" title="{{ text }}">
<span class="is-sr-only">{{ text }}</span>
</span>
</button>
</div>
</div>
{% endfor %}
<input
class="input"
type="text"
name="subjects"
id="id_add_subject"
value="{{ subject }}"
{% if confirm_mode %}readonly{% endif %}
>
{% include 'snippets/form_errors.html' with errors_list=form.subjects.errors id="desc_subjects" %}
</div>
<span class="help">
<button class="button is-small" type="button" data-duplicate="id_add_subject" id="another_subject_field">
<span class="icon icon-plus" aria-hidden="true"></span>
<span>{% trans "Add Another Subject" %}</span>
</button>
</span>
</div>
</section>
<section class="block">
<h2 class="title is-4">
{% trans "Publication" %}
</h2>
<div class="box">
<div class="field">
<label class="label" for="id_publishers">
{% trans "Publisher:" %}
</label>
{{ form.publishers }}
<span class="help" id="desc_publishers_help">
{% trans "Separate multiple values with commas." %}
</span>
{% include 'snippets/form_errors.html' with errors_list=form.publishers.errors id="desc_publishers" %}
</div>
<div class="field">
<label class="label" for="id_first_published_date">
{% trans "First published date:" %}
</label>
{{ form.first_published_date }}
{% include 'snippets/form_errors.html' with errors_list=form.first_published_date.errors id="desc_first_published_date" %}
</div>
<div class="field">
<label class="label" for="id_published_date">
{% trans "Published date:" %}
</label>
{{ form.published_date }}
{% include 'snippets/form_errors.html' with errors_list=form.published_date.errors id="desc_published_date" %}
</div>
</div>
</section>
<section class="block">
<h2 class="title is-4">
{% trans "Authors" %}
</h2>
<div class="box">
{% if book.authors.exists %}
{# preserve authors if the book is unsaved #}
<input type="hidden" name="authors" value="{% for author in book.authors.all %}{{ author.id }},{% endfor %}">
<fieldset>
{% for author in book.authors.all %}
<div class="is-flex is-justify-content-space-between">
<label class="label mb-2">
<input type="checkbox" name="remove_authors" value="{{ author.id }}" {% if author.id|stringformat:"i" in remove_authors %}checked{% endif %} aria-describedby="desc_remove_author_{{author.id}}">
{% blocktrans with name=author.name %}Remove {{ name }}{% endblocktrans %}
</label>
<p class="help" id="desc_remove_author_{{author.id}}">
<a href="{{ author.local_path }}">{% blocktrans with name=author.name %}Author page for {{ name }}{% endblocktrans %}</a>
</p>
</div>
{% endfor %}
</fieldset>
{% endif %}
<div class="field">
<label class="label" for="id_add_author">
{% trans "Add Authors:" %}
</label>
{% for author in add_author %}
<label class="label is-sr-only" for="id_add_author{% if not forloop.first %}-{{forloop.counter}}{% endif %}">{% trans "Add Author" %}</label>
<input class="input" type="text" name="add_author" id="id_add_author{% if not forloop.first %}-{{forloop.counter}}{% endif %}" placeholder="{% trans 'Jane Doe' %}" value="{{ author }}" {% if confirm_mode %}readonly{% endif %}>
{% empty %}
<label class="label is-sr-only" for="id_add_author">{% trans "Add Author" %}</label>
<input class="input" type="text" name="add_author" id="id_add_author" placeholder="{% trans 'Jane Doe' %}" value="{{ author }}" {% if confirm_mode %}readonly{% endif %}>
{% endfor %}
</div>
<span class="help">
<button class="button is-small" type="button" data-duplicate="id_add_author" id="another_author_field">
<span class="icon icon-plus" aria-hidden="true"></span>
<span>{% trans "Add Another Author" %}</span>
</button>
</span>
</div>
</section>
</div>
<div class="column is-half">
<section class="block">
<h2 class="title is-4">
{% trans "Cover" %}
</h2>
<div class="box">
<div class="columns">
{% if book.cover %}
<div class="column is-3 is-cover">
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-xl-mobile is-w-auto-tablet' size_mobile='xlarge' size='large' %}
</div>
{% endif %}
<div class="column">
<div class="field">
<label class="label" for="id_cover">
{% trans "Upload cover:" %}
</label>
{{ form.cover }}
</div>
<div class="field">
<label class="label" for="id_cover_url">
{% trans "Load cover from url:" %}
</label>
<input class="input" name="cover-url" id="id_cover_url" type="url" value="{{ cover_url|default:'' }}" aria-describedby="desc_cover">
</div>
{% include 'snippets/form_errors.html' with errors_list=form.cover.errors id="desc_cover" %}
</div>
</div>
</div>
</section>
<section class="block">
<h2 class="title is-4">
{% trans "Physical Properties" %}
</h2>
<div class="box">
<div class="columns">
<div class="column is-one-third">
<div class="field">
<label class="label" for="id_physical_format">
{% trans "Format:" %}
</label>
{{ form.physical_format }}
{% include 'snippets/form_errors.html' with errors_list=form.physical_format.errors id="desc_physical_format" %}
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="id_physical_format_detail">
{% trans "Format details:" %}
</label>
{{ form.physical_format_detail }}
{% include 'snippets/form_errors.html' with errors_list=form.physical_format_detail.errors id="desc_physical_format_detail" %}
</div>
</div>
</div>
<div class="field">
<label class="label" for="id_pages">
{% trans "Pages:" %}
</label>
{{ form.pages }}
{% include 'snippets/form_errors.html' with errors_list=form.pages.errors id="desc_pages" %}
</div>
</div>
</section>
<section class="block">
<h2 class="title is-4">
{% trans "Book Identifiers" %}
</h2>
<div class="box">
<div class="field">
<label class="label" for="id_isbn_13">
{% trans "ISBN 13:" %}
</label>
{{ form.isbn_13 }}
{% include 'snippets/form_errors.html' with errors_list=form.isbn_13.errors id="desc_isbn_13" %}
</div>
<div class="field">
<label class="label" for="id_isbn_10">
{% trans "ISBN 10:" %}
</label>
{{ form.isbn_10 }}
{% include 'snippets/form_errors.html' with errors_list=form.isbn_10.errors id="desc_isbn_10" %}
</div>
<div class="field">
<label class="label" for="id_openlibrary_key">
{% trans "Openlibrary ID:" %}
</label>
{{ form.openlibrary_key }}
{% include 'snippets/form_errors.html' with errors_list=form.openlibrary_key.errors id="desc_openlibrary_key" %}
</div>
<div class="field">
<label class="label" for="id_inventaire_id">
{% trans "Inventaire ID:" %}
</label>
{{ form.inventaire_id }}
{% include 'snippets/form_errors.html' with errors_list=form.inventaire_id.errors id="desc_inventaire_id" %}
</div>
<div class="field">
<label class="label" for="id_goodreads_key">
{% trans "Goodreads key:" %}
</label>
{{ form.goodreads_key }}
{% include 'snippets/form_errors.html' with errors_list=form.goodreads_key.errors id="desc_goodreads_key" %}
</div>
<div class="field">
<label class="label" for="id_oclc_number">
{% trans "OCLC Number:" %}
</label>
{{ form.oclc_number }}
{% include 'snippets/form_errors.html' with errors_list=form.oclc_number.errors id="desc_oclc_number" %}
</div>
<div class="field">
<label class="label" for="id_asin">
{% trans "ASIN:" %}
</label>
{{ form.asin }}
{% include 'snippets/form_errors.html' with errors_list=form.ASIN.errors id="desc_ASIN" %}
</div>
<div class="field">
<label class="label" for="id_aasin">
{% trans "Audible ASIN:" %}
</label>
{{ form.aasin }}
{% include 'snippets/form_errors.html' with errors_list=form.AASIN.errors id="desc_AASIN" %}
</div>
<div class="field">
<label class="label" for="id_isfdb">
{% trans "ISFDB ID:" %}
</label>
{{ form.isfdb }}
{% include 'snippets/form_errors.html' with errors_list=form.isfdb.errors id="desc_isfdb" %}
</div>
</div>
</section>
</div>
</div>
{% block scripts %}
<script src="{% static "js/forms.js" %}"></script>
{% endblock %}