From 29cdd992206da58c4ce6dbff2faead83b0e066ce Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 12 Nov 2021 05:18:03 +0000
Subject: [PATCH] giphy: Use single element for tooltip and popover.

This works surprisingly unlike my previous attempts to do so.

WARN: This is a pseudo commit and should only be merged with upcoming
compose box bottom refactoring commit since the css changes required
for this change are missing here and are not required after that
commit.
---
 static/js/giphy.js                           | 8 ++++----
 static/templates/compose_control_buttons.hbs | 4 +---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/static/js/giphy.js b/static/js/giphy.js
index 01cd43affe..577fab018d 100644
--- a/static/js/giphy.js
+++ b/static/js/giphy.js
@@ -46,9 +46,9 @@ export function update_giphy_rating() {
         page_params.realm_giphy_rating === page_params.giphy_rating_options.disabled.id ||
         page_params.giphy_api_key === ""
     ) {
-        $(".compose_giphy_link").hide();
+        $(".compose_gif_icon").hide();
     } else {
-        $(".compose_giphy_link").show();
+        $(".compose_gif_icon").show();
     }
 }
 
@@ -220,7 +220,7 @@ export function initialize() {
         e.preventDefault();
         e.stopPropagation();
 
-        if (active_popover_element && $.contains(active_popover_element.get()[0], e.target)) {
+        if (active_popover_element && active_popover_element.get()[0] === e.target) {
             // Hide giphy popover if already active.
             hide_giphy_popover();
             return;
@@ -235,7 +235,7 @@ export function initialize() {
             edit_message_id = undefined;
         }
 
-        active_popover_element = $elt.closest(".compose_giphy_link");
+        active_popover_element = $elt;
         active_popover_element.popover({
             animation: true,
             placement: get_popover_placement(),
diff --git a/static/templates/compose_control_buttons.hbs b/static/templates/compose_control_buttons.hbs
index 9ce4164269..ad7fc6f236 100644
--- a/static/templates/compose_control_buttons.hbs
+++ b/static/templates/compose_control_buttons.hbs
@@ -7,7 +7,5 @@
 <a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
 <a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
 <a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tippy-content="{{t 'Add global time<br />Everyone sees global times in their own time zone.' }}" data-tippy-maxWidth="none" data-tippy-allowHtml="true"></a>
-<a role="button" class="compose_control_button compose_giphy_link {{#unless giphy_enabled }} hide {{/unless}}" aria-label="{{t 'Add GIF' }}" data-tippy-content="{{t 'Add GIF' }}">
-    <i class="compose_gif_icon zulip-icon zulip-icon-gif" tabindex=0></i>
-</a>
+<a role="button" class="compose_control_button compose_gif_icon {{#unless giphy_enabled }} hide {{/unless}} zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0 data-tippy-content="{{t 'Add GIF' }}"></a>
 <a role="button" class="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>