lazy load comment captcha #830

EdiWang · Oct 17, 2024 · 85df6ae · 85df6ae
1 parent 12241c8
commit 85df6ae
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/Moonglade.Web/Pages/_CommentForm.cshtml b/src/Moonglade.Web/Pages/_CommentForm.cshtml
@@ -29,12 +29,13 @@
                       aria-label="@SharedLocalizer["Your comments (Markdown supported)"]"
                       placeholder="@SharedLocalizer["Your comments (Markdown supported)"]"
                       maxlength="1024"
-                      required></textarea>
+                      required
+                      onfocus="viewpost.showCaptcha()"></textarea>
         </div>
         <div class="row">
             <div class="col-9">
-                <div class="input-group">
-                    <img id="img-captcha" onclick="viewpost.resetCaptchaImage()" src="~/captcha-image" data-bs-toggle="tooltip" data-placement="top" title="@SharedLocalizer["Can't read? Click to change another image."]" alt="@SharedLocalizer["Captcha code"]" />
+                <div class="input-group" id="captcha-container" style="display: none;">
+                    <img id="img-captcha" onclick="viewpost.resetCaptchaImage()" data-bs-toggle="tooltip" data-placement="top" title="@SharedLocalizer["Can't read? Click to change another image."]" alt="@SharedLocalizer["Captcha code"]" />
                     <input type="text"
                            aria-label="@SharedLocalizer["Captcha code"]"
                            id="input-comment-captcha"

diff --git a/src/Moonglade.Web/wwwroot/js/app/viewpost.module.js b/src/Moonglade.Web/wwwroot/js/app/viewpost.module.js
@@ -105,6 +105,14 @@ export function resetCaptchaImage() {
     document.querySelector('#img-captcha').src = `/captcha-image?${d.getTime()}`;
 }
 
+export function showCaptcha() {
+    var captchaContainer = document.getElementById('captcha-container');
+    if (captchaContainer.style.display === 'none') {
+        captchaContainer.style.display = 'flex';
+        resetCaptchaImage();
+    }
+}
+
 var btnSubmitComment = '#btn-submit-comment';
 
 export function submitComment(pid) {