Skip to content

Commit 2d21446

Browse files
jcostdjcostd
committed
Updated modal
1 parent a822056 commit 2d21446

3 files changed

Lines changed: 65 additions & 10 deletions

File tree

‎app/javascript/controllers/dialog_controller.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Controller } from "@hotwired/stimulus"
2+
3+
// Connects to data-controller="dialog"
4+
export default class extends Controller {
5+
connect() {
6+
if (document.documentElement.hasAttribute("data-turbo-preview")) return
7+
8+
this.element.showModal()
9+
10+
this.boundRemove = this.element.remove.bind(this.element)
11+
document.addEventListener("turbo:before-cache", this.boundRemove, { once: true })
12+
}
13+
14+
disconnect() {
15+
document.removeEventListener("turbo:before-cache", this.boundRemove)
16+
}
17+
18+
close() {
19+
this.element.close()
20+
}
21+
22+
cleanUp() {
23+
const frame = this.element.closest("turbo-frame")
24+
if (frame) {
25+
frame.innerHTML = ""
26+
frame.removeAttribute("src")
27+
}
28+
}
29+
}

‎app/views/layouts/application.html.erb‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,22 @@
11
<!DOCTYPE html>
2-
32
<html data-theme="<%= @theme %>">
43
<head>
54
<title><%= content_for(:title) || "Active Core" %></title>
6-
75
<meta name="viewport" content="width=device-width,initial-scale=1">
86
<meta name="apple-mobile-web-app-capable" content="yes">
97
<meta name="application-name" content="Active Core">
108
<meta name="mobile-web-app-capable" content="yes">
11-
12-
<!-- TURBO -->
13-
<meta name="turbo-refresh-method" content="morph">
14-
<meta name="turbo-refresh-scroll" content="preserve">
15-
169
<%= csrf_meta_tags %>
1710
<%= csp_meta_tag %>
1811

1912
<%= yield :head %>
2013

21-
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
22-
<%# = tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
23-
2414
<link rel="icon" href="/icon.png" type="image/png">
2515
<link rel="icon" href="/icon.svg" type="image/svg+xml">
2616
<link rel="apple-touch-icon" href="/icon.png">
2717

18+
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>
19+
2820
<%# Includes all stylesheet files in app/assets/stylesheets %>
2921
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
3022
<%= javascript_importmap_tags %>

‎app/views/layouts/modal.html.erb‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<%= turbo_frame_tag "modal" do %>
2+
3+
<dialog
4+
class="modal modal-bottom sm:modal-middle"
5+
data-controller="dialog"
6+
data-action="close->dialog#cleanUp"
7+
data-turbo-cache="false"
8+
>
9+
10+
<div class="modal-box">
11+
12+
<button
13+
type="button"
14+
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
15+
data-action="click->dialog#close"
16+
>
17+
<%= icon("close", classes: "size-4") %>
18+
</button>
19+
20+
<% if content_for?(:title) %>
21+
<h3 class="font-bold text-xl mb-4">
22+
<%= yield :title %>
23+
</h3>
24+
<% end %>
25+
26+
<div class="mt-4">
27+
<%= yield %>
28+
</div>
29+
30+
</div>
31+
32+
</dialog>
33+
34+
<% end %>

0 commit comments

Comments
 (0)