diff --git a/app/javascript/controllers/auto_reload_controller.js b/app/javascript/controllers/auto_reload_controller.js index 5b05c0c..47a275f 100644 --- a/app/javascript/controllers/auto_reload_controller.js +++ b/app/javascript/controllers/auto_reload_controller.js @@ -4,17 +4,46 @@ export default class extends Controller { static values = { interval: { type: Number, default: 10000 } } connect() { - this.timer = setInterval(() => { - if (document.hidden) return - if (window.Turbo?.visit) { - window.Turbo.visit(window.location.href, { action: "replace" }) - } else { - window.location.reload() - } - }, this.intervalValue) + this.timer = setInterval(() => this.refresh(), this.intervalValue) } disconnect() { clearInterval(this.timer) } + + refresh() { + if (document.hidden) return + + const frame = this.element.closest("turbo-frame") + if (frame && typeof frame.reload === "function") { + this.reloadFrame(frame) + return + } + + this.refreshPreservingScroll() + } + + reloadFrame(frame) { + if (frame.hasAttribute("busy")) return + + const url = window.location.href + if (frame.getAttribute("src") === url) { + frame.reload() + } else { + frame.setAttribute("src", url) + } + } + + refreshPreservingScroll() { + const { scrollX, scrollY } = window + const restore = () => window.scrollTo(scrollX, scrollY) + document.addEventListener("turbo:render", restore, { once: true }) + document.addEventListener("turbo:load", restore, { once: true }) + + if (window.Turbo?.visit) { + window.Turbo.visit(window.location.href, { action: "replace" }) + } else { + window.location.reload() + } + } } diff --git a/app/views/mailings/dashboard.html.erb b/app/views/mailings/dashboard.html.erb index f5e46dc..479f760 100644 --- a/app/views/mailings/dashboard.html.erb +++ b/app/views/mailings/dashboard.html.erb @@ -1,4 +1,5 @@ <% refresh = @active_mailings.any? %> +<%= turbo_frame_tag "mailings_dashboard_live", target: "_top", refresh: "morph" do %> <%= tag.div class: "space-y-6", data: (refresh ? { controller: "auto-reload", auto_reload_interval_value: 10_000 } : {}) do %>