From f8bff80e3d63f77a9fefb63c799fc42766babb7a Mon Sep 17 00:00:00 2001
From: overflowerror <mail@overflowerror.com>
Date: Fri, 2 Aug 2024 17:25:23 +0200
Subject: [PATCH] feat: AJAX loading with loading animation

---
 html/images/gras.png            | Bin 0 -> 4662 bytes
 html/index.php                  |  22 +++++++++++----
 html/styles/main.css            |  32 ++++++++++++++++++++-
 resources/js/htmx.js            |   5 ++++
 resources/js/img-preload.ext.js |  48 ++++++++++++++++++++++++++++++++
 resources/js/index.js           |   5 ++--
 resources/js/package-lock.json  |   8 +++---
 resources/js/package.json       |   2 +-
 view/fragments/mob.php          |   6 ++--
 view/fragments/mobSelection.php |  39 +++++++++++++++-----------
 10 files changed, 133 insertions(+), 34 deletions(-)
 create mode 100644 html/images/gras.png
 create mode 100644 resources/js/htmx.js
 create mode 100644 resources/js/img-preload.ext.js

diff --git a/html/images/gras.png b/html/images/gras.png
new file mode 100644
index 0000000000000000000000000000000000000000..22300158ef53793d5dfc7300c174f85643ee58b3
GIT binary patch
literal 4662
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
ArvLx|

literal 0
HcmV?d00001

