From f8bff80e3d63f77a9fefb63c799fc42766babb7a Mon Sep 17 00:00:00 2001 From: overflowerror 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 zcmeHKdr(tn77xfHLMcd9sIuh}>I>&4H#hHVBCqg>B@iGeICbUb<|f>bAOEby#kzuXDn_fhZqC*X0aOrOhS;U$p6Nt-Au z2{EM(5+dD{iNkSUwdwvb=`_TBZmz9suJr4QvX%7&VHKH3*tHW)mC6-fz3%qyjyoOa zJIIY!Em}YObsgOB&6l{V5BHx*{xBnWR#hYK;pAY;*B4gI_r1P5=~fIAY*@PHOp9P? zLVsOZimKvwy1=M}Sx)Y*`c0ONcd=6yA5H1={{+vw_To5w6aB~ynH?IZnj}=c8oaX@TzCmzVcbYxpOw}ty?E%D>xjlaw;)Vr%6m4t_IZ5RK8x7 znvfa(-j3yP?d%BW`vu2p6c@8H*O{t({0zR9pc|0`9m_W@-_&@fIj5lC{C7(M_3_~r z3Aefe+BSV#?cxM`#FXEkJ#kCf_V4Af-9Nn5u($LE^GS97;u-U%zCP!HI_q}n&ajD* zUMBsGIo(NroP=HKQEialJJY$ZyL{!P%JojBVKTHU>~3i4^o~cS-Lu`1_iyK2QEL^h|p;Q=VgK1NMX|{(<}k~Yp6Bz6Z(N<|-hT6Q%ag#IEzf;2cJ6#q-|=Zs zSP!hdR&(w*;bk#2^`}eIj!W(-$}2a)?_cjY8RdiaF1goQ zLNB)ud@p|Z)T=wvdCsqwxeUh5O@Xn>)uv$tZR6uc+CcK%HV2qD4o4a5cHl%I$v_6u zOxabud!M%RAj+uXEs|&vts{{vpi;}6WOiA)o+v9M6h>a``~amJ0{}LX!6CQJYIk97 z70-ib2_K^Za6s{xhCNs=(ZLWvZG z#R`cG#!aXQ7L$YsSI871kpdqBrLnsh+)j`z6aeQ_00$Szg+f9Ie8i{}7NZg)j7y{@ zSRo`$A~}kf2!(JAM23?BQ;A#0X2n7o0hC0FlM*>0gvAn>1V9O;FpkK@Fe;RZ6>>r$ z5*oxFC?kO-(@q->+DX}PGbwP`%^n3yI2NzdsCXzJ8I|a)IAa11Dqb38FLIA6^puUv zW^k5Gp$tVOVhJLWA!4aSAs;nbNIG3$5?M?k!WRu{*tTGx7(gt}&M5%!cz{~4L??+e zv{O&hRuzv;31U4*)LO8ej5vdYZpOe!J}bdbCebQf)6N^mC`Zw5R9 zuE2PDxPoST8a3zTTuKT^whMqT7?H!Hgvo{o6ATqBV9$)*h1&ji-nWCk+kl`Rm%2)E-~FvOTBbgudor zc2#R;@sYHm!|yPEUEn&TS#}`B(VBdG)w}dxl5G1Et@{!R_r_cH#8JCr3wF&n|5>$q z^=i|fl*W%R!-sObMV8+zUAjZEXfxbsU7%~2X|-CJTy<#5y2J_tQFbw}UAh>7*>VHth#Z6DCfqWyeA z;+mKArpa%%$R~9fCfE0Aa|;%I8z}hfjd|^z-}!iRp)UmvNO=&(aSNWRY16zZ=d_oGs?swIPPuOfob3{3>O%FQS!>e<}dK_CrzjHiY;Er2+F0{+H zvyBT?c0BVje3%2h(=erR3;l;)UtT50`?>dvv)((B8lk!iKOORo@usqA{p-Jo3=fIpR25gnw1!@3%xz^CPq;?k+l%yJla>*o!N`@)S)P1#Gd|~s zADW;!3;|m5UwB`vA=~mVf8TOY`6ipz0DRv+@Ypvo4W<3fpeY { + 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 ??= ""; ?> -
+ -
+

<?= $mob[" src="/images/mobs/">
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 @@ -

- Which do you like better? -

-
- -
-
- OR +
+

+ Which do you like better? +

+
+ +
+
+ OR +
+
+ spinner +
+
-