mirror of
https://github.com/sigmasternchen/mobmash.click
synced 2025-03-15 08:09:02 +00:00
fix: Loading animation issues
This commit is contained in:
parent
f8bff80e3d
commit
c73201ffe2
6 changed files with 64 additions and 40 deletions
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
18
view/pages/mobSelection.php
Normal file
18
view/pages/mobSelection.php
Normal 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>
|
Loading…
Reference in a new issue