wip: start working on moving from modal to dialog

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,
         )