Refactor using more Stimulus-y conventions

app/javascript/controllers/related_element_controller.js

@@ -1,29 +1,23 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  static targets = ["related"]
   static classes = ["highlight"]
+  static values = { group: String }
   
   highlight(event) {
-    const targetElement = event.target.closest('[data-related-element-target]')
-    if (!targetElement) return
+    const groupValue = event.currentTarget.dataset.relatedElementGroupValue
     
-    const targetValue = targetElement.dataset.relatedElementTarget
-    const relatedElements = this.element.querySelectorAll(`[data-related-element-target="${targetValue}"]`)
-    
-    relatedElements.forEach(element => {
-      element.classList.add(this.highlightClass)
-    })
+    this.relatedTargets
+      .filter(element => element.dataset.relatedElementGroupValue === groupValue)
+      .forEach(element => element.classList.add(this.highlightClass))
   }
 
   unhighlight(event) {
-    const targetElement = event.target.closest('[data-related-element-target]')
-    if (!targetElement) return
+    const groupValue = event.currentTarget.dataset.relatedElementGroupValue
     
-    const targetValue = targetElement.dataset.relatedElementTarget
-    const relatedElements = this.element.querySelectorAll(`[data-related-element-target="${targetValue}"]`)
-    
-    relatedElements.forEach(element => {
-      element.classList.remove(this.highlightClass)
-    })
+    this.relatedTargets
+      .filter(element => element.dataset.relatedElementGroupValue === groupValue)
+      .forEach(element => element.classList.remove(this.highlightClass))
   }
 }

app/views/events/_day.html.erb

@@ -1,6 +1,5 @@
 <div class="events--day" data-controller="related-element" 
-     data-related-element-highlight-class="event--related"
-     data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
+     data-related-element-highlight-class="event--related">
   <% if events.any? %>
     <h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
 

app/views/events/_event.html.erb

@@ -3,7 +3,12 @@
 <%= link_to bucket_bubble_path(bubble.bucket, bubble),
       class: "event panel shadow center center-block flex-inline align-center justify-start gap position-relative",
       style: "--bubble-color: #{ bubble.color }; #{ bubble_rotation(bubble) }",
-      data: { controller: "animation", related_element_target: "bubble_id_#{bubble.id}", animation_play_class: "bubble--wobble", animation_play_on_load_value: "true", action: "mouseover->animation#play" } do %>
+      data: { controller: "animation", 
+              related_element_target: "related", 
+              related_element_group_value: bubble.id,
+              animation_play_class: "bubble--wobble", 
+              animation_play_on_load_value: "true", 
+              action: "mouseover->animation#play mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %>
   <div class="bubble__shape flex-item-no-shrink txt-large"></div>
   <div class="flex flex-column min-width txt-small txt-tight-lines align-start txt-align-start">
     <strong><%= bubble.title %></strong>