diff --git a/html/index.php b/html/index.php
index 31c1219..6d6b8a9 100644
--- a/html/index.php
+++ b/html/index.php
@@ -9,16 +9,26 @@ function renderChoice(): void {
     [$left, $right] = [$_SESSION["left"], $_SESSION["right"]];
 
     $csrfToken = $_SESSION["csrfToken"];
-    $title = "Test";
-    $content = function() use ($left, $right, $csrfToken) {
-        include __DIR__ . "/../view/fragments/mobSelection.php";
-    };
 
-    include __DIR__ . "/../view/layout.php";
+    if (isset($_GET["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/layout.php";
+    }
 }
 
 function reload(): void {
-    header("LOCATION: /");
+    if (isset($_GET["ajax"])) {
+        header("LOCATION: ?ajax");
+    } else {
+        header("LOCATION: /");
+    }
+
     http_send_status(303);
 }
 
diff --git a/html/styles/main.css b/html/styles/main.css
index 3ef2386..3021d84 100644
--- a/html/styles/main.css
+++ b/html/styles/main.css
@@ -30,14 +30,44 @@ h1 {
     position: relative;
 }
 
-.separator div {
+.separator .or, .separator .spinner {
     position: absolute;
     top: 50%;
     width: 100%;
     text-align: center;
     transform: translate(0%, -50%);
+    opacity: 1;
+    transition: opacity 0.5s;
 }
 
+.separator .spinner {
+    opacity: 0;
+}
+
+.img-preload .spinner {
+    opacity: 1;
+}
+.img-preload .or {
+    opacity: 0;
+}
+
+.separator .spinner img {
+    animation-name: spinner;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+
 .mob {
     width: 40vw;
     height: 42vw;
diff --git a/resources/js/htmx.js b/resources/js/htmx.js
new file mode 100644
index 0000000..594d63d
--- /dev/null
+++ b/resources/js/htmx.js
@@ -0,0 +1,5 @@
+import htmx from 'htmx.org';
+
+console.log("htmx loaded");
+//htmx.logAll();
+window.htmx = htmx;
\ No newline at end of file
diff --git a/resources/js/img-preload.ext.js b/resources/js/img-preload.ext.js
new file mode 100644
index 0000000..415408b
--- /dev/null
+++ b/resources/js/img-preload.ext.js
@@ -0,0 +1,48 @@
+import htmx from 'htmx.org';
+
+console.log("module loaded");
+
+htmx.defineExtension('img-preload', {
+    onEvent: (name, event) => {
+        if (event.target.getAttribute("hx-ext") !== "img-preload") {
+            return;
+        }
+
+        const spinner = [...document.querySelectorAll(
+            event.target.getAttribute("data-preload-spinner")
+            ?? ".img-preload"
+        )];
+
+        switch (name) {
+            case 'htmx:trigger':
+                spinner.forEach(s => s.classList.add("img-preload"));
+                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(() => {
+                        spinner.forEach(s => s.classList.remove("img-preload"));
+                        htmx.swap(event.detail.target, event.detail.xhr.response, {
+                            swapStyle: "outerHTML",
+                            transition: true,
+                        });
+                    })
+                    .catch(error => {
+                        console.error('Error loading images:', error);
+                    });
+                break;
+        }
+    }
+});
\ No newline at end of file
diff --git a/resources/js/index.js b/resources/js/index.js
index e4731a7..8ccc9ec 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -1,3 +1,2 @@
-import htmx from 'htmx.org';
-
-window.htmx = htmx;
\ No newline at end of file
+import './htmx';
+import './img-preload.ext';
diff --git a/resources/js/package-lock.json b/resources/js/package-lock.json
index d6c5ed2..86f08bc 100644
--- a/resources/js/package-lock.json
+++ b/resources/js/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "htmx.org": "^1.9.12"
+        "htmx.org": "^2.0.1"
       },
       "devDependencies": {
         "esbuild": "0.23.0"
@@ -439,9 +439,9 @@
       }
     },
     "node_modules/htmx.org": {
-      "version": "1.9.12",
-      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.12.tgz",
-      "integrity": "sha512-VZAohXyF7xPGS52IM8d1T1283y+X4D+Owf3qY1NZ9RuBypyu9l8cGsxUMAG5fEAb/DhT7rDoJ9Hpu5/HxFD3cw=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.1.tgz",
+      "integrity": "sha512-wO/rWlveSLD2mzRS9Em0v5hlsi6r21iUvaS17GPMgehBbM7eoQmqGQCkscsM67poF24zONgq3gQv+q/cgCHn2w=="
     }
   }
 }
diff --git a/resources/js/package.json b/resources/js/package.json
index edaec9b..ca52e5e 100644
--- a/resources/js/package.json
+++ b/resources/js/package.json
@@ -10,7 +10,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "htmx.org": "^1.9.12"
+    "htmx.org": "^2.0.1"
   },
   "devDependencies": {
     "esbuild": "0.23.0"
diff --git a/view/fragments/mob.php b/view/fragments/mob.php
index b053247..fcbe4bf 100644
--- a/view/fragments/mob.php
+++ b/view/fragments/mob.php
@@ -3,9 +3,11 @@
     $mob ??= [];
     $csrfToken ??= "";
 ?>
-<form action="?<?= $side ?>" method="POST" name="<?= $side ?>" id="form-<?= $side ?>">
+<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="document.forms['<?= $side ?>'].submit()">
+    <div class="mob" onclick="htmx.trigger(document.forms['<?= $side ?>'], 'submit', {})">
         <h2><?= $mob["name"]; ?></h2>
         <img alt="<?= $mob["name"]; ?>" src="/images/mobs/<?= $mob["image"] ?? "_placeholder.png"; ?>">
     </div>
diff --git a/view/fragments/mobSelection.php b/view/fragments/mobSelection.php
index a65003b..6c20dc1 100644
--- a/view/fragments/mobSelection.php
+++ b/view/fragments/mobSelection.php
@@ -1,20 +1,25 @@
-<h1>
-    Which do you like better?
-</h1>
-<div class="selection">
-    <?php
-        $mob = $left ?? [];
-        $side = "left";
-        include __DIR__ . "/mob.php";
-    ?>
-    <div class="separator">
-        <div>
-            OR
+<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>
-    <?php
-        $mob = $right ?? [];
-        $side = "right";
-        include __DIR__ . "/mob.php";
-    ?>
 </div>