Model menus, modal edit and layout improvements

app/javascript/controllers/details_list_controller.js

@@ -10,7 +10,7 @@ export default class extends Controller {
     e.preventDefault();
     const id = this.element.dataset["targetId"]
     const el = document.getElementById(id)
-    el.querySelectorAll("details").forEach(el => {
+    el.querySelectorAll("details.success_criterion").forEach(el => {
       el.setAttribute("open", "")
     })
   }
@@ -19,7 +19,7 @@ export default class extends Controller {
     e.preventDefault();
     const id = this.element.dataset["targetId"]
     const el = document.getElementById(id)
-    el.querySelectorAll("details").forEach(el => {
+    el.querySelectorAll("details.success_criterion").forEach(el => {
       el.removeAttribute("open")
     })
   }

app/javascript/controllers/dialog_controller.js

@@ -0,0 +1,53 @@
+// app/javascript/controllers/dialog_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dialog"
+export default class extends Controller {
+  connect() {
+    this.open()
+    console.log("connect dialog", this.element)
+    this.element.addEventListener("turbo:submit-end", e => {
+      this.submitEnd(e) 
+    })
+    this.element.addEventListener("click", e => this.clickOutside(e))
+  }
+
+  disconnect() {
+  }
+
+  // hide modal on successful form submission
+  // data-action="turbo:submit-end->turbo-modal#submitEnd"
+  submitEnd(e) {
+    if (e.detail.success) {
+      this.close()
+    }
+  }
+
+  open() {
+    console.log("open dialog")
+    this.element.showModal()
+    document.body.classList.add('overflow-hidden')
+    this.element.addEventListener("close", this.enableBodyScroll.bind(this))
+  }
+
+  close() {
+    this.element.removeEventListener("close", this.enableBodyScroll.bind(this))
+    this.element.close()
+    // clean up modal content
+    const frame = document.getElementById('modal')
+    frame.removeAttribute("src")
+    frame.innerHTML = ""
+  }
+
+  enableBodyScroll() {
+    document.body.classList.remove('overflow-hidden')
+  }
+
+  clickOutside(event) {
+    console.log("clickOutside", event.target, this)
+    if (event.target === this.element) {
+      this.close()
+    }
+  }
+}
+

app/javascript/controllers/dropdown_menu_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dropdown-menu"
+export default class extends Controller {
+  connect() {
+    const x = this.element
+    this.element.addEventListener("turbo:click", e => {
+      console.log("turbo visit dropdown", e, this.element)
+      this.element.removeAttribute("open");
+    })
+    this.element.addEventListener("turbo:submit-start", e => {
+      console.log("turbo submit dropdown", e, this.element)
+      this.element.removeAttribute("open");
+    })
+  }
+}

app/javascript/controllers/index.js

@@ -19,9 +19,15 @@ application.register("collapse-chevron-toggler", CollapseChevronTogglerControlle
 import DetailsListController from "./details_list_controller"
 application.register("details-list", DetailsListController)
 
+import DialogController from "./dialog_controller"
+application.register("dialog", DialogController)
+
 import DragController from "./drag_controller"
 application.register("drag", DragController)
 
+import DropdownMenuController from "./dropdown_menu_controller"
+application.register("dropdown-menu", DropdownMenuController)
+
 import HelloController from "./hello_controller"
 application.register("hello", HelloController)
 
@@ -48,6 +54,3 @@ application.register("toast", ToastController)
 
 import UnsavedChangesController from "./unsaved_changes_controller"
 application.register("unsaved-changes", UnsavedChangesController)
-
-import Lightbox from '@stimulus-components/lightbox'
-application.register('lightbox', Lightbox)