From 6f4869005c28aca372319cc4f0f9e7e1ddd8a0e1 Mon Sep 17 00:00:00 2001 From: yshmarov Date: Sun, 19 Nov 2023 15:25:54 +0100 Subject: [PATCH] 153-turbo-modals-improved --- app/controllers/comments_controller.rb | 6 +++++ .../controllers/dialog_controller.js | 23 +++++++++---------- app/views/comments/edit.html.erb | 2 +- app/views/comments/new.html.erb | 2 +- app/views/comments/show.html.erb | 2 +- app/views/layouts/_turbo_dialog.html.erb | 11 +++++++++ app/views/layouts/application.html.erb | 11 ++------- 7 files changed, 33 insertions(+), 24 deletions(-) create mode 100644 app/views/layouts/_turbo_dialog.html.erb diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 5fb5cb8..3025b89 100644 --- 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 index bf6a24f..ba766f2 100644 --- a/app/javascript/controllers/dialog_controller.js +++ b/app/javascript/controllers/dialog_controller.js @@ -3,36 +3,35 @@ 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() { @@ -40,7 +39,7 @@ export default class extends Controller { } 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 index a103dc1..0b573a4 100644 --- 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 %>

Editing comment

<%= 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 index b464bcf..52bc3b3 100644 --- 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 %>

New comment

<%= render "form", comment: @comment %> diff --git a/app/views/comments/show.html.erb b/app/views/comments/show.html.erb index 7d7810a..7d076e1 100644 --- 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 %>
<% if notice.present? %>

<%= notice %>

diff --git a/app/views/layouts/_turbo_dialog.html.erb b/app/views/layouts/_turbo_dialog.html.erb new file mode 100644 index 0000000..b395a93 --- /dev/null +++ b/app/views/layouts/_turbo_dialog.html.erb @@ -0,0 +1,11 @@ +<%= turbo_frame_tag :modal do %> + +
+ + + <%= yield %> + +
+ +<% end %> \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 35f200b..79337ca 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -11,15 +11,8 @@ <%= javascript_importmap_tags %> - - - -
- - <%= turbo_frame_tag :modal, data: {dialog_target: "frame"} %> -
- + + <%= turbo_frame_tag :modal %>
<%= yield %>