jquery: Replace `safeOuterWidth` and `safeOuterHeight` functions.

Replaced all instances of `safeOuterWidth()` and `safeOuterHeight()`
methods from the codebase with the safe counterparts `outerWidth() ?? 0`
and `outerHeight() ?? 0`. Removed custom safeOuterWidth/safeOuterHeight
method definitions from global JQuery object instance.
This commit is contained in:
xoldyckk 2023-05-11 15:12:07 +05:30 committed by Tim Abbott
parent d302ac4a18
commit 1584668dde
4 changed files with 14 additions and 27 deletions

View File

@ -64,11 +64,11 @@ export function message_viewport_info() {
const $element_just_above_us = $("#navbar-fixed-container"); const $element_just_above_us = $("#navbar-fixed-container");
const $element_just_below_us = $("#compose"); const $element_just_below_us = $("#compose");
res.visible_top = $element_just_above_us.safeOuterHeight(); res.visible_top = $element_just_above_us.outerHeight() ?? 0;
const $sticky_header = $(".sticky_header"); const $sticky_header = $(".sticky_header");
if ($sticky_header.length) { if ($sticky_header.length) {
res.visible_top += $sticky_header.safeOuterHeight(); res.visible_top += $sticky_header.outerHeight() ?? 0;
} }
res.visible_bottom = $element_just_below_us.position().top; res.visible_bottom = $element_just_below_us.position().top;
@ -193,11 +193,11 @@ function add_to_visible(
const top_of_feed = new util.CachedValue({ const top_of_feed = new util.CachedValue({
compute_value() { compute_value() {
const $header = $("#navbar-fixed-container"); const $header = $("#navbar-fixed-container");
let visible_top = $header.safeOuterHeight(); let visible_top = $header.outerHeight() ?? 0;
const $sticky_header = $(".sticky_header"); const $sticky_header = $(".sticky_header");
if ($sticky_header.length) { if ($sticky_header.length) {
visible_top += $sticky_header.safeOuterHeight(); visible_top += $sticky_header.outerHeight() ?? 0;
} }
return visible_top; return visible_top;
}, },
@ -367,7 +367,7 @@ export function recenter_view($message, {from_scroll = false, force_center = fal
const bottom_threshold = viewport_info.visible_bottom; const bottom_threshold = viewport_info.visible_bottom;
const message_top = $message.get_offset_to_window().top; const message_top = $message.get_offset_to_window().top;
const message_height = $message.safeOuterHeight(true); const message_height = $message.outerHeight(true) ?? 0;
const message_bottom = message_top + message_height; const message_bottom = message_top + message_height;
const is_above = message_top < top_threshold; const is_above = message_top < top_threshold;
@ -400,7 +400,7 @@ export function maybe_scroll_to_show_message_top() {
const $selected_message = message_lists.current.selected_row(); const $selected_message = message_lists.current.selected_row();
const viewport_info = message_viewport_info(); const viewport_info = message_viewport_info();
const message_top = $selected_message.get_offset_to_window().top; const message_top = $selected_message.get_offset_to_window().top;
const message_height = $selected_message.safeOuterHeight(true); const message_height = $selected_message.outerHeight(true) ?? 0;
if (message_top < viewport_info.visible_top) { if (message_top < viewport_info.visible_top) {
set_message_position(message_top, message_height, viewport_info, 0); set_message_position(message_top, message_height, viewport_info, 0);
popovers.set_suppress_scroll_hide(); popovers.set_suppress_scroll_hide();
@ -447,7 +447,7 @@ export function keep_pointer_in_view() {
// If at least part of the message is below top_threshold (10% from // If at least part of the message is below top_threshold (10% from
// the top), then we also leave it alone. // the top), then we also leave it alone.
const bottom_offset = message_top + $next_row.safeOuterHeight(true); const bottom_offset = message_top + ($next_row.outerHeight(true) ?? 0);
if (bottom_offset >= top_threshold) { if (bottom_offset >= top_threshold) {
return true; return true;
} }

View File

@ -25,7 +25,7 @@ export function down(with_centering) {
// lots of nice whitespace for new messages coming in. // lots of nice whitespace for new messages coming in.
const $current_msg_table = rows.get_table(message_lists.current.table_name); const $current_msg_table = rows.get_table(message_lists.current.table_name);
message_viewport.scrollTop( message_viewport.scrollTop(
$current_msg_table.safeOuterHeight(true) - message_viewport.height() * 0.1, ($current_msg_table.outerHeight(true) ?? 0) - message_viewport.height() * 0.1,
); );
unread_ops.process_scrolled_to_bottom(); unread_ops.process_scrolled_to_bottom();
} }

View File

@ -19,15 +19,15 @@ function get_bottom_whitespace_height() {
function get_new_heights() { function get_new_heights() {
const res = {}; const res = {};
const viewport_height = message_viewport.height(); const viewport_height = message_viewport.height();
const right_sidebar_shortcuts_height = $(".right-sidebar-shortcuts").safeOuterHeight(true) || 0; const right_sidebar_shortcuts_height = $(".right-sidebar-shortcuts").outerHeight(true) ?? 0;
res.stream_filters_max_height = res.stream_filters_max_height =
viewport_height - viewport_height -
Number.parseInt($("#left-sidebar").css("paddingTop"), 10) - Number.parseInt($("#left-sidebar").css("paddingTop"), 10) -
Number.parseInt($(".narrows_panel").css("marginTop"), 10) - Number.parseInt($(".narrows_panel").css("marginTop"), 10) -
Number.parseInt($(".narrows_panel").css("marginBottom"), 10) - Number.parseInt($(".narrows_panel").css("marginBottom"), 10) -
$("#global_filters").safeOuterHeight(true) - ($("#global_filters").outerHeight(true) ?? 0) -
$("#private_messages_sticky_header").safeOuterHeight(true); ($("#private_messages_sticky_header").outerHeight(true) ?? 0);
// Don't let us crush the stream sidebar completely out of view // Don't let us crush the stream sidebar completely out of view
res.stream_filters_max_height = Math.max(80, res.stream_filters_max_height); res.stream_filters_max_height = Math.max(80, res.stream_filters_max_height);
@ -37,8 +37,8 @@ function get_new_heights() {
const usable_height = const usable_height =
viewport_height - viewport_height -
Number.parseInt($("#right-sidebar").css("paddingTop"), 10) - Number.parseInt($("#right-sidebar").css("paddingTop"), 10) -
$("#userlist-header").safeOuterHeight(true) - ($("#userlist-header").outerHeight(true) ?? 0) -
$("#user_search_section").safeOuterHeight(true) - ($("#user_search_section").outerHeight(true) ?? 0) -
right_sidebar_shortcuts_height; right_sidebar_shortcuts_height;
res.buddy_list_wrapper_max_height = Math.max(80, usable_height); res.buddy_list_wrapper_max_height = Math.max(80, usable_height);
@ -146,7 +146,7 @@ export function resize_sidebars() {
} }
export function update_recent_topics_filters_height() { export function update_recent_topics_filters_height() {
const recent_topics_filters_height = $("#recent_topics_filter_buttons").safeOuterHeight(true); const recent_topics_filters_height = $("#recent_topics_filter_buttons").outerHeight(true) ?? 0;
$("html").css("--recent-topics-filters-height", `${recent_topics_filters_height}px`); $("html").css("--recent-topics-filters-height", `${recent_topics_filters_height}px`);
} }

View File

@ -22,23 +22,10 @@ $(() => {
}); });
} }
// This is an issue fix where in jQuery v3 the result of outerHeight on a node
// that doesnt exist is now “undefined” rather than “null”, which means it
// will no longer cast to a Number but rather NaN. For this, we create the
// `safeOuterHeight` and `safeOuterWidth` functions to safely return a result
// (or 0).
$.fn.safeOuterHeight = function (...args) {
return this.outerHeight(...args) || 0;
};
$.fn.get_offset_to_window = function () { $.fn.get_offset_to_window = function () {
return this[0].getBoundingClientRect(); return this[0].getBoundingClientRect();
}; };
$.fn.safeOuterWidth = function (...args) {
return this.outerWidth(...args) || 0;
};
$.fn.expectOne = function () { $.fn.expectOne = function () {
if (blueslip && this.length !== 1) { if (blueslip && this.length !== 1) {
blueslip.error("Expected one element in jQuery set", {length: this.length}); blueslip.error("Expected one element in jQuery set", {length: this.length});