Refactor modal handling to use Bootstrap's JavaScript API instead of jQuery (#389)

Author: tlambert03

backend/proteins/templates/proteins/_microscope_include.html

@@ -23,7 +23,7 @@
         {% if embeddable %}
         <span class='text-info' id="settings-button" data-bs-toggle="tooltip" data-bs-placement="right" title="Settings">{% icon "settings" data_bs_toggle="modal" data_bs_target="#settingsModal" %}</span>
         {% endif %}
-        <span class='text-info' id="share-button" data-bs-toggle="tooltip" data-bs-placement="right" title="Share current configuration" data-bs-toggle="modal" data-bs-target="#shareModal">{% icon "share-square" %}</span>
+        <span class='text-info' id="share-button" data-bs-toggle="tooltip" data-bs-placement="right" title="Share current configuration">{% icon "share-square" %}</span>
         <span class="pin-wrapper rotate-90" id="stickyPin" data-bs-toggle="tooltip" data-bs-placement="right" title="Keep spectra graph on top when scrolling">{% icon "thumbtack" %}</span>
       </div>
       <div class="btn-group btn-group-xs scale-btns" role="group">

backend/proteins/templates/proteins/protein_detail.html

@@ -222,7 +222,7 @@ <h3>Transitions</h3>
 			</div>
 			<div class="align-self-end text-sm-end mt-1">
 				<div class="align-self-end text-sm-end mt-1">
-					<a href="#" class='text-info' data-bs-toggle="modal" id='show_transition_modal' data-action-url="{% url 'proteins:update_transitions' slug=protein.slug %}">
+					<a href="#" class='text-info' id='show_transition_modal' data-action-url="{% url 'proteins:update_transitions' slug=protein.slug %}">
 						<small class="d-none d-sm-inline">Edit state transitions</small>
 						<button type="button" class="btn btn-info w-100 mt-3 d-block d-sm-none">{% icon "exchange" class_="me-2" %}Edit state transitions</button>
 					</a>
@@ -232,7 +232,7 @@ <h3>Transitions</h3>
 		{% endif %}
     {% if protein.states.count > 1 and protein.transitions.count == 0 %}
       <div class="align-self-end text-sm-end mt-1">
-        <a href="#" class='text-info' data-bs-toggle="modal" id='show_transition_modal' data-action-url="{% url 'proteins:update_transitions' slug=protein.slug %}">
+        <a href="#" class='text-info' id='show_transition_modal' data-action-url="{% url 'proteins:update_transitions' slug=protein.slug %}">
           <small class="d-none d-sm-inline">Edit state transitions</small>
           <button type="button" class="btn btn-info w-100 mt-3 d-block d-sm-none">{% icon "exchange" class_="me-2" %}Edit state transitions</button>
         </a>

frontend/src/css/_forms.scss

@@ -80,6 +80,48 @@ i.arrow {
   }
 }
 
