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

hotspots: Move overlay click handler into module. 

In preparation of fixing the performance issues associated with
hotspots.is_open, this commit moves the various handlers for hotspots'
overlay from click_handlers.js into the hotspots module. This will set
us up to cleanly keep track of the open state from within the module
(instead of needing to look at the DOM).
This commit is contained in:
Steve Gattuso 2023-02-03 14:37:01 +01:00 committed by Tim Abbott
parent 682192ec3c
commit 53e947e501
2 changed files with 52 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/src/click_handlers.js
View File

@ -18,7 +18,6 @@ import {media_breakpoints_num} from "./css_variables";
import * as dark_theme from "./dark_theme";
import * as emoji_picker from "./emoji_picker";
import * as hash_util from "./hash_util";
import * as hotspots from "./hotspots";
import * as message_edit from "./message_edit";
import * as message_flags from "./message_flags";
import * as message_lists from "./message_lists";
@ -27,7 +26,6 @@ import * as muted_topics_ui from "./muted_topics_ui";
import * as narrow from "./narrow";
import * as navigate from "./navigate";
import * as notifications from "./notifications";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
import * as pm_list from "./pm_list";
import * as popovers from "./popovers";
@ -762,59 +760,6 @@ export function initialize() {
// Don't focus links on context menu.
$("body").on("contextmenu", "a", (e) => e.target.blur());
// HOTSPOTS
// open
$("body").on("click", ".hotspot-icon", function (e) {
// hide icon
hotspots.close_hotspot_icon(this);
// show popover
const [, hotspot_name] = /^hotspot_(.*)_icon$/.exec(
$(e.target).closest(".hotspot-icon").attr("id"),
);
const overlay_name = "hotspot_" + hotspot_name + "_overlay";
overlays.open_overlay({
name: overlay_name,
$overlay: $(`#${CSS.escape(overlay_name)}`),
on_close: function () {
// close popover
$(this).css({display: "block"});
$(this).animate(
{opacity: 1},
{
duration: 300,
},
);
}.bind(this),
});
e.preventDefault();
e.stopPropagation();
});
// confirm
$("body").on("click", ".hotspot.overlay .hotspot-confirm", function (e) {
e.preventDefault();
e.stopPropagation();
const overlay_name = $(this).closest(".hotspot.overlay").attr("id");
const [, hotspot_name] = /^hotspot_(.*)_overlay$/.exec(overlay_name);
// Comment below to disable marking hotspots as read in production
hotspots.post_hotspot_as_read(hotspot_name);
overlays.close_overlay(overlay_name);
$(`#hotspot_${CSS.escape(hotspot_name)}_icon`).remove();
});
// stop propagation
$("body").on("click", ".hotspot.overlay .hotspot-popover", (e) => {
e.stopPropagation();
});
// GEAR MENU
$("body").on("click", ".change-language-spectator, .language_selection_widget button", (e) => {

52
web/src/hotspots.js
View File

@ -7,6 +7,7 @@ import render_hotspot_overlay from "../templates/hotspot_overlay.hbs";
import * as blueslip from "./blueslip";
import * as channel from "./channel";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
import * as popovers from "./popovers";
@ -271,4 +272,55 @@ export function load_new(new_hotspots) {
export function initialize() {
load_new(page_params.hotspots);
// open
$("body").on("click", ".hotspot-icon", function (e) {
// hide icon
close_hotspot_icon(this);
// show popover
const [, hotspot_name] = /^hotspot_(.*)_icon$/.exec(
$(e.target).closest(".hotspot-icon").attr("id"),
);
const overlay_name = "hotspot_" + hotspot_name + "_overlay";
overlays.open_overlay({
name: overlay_name,
$overlay: $(`#${CSS.escape(overlay_name)}`),
on_close: function () {
// close popover
$(this).css({display: "block"});
$(this).animate(
{opacity: 1},
{
duration: 300,
},
);
}.bind(this),
});
e.preventDefault();
e.stopPropagation();
});
// confirm
$("body").on("click", ".hotspot.overlay .hotspot-confirm", function (e) {
e.preventDefault();
e.stopPropagation();
const overlay_name = $(this).closest(".hotspot.overlay").attr("id");
const [, hotspot_name] = /^hotspot_(.*)_overlay$/.exec(overlay_name);
// Comment below to disable marking hotspots as read in production
post_hotspot_as_read(hotspot_name);
overlays.close_overlay(overlay_name);
$(`#hotspot_${CSS.escape(hotspot_name)}_icon`).remove();
});
// stop propagation
$("body").on("click", ".hotspot.overlay .hotspot-popover", (e) => {
e.stopPropagation();
});
}