paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-12 01:47:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

popovers: Extract playground_links_popover into separate module.

Browse Source
This commit is contained in:
Daniil Fadeev
2023-09-15 16:53:32 +04:00
committed by Tim Abbott
parent 3773f17933
commit 4d41d8bd02
3 changed files with 92 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
web/src/playground_links_popover.js Normal file
View File

@@ -0,0 +1,88 @@
import $ from "jquery";
import url_template_lib from "url-template";
import render_playground_links_popover_content from "../templates/playground_links_popover_content.hbs";
import * as message_viewport from "./message_viewport";
import * as popovers from "./popovers";
import * as realm_playground from "./realm_playground";
let $current_playground_links_popover_elem;
// Playground_info contains all the data we need to generate a popover of
// playground links for each code block. The element is the target element
// to pop off of.
function toggle_playground_link_popover(element, playground_info) {
const $last_popover_elem = $current_playground_links_popover_elem;
popovers.hide_all();
if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) {
// We want it to be the case that a user can dismiss a popover
// by clicking on the same element that caused the popover.
return;
}
const $elt = $(element);
if ($elt.data("popover") === undefined) {
const ypos = $elt.get_offset_to_window().top;
$elt.popover({
// It's unlikely we'll have more than 3-4 playground links
// for one language, so it should be OK to hardcode 120 here.
placement: message_viewport.height() - ypos < 120 ? "top" : "bottom",
title: "",
content: render_playground_links_popover_content({playground_info}),
html: true,
trigger: "manual",
fixed: true,
});
$elt.popover("show");
$current_playground_links_popover_elem = $elt;
}
}
export function hide_playground_links_popover() {
if ($current_playground_links_popover_elem !== undefined) {
$current_playground_links_popover_elem.popover("destroy");
$current_playground_links_popover_elem = undefined;
}
}
function register_click_handlers() {
$("#main_div, #preview_content, #message-history").on(
"click",
".code_external_link",
function (e) {
const $view_in_playground_button = $(this);
const $codehilite_div = $(this).closest(".codehilite");
e.stopPropagation();
const playground_info = realm_playground.get_playground_info_for_languages(
$codehilite_div.data("code-language"),
);
// We do the code extraction here and set the target href expanding
// the url_template with the extracted code. Depending on whether
// the language has multiple playground links configured, a popover
// is shown.
const extracted_code = $codehilite_div.find("code").text();
if (playground_info.length === 1) {
const url_template = url_template_lib.parse(playground_info[0].url_template);
$view_in_playground_button.attr(
"href",
url_template.expand({code: extracted_code}),
);
} else {
for (const $playground of playground_info) {
const url_template = url_template_lib.parse($playground.url_template);
$playground.playground_url = url_template.expand({code: extracted_code});
}
toggle_playground_link_popover(this, playground_info);
}
},
);
$("body").on("click", ".popover_playground_link", (e) => {
hide_playground_links_popover();
e.stopPropagation();
});
}
export function initialize() {
register_click_handlers();
}

80
web/src/popovers.js
View File

@@ -1,21 +1,17 @@
import $ from "jquery";
import {hideAll} from "tippy.js";
import url_template_lib from "url-template";
import render_playground_links_popover_content from "../templates/playground_links_popover_content.hbs";
import * as blueslip from "./blueslip";
import * as emoji_picker from "./emoji_picker";
import * as message_viewport from "./message_viewport";
import * as overlays from "./overlays";
import * as playground_links_popover from "./playground_links_popover";
import * as popover_menus from "./popover_menus";
import * as realm_playground from "./realm_playground";
import * as resize from "./resize";
import * as stream_popover from "./stream_popover";
import * as user_card_popover from "./user_card_popover";
import * as user_group_popover from "./user_group_popover";
let $current_playground_links_popover_elem;
let list_of_popovers = [];
// this utilizes the proxy pattern to intercept all calls to $.fn.popover
@@ -108,79 +104,7 @@ export function set_suppress_scroll_hide() {
suppress_scroll_hide = true;
}
// Playground_info contains all the data we need to generate a popover of
// playground links for each code block. The element is the target element
// to pop off of.
function toggle_playground_link_popover(element, playground_info) {
const $last_popover_elem = $current_playground_links_popover_elem;
hide_all();
if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) {
// We want it to be the case that a user can dismiss a popover
// by clicking on the same element that caused the popover.
return;
}
const $elt = $(element);
if ($elt.data("popover") === undefined) {
const ypos = $elt.get_offset_to_window().top;
$elt.popover({
// It's unlikely we'll have more than 3-4 playground links
// for one language, so it should be OK to hardcode 120 here.
placement: message_viewport.height() - ypos < 120 ? "top" : "bottom",
title: "",
content: render_playground_links_popover_content({playground_info}),
html: true,
trigger: "manual",
fixed: true,
});
$elt.popover("show");
$current_playground_links_popover_elem = $elt;
}
}
export function hide_playground_links_popover() {
if ($current_playground_links_popover_elem !== undefined) {
$current_playground_links_popover_elem.popover("destroy");
$current_playground_links_popover_elem = undefined;
}
}
export function register_click_handlers() {
$("#main_div, #preview_content, #message-history").on(
"click",
".code_external_link",
function (e) {
const $view_in_playground_button = $(this);
const $codehilite_div = $(this).closest(".codehilite");
e.stopPropagation();
const playground_info = realm_playground.get_playground_info_for_languages(
$codehilite_div.data("code-language"),
);
// We do the code extraction here and set the target href expanding
// the url_template with the extracted code. Depending on whether
// the language has multiple playground links configured, a popover
// is shown.
const extracted_code = $codehilite_div.find("code").text();
if (playground_info.length === 1) {
const url_template = url_template_lib.parse(playground_info[0].url_template);
$view_in_playground_button.attr(
"href",
url_template.expand({code: extracted_code}),
);
} else {
for (const $playground of playground_info) {
const url_template = url_template_lib.parse($playground.url_template);
$playground.playground_url = url_template.expand({code: extracted_code});
}
toggle_playground_link_popover(this, playground_info);
}
},
);
$("body").on("click", ".popover_playground_link", (e) => {
hide_playground_links_popover();
e.stopPropagation();
});
$("body").on("click", ".flatpickr-calendar", (e) => {
e.stopPropagation();
e.preventDefault();
@@ -238,7 +162,7 @@ export function hide_all_except_sidebars(opts) {
stream_popover.hide_stream_popover();
user_group_popover.hide();
user_card_popover.hide_all_user_card_popovers();
hide_playground_links_popover();
playground_links_popover.hide_playground_links_popover();
// look through all the popovers that have been added and removed.
for (const $o of list_of_popovers) {

2
web/src/ui_init.js
View File

@@ -67,6 +67,7 @@ import * as notifications from "./notifications";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
import * as people from "./people";
import * as playground_links_popover from "./playground_links_popover";
import * as pm_conversations from "./pm_conversations";
import * as pm_list from "./pm_list";
import * as popover_menus from "./popover_menus";
@@ -770,6 +771,7 @@ export function initialize_everything() {
emoji_picker.initialize();
user_group_popover.initialize();
user_card_popover.initialize();
playground_links_popover.initialize();
pm_list.initialize();
topic_list.initialize({
on_topic_click(stream_id, topic) {