Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

PERF: Refactor lightbox decorator to use querySelectorAll (#10158) 

Previously we were using `$elem.find(...).not($elem.find(...))`. This took approximately 2ms on my machine with a test post.

This commit switches to using a native querySelectorAll method, which takes less than 0.5ms on the same test post.
This commit is contained in:
David Taylor 2020-07-02 11:04:19 +01:00 committed by GitHub
parent 6bab2acc9f
commit 95153356ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/image-uploader.js
View File

@ -86,7 +86,7 @@ export default Component.extend(UploadMixin, {
}, },
_applyLightbox() { _applyLightbox() {
if (this.imageUrl) next(() => lightbox($(this.element))); if (this.imageUrl) next(() => lightbox(this.element));
}, },
actions: { actions: {

2
app/assets/javascripts/discourse/app/initializers/post-decorations.js
View File

@ -12,7 +12,7 @@ export default {
api.decorateCooked(highlightSyntax, { api.decorateCooked(highlightSyntax, {
id: "discourse-syntax-highlighting" id: "discourse-syntax-highlighting"
}); });
api.decorateCooked(lightbox, { id: "discourse-lightbox" }); api.decorateCookedElement(lightbox, { id: "discourse-lightbox" });
if (siteSettings.support_mixed_text_direction) { if (siteSettings.support_mixed_text_direction) {
api.decorateCooked(setTextDirections, { api.decorateCooked(setTextDirections, {
id: "discourse-text-direction" id: "discourse-text-direction"

148
app/assets/javascripts/discourse/app/lib/lightbox.js
View File

@ -6,93 +6,91 @@ import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities";
import { spinnerHTML } from "discourse/helpers/loading-spinner"; import { spinnerHTML } from "discourse/helpers/loading-spinner";
import User from "discourse/models/user"; import User from "discourse/models/user";
export default function($elem) { export default function(elem) {
if (!$elem) { if (!elem) {
return; return;
} }
loadScript("/javascripts/jquery.magnific-popup.min.js").then(function() { loadScript("/javascripts/jquery.magnific-popup.min.js").then(function() {
const spoilers = $elem.find(".spoiler a.lightbox, .spoiled a.lightbox"); const lightboxes = elem.querySelectorAll(
"*:not(.spoiler):not(.spoiled) a.lightbox"
);
$(lightboxes).magnificPopup({
type: "image",
closeOnContentClick: false,
removalDelay: 300,
mainClass: "mfp-zoom-in",
tClose: I18n.t("lightbox.close"),
tLoading: spinnerHTML,
$elem gallery: {
.find("a.lightbox") enabled: true,
.not(spoilers) tPrev: I18n.t("lightbox.previous"),
.magnificPopup({ tNext: I18n.t("lightbox.next"),
type: "image", tCounter: I18n.t("lightbox.counter")
closeOnContentClick: false, },
removalDelay: 300,
mainClass: "mfp-zoom-in",
tClose: I18n.t("lightbox.close"),
tLoading: spinnerHTML,
gallery: { ajax: {
enabled: true, tError: I18n.t("lightbox.content_load_error")
tPrev: I18n.t("lightbox.previous"), },
tNext: I18n.t("lightbox.next"),
tCounter: I18n.t("lightbox.counter")
},
ajax: { callbacks: {
tError: I18n.t("lightbox.content_load_error") open() {
}, const wrap = this.wrap,
img = this.currItem.img,
maxHeight = img.css("max-height");
callbacks: { wrap.on("click.pinhandler", "img", function() {
open() { wrap.toggleClass("mfp-force-scrollbars");
const wrap = this.wrap, img.css(
img = this.currItem.img, "max-height",
maxHeight = img.css("max-height"); wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight
);
});
wrap.on("click.pinhandler", "img", function() { if (isAppWebview()) {
wrap.toggleClass("mfp-force-scrollbars"); postRNWebviewMessage(
img.css( "headerBg",
"max-height", $(".mfp-bg").css("background-color")
wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight );
);
});
if (isAppWebview()) {
postRNWebviewMessage(
"headerBg",
$(".mfp-bg").css("background-color")
);
}
},
beforeClose() {
this.wrap.off("click.pinhandler");
this.wrap.removeClass("mfp-force-scrollbars");
if (isAppWebview()) {
postRNWebviewMessage(
"headerBg",
$(".d-header").css("background-color")
);
}
} }
}, },
beforeClose() {
image: { this.wrap.off("click.pinhandler");
tError: I18n.t("lightbox.image_load_error"), this.wrap.removeClass("mfp-force-scrollbars");
titleSrc(item) { if (isAppWebview()) {
const href = item.el.data("download-href") || item.src; postRNWebviewMessage(
let src = [ "headerBg",
escapeExpression(item.el.attr("title")), $(".d-header").css("background-color")
$("span.informations", item.el).text() );
];
if (
!Discourse.SiteSettings.prevent_anons_from_downloading_files ||
User.current()
) {
src.push(
'<a class="image-source-link" href="' +
href +
'">' +
renderIcon("string", "download") +
I18n.t("lightbox.download") +
"</a>"
);
}
return src.join(" &middot; ");
} }
} }
}); },
image: {
tError: I18n.t("lightbox.image_load_error"),
titleSrc(item) {
const href = item.el.data("download-href") || item.src;
let src = [
escapeExpression(item.el.attr("title")),
$("span.informations", item.el).text()
];
if (
!Discourse.SiteSettings.prevent_anons_from_downloading_files ||
User.current()
) {
src.push(
'<a class="image-source-link" href="' +
href +
'">' +
renderIcon("string", "download") +
I18n.t("lightbox.download") +
"</a>"
);
}
return src.join(" &middot; ");
}
}
});
}); });
} }