feat: move from bootstrap modal to standard dialog

This is a major refactoring of the whole template structure. The
javascript parts are now all part of `js/apis_bibsonomy.js`, the
stylesheets are now all contained in `css/apis_bibsonomy.css`.
All the media files are included directly in the form instead of
including them in the base template.

There is one less template and route and the overlay is now implemented
using the HTML `dialog` element instead of the bootstrap modal.

apis_bibsonomy/forms.py

@@ -3,9 +3,14 @@
 from dal.autocomplete import ListSelect2
 from crispy_forms.helper import FormHelper
 from crispy_forms.layout import Submit, Layout, Row, Column, Div
+from django.urls import reverse
 
 
 class ReferenceNewForm(ModelForm):
+    class Media:
+        css = {"all": ["css/apis_bibsonomy.css"]}
+        js = ["js/apis_bibsonomy.js"]
+
     class Meta:
         model = Reference
         exclude = ["content_type", "object_id", "bibtex", "attribute"]
@@ -16,6 +21,8 @@ class Meta:
         help_texts = {"folio": None, "notes": None}
 
     def __init__(self, *args, **kwargs):
+        pk = kwargs.pop("pk", None)
+        content_type = kwargs.pop("content_type", None)
         super().__init__(*args, **kwargs)
         self.helper = FormHelper(self)
         if "instance" in kwargs:
@@ -34,3 +41,11 @@ def __init__(self, *args, **kwargs):
             ),
         )
         self.helper.add_input(Submit("submit", "Submit", css_class="btn-primary"))
+
+        if pk and content_type:
+            self.helper.attrs = {
+                "hx-post": reverse(
+                    "apis_bibsonomy:referenceonlistmodal", args=[content_type.id, pk]
+                ),
+                "hx-target": f"#referenceon{content_type.id}_{pk}dlg",
+            }

apis_bibsonomy/static/css/apis_bibsonomy.css

@@ -0,0 +1,14 @@
+.bibsonomydialog {
+    border: 1px solid black;
+    border-radius: .3rem;
+    overflow: visible;
+    padding: 1em;
+    opacity: 1;
+    transform: scale(1);
+    transition: all 0.5s ease-in-out;
+
+    @starting-style {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}

apis_bibsonomy/static/js/apis_bibsonomy.js

@@ -0,0 +1,44 @@
+document.querySelectorAll(".bibsonomydialog").forEach(element => {
+  element.addEventListener("mousedown", function(evt) {
+    evt.target == this && this.close();
+  });
+});
+add_select2_reinit_listener();
+reinit_select2();
+
+function tohtml(item) {
+    const span = document.createElement('span');
+    span.innerHTML = item.text;
+    return span;
+}
+function reinit_select2() {
+  document.querySelectorAll(".listselect2, .modelselect2multiple, .modelselect2").forEach(element => {
+    $(element).select2({
+      ajax: {
+        url: $(element).data("autocomplete-light-url"),
+      },
+      dropdownParent: $(element.form),
+      templateResult: tohtml,
+      templateSelection: tohtml,
+    });
+  });
+  $('.select2-selection').addClass("form-control");
+  autoFillBibsonomyForm();
+
+}
+function add_select2_reinit_listener() {
+  document.body.addEventListener("reinit_select2", function(evt) {
+    reinit_select2()
+    autoFillBibsonomyForm();
+  });
+}
+
+function autoFillBibsonomyForm() {
+  last_bibsonomy_reference = document.getElementById("last_bibsonomy_reference");
+  if (last_bibsonomy_reference) {
+    $('select.listselect2').each(function() {
+      var newOption = new Option(last_bibsonomy_reference.dataset.title, last_bibsonomy_reference.dataset.url, true, true);
+      $(this).append(newOption).trigger("change");
+    });
+  }
+}

apis_bibsonomy/templates/apis_bibsonomy/link_to_reference_on_tag.html

@@ -1,10 +1,11 @@
 <a href="{% url "apis_bibsonomy:referenceonlist" content_type object_pk %}"
    {% if modal %}
    hx-get="{% url "apis_bibsonomy:referenceonlistmodal" content_type object_pk %}"
-   hx-target="#modal-here"
-   data-toggle="modal"
-   data-target="#modal"
+   hx-target="#referenceon{{ content_type }}_{{ object_pk }}dlg"
+   onclick="referenceon{{ content_type }}_{{ object_pk }}dlg.showModal()"
    {% endif %}
    >
 <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z"/></svg>
 </a>
+<dialog id="referenceon{{ content_type }}_{{ object_pk }}dlg" class="bibsonomydialog">
+</dialog>

apis_bibsonomy/templates/apis_bibsonomy/partials/reference_list.html

@@ -1,4 +1,5 @@
-{% include "apis_bibsonomy/partials/fix_select2_bootstrap_overflow.html" %}
+References on: {{ object }}
+<div class="mt-4">
 <ul class="list-group list-group-flush">
 {% for reference in object_list %}
 <li class="list-group-item justify-content-between align-items-center d-flex">
@@ -23,21 +24,14 @@
 </ul>
 
 {% if form %}
+<div id="last_bibsonomy_reference" data-title="{{ request.session.last_bibsonomy_reference_title }}" data-url="{{ request.session.last_bibsonomy_reference.bibs_url }}"></div>
 {% load crispy_forms_tags %}
-<form method="post"
-  hx-post="{{ hxpost|default:request.path }}"
-  hx-target="{{ hxtarget|default:"#referencelist" }}"
-  hx-swap="innerHTML"
-  class="mt-4">
-{% crispy form %}
-</form>
+{% crispy form form.helper %}
 {% endif %}
 
 <script>
 document.body.addEventListener('htmx:configRequest', (event) => {
     event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
 })
 </script>
-{% include "apis_bibsonomy/partials/reinit_select2.html" %}
-{% include "apis_bibsonomy/partials/fix_select2_bootstrap_focus.html" %}
-{% include "apis_bibsonomy/partials/autofill_bibsonomy.html" %}
+</div>

apis_bibsonomy/templates/apis_bibsonomy/reference_list.html

@@ -2,12 +2,8 @@
 
 {% block content %}
 <div class="container">
-<div class="px-4 py-5 my-5 text-center">
-  <h1>References on {{ object }}:</h1>
-</div>
-<div id="referencelist">
-{% url "apis_bibsonomy:referenceonlistpartial" contenttype.id object.id as hxpost %}
-{% include "apis_bibsonomy/partials/reference_list.html" with hxpost=hxpost %}
+<div id="referenceon{{ contenttype.id }}_{{ object.pk }}dlg">
+{% include "apis_bibsonomy/partials/reference_list.html" %}
 </div>
 </div>
 {% endblock content %}

apis_bibsonomy/urls.py

@@ -40,10 +40,5 @@
         views.ReferenceOnListViewModal.as_view(),
         name="referenceonlistmodal",
     ),
