From d4fa938a23d7c06c3e924745d2635a4557d1354f Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 6 Apr 2021 11:34:33 +0000
Subject: [PATCH] giphy: Convert `compose_giphy_logo` from id to class.

Since there are multiple `compose_giphy_logo` elements, we should
use it as a class as per HTML spec.
---
 static/js/click_handlers.js       | 2 +-
 static/js/giphy.js                | 4 ++--
 templates/zerver/app/compose.html | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index 60c8480d0f..3428d8bedf 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -650,7 +650,7 @@ export function initialize() {
 
     function handle_compose_click(e) {
         // Emoji clicks should be handled by their own click handler in emoji_picker.js
-        if ($(e.target).is("#emoji_map, img.emoji, .drag, #compose_giphy_logo")) {
+        if ($(e.target).is("#emoji_map, img.emoji, .drag, .compose_giphy_logo")) {
             return;
         }
 
diff --git a/static/js/giphy.js b/static/js/giphy.js
index c14211a8d1..f1c88ec5c6 100644
--- a/static/js/giphy.js
+++ b/static/js/giphy.js
@@ -101,9 +101,9 @@ function update_grid_with_search_term() {
 
 export function initialize() {
     $("body").on("keydown", ".giphy-gif", ui_util.convert_enter_to_click);
-    $("body").on("keydown", "#compose_giphy_logo", ui_util.convert_enter_to_click);
+    $("body").on("keydown", ".compose_giphy_logo", ui_util.convert_enter_to_click);
 
-    $("body").on("click", "#compose_giphy_logo", (e) => {
+    $("body").on("click", ".compose_giphy_logo", (e) => {
         e.preventDefault();
         e.stopPropagation();
 
diff --git a/templates/zerver/app/compose.html b/templates/zerver/app/compose.html
index 0059841c2f..2dae109a88 100644
--- a/templates/zerver/app/compose.html
+++ b/templates/zerver/app/compose.html
@@ -103,7 +103,7 @@
                                     <a role="button" class="message-control-button fa fa-smile-o" aria-label="{{_('Add emoji')}}" id="emoji_map" tabindex=0 title="{{ _('Add emoji') }}"></a>
                                     {% if giphy_api_available %}
                                     <a role="button" class="message-control-button" aria-label="{{_('Add GIF')}}" id="compose_box_giphy_grid" title="{{ _('Add GIF') }}">
-                                        <img id="compose_giphy_logo" tabindex=0 src="/static/images/GIPHY_logo.png">
+                                        <img class="compose_giphy_logo" tabindex=0 src="/static/images/GIPHY_logo.png">
                                     </a>
                                     {% endif %}
                                     <a class="message-control-link drafts-link" href="#drafts" title="{{ _('Drafts') }} (d)">{{ _('Drafts') }}</a>