| 1 | /** |
| 2 | * @file |
| 3 | * A JavaScript file for the contact form. |
| 4 | */ |
| 5 | |
| 6 | (function () { |
| 7 | |
| 8 | 'use strict'; |
| 9 | |
| 10 | const form = document.querySelector('.contact-form'); |
| 11 | const submit_button = form.querySelector('.form-submit'); |
| 12 | const reset_button = form.querySelector('.form-reset'); |
| 13 | const action = form.getAttribute('data-protect'); |
| 14 | const body = document.querySelector('body'); |
| 15 | |
| 16 | function activateForm() { |
| 17 | form.setAttribute('action', action); |
| 18 | submit_button.removeAttribute('disabled'); |
| 19 | reset_button.removeAttribute('disabled'); |
| 20 | } |
| 21 | |
| 22 | // Display the hidden form. |
| 23 | form.classList.remove('hidden'); |
| 24 | |
| 25 | // Wait for a mouse to move, indicating they are human. |
| 26 | body.addEventListener('mousemove', () => activateForm()); |
| 27 | // Wait for a touch move event, indicating that they are human. |
| 28 | body.addEventListener('touchmove', () => activateForm()); |
| 29 | // A tab or enter key pressed can also indicate they are human. |
| 30 | body.addEventListener('keydown', function (e) { |
| 31 | if ((e.key === 'Tab') || (e.key === 'Enter')) { |
| 32 | activateForm(); |
| 33 | } |
| 34 | }); |
| 35 | |
| 36 | // Mark the form as submitted. |
| 37 | submit_button.addEventListener('click', () => form.classList.add('js-submitted')); |
| 38 | |
| 39 | // Reset the form with the clear button |
| 40 | reset_button.addEventListener('click', () => form.reset()); |
| 41 | |
| 42 | // Display messages. |
| 43 | if (location.search.substring(1) !== '') { |
| 44 | switch (location.search.substring(1)) { |
| 45 | case 'submitted': |
| 46 | document.querySelector('.contact-submitted').classList.remove('hidden'); |
| 47 | break; |
| 48 | |
| 49 | case 'error': |
| 50 | document.querySelector('.contact-error').classList.remove('hidden'); |
| 51 | break; |
| 52 | } |
| 53 | } |
| 54 | |
| 55 | })(); |