FIX: improve the way magnific popup is loaded (#15348)

This commit is contained in:
Joe 2021-12-29 00:48:03 +08:00 committed by GitHub
parent c665003203
commit e09742aa69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 55 deletions

View File

@ -1,31 +1,14 @@
import Component from "@ember/component";
import { or } from "@ember/object/computed";
import UppyUploadMixin from "discourse/mixins/uppy-upload";
import { ajax } from "discourse/lib/ajax";
import discourseComputed from "discourse-common/utils/decorators";
import discourseComputed, { on } from "discourse-common/utils/decorators";
import { getURLWithCDN } from "discourse-common/lib/get-url";
import { isEmpty } from "@ember/utils";
import lightbox from "discourse/lib/lightbox";
import { next } from "@ember/runloop";
import { popupAjaxError } from "discourse/lib/ajax-error";
export default Component.extend(UppyUploadMixin, {
classNames: ["image-uploader"],
loadingLightbox: false,
init() {
this._super(...arguments);
this._applyLightbox();
},
willDestroyElement() {
this._super(...arguments);
const elem = $("a.lightbox");
if (elem && typeof elem.magnificPopup === "function") {
$("a.lightbox").magnificPopup("close");
}
},
uploadingOrProcessing: or("uploading", "processing"),
@discourseComputed("imageUrl", "placeholderUrl")
@ -75,8 +58,6 @@ export default Component.extend(UppyUploadMixin, {
imageHeight: upload.height,
});
this._applyLightbox();
// the value of the property used for imageUrl should be set
// in this callback. this should be done in cases where imageUrl
// is bound to a computed property of the parent component.
@ -87,42 +68,21 @@ export default Component.extend(UppyUploadMixin, {
}
},
_openLightbox() {
next(() =>
$(this.element.querySelector("a.lightbox")).magnificPopup("open")
);
@on("didRender")
_applyLightbox() {
next(() => lightbox(this.element, this.siteSettings));
},
_applyLightbox() {
if (this.imageUrl) {
next(() => lightbox(this.element, this.siteSettings));
@on("willDestroyElement")
_closeOnRemoval() {
if ($.magnificPopup?.instance) {
$.magnificPopup.instance.close();
}
},
actions: {
toggleLightbox() {
if (this.imageFilename) {
this._openLightbox();
} else {
this.set("loadingLightbox", true);
ajax(`/uploads/lookup-metadata`, {
type: "POST",
data: { url: this.imageUrl },
})
.then((json) => {
this.setProperties({
imageFilename: json.original_filename,
imageFilesize: json.human_filesize,
imageWidth: json.width,
imageHeight: json.height,
});
this._openLightbox();
this.set("loadingLightbox", false);
})
.catch(popupAjaxError);
}
$(this.element.querySelector("a.lightbox"))?.magnificPopup("open");
},
trash() {

View File

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

View File

@ -9,24 +9,29 @@ import loadScript from "discourse/lib/load-script";
import { renderIcon } from "discourse-common/lib/icon-library";
import { spinnerHTML } from "discourse/helpers/loading-spinner";
import { helperContext } from "discourse-common/lib/helpers";
import { isTesting } from "discourse-common/config/environment";
export default function (elem, siteSettings) {
if (!elem) {
return;
}
const lightboxes = elem.querySelectorAll(
"*:not(.spoiler):not(.spoiled) a.lightbox"
);
if (!lightboxes.length) {
return;
}
const caps = helperContext().capabilities;
const imageClickNavigation = caps.touch;
loadScript("/javascripts/jquery.magnific-popup.min.js").then(function () {
const lightboxes = elem.querySelectorAll(
"*:not(.spoiler):not(.spoiled) a.lightbox"
);
$(lightboxes).magnificPopup({
type: "image",
closeOnContentClick: false,
removalDelay: 300,
removalDelay: isTesting() ? 0 : 300,
mainClass: "mfp-zoom-in",
tClose: I18n.t("lightbox.close"),
tLoading: spinnerHTML,