mirror of
https://github.com/sigmasternchen/mobmash.click
synced 2025-03-15 08:09:02 +00:00
48 lines
No EOL
1.7 KiB
JavaScript
48 lines
No EOL
1.7 KiB
JavaScript
import htmx from 'htmx.org';
|
|
|
|
console.log("module loaded");
|
|
|
|
htmx.defineExtension('img-preload', {
|
|
onEvent: (name, event) => {
|
|
if (
|
|
(
|
|
event?.target?.getAttribute("hx-ext") ??
|
|
event?.target?.getAttribute("data-hx-ext" ?? "")
|
|
) !== "img-preload"
|
|
) {
|
|
return;
|
|
}
|
|
|
|
switch (name) {
|
|
case 'htmx:trigger':
|
|
[eval][0](event.target.getAttribute("data-loading-callback"));
|
|
break;
|
|
case 'htmx:beforeOnLoad':
|
|
event.detail.shouldSwap = false;
|
|
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(event.detail.xhr.response, 'text/html');
|
|
const imagePromises = [...doc.getElementsByTagName('img')]
|
|
.map(img => img.src)
|
|
.map(src => new Promise((resolve, reject) => {
|
|
const image = new Image();
|
|
image.onload = resolve;
|
|
image.onerror = reject;
|
|
image.src = src;
|
|
}));
|
|
|
|
Promise.all(imagePromises)
|
|
.then(() => {
|
|
htmx.swap(event.detail.target, event.detail.xhr.response, {
|
|
swapStyle: "outerHTML",
|
|
transition: true,
|
|
});
|
|
[eval][0](event.target.getAttribute("data-loaded-callback"));
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading images:', error);
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
}); |