From bae28dfe64b43786bbc5276bf1a00f445a83855c Mon Sep 17 00:00:00 2001 From: Hardik Dharmani Date: Sat, 1 Jul 2023 23:47:24 +0530 Subject: [PATCH] message_list_hover: Extract module for hover/unhover logic. Remove the various message-hover related functions from ui_init.js and put them in a new module. --- tools/test-js-with-node | 1 + web/src/message_list_hover.js | 118 ++++++++++++++++++++++++++++++++++ web/src/ui_init.js | 114 +------------------------------- 3 files changed, 121 insertions(+), 112 deletions(-) create mode 100644 web/src/message_list_hover.js diff --git a/tools/test-js-with-node b/tools/test-js-with-node index fe2fd75cbb..60f1c0b78e 100755 --- a/tools/test-js-with-node +++ b/tools/test-js-with-node @@ -119,6 +119,7 @@ EXEMPT_FILES = make_set( "web/src/message_fetch.js", "web/src/message_list.js", "web/src/message_list_data.js", + "web/src/message_list_hover.js", "web/src/message_list_tooltips.js", "web/src/message_list_view.js", "web/src/message_lists.js", diff --git a/web/src/message_list_hover.js b/web/src/message_list_hover.js new file mode 100644 index 0000000000..00bbaa78d8 --- /dev/null +++ b/web/src/message_list_hover.js @@ -0,0 +1,118 @@ +import $ from "jquery"; + +import render_edit_content_button from "../templates/edit_content_button.hbs"; + +import * as message_edit from "./message_edit"; +import * as message_lists from "./message_lists"; +import * as rows from "./rows"; + +let $current_message_hover; +export function message_unhover() { + if ($current_message_hover === undefined) { + return; + } + $current_message_hover.find("span.edit_content").empty(); + $current_message_hover = undefined; +} + +export function message_hover($message_row) { + const id = rows.id($message_row); + if ($current_message_hover && rows.id($current_message_hover) === id) { + return; + } + + const message = message_lists.current.get(rows.id($message_row)); + message_unhover(); + $current_message_hover = $message_row; + + if (!message.sent_by_me) { + // The actions and reactions icon hover logic is handled entirely by CSS + return; + } + + // But the message edit hover icon is determined by whether the message is still editable + const is_content_editable = message_edit.is_content_editable(message); + + const can_move_message = message_edit.can_move_message(message); + const args = { + is_content_editable: is_content_editable && !message.status_message, + can_move_message, + msg_id: id, + }; + const $edit_content = $message_row.find(".edit_content"); + $edit_content.html(render_edit_content_button(args)); + + let data_template_id = "view-source-tooltip-template"; + if (args.is_content_editable) { + data_template_id = "edit-content-tooltip-template"; + } else if (args.can_move_message) { + data_template_id = "move-message-tooltip-template"; + } + $edit_content.attr("data-tooltip-template-id", data_template_id); +} + +export function initialize() { + $("#main_div").on("mouseover", ".message-list .message_row", function () { + const $row = $(this).closest(".message_row"); + message_hover($row); + }); + + $("#main_div").on("mouseleave", ".message-list .message_row", () => { + message_unhover(); + }); + + $("#main_div").on("mouseover", ".sender_info_hover", function () { + const $row = $(this).closest(".message_row"); + $row.addClass("sender_name_hovered"); + }); + + $("#main_div").on("mouseout", ".sender_info_hover", function () { + const $row = $(this).closest(".message_row"); + $row.removeClass("sender_name_hovered"); + }); + + function handle_video_preview_mouseenter($elem) { + // Set image height and css vars for play button position, if not done already + const setPosition = !$elem.data("entered-before"); + if (setPosition) { + const imgW = $elem.find("img")[0].width; + const imgH = $elem.find("img")[0].height; + // Ensure height doesn't change on mouse enter + $elem.css("height", `${imgH}px`); + // variables to set play button position + const marginLeft = (imgW - 30) / 2; + const marginTop = (imgH - 26) / 2; + $elem.css("--margin-left", `${marginLeft}px`).css("--margin-top", `${marginTop}px`); + $elem.data("entered-before", true); + } + $elem.addClass("fa fa-play"); + } + + $("#main_div").on("mouseenter", ".youtube-video a", function () { + handle_video_preview_mouseenter($(this)); + }); + + $("#main_div").on("mouseleave", ".youtube-video a", function () { + $(this).removeClass("fa fa-play"); + }); + + $("#main_div").on("mouseenter", ".embed-video a", function () { + handle_video_preview_mouseenter($(this)); + }); + + $("#main_div").on("mouseleave", ".embed-video a", function () { + $(this).removeClass("fa fa-play"); + }); + + $("body").on("mouseover", ".message_edit_content", function () { + $(this).closest(".message_row").find(".copy_message").show(); + }); + + $("body").on("mouseout", ".message_edit_content", function () { + $(this).closest(".message_row").find(".copy_message").hide(); + }); + + $("body").on("mouseenter", ".copy_message", function () { + $(this).show(); + }); +} diff --git a/web/src/ui_init.js b/web/src/ui_init.js index e02c4d58aa..925f3fa669 100644 --- a/web/src/ui_init.js +++ b/web/src/ui_init.js @@ -5,7 +5,6 @@ import generated_emoji_codes from "../../static/generated/emoji/emoji_codes.json import generated_pygments_data from "../generated/pygments_data.json"; import * as fenced_code from "../shared/src/fenced_code"; import render_compose from "../templates/compose.hbs"; -import render_edit_content_button from "../templates/edit_content_button.hbs"; import render_left_sidebar from "../templates/left_sidebar.hbs"; import render_message_feed_bottom_whitespace from "../templates/message_feed_bottom_whitespace.hbs"; import render_message_feed_errors from "../templates/message_feed_errors.hbs"; @@ -49,9 +48,9 @@ import * as linkifiers from "./linkifiers"; import {localstorage} from "./localstorage"; import * as markdown from "./markdown"; import * as markdown_config from "./markdown_config"; -import * as message_edit from "./message_edit"; import * as message_edit_history from "./message_edit_history"; import * as message_fetch from "./message_fetch"; +import * as message_list_hover from "./message_list_hover"; import * as message_list_tooltips from "./message_list_tooltips"; import * as message_lists from "./message_lists"; import * as message_scroll from "./message_scroll"; @@ -79,7 +78,6 @@ import * as recent_view_ui from "./recent_view_ui"; import * as reload from "./reload"; import * as rendered_markdown from "./rendered_markdown"; import * as resize from "./resize"; -import * as rows from "./rows"; import * as scheduled_messages from "./scheduled_messages"; import * as scheduled_messages_overlay_ui from "./scheduled_messages_overlay_ui"; import * as scroll_bar from "./scroll_bar"; @@ -135,51 +133,6 @@ import * as user_topics from "./user_topics"; because we want to reserve space for the email address. This avoids things jumping around slightly when the email address is shown. */ -let $current_message_hover; -function message_unhover() { - if ($current_message_hover === undefined) { - return; - } - $current_message_hover.find("span.edit_content").empty(); - $current_message_hover = undefined; -} - -function message_hover($message_row) { - const id = rows.id($message_row); - if ($current_message_hover && rows.id($current_message_hover) === id) { - return; - } - - const message = message_lists.current.get(rows.id($message_row)); - message_unhover(); - $current_message_hover = $message_row; - - if (!message.sent_by_me) { - // The actions and reactions icon hover logic is handled entirely by CSS - return; - } - - // But the message edit hover icon is determined by whether the message is still editable - const is_content_editable = message_edit.is_content_editable(message); - - const can_move_message = message_edit.can_move_message(message); - const args = { - is_content_editable: is_content_editable && !message.status_message, - can_move_message, - msg_id: id, - }; - const $edit_content = $message_row.find(".edit_content"); - $edit_content.html(render_edit_content_button(args)); - - let data_template_id = "view-source-tooltip-template"; - if (args.is_content_editable) { - data_template_id = "edit-content-tooltip-template"; - } else if (args.can_move_message) { - data_template_id = "move-message-tooltip-template"; - } - $edit_content.attr("data-tooltip-template-id", data_template_id); -} - function initialize_bottom_whitespace() { $("#bottom_whitespace").html(render_message_feed_bottom_whitespace()); } @@ -345,58 +298,6 @@ export function initialize_kitchen_sink_stuff() { $("body").addClass("more_dense_mode"); } - $("#main_div").on("mouseover", ".message-list .message_row", function () { - const $row = $(this).closest(".message_row"); - message_hover($row); - }); - - $("#main_div").on("mouseleave", ".message-list .message_row", () => { - message_unhover(); - }); - - $("#main_div").on("mouseover", ".sender_info_hover", function () { - const $row = $(this).closest(".message_row"); - $row.addClass("sender_name_hovered"); - }); - - $("#main_div").on("mouseout", ".sender_info_hover", function () { - const $row = $(this).closest(".message_row"); - $row.removeClass("sender_name_hovered"); - }); - - function handle_video_preview_mouseenter($elem) { - // Set image height and css vars for play button position, if not done already - const setPosition = !$elem.data("entered-before"); - if (setPosition) { - const imgW = $elem.find("img")[0].width; - const imgH = $elem.find("img")[0].height; - // Ensure height doesn't change on mouse enter - $elem.css("height", `${imgH}px`); - // variables to set play button position - const marginLeft = (imgW - 30) / 2; - const marginTop = (imgH - 26) / 2; - $elem.css("--margin-left", `${marginLeft}px`).css("--margin-top", `${marginTop}px`); - $elem.data("entered-before", true); - } - $elem.addClass("fa fa-play"); - } - - $("#main_div").on("mouseenter", ".youtube-video a", function () { - handle_video_preview_mouseenter($(this)); - }); - - $("#main_div").on("mouseleave", ".youtube-video a", function () { - $(this).removeClass("fa fa-play"); - }); - - $("#main_div").on("mouseenter", ".embed-video a", function () { - handle_video_preview_mouseenter($(this)); - }); - - $("#main_div").on("mouseleave", ".embed-video a", function () { - $(this).removeClass("fa fa-play"); - }); - $(window).on("blur", () => { $(document.body).addClass("window_blurred"); }); @@ -454,18 +355,6 @@ export function initialize_kitchen_sink_stuff() { } }); - $("body").on("mouseover", ".message_edit_content", function () { - $(this).closest(".message_row").find(".copy_message").show(); - }); - - $("body").on("mouseout", ".message_edit_content", function () { - $(this).closest(".message_row").find(".copy_message").hide(); - }); - - $("body").on("mouseenter", ".copy_message", function () { - $(this).show(); - }); - if (!page_params.realm_allow_message_editing) { $("#edit-message-hotkey-help").hide(); } @@ -691,6 +580,7 @@ export function initialize_everything() { scroll_bar.initialize(); message_viewport.initialize(); navbar_alerts.initialize(); + message_list_hover.initialize(); initialize_kitchen_sink_stuff(); echo.initialize({on_send_message_success: compose.send_message_success}); stream_edit.initialize();