Skip to content

Commit b0f94fb

Browse files
committed
maint(pat inject): Modernize some parts of pat inject.
1 parent cdc346a commit b0f94fb

File tree

1 file changed

+53
-38
lines changed

1 file changed

+53
-38
lines changed

src/pat/inject/inject.js

Lines changed: 53 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,6 @@ const inject = {
347347
return false;
348348
}
349349
cfg.$target = this.createTarget(cfg.target);
350-
cfg.$injected = cfg.$target;
351350
}
352351
return true;
353352
},
@@ -455,23 +454,36 @@ const inject = {
455454
/* Called after the XHR has succeeded and we have a new $source
456455
* element to inject.
457456
*/
458-
if (cfg.sourceMod === "content") {
459-
$source = $source.contents();
460-
}
461-
const $src = $source.safeClone();
462-
for (const img of dom.querySelectorAllAndMe($src[0], "img")) {
463-
$(img).on("load", (e) => {
464-
$(e.currentTarget).trigger("pat-inject-content-loaded");
465-
});
457+
const wrapper = document.createElement("div");
458+
if ($source.length > 0) {
459+
if (cfg.sourceMod === "content") {
460+
wrapper.innerHTML = $source[0].innerHTML;
461+
} else {
462+
wrapper.innerHTML = $source[0].outerHTML;
463+
}
464+
465+
for (const img of wrapper.querySelectorAll("img")) {
466+
events.add_event_listener(
467+
img,
468+
"load",
469+
"inject_img_load",
470+
(e) => {
471+
$(e.currentTarget).trigger("pat-inject-content-loaded");
472+
},
473+
{ once: true }
474+
);
475+
}
466476
}
467477

468-
const $injected = cfg.$injected || $src;
478+
// Copy, because after insertion wrapper.children is empty.
479+
const source_nodes = [...wrapper.childNodes];
480+
469481
// Now the injection actually happens.
470-
if (this._inject(trigger, $src, $(target), cfg)) {
482+
if (this._inject(trigger, source_nodes, target, cfg)) {
471483
// Update history
472484
this._update_history(cfg, trigger, title);
473485
// Post-injection
474-
this._afterInjection($el, $injected, cfg);
486+
this._afterInjection($el, $(source_nodes), cfg);
475487
}
476488
},
477489

@@ -488,9 +500,12 @@ const inject = {
488500
history.pushState({ url: url }, "", url);
489501
// Also inject title element if we have one
490502
if (title) {
491-
this._inject(trigger, title, $("title"), {
492-
action: "element",
493-
});
503+
const title_el = document.querySelector("title");
504+
if (title_el) {
505+
this._inject(trigger, title, title_el, {
506+
action: "element",
507+
});
508+
}
494509
}
495510
},
496511

@@ -761,45 +776,45 @@ const inject = {
761776
}
762777
},
763778

764-
_inject(trigger, $source, $target, cfg) {
765-
// action to jquery method mapping, except for "content"
766-
// and "element"
767-
const method = {
768-
contentbefore: "prepend",
769-
contentafter: "append",
770-
elementbefore: "before",
771-
elementafter: "after",
772-
}[cfg.action];
773-
779+
_inject(trigger, source, target, cfg) {
774780
if (cfg.source === "none") {
775-
$target.replaceWith("");
781+
// Special case. Clear the target after ajax call.
782+
target.replaceWith("");
776783
return true;
777784
}
778-
if ($source.length === 0) {
779-
log.warn("Aborting injection, source not found:", $source);
785+
if (source.length === 0) {
786+
log.warn("Aborting injection, source not found:", source);
780787
$(trigger).trigger("pat-inject-missingSource", {
781788
url: cfg.url,
782789
selector: cfg.source,
783790
});
784791
return false;
785792
}
786-
if (cfg.target === "none")
793+
if (cfg.target === "none") {
787794
// Special case. Don't do anything, we don't want any result
788795
return true;
789-
if ($target.length === 0) {
790-
log.warn("Aborting injection, target not found:", $target);
796+
}
797+
if (!target) {
798+
log.warn("Aborting injection, target not found:", target);
791799
$(trigger).trigger("pat-inject-missingTarget", {
792800
selector: cfg.target,
793801
});
794802
return false;
795803
}
796-
if (cfg.action === "content") {
797-
$target.empty().append($source);
798-
} else if (cfg.action === "element") {
799-
$target.replaceWith($source);
800-
} else {
801-
$target[method]($source);
802-
}
804+
805+
// cfg.action to DOM method mapping
806+
const method = {
807+
content: "replaceChildren",
808+
contentafter: "append",
809+
contentbefore: "prepend",
810+
element: "replaceWith",
811+
elementafter: "after",
812+
elementbefore: "before",
813+
}[cfg.action];
814+
815+
// Inject the content HERE!
816+
target[method](...source);
817+
803818
return true;
804819
},
805820

0 commit comments

Comments
 (0)