wip: start working on moving from modal to dialog

apis_bibsonomy/static/js/apis_bibsonomy.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll(".bibsonomydialog").forEach(element => {
+    element.addEventListener("mousedown", function(evt) {
+      evt.target == this && this.close();
+    });
+  });
+});
+
+function tohtml(item) {
+    const span = document.createElement('span');
+    span.innerHTML = item.text;
+    return span;
+}
+document.body.addEventListener("reinit_select2", function(evt) {
+    form = document.getElementById(evt.detail.value);
+    form.querySelectorAll(".listselect2, .modelselect2multiple, .modelselect2").forEach(element => {
+        $(element).select2({
+            ajax: {
+                url: $(element).data("autocomplete-light-url"),
+            },
+            dropdownParent: $(form),
+            templateResult: tohtml,
+            templateSelection: tohtml,
+        });
+    });
+    $('.select2-selection').addClass("form-control");
+});

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/reference_list_modal.html

@@ -1,12 +1,4 @@
-<div class="modal-header">
-  <div class="modal-title" id="referenceModalLabel">References on: {{ object }}</div>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<div class="modal-body">
+References on: {{ object }}
+<div class="mt-4">
 {% include "apis_bibsonomy/partials/reference_list.html" with hxtarget="#modal-here" %}
 </div>
-<div class="modal-footer">
-  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-</div>

apis_bibsonomy/views.py

@@ -50,6 +50,13 @@ def dispatch(self, *args, **kwargs):
             raise Http404
         return super().dispatch(*args, **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