Bind a single resize event, debounced, instead of one handler per preview

This commit is contained in:
Jérémie Astori 2018-04-08 17:49:00 -04:00
parent ac02bd370b
commit d55420faae
No known key found for this signature in database
GPG key ID: B9A4F245CD67BDE8

View file

@ -9,6 +9,8 @@ const socket = require("./socket");
const templates = require("../views");
const chat = $("#chat");
const {togglePreviewMoreButtonsIfNeeded} = require("./utils");
module.exports = renderPreview;
function renderPreview(preview, msg) {
@ -90,13 +92,6 @@ function appendPreview(preview, msg, template) {
// "More" button only applies on text previews
if (preview.type === "link") {
// On resize, only touch previews in the current channel that are expanded
$(window).on("resize", debounce(() => {
if (channel.hasClass("active") && previewContent.hasClass("show")) {
showMoreIfNeeded();
}
}, 150));
// This event is triggered when a side menu is opened/closed, or when the
// preview gets expanded/collapsed.
previewContent.on("showMoreIfNeeded",
@ -114,6 +109,10 @@ function appendPreview(preview, msg, template) {
}
}
// On resize, previews in the current channel that are expanded need to compute
// their "More" button. Debounced handler to avoid performance cost.
$(window).on("resize", debounce(togglePreviewMoreButtonsIfNeeded, 150));
$("#chat").on("click", ".text .toggle-button", function() {
const self = $(this);
const container = self.closest(".chat");