FIX: improve the way magnific popup is loaded (#15348)
This commit is contained in:
parent
c665003203
commit
e09742aa69
|
@ -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() {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue