[comments] Fix but with "react" button

Previously, clicking the button multiple times would create multiple selector
widgets. Now, it functions as a visibility toggle.

3 files changed, 23 insertions, 4 deletions

diff --git a/haunt/static/css/style.css b/haunt/static/css/style.css
index 2672f7c..3d95b3b 100644
--- a/haunt/static/css/style.css
+++ b/haunt/static/css/style.css
@@ -236,10 +236,11 @@ ul.webmention-container .comment .comment-source-identifier {
 /* Widget for comment reactions. */
 
 .emoji-picker {
-    width: 16em;
+    width: 51%;
     height: 2.75em;
     border: solid 1px;
     overflow: scroll;
+    margin-top: 16px;
 }
 
 .emoji-picker > span {
diff --git a/haunt/static/js/comment-reaction.js b/haunt/static/js/comment-reaction.js
index db980b3..1002fa2 100644
--- a/haunt/static/js/comment-reaction.js
+++ b/haunt/static/js/comment-reaction.js
@@ -54,9 +54,12 @@ function postReaction(reaction, callback) {
   xhr.send(encodeAsFormData(reaction));
 }
 
+function selectorWidgetName(id) {
+  return `emoji-picker-${id}`;
+}
 
 // Simple Emoji picker widget.
-function selectorWidget() {
+function selectorWidget(id) {
   function emojiButton(codepoint) {
     let span = document.createElement("span");
     span.innerHTML = String.fromCodePoint(codepoint);
@@ -64,6 +67,7 @@ function selectorWidget() {
   }
 
   let selector = document.createElement("div");
+  selector.setAttribute("id", selectorWidgetName(id));
   selector.setAttribute("class", "emoji-picker");
 
   for (let i = 0x1F600; i < 0x1F64F; i++) {
@@ -99,15 +103,25 @@ window.addEventListener("load", () => {
   // Second pass to add the actual "react" button.
   replyButtons = document.querySelectorAll(".comment-reply-button");
   for (let button of replyButtons) {
+    let id = button.getAttribute("data-reply-to-id");
     let reactButton = document.createElement("a");
     reactButton.setAttribute("class", "comment-react-button");
     reactButton.setAttribute("href", "#");
-    reactButton.setAttribute("data-react-to-id", button.getAttribute("data-reply-to-id"));
+    reactButton.setAttribute("data-react-to-id", id);
     reactButton.innerHTML = "react";
     button.parentNode.appendChild(reactButton);
 
     reactButton.addEventListener('click', (e) => {
-      let emojiPicker = selectorWidget();
+      // If we already made a selector widget for this comment, let's "hide" the
+      // one that exists.
+      let existingSelectorWidget = document.getElementById(selectorWidgetName(id));
+      if (existingSelectorWidget !== null) {
+        existingSelectorWidget.remove();
+        e.preventDefault();
+        return;
+      }
+
+      let emojiPicker = selectorWidget(id);
       button.parentNode.parentNode.insertBefore(emojiPicker, button.parentNode);
       for (let button of emojiPicker.children) {
         button.addEventListener('click', (e) => {
diff --git a/org/pages/changelog.org b/org/pages/changelog.org
index 6c0ea48..d109eb8 100644
--- a/org/pages/changelog.org
+++ b/org/pages/changelog.org
@@ -2,6 +2,10 @@
 
 A record of any notable user-facing changes made to this website. For more detail, refer to the log of the [[https://git.sr.ht/~jakob/blog][Git repository]].
 
+** Sunday, August 27, 2023
+
+- Fixed bug with comment reaction system where pressing the "react" button multiple times would lead to multiple selector widgets being created.
+
 ** Saturday, August 12, 2023
 
 - Added cheesy rhymes to the user-facing status code pages.