paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

giphy: Load Giphy SDK lazily.

Browse Source 
The Giphy SDK sends tracking pings when it loads; we don’t want those
to be sent for visitors who aren’t using Giphy.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2021-05-28 14:28:56 -07:00
committed by Tim Abbott
parent 80b6808de0
commit 6702f434ca
1 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
static/js/giphy.js
View File

@@ -1,5 +1,3 @@
import {renderGrid} from "@giphy/js-components";
import {GiphyFetch} from "@giphy/js-fetch-api";
import $ from "jquery"; import $ from "jquery";
import _ from "lodash"; import _ from "lodash";
@@ -14,7 +12,7 @@ import * as popovers from "./popovers";
import * as rows from "./rows"; import * as rows from "./rows";
import * as ui_util from "./ui_util"; import * as ui_util from "./ui_util";
const giphy_fetch = new GiphyFetch(page_params.giphy_api_key); let giphy_fetch;
let search_term = ""; let search_term = "";
let gifs_grid; let gifs_grid;
let active_popover_element; let active_popover_element;
@@ -68,21 +66,28 @@ function get_rating() {
return "g"; return "g";
} }
function fetchGifs(offset) { async function renderGIPHYGrid(targetEl) {
const config = { const {renderGrid} = await import(/* webpackChunkName: "giphy-sdk" */ "@giphy/js-components");
offset, const {GiphyFetch} = await import(/* webpackChunkName: "giphy-sdk" */ "@giphy/js-fetch-api");
limit: 25,
rating: get_rating(), if (giphy_fetch === undefined) {
// We don't pass random_id here, for privacy reasons. giphy_fetch = new GiphyFetch(page_params.giphy_api_key);
}; }
if (search_term === "") {
// Get the trending gifs by default. function fetchGifs(offset) {
return giphy_fetch.trending(config); const config = {
} offset,
return giphy_fetch.search(search_term, config); limit: 25,
} rating: get_rating(),
// We don't pass random_id here, for privacy reasons.
};
if (search_term === "") {
// Get the trending gifs by default.
return giphy_fetch.trending(config);
}
return giphy_fetch.search(search_term, config);
}
function renderGIPHYGrid(targetEl) {
const render = () => const render = () =>
// See https://github.com/Giphy/giphy-js/blob/master/packages/components/README.md#grid // See https://github.com/Giphy/giphy-js/blob/master/packages/components/README.md#grid
// for detailed documentation. // for detailed documentation.
@@ -136,7 +141,7 @@ function renderGIPHYGrid(targetEl) {
}; };
} }
function update_grid_with_search_term() { async function update_grid_with_search_term() {
if (!gifs_grid) { if (!gifs_grid) {
return; return;
} }
@@ -147,7 +152,7 @@ function update_grid_with_search_term() {
if (search_elem.length) { if (search_elem.length) {
search_term = search_elem[0].value; search_term = search_elem[0].value;
gifs_grid.remove(); gifs_grid.remove();
gifs_grid = renderGIPHYGrid($("#giphy_grid_in_popover .giphy-content")[0]); gifs_grid = await renderGIPHYGrid($("#giphy_grid_in_popover .giphy-content")[0]);
return; return;
} }
@@ -205,10 +210,10 @@ export function initialize() {
$("body").on("keydown", ".giphy-gif", ui_util.convert_enter_to_click); $("body").on("keydown", ".giphy-gif", ui_util.convert_enter_to_click);
$("body").on("keydown", ".compose_gif_icon", ui_util.convert_enter_to_click); $("body").on("keydown", ".compose_gif_icon", ui_util.convert_enter_to_click);
$("body").on("click", "#giphy_search_clear", (e) => { $("body").on("click", "#giphy_search_clear", async (e) => {
e.stopPropagation(); e.stopPropagation();
$("#giphy-search-query").val(""); $("#giphy-search-query").val("");
update_grid_with_search_term(); await update_grid_with_search_term();
}); });
$("body").on("click", ".compose_gif_icon", (e) => { $("body").on("click", ".compose_gif_icon", (e) => {
@@ -247,10 +252,10 @@ export function initialize() {
// It takes about 1s for the popover to show; So, // It takes about 1s for the popover to show; So,
// we wait for popover to display before rendering GIFs // we wait for popover to display before rendering GIFs
// in it, otherwise popover is rendered with empty content. // in it, otherwise popover is rendered with empty content.
const popover_observer = new MutationObserver(() => { const popover_observer = new MutationObserver(async () => {
if ($("#giphy_grid_in_popover .giphy-content").is(":visible")) { if ($("#giphy_grid_in_popover .giphy-content").is(":visible")) {
gifs_grid = renderGIPHYGrid($("#giphy_grid_in_popover .giphy-content")[0]);
popover_observer.disconnect(); popover_observer.disconnect();
gifs_grid = await renderGIPHYGrid($("#giphy_grid_in_popover .giphy-content")[0]);
} }
}); });
const opts = {attributes: false, childList: true, characterData: false, subtree: true}; const opts = {attributes: false, childList: true, characterData: false, subtree: true};