progress on modal functionality and form styling

assets/js/_bs_modal.js

@@ -0,0 +1,34 @@
+// Helping bootstrap modals work with liveview
+// preserving animations
+import Modal from "bootstrap/js/dist/modal";
+// import { Modal } from "bootstrap";
+
+export const BsModal = {
+  mounted() {
+    // when the liveview mounts, create the BS modal
+    const modal = new Modal(this.el);
+    // and trigger BS modal to show
+    modal.show();
+
+    // when the BS modal hides, send 'close' to the liveview
+    this.el.addEventListener("hidden.bs.modal", (event) => {
+      this.pushEventTo(`#${this.el.getAttribute("id")}`, "close", {});
+      modal.dispose();
+    });
+
+    // liveview can send this event to tell BS modal to close
+    // ex.: on successful form save, instead of immediate redirect
+    //   this event hides the BS modal, which triggers the above,
+    //   which sends 'close' to liveview and disposes the BS modal
+    this.handleEvent("modal-please-hide", (payload) => {
+      modal.hide();
+    });
+  },
+
+  destroyed() {
+    // when the liveview is destroyed,
+    // modal-backdrop must be forcibly removed
+    const backdrop = document.querySelector(".modal-backdrop");
+    if (backdrop) backdrop.parentElement.removeChild(backdrop);
+  },
+};

assets/js/app.js

@@ -37,17 +37,20 @@ import topbar from "topbar";
 import { LiveSocket } from "phoenix_live_view";
 
 // Bootstrap v5 js imports
+import "bootstrap/js/dist/alert";
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
-import "bootstrap/js/dist/alert";
-// Boostrap helpers
+// Bootstrap helpers
 import "./_hamburger-helper";
 import "./_form-validity";
+// Bootstrap-liveview helpers
 import { AlertRemover } from "./_alert-remover";
+import { BsModal } from "./_bs_modal";
 
 // LiveSocket setup
 let Hooks = {};
 Hooks.AlertRemover = AlertRemover;
+Hooks.BsModal = BsModal;
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");