+// Transition formset styling
+.trans_formset_div {
+  .formset-form {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid $gray-300;
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+
+    .transition-col {
+      flex: 1;
+    }
+  }
+
+  .transDelete {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: 2.25rem; // Align with form inputs (accounting for help text)
+    border-radius: 50%;
+    color: $gray-500;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+
+    &:hover {
+      color: $danger;
+      background-color: rgba($danger, 0.1);
+    }
+
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+}
+
 
 
 #microscopeFormTabs {

frontend/src/index.js

@@ -229,8 +229,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
               // Show error modal if available
               const errorModal = document.getElementById("errorModal")
-              if (errorModal && window.$ && window.$.fn.modal) {
-                window.$(errorModal).modal("show")
+              if (errorModal && window.bootstrap?.Modal) {
+                bootstrap.Modal.getOrCreateInstance(errorModal).show()
               }
 
               if (window.Sentry) {

frontend/src/js/project.js

@@ -767,15 +767,19 @@ $(() => {
         $("#transitionForm").html(data)
 
         // Use Bootstrap's shown.bs.modal event to ensure modal is fully visible
-        const $modal = $("#transitionModal")
+        const transitionModalEl = document.getElementById("transitionModal")
         // Remove any previous handlers to avoid duplicates
-        $modal.off("shown.bs.modal")
+        $(transitionModalEl).off("shown.bs.modal")
         // Register formset AFTER modal is fully shown
-        $modal.one("shown.bs.modal", () => {
-          register_transition_form()
-        })
+        transitionModalEl.addEventListener(
+          "shown.bs.modal",
+          () => {
+            register_transition_form()
+          },
+          { once: true }
+        )
         // Now show the modal (which will trigger the event above)
-        $modal.modal()
+        bootstrap.Modal.getOrCreateInstance(transitionModalEl).show()
       })
       .catch((error) => {
         console.error("Transition form fetch error:", error)
@@ -928,7 +932,7 @@ $(document).ready(() => {
         if (!$("#collectionSelect").length) {
           // only retrieve once
           $("#collectionSelection").prepend(data.widget)
-          $("#collectionModal").modal()
+          bootstrap.Modal.getOrCreateInstance(document.getElementById("collectionModal")).show()
         }
       })
   })
@@ -949,7 +953,7 @@ $(document).ready(() => {
       cache: "no-store",
     })
 
-    $("#collectionModal").modal("hide")
+    bootstrap.Modal.getOrCreateInstance(document.getElementById("collectionModal")).hide()
   })
 })
 
@@ -960,7 +964,7 @@ $(() => {
     .parent()
     .find(".select-add-button")
     .click(() => {
-      $("#organismModal").modal()
+      bootstrap.Modal.getOrCreateInstance(document.getElementById("organismModal")).show()
     })
 
   $("#taxonomyModalForm").submit(function (e) {
@@ -990,7 +994,7 @@ $(() => {
             .then((_data) => {
               $(`<option value="${tax_id}">${sci_name} </option>`).appendTo("#id_parent_organism")
               $(`#id_parent_organism option[value="${tax_id}"]`).prop("selected", true)
-              $("#organismModal").modal("hide")
+              bootstrap.Modal.getOrCreateInstance(document.getElementById("organismModal")).hide()
             })
         } else {
           $("#id_taxonomy_id").addClass("is-invalid")

frontend/src/microscope-form.js

@@ -38,14 +38,18 @@ $("#microscopeform").submit((e) => {
     })
     if (multidichroics.length > 0 || multiex.length > 0) {
       e.preventDefault()
-      $("#sureModal")
-        .one("hidden.bs.modal", () => {
+      const sureModalEl = document.getElementById("sureModal")
+      sureModalEl.addEventListener(
+        "hidden.bs.modal",
+        () => {
           if ($(document.activeElement).attr("id") === "save") {
             confirmError = false
             $("#microscopeform").submit()
           }
-        })
-        .modal()
+        },
+        { once: true }
+      )
+      bootstrap.Modal.getOrCreateInstance(sureModalEl).show()
     }
   } else {
     $("#spinner").css("display", "inline")

frontend/src/microscope.js

@@ -851,8 +851,8 @@ window.initMicroscope = () => {
 
       $(".switchmodal").click((e) => {
         e.preventDefault()
-        $("#settingsModal").modal("hide")
-        $("#embedModal").modal("show")
+        bootstrap.Modal.getOrCreateInstance(document.getElementById("settingsModal")).hide()
+        bootstrap.Modal.getOrCreateInstance(document.getElementById("embedModal")).show()
       })
     })
 
@@ -2021,7 +2021,7 @@ window.initMicroscope = () => {
       const link = build_current_uri()
       $("#shareLink").val(link)
       $("#mailLink").attr("href", $("#mailLink").data("mailinfo") + encodeURIComponent(link))
-      $("#shareModal").modal("show")
+      bootstrap.Modal.getOrCreateInstance(document.getElementById("shareModal")).show()
     })
   })() // End of inner IIFE
 }