153-turbo-modals-improved

corsego · Nov 19, 2023 · 6f48690 · 6f48690
1 parent c2cecba
commit 6f48690
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 24 deletions.
diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb
@@ -1,5 +1,6 @@
 class CommentsController < ApplicationController
   before_action :set_comment, only: %i[ show edit update destroy ]
+  before_action :ensure_frame_response, only: %i[ new edit show ]
 
   # GET /comments or /comments.json
   def index
@@ -76,6 +77,11 @@ def destroy
   end
 
   private
+
+    def ensure_frame_response
+      redirect_to root_path unless turbo_frame_request?
+    end
+
     # Use callbacks to share common setup or constraints between actions.
     def set_comment
       @comment = Comment.find(params[:id])

diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
@@ -3,44 +3,43 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="dialog"
 export default class extends Controller {
-  static targets = ["modal", "frame"]
-
   connect() {
-    this.modalTarget.addEventListener("close", this.enableBodyScroll.bind(this))
+    this.open()
+    // needed because ESC key does not trigger close event
+    this.element.addEventListener("close", this.enableBodyScroll.bind(this))
   }
 
   disconnect() {
-    this.modalTarget.removeEventListener("close", this.enableBodyScroll.bind(this))
+    this.element.removeEventListener("close", this.enableBodyScroll.bind(this))
   }
 
   // hide modal on successful form submission
   // data-action="turbo:submit-end->turbo-modal#submitEnd"
   submitEnd(e) {
     if (e.detail.success) {
-      // console.log(e.detail.success)
       this.close()
     }
   }
 
   open() {
-    // this.modalTarget.show()
-    this.modalTarget.showModal()
+    this.element.showModal()
     document.body.classList.add('overflow-hidden')
   }
 
   close() {
-    this.modalTarget.close()
-    // document.body.classList.remove('overflow-hidden')
-    this.frameTarget.removeAttribute("src")
-    this.frameTarget.innerHTML = ""
+    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) {
-    if (event.target === this.modalTarget) {
+    if (event.target === this.element) {
       this.close()
     }
   }

diff --git a/app/views/comments/edit.html.erb b/app/views/comments/edit.html.erb
@@ -1,4 +1,4 @@
-<%= turbo_frame_tag :modal do %>
+<%= render 'layouts/turbo_dialog' do %>
   <h1 class="font-bold text-4xl">Editing comment</h1>
   <%= render "form", comment: @comment %>
   <%= link_to "Show this comment", @comment, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

diff --git a/app/views/comments/new.html.erb b/app/views/comments/new.html.erb
@@ -1,4 +1,4 @@
-<%= turbo_frame_tag :modal do %>
+<%= render 'layouts/turbo_dialog' do %>
   <div data-action="turbo:submit-end->dialog#submitEnd">
     <h1 class="font-bold text-4xl">New comment</h1>
     <%= render "form", comment: @comment %>

diff --git a/app/views/comments/show.html.erb b/app/views/comments/show.html.erb
@@ -1,4 +1,4 @@
-<%= turbo_frame_tag :modal do %>
+<%= render 'layouts/turbo_dialog' do %>
   <div class="mx-auto">
     <% if notice.present? %>
       <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>

diff --git a/app/views/layouts/_turbo_dialog.html.erb b/app/views/layouts/_turbo_dialog.html.erb
@@ -0,0 +1,11 @@
+<%= turbo_frame_tag :modal do %>
+  <dialog data-controller="dialog" data-action="click->dialog#clickOutside"
+          class="backdrop:bg-gray-400 backdrop:bg-opacity-90 z-10 rounded-md border-4 bg-sky-900 w-full md:w-2/3 mt-24">
+    <div class="p-8">
+      <button class="bg-slate-400" data-action="dialog#close">Cancel</button>
+
+      <%= yield %>
+
+    </div>
+  </dialog>
+<% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -11,15 +11,8 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body data-controller="dialog" data-action="click->dialog#clickOutside">
-    <button data-action="click->dialog#open">Open dialog</button>
-    <dialog data-dialog-target="modal"
-            class="backdrop:bg-gray-400 backdrop:bg-opacity-90 z-10 rounded-md border-4 bg-sky-900 w-full md:w-2/3 mt-24">
-      <div class="p-8">
-        <button class="bg-slate-400" data-action="dialog#close">Cancel</button>
-        <%= turbo_frame_tag :modal, data: {dialog_target: "frame"} %>
-      </div>
-    </dialog>
+  <body>
+    <%= turbo_frame_tag :modal %>
     <main class="container mx-auto mt-28 px-5 flex">
       <%= yield %>
     </main>