Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

giphy: Add GIPHY picker to message edit form. 

We try to keep only one instance of GIPHY popover active.
This commit is contained in:
Aman Agrawal 2021-03-31 05:48:11 +00:00 committed by Tim Abbott
parent d4fa938a23
commit 700cfd648c
6 changed files with 112 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend_tests/node_tests/popovers.js
View File

@ -17,6 +17,9 @@ const stream_data = mock_esm("../../static/js/stream_data");
mock_esm("../../static/js/emoji_picker", {
hide_emoji_popover: noop,
});
mock_esm("../../static/js/giphy", {
hide_giphy_popover: noop,
});
const message_lists = mock_esm("../../static/js/message_lists", {
current: {},
});

111
static/js/giphy.js
View File

@ -7,11 +7,31 @@ import render_giphy_picker from "../templates/giphy_picker.hbs";
import render_giphy_picker_mobile from "../templates/giphy_picker_mobile.hbs";
import * as compose_ui from "./compose_ui";
import {media_breakpoints} from "./css_variables";
import {page_params} from "./page_params";
import * as popovers from "./popovers";
import * as ui_util from "./ui_util";
const giphy_fetch = new GiphyFetch(page_params.giphy_api_key);
let search_term = "";
let active_popover_element;
// Only used if popover called from edit message, otherwise it is `undefined`.
let edit_message_id;
export function is_popped_from_edit_messsage() {
return active_popover_element && edit_message_id !== undefined;
}
export function focus_current_edit_message() {
$(`#message_edit_content_${CSS.escape(edit_message_id)}`).trigger("focus");
}
// Approximate width and heigh of
// giphy popover as computed by chrome
// + 25px;
const APPROX_HEIGHT = 350;
const APPROX_WIDTH = 300;
function fetchGifs(offset) {
const config = {
@ -43,8 +63,16 @@ function renderGIPHYGrid(targetEl) {
// GIF; nice in principle but too distracting.
hideAttribution: true,
onGifClick: (props) => {
$("#compose_box_giphy_grid").popover("hide");
compose_ui.insert_syntax_and_focus(`[](${props.images.downsized_medium.url})`);
let textarea = $("#compose-textarea");
if (edit_message_id !== undefined) {
textarea = $(`#message_edit_content_${CSS.escape(edit_message_id)}`);
}
compose_ui.insert_syntax_and_focus(
`[](${props.images.downsized_medium.url})`,
textarea,
);
hide_giphy_popover();
},
onGifVisible: (gif, e) => {
// Set tabindex for all the GIFs that
@ -72,21 +100,6 @@ function renderGIPHYGrid(targetEl) {
};
}
let template = render_giphy_picker();
if (window.innerWidth <= 768) {
// Show as modal in the center for small screens.
template = render_giphy_picker_mobile();
}
$("#compose_box_giphy_grid").popover({
animation: true,
placement: "top",
html: true,
trigger: "manual",
template,
});
function update_grid_with_search_term() {
const search_elem = $("#giphy-search-query");
// GIPHY popover may have been hidden by the
@ -99,6 +112,45 @@ function update_grid_with_search_term() {
return undefined;
}
export function hide_giphy_popover() {
// Returns `true` if the popover was open.
if (active_popover_element) {
active_popover_element.popover("hide");
active_popover_element = undefined;
edit_message_id = undefined;
return true;
}
return false;
}
function get_popover_content() {
if (window.innerWidth <= Number(media_breakpoints.md_min.slice(0, -2))) {
// Show as modal in the center for small screens.
return render_giphy_picker_mobile();
}
return render_giphy_picker();
}
function get_popover_placement() {
let placement = popovers.compute_placement(
active_popover_element,
APPROX_HEIGHT,
APPROX_WIDTH,
true,
);
if (placement === "viewport_center") {
// For legacy reasons `compute_placement` actually can
// return `viewport_center` which used to place popover in
// the center of the screen, but bootstrap doesn't actually
// support that and we already handle it on small screen sizes
// by placing it in center using `popover-flex`.
placement = "left";
}
return placement;
}
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);
@ -107,11 +159,28 @@ export function initialize() {
e.preventDefault();
e.stopPropagation();
if ($("#giphy_grid_in_popover").length) {
$("#compose_box_giphy_grid").popover("hide");
if (active_popover_element && $.contains(active_popover_element.get()[0], e.target)) {
// Hide giphy popover if already active.
hide_giphy_popover();
return;
}
$("#compose_box_giphy_grid").popover("show");
popovers.hide_all();
const $elt = $(e.target);
// Store data-message-id value in global variable edit_message_id so that
// its value can be further used to correctly find the message textarea element.
// This will store `undefined` when called from compose box, by design.
edit_message_id = $elt.attr("data-message-id");
active_popover_element = $elt.closest("#compose_box_giphy_grid");
active_popover_element.popover({
animation: true,
placement: get_popover_placement(),
html: true,
trigger: "manual",
template: get_popover_content(),
});
active_popover_element.popover("show");
let gifs_grid = renderGIPHYGrid($("#giphy_grid_in_popover .popover-content")[0]);
$("body").on(
@ -132,7 +201,7 @@ export function initialize() {
);
$(document).one("compose_canceled.zulip compose_finished.zulip", () => {
$("#compose_box_giphy_grid").popover("hide");
hide_giphy_popover();
});
// Focus on search box by default.

13
static/js/hotkey.js
View File

@ -14,6 +14,7 @@ import * as drafts from "./drafts";
import * as emoji_picker from "./emoji_picker";
import * as feedback_widget from "./feedback_widget";
import * as gear_menu from "./gear_menu";
import * as giphy from "./giphy";
import * as hashchange from "./hashchange";
import * as hotspots from "./hotspots";
import * as lightbox from "./lightbox";
@ -274,10 +275,18 @@ export function process_escape_key(e) {
return true;
}
if (giphy.is_popped_from_edit_messsage()) {
giphy.focus_current_edit_message();
// Hide after setting focus so that `edit_message_id` is
// still set in giphy.
giphy.hide_giphy_popover();
return true;
}
if (compose_state.composing()) {
// Check if the giphy popover was open using compose box.
// Hide GIPHY popover if it's open.
if ($("#giphy_grid_in_popover").length) {
$("#compose_box_giphy_grid").popover("hide");
if (!giphy.is_popped_from_edit_messsage() && giphy.hide_giphy_popover()) {
$("#compose-textarea").trigger("focus");
return true;
}

1
static/js/message_edit.js
View File

@ -348,6 +348,7 @@ function edit_message(row, raw_content) {
stream_name: message.stream,
notify_new_thread: notify_new_thread_default,
notify_old_thread: notify_old_thread_default,
giphy_api_available: page_params.giphy_api_key !== "",
}),
);

2
static/js/popovers.js
View File

@ -23,6 +23,7 @@ import * as compose_ui from "./compose_ui";
import * as condense from "./condense";
import * as emoji_picker from "./emoji_picker";
import * as feature_flags from "./feature_flags";
import * as giphy from "./giphy";
import * as hash_util from "./hash_util";
import {i18n} from "./i18n";
import * as message_edit from "./message_edit";
@ -1347,6 +1348,7 @@ export function hide_all_except_sidebars() {
hide_actions_popover();
hide_message_info_popover();
emoji_picker.hide_emoji_popover();
giphy.hide_giphy_popover();
stream_popover.hide_stream_popover();
stream_popover.hide_topic_popover();
stream_popover.hide_all_messages_popover();

5
static/templates/message_edit_form.hbs
View File

@ -68,6 +68,11 @@
<a role="button" tabindex=0 class="message-control-button fa fa-video-camera video_link" aria-label="{{t "Add video call" }}" data-message-id="{{message_id}}" title="{{t "Add video call" }}"></a>
{{/if}}
<a role="button" tabindex=0 class="message-control-button fa fa-smile-o" aria-label="{{t 'Add emoji' }}" id="emoji_map" data-message-id="{{message_id}}" title="{{t 'Add emoji' }}"></a>
{{#if giphy_api_available }}
<a role="button" class="message-control-button" aria-label="{{t 'Add GIF' }}" id="compose_box_giphy_grid" title="{{t 'Add GIF' }}">
<img class="compose_giphy_logo" tabindex=0 src="/static/images/GIPHY_logo.png" data-message-id="{{message_id}}">
</a>
{{/if}}
<a role="button" tabindex=0 class="message-control-link" data-overlay-trigger="message-formatting" >{{t 'Help' }}</a>
</div>
{{/if}}