fix/Listen for global modal close event on modal target

Author: LewisYoul

app/javascript/controllers/modal_controller.js

@@ -24,8 +24,6 @@ export default class extends Controller {
   }
 
   close() {
-    const modal = document.getElementById('modal')
-
-    if (modal) { modal.remove(); };
+    if (this.hasModalTarget) { this.modalTarget.remove() }
   }
 }

app/javascript/controllers/registrations_controller.js

@@ -19,15 +19,7 @@ export default class extends Controller {
     this.toast.display(data.message)
   }
 
-  presentModal(event) {
-    this.modal.present(event.target.dataset.modalUrl)
-  }
-
   get toast() {
     return document.getElementById('toast').toast
   }
-
-  get modal() {
-    return document.getElementById('modal').modal
-  }
 }

app/javascript/controllers/sessions_controller.js

@@ -19,15 +19,7 @@ export default class extends Controller {
     this.toast.display(data.message)
   }
 
-  presentModal(event) {
-    this.modal.present(event.target.dataset.modalUrl)
-  }
-
   get toast() {
     return document.getElementById('toast').toast
   }
-
-  get modal() {
-    return document.getElementById('modal').modal
-  }
 }

app/javascript/controllers/snippets_controller.js

@@ -28,7 +28,7 @@ export default class extends Controller {
     window.dispatchEvent(createEvent)
 
     this.toast.display('Your snippet was created!')
-    this.modal.close()
+    this.emitModalClose();
   }
 
   onCreateError(event) {
@@ -42,19 +42,14 @@ export default class extends Controller {
     window.dispatchEvent(updateEvent)
 
     this.toast.display('Your snippet was updated!')
-    this.modal.close()
+    this.emitModalClose();
   }
 
   onUpdateError(event) {
     const [data, status, xhr] = event.detail;
     this.errorsTarget.innerHTML = data.element;
   }
 
-  presentModal(event) {
-    event.preventDefault()
-    this.modal.present(event.currentTarget.dataset.modalUrl)
-  }
-
   view_snippet(event) {
     event.stopPropagation()
     const snippetUrl = event.currentTarget.dataset.snippetUrl
@@ -117,14 +112,19 @@ export default class extends Controller {
     axios.post(this.confirmPath, { folder_id: this.selectedFolderId }, { headers: { 'accept': 'application/json' } })
       .then(res => {
         this.toast.display(res.data.message)
-        this.modal.close()
+        this.emitModalClose();
       })
       .catch(error => {
         console.error(error)
         this.toast.display('Unable to file snippet')
       })
   }
 
+  emitModalClose() {
+    const event = new CustomEvent('close-modal')
+    window.dispatchEvent(event)
+  }
+
   get url() {
     return this.data.get('url')
   }

app/javascript/controllers/users_controller.js

@@ -1,14 +1,3 @@
 import { Controller } from 'stimulus';
 
-export default class extends Controller {
-
-  presentModal(event) {
-    event.stopPropagation()
-    const target = event.currentTarget || event.target
-    this.modal.present(target.dataset.modalUrl)
-  }
-
-  get modal() {
-    return document.getElementById('modal').modal
-  }
-}
+export default class extends Controller {}

app/views/layouts/modal.html.erb

@@ -1,4 +1,9 @@
-<div id="modal" data-controller="modal" data-modal-target="modal" class="modal-mask">
+<div id="modal" 
+  data-controller="modal"
+  data-modal-target="modal"
+  data-action="close-modal@window->modal#close"
+  class="modal-mask"
+>
   <div class="modal-wrapper">
     <div class="card--container card--container-padding modal-container">
       <div class="modal-header">