From c78bb652d5266e8bbf8a343b3baced63997723c5 Mon Sep 17 00:00:00 2001
From: Mike Dalessio <mike@37signals.com>
Date: Sat, 9 Aug 2025 14:09:34 -0400
Subject: [PATCH] Clean up beacon on-visibility-change handling

The previous version was not posting the beacon when the page was
loaded and visible.
---
 app/javascript/controllers/beacon_controller.js | 5 ++++-
 app/views/cards/show.html.erb                   | 4 +---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/javascript/controllers/beacon_controller.js b/app/javascript/controllers/beacon_controller.js
index 2686f5d14..29db1cc66 100644
--- a/app/javascript/controllers/beacon_controller.js
+++ b/app/javascript/controllers/beacon_controller.js
@@ -4,12 +4,15 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static values = { url: String }
 
-  visibilityChanged() {
+  connect() {
     this.#sendBeacon()
+    this.onVisibilityChange = this.#sendBeacon.bind(this);
+    document.addEventListener("visibilitychange", this.onVisibilityChange)
   }
 
   disconnect() {
     this.#sendBeacon()
+    document.removeEventListener("visibilitychange", this.onVisibilityChange)
   }
 
   #sendBeacon() {
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index d4e26b686..f2c74b1cb 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -42,9 +42,7 @@
   <% end %>
 </header>
 
-<div data-controller="beacon lightbox"
-     data-action="visibilitychange@document->beacon#visibilityChanged"
-     data-beacon-url-value="<%= card_reading_url(@card) %>">
+<div data-controller="beacon lightbox" data-beacon-url-value="<%= card_reading_url(@card) %>">
   <%= render "cards/container", card: @card %>
 
   <% if @card.published? || @card.drafted? %>