-    path(
-        "referenceson/<int:contenttype>/<int:pk>/partial",
-        views.ReferenceOnListViewPartial.as_view(),
-        name="referenceonlistpartial",
-    ),
     path("api/", include(router.urls)),
 ]

apis_bibsonomy/views.py

@@ -50,6 +50,21 @@ def dispatch(self, *args, **kwargs):
             raise Http404
         return super().dispatch(*args, **kwargs)
 
+    def get_form_kwargs(self, *args, **kwargs) -> dict:
+        kwargs = super().get_form_kwargs(*args, **kwargs)
+        kwargs["pk"] = self.pk
+        kwargs["content_type"] = self.contenttype
+        return kwargs
+
+    def get(self, *args, **kwargs):
+        resp = super().get(*args, **kwargs)
+        resp["HX-Trigger-After-Settle"] = (
+            '{"reinit_select2": "referenceon'
+            + f"{self.contenttype.id}_{self.pk}"
+            + 'dlg"}'
+        )
+        return resp
+
     def get_queryset(self):
         return self.model.objects.filter(
             content_type=self.contenttype, object_id=self.pk
@@ -88,20 +103,10 @@ def form_valid(self, form):
 
 
 class ReferenceOnListViewModal(ReferenceOnListView):
-    template_name = "apis_bibsonomy/reference_list_modal.html"
-
-    def get_success_url(self):
-        return reverse(
-            "apis_bibsonomy:referenceonlistmodal",
-            kwargs=self.request.resolver_match.kwargs,
-        )
-
-
-class ReferenceOnListViewPartial(ReferenceOnListView):
     template_name = "apis_bibsonomy/partials/reference_list.html"
 
     def get_success_url(self):
         return reverse(
-            "apis_bibsonomy:referenceonlistpartial",
+            "apis_bibsonomy:referenceonlistmodal",
             kwargs=self.request.resolver_match.kwargs,
         )