From 53e947e50112d031b5e2e397b383c67f3678dcaf Mon Sep 17 00:00:00 2001
From: Steve Gattuso <steve@stevegattuso.me>
Date: Fri, 3 Feb 2023 14:37:01 +0100
Subject: [PATCH] hotspots: Move overlay click handler into module.

In preparation of fixing the performance issues associated with
hotspots.is_open, this commit moves the various handlers for hotspots'
overlay from click_handlers.js into the hotspots module. This will set
us up to cleanly keep track of the open state from within the module
(instead of needing to look at the DOM).
---
 web/src/click_handlers.js | 55 ---------------------------------------
 web/src/hotspots.js       | 52 ++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js
index 69bcd8a6b0..b9cf7f9589 100644
--- a/web/src/click_handlers.js
+++ b/web/src/click_handlers.js
@@ -18,7 +18,6 @@ import {media_breakpoints_num} from "./css_variables";
 import * as dark_theme from "./dark_theme";
 import * as emoji_picker from "./emoji_picker";
 import * as hash_util from "./hash_util";
-import * as hotspots from "./hotspots";
 import * as message_edit from "./message_edit";
 import * as message_flags from "./message_flags";
 import * as message_lists from "./message_lists";
@@ -27,7 +26,6 @@ import * as muted_topics_ui from "./muted_topics_ui";
 import * as narrow from "./narrow";
 import * as navigate from "./navigate";
 import * as notifications from "./notifications";
-import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as pm_list from "./pm_list";
 import * as popovers from "./popovers";
@@ -762,59 +760,6 @@ export function initialize() {
     // Don't focus links on context menu.
     $("body").on("contextmenu", "a", (e) => e.target.blur());
 
-    // HOTSPOTS
-
-    // open
-    $("body").on("click", ".hotspot-icon", function (e) {
-        // hide icon
-        hotspots.close_hotspot_icon(this);
-
-        // show popover
-        const [, hotspot_name] = /^hotspot_(.*)_icon$/.exec(
-            $(e.target).closest(".hotspot-icon").attr("id"),
-        );
-        const overlay_name = "hotspot_" + hotspot_name + "_overlay";
-
-        overlays.open_overlay({
-            name: overlay_name,
-            $overlay: $(`#${CSS.escape(overlay_name)}`),
-            on_close: function () {
-                // close popover
-                $(this).css({display: "block"});
-                $(this).animate(
-                    {opacity: 1},
-                    {
-                        duration: 300,
-                    },
-                );
-            }.bind(this),
-        });
-
-        e.preventDefault();
-        e.stopPropagation();
-    });
-
-    // confirm
-    $("body").on("click", ".hotspot.overlay .hotspot-confirm", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const overlay_name = $(this).closest(".hotspot.overlay").attr("id");
-
-        const [, hotspot_name] = /^hotspot_(.*)_overlay$/.exec(overlay_name);
-
-        // Comment below to disable marking hotspots as read in production
-        hotspots.post_hotspot_as_read(hotspot_name);
-
-        overlays.close_overlay(overlay_name);
-        $(`#hotspot_${CSS.escape(hotspot_name)}_icon`).remove();
-    });
-
-    // stop propagation
-    $("body").on("click", ".hotspot.overlay .hotspot-popover", (e) => {
-        e.stopPropagation();
-    });
-
     // GEAR MENU
 
     $("body").on("click", ".change-language-spectator, .language_selection_widget button", (e) => {
diff --git a/web/src/hotspots.js b/web/src/hotspots.js
index dfbb13e8e2..9f772dc7e3 100644
--- a/web/src/hotspots.js
+++ b/web/src/hotspots.js
@@ -7,6 +7,7 @@ import render_hotspot_overlay from "../templates/hotspot_overlay.hbs";
 
 import * as blueslip from "./blueslip";
 import * as channel from "./channel";
+import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as popovers from "./popovers";
 
@@ -271,4 +272,55 @@ export function load_new(new_hotspots) {
 
 export function initialize() {
     load_new(page_params.hotspots);
+
+    // open
+    $("body").on("click", ".hotspot-icon", function (e) {
+        // hide icon
+        close_hotspot_icon(this);
+
+        // show popover
+        const [, hotspot_name] = /^hotspot_(.*)_icon$/.exec(
+            $(e.target).closest(".hotspot-icon").attr("id"),
+        );
+        const overlay_name = "hotspot_" + hotspot_name + "_overlay";
+
+        overlays.open_overlay({
+            name: overlay_name,
+            $overlay: $(`#${CSS.escape(overlay_name)}`),
+            on_close: function () {
+                // close popover
+                $(this).css({display: "block"});
+                $(this).animate(
+                    {opacity: 1},
+                    {
+                        duration: 300,
+                    },
+                );
+            }.bind(this),
+        });
+
+        e.preventDefault();
+        e.stopPropagation();
+    });
+
+    // confirm
+    $("body").on("click", ".hotspot.overlay .hotspot-confirm", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const overlay_name = $(this).closest(".hotspot.overlay").attr("id");
+
+        const [, hotspot_name] = /^hotspot_(.*)_overlay$/.exec(overlay_name);
+
+        // Comment below to disable marking hotspots as read in production
+        post_hotspot_as_read(hotspot_name);
+
+        overlays.close_overlay(overlay_name);
+        $(`#hotspot_${CSS.escape(hotspot_name)}_icon`).remove();
+    });
+
+    // stop propagation
+    $("body").on("click", ".hotspot.overlay .hotspot-popover", (e) => {
+        e.stopPropagation();
+    });
 }