fix: Loading animation issues

This commit is contained in:
overflowerror 2024-08-02 21:45:51 +02:00
parent f8bff80e3d
commit c73201ffe2
6 changed files with 64 additions and 40 deletions

View file

@ -10,12 +10,14 @@ function renderChoice(): void {
$csrfToken = $_SESSION["csrfToken"];
if (isset($_GET["ajax"])) {
$ajax = isset($_GET["ajax"]);
if ($ajax) {
include __DIR__ . "/../view/fragments/mobSelection.php";
} else {
$title = "Test";
$content = function() use ($left, $right, $csrfToken) {
include __DIR__ . "/../view/fragments/mobSelection.php";
include __DIR__ . "/../view/pages/mobSelection.php";
};
include __DIR__ . "/../view/layout.php";

View file

@ -15,6 +15,10 @@ h1 {
text-align: center;
}
.choice {
position: relative;
}
.selection {
display: flex;
flex-direction: row;
@ -26,11 +30,20 @@ h1 {
.separator {
flex-grow: 1;
font-size: 5vw;
position: relative;
}
.separator .or, .separator .spinner {
.middle {
width: 100%;
position: absolute;
top: 0;
height: 100%;
user-select: none;
z-index: -100;
}
.middle .or, .middle .spinner {
font-size: 5vw;
position: absolute;
top: 50%;
width: 100%;
@ -40,7 +53,7 @@ h1 {
transition: opacity 0.5s;
}
.separator .spinner {
.middle .spinner {
opacity: 0;
}
@ -51,7 +64,7 @@ h1 {
opacity: 0;
}
.separator .spinner img {
.middle .spinner img {
animation-name: spinner;
animation-duration: 1s;
animation-iteration-count: infinite;

View file

@ -4,18 +4,18 @@ console.log("module loaded");
htmx.defineExtension('img-preload', {
onEvent: (name, event) => {
if (event.target.getAttribute("hx-ext") !== "img-preload") {
if ((event?.target?.getAttribute("hx-ext") ?? "") !== "img-preload") {
return;
}
const spinner = [...document.querySelectorAll(
const getSpinners = () => [...document.querySelectorAll(
event.target.getAttribute("data-preload-spinner")
?? ".img-preload"
)];
switch (name) {
case 'htmx:trigger':
spinner.forEach(s => s.classList.add("img-preload"));
getSpinners().forEach(s => s.classList.add("img-preload"));
break;
case 'htmx:beforeOnLoad':
event.detail.shouldSwap = false;
@ -33,11 +33,11 @@ htmx.defineExtension('img-preload', {
Promise.all(imagePromises)
.then(() => {
spinner.forEach(s => s.classList.remove("img-preload"));
htmx.swap(event.detail.target, event.detail.xhr.response, {
swapStyle: "outerHTML",
transition: true,
});
getSpinners().forEach(s => s.classList.remove("img-preload"))
})
.catch(error => {
console.error('Error loading images:', error);

View file

@ -3,12 +3,12 @@
$mob ??= [];
$csrfToken ??= "";
?>
<form action="?<?= $side ?>" method="POST" name="<?= $side ?>" id="form-<?= $side ?>"
hx-post="?<?= $side ?>&ajax" hx-target=".choice" hx-swap="outerHTML"
hx-ext="img-preload" data-preload-spinner=".separator">
<input type="hidden" name="csrfToken" value="<?= $csrfToken ?>">
<div class="mob" onclick="htmx.trigger(document.forms['<?= $side ?>'], 'submit', {})">
<div class="mob" onclick="htmx.trigger(document.forms['<?= $side ?>'], 'submit', {})" id="form-<?= $side ?>">
<form action="?<?= $side ?>" method="POST" name="<?= $side ?>"
hx-post="?<?= $side ?>&ajax" hx-target=".selection" hx-swap="outerHTML"
hx-ext="img-preload" data-preload-spinner=".middle">
<input type="hidden" name="csrfToken" value="<?= $csrfToken ?>">
<h2><?= $mob["name"]; ?></h2>
<img alt="<?= $mob["name"]; ?>" src="/images/mobs/<?= $mob["image"] ?? "_placeholder.png"; ?>">
</div>
</form>
</form>
</div>

View file

@ -1,25 +1,16 @@
<div class="choice">
<h1>
Which do you like better?
</h1>
<div class="selection">
<?php
$mob = $left ?? [];
$side = "left";
include __DIR__ . "/mob.php";
?>
<div class="separator">
<div class="or">
OR
</div>
<div class="spinner">
<img src="/images/gras.png" alt="spinner" />
</div>
</div>
<?php
$mob = $right ?? [];
$side = "right";
include __DIR__ . "/mob.php";
?>
<div class="selection">
<?php
$mob = $left ?? [];
$side = "left";
include __DIR__ . "/mob.php";
?>
<div class="separator">
</div>
<?php
$mob = $right ?? [];
$side = "right";
include __DIR__ . "/mob.php";
?>
</div>

View file

@ -0,0 +1,18 @@
<div class="choice">
<h1>
Which do you like better?
</h1>
<?php
$separator = !($ajax ?? false);
require_once __DIR__ . "/../fragments/mobSelection.php";
?>
<div class="middle">
<div class="or">
OR
</div>
<div class="spinner">
<img src="/images/gras.png" alt="spinner" />
</div>
</div>
</div>