refactor: simplify contact form timestamp with hyperscript + minimal JS
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:
@@ -48,6 +48,8 @@
|
|||||||
const modal = document.getElementById(modalId);
|
const modal = document.getElementById(modalId);
|
||||||
if (modal && modal.showModal) {
|
if (modal && modal.showModal) {
|
||||||
modal.showModal();
|
modal.showModal();
|
||||||
|
// Dispatch 'show' event for hyperscript handlers
|
||||||
|
modal.dispatchEvent(new CustomEvent('show'));
|
||||||
}
|
}
|
||||||
ninjaKeys.close();
|
ninjaKeys.close();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,23 +2,7 @@
|
|||||||
<!-- Contact Form Modal - Native Dialog -->
|
<!-- Contact Form Modal - Native Dialog -->
|
||||||
<dialog id="contact-modal" class="info-modal no-print"
|
<dialog id="contact-modal" class="info-modal no-print"
|
||||||
_="on click call closeOnBackdrop(me, event)
|
_="on click call closeOnBackdrop(me, event)
|
||||||
on show
|
on toggle if me.open call resetContactForm()">
|
||||||
-- 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()">
|
|
||||||
<div class="info-modal-content">
|
<div class="info-modal-content">
|
||||||
<button class="info-modal-close" commandfor="contact-modal" command="close" aria-label="{{.UI.ContactModal.Close}}">
|
<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>
|
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
|
||||||
@@ -68,8 +52,9 @@
|
|||||||
autocomplete="off">
|
autocomplete="off">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Timing field - set via JavaScript on page load -->
|
<!-- Timing field - set on page load, reset on modal open -->
|
||||||
<input type="hidden" name="form_loaded_at" id="contact-form-loaded-at">
|
<input type="hidden" name="form_loaded_at" id="contact-form-loaded-at"
|
||||||
|
_="on load set my.value to Date.now()">
|
||||||
|
|
||||||
<!-- Email (required) -->
|
<!-- Email (required) -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@@ -161,4 +146,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</dialog>
|
</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}}
|
{{end}}
|
||||||
|
|||||||
Reference in New Issue
Block a user