Convert hover js to Stimulus controller

thoughtbot · Feb 21, 2025 · fd59def · fd59def
1 parent 53f6c65
commit fd59def
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 33 deletions.
diff --git a/app/assets/builds/administrate/application.js b/app/assets/builds/administrate/application.js
@@ -22169,17 +22169,29 @@
     }
   };
 
+  // app/assets/javascripts/administrate/controllers/popover_controller.js
+  var popover_controller_default = class extends Controller {
+    static targets = ["popover", "tooltip"];
+    connect() {
+      this.tooltipTarget.addEventListener("mouseenter", this.showPopover);
+      this.tooltipTarget.addEventListener("mouseleave", this.hidePopover);
+    }
+    disconnect() {
+      this.tooltipTarget.removeEventListener("mouseenter", this.showPopover);
+      this.tooltipTarget.removeEventListener("mouseleave", this.hidePopover);
+    }
+    showPopover = () => {
+      this.popoverTarget.showPopover();
+    };
+    hidePopover = () => {
+      this.popoverTarget.hidePopover();
+    };
+  };
+
   // app/assets/javascripts/administrate/controllers/index.js
   application.register("select", select_controller_default);
   application.register("table", table_controller_default);
-  var searchPopover = document.querySelector("[popover][id='search-tooltip']");
-  var searchTooltip = document.querySelector("button[popovertarget='search-tooltip']");
-  searchTooltip.addEventListener("mouseenter", () => {
-    searchPopover.showPopover();
-  });
-  searchTooltip.addEventListener("mouseleave", () => {
-    searchPopover.hidePopover();
-  });
+  application.register("popover", popover_controller_default);
 
   // app/assets/javascripts/administrate/vendor/css-anchor-positioning.js
   var fa = Object.defineProperty;

diff --git a/app/assets/builds/administrate/application.js.map b/app/assets/builds/administrate/application.js.map
diff --git a/app/assets/javascripts/administrate/controllers/index.js b/app/assets/javascripts/administrate/controllers/index.js
@@ -2,16 +2,8 @@ import { application } from "./application";
 
 import SelectController from "./select_controller";
 import TableController from "./table_controller";
+import PopoverController from "./popover_controller";
 
 application.register("select", SelectController);
 application.register("table", TableController);
-
-// Bug: Visit another page and come back to this page, the mouesover popover will not work
-const searchPopover = document.querySelector("[popover][id='search-tooltip']");
-const searchTooltip = document.querySelector("button[popovertarget='search-tooltip']");
-searchTooltip.addEventListener("mouseenter", () => {
-  searchPopover.showPopover();
-});
-searchTooltip.addEventListener("mouseleave", () => {
-  searchPopover.hidePopover();
-});
+application.register("popover", PopoverController);
diff --git a/app/assets/javascripts/administrate/controllers/popover_controller.js b/app/assets/javascripts/administrate/controllers/popover_controller.js
@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["popover", "tooltip"];
+
+  connect() {
+    this.tooltipTarget.addEventListener("mouseenter", this.showPopover);
+    this.tooltipTarget.addEventListener("mouseleave", this.hidePopover);
+  }
+
+  disconnect() {
+    this.tooltipTarget.removeEventListener("mouseenter", this.showPopover);
+    this.tooltipTarget.removeEventListener("mouseleave", this.hidePopover);
+  }
+
+  showPopover = () => {
+    this.popoverTarget.showPopover();
+  }
+
+  hidePopover = () => {
+    this.popoverTarget.hidePopover();
+  }
+};
diff --git a/app/views/administrate/application/_index_header.html.erb b/app/views/administrate/application/_index_header.html.erb
@@ -17,19 +17,21 @@
     ) %>
 
     <% if filters.any? %>
-      <button popovertarget="search-tooltip" class="button--tooltip search__tooltip">
-        <svg role="img">
-          <use xlink:href="#icon-question-mark" />
-        </svg>
-      </button>
+      <div data-controller="popover">
+        <button data-popover-target="tooltip" popovertarget="search-tooltip" class="button--tooltip search__tooltip">
+          <svg role="img">
+            <use xlink:href="#icon-question-mark" />
+          </svg>
+        </button>
 
-      <div popover id="search-tooltip" role="tooltip" class="search__tooltip-popover">
-        <p><strong>Use filters to refine your search</strong></p>
-        <ul>
-          <% filters.keys.each do |filter_key| %>
-          <li><%= filter_key %>:<span class="search__tooltip-popover-value">&lt;value&gt;</span></li>
-          <% end %>
-        </ul>
+        <div data-popover-target="popover" popover id="search-tooltip" role="tooltip" class="search__tooltip-popover">
+          <p><strong>Use filters to refine your search</strong></p>
+          <ul>
+            <% filters.keys.each do |filter_key| %>
+            <li><%= filter_key %>:<span class="search__tooltip-popover-value">&lt;value&gt;</span></li>
+            <% end %>
+          </ul>
+        </div>
       </div>
     <% end %>
   <% end %>