giphy: Register click events inside giphy module.

Primary reason for this is to allow us more control over
creation of giphy popover as will be evident in future commits.

static/js/click_handlers.js

@@ -16,7 +16,6 @@ import * as compose from "./compose";
 import * as compose_actions from "./compose_actions";
 import * as compose_state from "./compose_state";
 import * as emoji_picker from "./emoji_picker";
-import * as giphy from "./giphy";
 import * as hash_util from "./hash_util";
 import * as hotspots from "./hotspots";
 import {i18n} from "./i18n";
@@ -649,49 +648,6 @@ export function initialize() {
 
     // COMPOSE
 
-    // Allow inserting GIFs in compose box using enter keypress.
-    $("body").on("keydown", ".giphy-gif", ui_util.convert_enter_to_click);
-
-    $("#compose_giphy_logo").on("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if ($("#giphy_grid_in_popover").length) {
-            $("#compose_box_giphy_grid").popover("hide");
-            return;
-        }
-        $("#compose_box_giphy_grid").popover("show");
-        let gifs_grid = giphy.renderGIPHYGrid($("#giphy_grid_in_popover .popover-content")[0]);
-
-        $("body").on(
-            "keyup",
-            "#giphy-search-query",
-            // Use debounce to create a 300ms interval between
-            // every search. This makes the UX of searching pleasant
-            // by allowing user to finish typing before search
-            // is executed.
-            _.debounce(() => {
-                // GIPHY popover may have been hidden by the
-                // time this function is called.
-                if (gifs_grid) {
-                    gifs_grid.remove();
-                    gifs_grid = giphy.update_grid_with_search_term();
-                }
-            }, 300),
-        );
-
-        $(document).one("compose_canceled.zulip compose_finished.zulip", () => {
-            $("#compose_box_giphy_grid").popover("hide");
-        });
-
-        // Focus on search box by default.
-        // This is specially helpful for users
-        // navigating via keybaord.
-        $("#giphy-search-query").trigger("focus");
-    });
-
-    $("body").on("keydown", "#compose_giphy_logo", ui_util.convert_enter_to_click);
-
     // NB: This just binds to current elements, and won't bind to elements
     // created after ready() is called.
     $("#compose-send-status .compose-send-status-close").on("click", () => {

static/js/giphy.js

@@ -8,6 +8,7 @@ import render_giphy_picker_mobile from "../templates/giphy_picker_mobile.hbs";
 
 import * as compose_ui from "./compose_ui";
 import {page_params} from "./page_params";
+import * as ui_util from "./ui_util";
 
 const giphy_fetch = new GiphyFetch(page_params.giphy_api_key);
 let search_term = "";
@@ -27,7 +28,7 @@ function fetchGifs(offset) {
     return giphy_fetch.search(search_term, config);
 }
 
-export function renderGIPHYGrid(targetEl) {
+function renderGIPHYGrid(targetEl) {
     const render = () =>
         // See https://github.com/Giphy/giphy-js/blob/master/packages/components/README.md#grid
         // for detailed documentation.
@@ -86,7 +87,7 @@ $("#compose_box_giphy_grid").popover({
     template,
 });
 
-export function update_grid_with_search_term() {
+function update_grid_with_search_term() {
     const search_elem = $("#giphy-search-query");
     // GIPHY popover may have been hidden by the
     // time this function is called.
@@ -97,3 +98,46 @@ export function update_grid_with_search_term() {
     // Return undefined to stop searching.
     return undefined;
 }
+
+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);
+
+    $("#compose_giphy_logo").on("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if ($("#giphy_grid_in_popover").length) {
+            $("#compose_box_giphy_grid").popover("hide");
+            return;
+        }
+        $("#compose_box_giphy_grid").popover("show");
+        let gifs_grid = renderGIPHYGrid($("#giphy_grid_in_popover .popover-content")[0]);
+
+        $("body").on(
+            "keyup",
+            "#giphy-search-query",
+            // Use debounce to create a 300ms interval between
+            // every search. This makes the UX of searching pleasant
+            // by allowing user to finish typing before search
+            // is executed.
+            _.debounce(() => {
+                // GIPHY popover may have been hidden by the
+                // time this function is called.
+                if (gifs_grid) {
+                    gifs_grid.remove();
+                    gifs_grid = update_grid_with_search_term();
+                }
+            }, 300),
+        );
+
+        $(document).one("compose_canceled.zulip compose_finished.zulip", () => {
+            $("#compose_box_giphy_grid").popover("hide");
+        });
+
+        // Focus on search box by default.
+        // This is specially helpful for users
+        // navigating via keybaord.
+        $("#giphy-search-query").trigger("focus");
+    });
+}

static/js/ui_init.js

@@ -23,6 +23,7 @@ import * as echo from "./echo";
 import * as emoji_picker from "./emoji_picker";
 import * as emojisets from "./emojisets";
 import * as gear_menu from "./gear_menu";
+import * as giphy from "./giphy";
 import * as hashchange from "./hashchange";
 import * as hotspots from "./hotspots";
 import * as invite from "./invite";
@@ -521,6 +522,7 @@ export function initialize_everything() {
     tutorial.initialize();
     notifications.initialize();
     gear_menu.initialize();
+    giphy.initialize();
     presence.initialize(presence_params);
     settings_panel_menu.initialize();
     settings_sections.initialize();