From 90bd9ef5ca0b6b946ca880c760e8f1cb1a24f1fc Mon Sep 17 00:00:00 2001 From: overflowerror Date: Fri, 2 Aug 2024 22:52:46 +0200 Subject: [PATCH] feat: Change loading animation --- html/styles/main.css | 17 +++++------------ resources/js/img-preload.ext.js | 9 ++------- resources/js/index.js | 2 ++ resources/js/spinner.js | 33 +++++++++++++++++++++++++++++++++ view/fragments/mob.php | 2 +- view/pages/mobSelection.php | 6 +++--- 6 files changed, 46 insertions(+), 23 deletions(-) create mode 100644 resources/js/spinner.js diff --git a/html/styles/main.css b/html/styles/main.css index 4524862..460e314 100644 --- a/html/styles/main.css +++ b/html/styles/main.css @@ -50,24 +50,18 @@ h1 { text-align: center; transform: translate(0%, -50%); opacity: 1; - transition: opacity 0.5s; + transition: opacity 0.2s; } -.middle .spinner { +.loading .or { opacity: 0; } -.img-preload .spinner { - opacity: 1; -} -.img-preload .or { - opacity: 0; -} - -.middle .spinner img { +.loading .spinner img { animation-name: spinner; animation-duration: 1s; - animation-iteration-count: infinite; + animation-delay: 0.2s; + animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); } @@ -80,7 +74,6 @@ h1 { } } - .mob { width: 40vw; height: 42vw; diff --git a/resources/js/img-preload.ext.js b/resources/js/img-preload.ext.js index d88c5aa..9cd7376 100644 --- a/resources/js/img-preload.ext.js +++ b/resources/js/img-preload.ext.js @@ -13,14 +13,9 @@ htmx.defineExtension('img-preload', { return; } - const getSpinners = () => [...document.querySelectorAll( - event.target.getAttribute("data-preload-spinner") - ?? ".img-preload" - )]; - switch (name) { case 'htmx:trigger': - getSpinners().forEach(s => s.classList.add("img-preload")); + [eval][0](event.target.getAttribute("data-loading-callback")); break; case 'htmx:beforeOnLoad': event.detail.shouldSwap = false; @@ -42,7 +37,7 @@ htmx.defineExtension('img-preload', { swapStyle: "outerHTML", transition: true, }); - getSpinners().forEach(s => s.classList.remove("img-preload")) + [eval][0](event.target.getAttribute("data-loaded-callback")); }) .catch(error => { console.error('Error loading images:', error); diff --git a/resources/js/index.js b/resources/js/index.js index 8ccc9ec..91641f7 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -1,2 +1,4 @@ import './htmx'; import './img-preload.ext'; + +import './spinner'; \ No newline at end of file diff --git a/resources/js/spinner.js b/resources/js/spinner.js new file mode 100644 index 0000000..24acd72 --- /dev/null +++ b/resources/js/spinner.js @@ -0,0 +1,33 @@ +var spinnerActive = false; + +const triggerAnimation = () => { + setTimeout(() => { + document.getElementsByClassName("middle")[0].classList.add("loading"); + }, 1); +} + +const endAnimation = () => { + document.getElementsByClassName("middle")[0].classList.remove("loading"); +} + +window.startSpinner = () => { + if (spinnerActive) { + return + } + spinnerActive = true; + document.getElementsByClassName("middle")[0].classList.add("loading"); +} + +window.stopSpinner = () => { + spinnerActive = false; +} + +window.addEventListener("load", () => { + document.querySelector(".middle .spinner img") + .addEventListener("animationend", () => { + endAnimation(); + if (spinnerActive) { + triggerAnimation(); + } + }); +}); \ No newline at end of file diff --git a/view/fragments/mob.php b/view/fragments/mob.php index c3d605d..cc877e4 100644 --- a/view/fragments/mob.php +++ b/view/fragments/mob.php @@ -6,7 +6,7 @@
+ data-hx-ext="img-preload" data-loading-callback="startSpinner()" data-loaded-callback="stopSpinner()">

<?= $mob[" src="/images/mobs/"> diff --git a/view/pages/mobSelection.php b/view/pages/mobSelection.php index 0c5b7cd..0f9ed05 100644 --- a/view/pages/mobSelection.php +++ b/view/pages/mobSelection.php @@ -8,11 +8,11 @@ require_once __DIR__ . "/../fragments/mobSelection.php"; ?>
-
- OR -
spinner
+
+ OR +