txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify contact form timestamp with hyperscript + minimal JS

Browse Source 
Replace 34-line IIFE/MutationObserver with:
- Hyperscript: on toggle if me.open call resetContactForm()
- 11-line resetContactForm() function

Also dispatches 'show' event from openModal() for ninja-keys integration.
All 7 contact form tests pass.
This commit is contained in:
juanatsap
2025-12-02 16:00:00 +00:00
parent 2dd0922a63
commit 6970606c42
2 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/ninja-keys-init.js
+2
View File
@@ -48,6 +48,8 @@
const modal = document.getElementById(modalId);
if (modal && modal.showModal) {
modal.showModal();
// Dispatch 'show' event for hyperscript handlers
modal.dispatchEvent(new CustomEvent('show'));
}
ninjaKeys.close();
}
templates/partials/modals/contact-modal.html
+17 -19
View File
@@ -2,23 +2,7 @@
<!-- Contact Form Modal - Native Dialog -->
<dialog id="contact-modal" class="info-modal no-print"
_="on click call closeOnBackdrop(me, event)
on show
-- Reset form state when modal opens
set form to getElementById('contact-form')
if form
call form.reset()
set formFields to querySelectorAll('.form-group') in form
repeat for field in formFields
remove .hidden from field
end
remove .hidden from querySelector('.form-actions') in form
remove .hidden from querySelector('.form-note') in form
set responseDiv to getElementById('contact-response')
if responseDiv set responseDiv.innerHTML to ''
end
-- Set timestamp for bot protection
set tsField to getElementById('contact-form-loaded-at')
if tsField set tsField.value to Date.now()">
on toggle if me.open call resetContactForm()">
<div class="info-modal-content">
<button class="info-modal-close" commandfor="contact-modal" command="close" aria-label="{{.UI.ContactModal.Close}}">
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
@@ -68,8 +52,9 @@
autocomplete="off">
</div>
<!-- Timing field - set via JavaScript on page load -->
<input type="hidden" name="form_loaded_at" id="contact-form-loaded-at">
<!-- Timing field - set on page load, reset on modal open -->
<input type="hidden" name="form_loaded_at" id="contact-form-loaded-at"
_="on load set my.value to Date.now()">
<!-- Email (required) -->
<div class="form-group">
@@ -161,4 +146,17 @@
</div>
</dialog>
<script>
function resetContactForm() {
const form = document.getElementById('contact-form');
if (form) {
form.reset();
form.querySelectorAll('.form-group, .form-actions, .form-note').forEach(el => el.classList.remove('hidden'));
const resp = document.getElementById('contact-response');
if (resp) resp.innerHTML = '';
}
const ts = document.getElementById('contact-form-loaded-at');
if (ts) ts.value = Date.now();
}
</script>
{{end}}