From 1a83112cf9c59b18ccf55bf6203f0df47a8c3fa7 Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Wed, 31 Mar 2021 03:43:13 +0000 Subject: [PATCH] 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 | 44 ---------------------------------- static/js/giphy.js | 48 +++++++++++++++++++++++++++++++++++-- static/js/ui_init.js | 2 ++ 3 files changed, 48 insertions(+), 46 deletions(-) diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index dab64aeb94..7dbb7d9f49 100644 --- a/static/js/click_handlers.js +++ b/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", () => { diff --git a/static/js/giphy.js b/static/js/giphy.js index b22058299c..2bfd61075c 100644 --- a/static/js/giphy.js +++ b/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"); + }); +} diff --git a/static/js/ui_init.js b/static/js/ui_init.js index b49f5589d5..7f7c6144df 100644 --- a/static/js/ui_init.js +++ b/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();