Convert the contact form to vanilla JS.

This commit is contained in:
Fredrik Jonsson 2022-12-21 13:39:50 +01:00
commit 331be7ebe4
2 changed files with 57 additions and 67 deletions

View file

@ -3,59 +3,48 @@
* A JavaScript file for the contact form.
*/
(function ($) {
(function () {
'use strict';
// Contact form.
$('.contact-form').each(function (e) {
var $contact_form = $(e);
var $contact_button = $contact_form.find('.form-submit');
var contact_action = '/php/contact.php';
const form = document.querySelector('.contact-form');
const button = form.querySelector('.form-submit');
const action = form.getAttribute('data-protect');
const body = document.querySelector('body');
// Display the hidden form.
$contact_form.removeClass('hidden');
// Display the hidden form.
form.classList.remove('hidden');
// Wait for a mouse to move, indicating they are human.
$('body').on('mousemove', function () {
// Unlock the form.
$contact_form.attr('action', contact_action);
$contact_button.first().removeAttribute('disabled');
});
function activateForm() {
form.setAttribute('action', action);
button.removeAttribute('disabled');
}
// Wait for a touch move event, indicating that they are human.
$('body').on('touchmove', function () {
// Unlock the form.
$contact_form.attr('action', contact_action);
$contact_button.first().removeAttribute('disabled');
});
// A tab or enter key pressed can also indicate they are human.
$('body').on('keydown', function (e) {
if ((e.keyCode === 9) || (e.keyCode === 13)) {
// Unlock the form.
$contact_form.attr('action', contact_action);
$contact_button.first().removeAttribute('disabled');
}
});
// Mark the form as submitted.
$contact_button.on('click', function () {
$contact_form.addClass('js-submitted');
});
// Display messages.
if (location.search.substring(1) !== '') {
switch (location.search.substring(1)) {
case 'submitted':
$('.contact-submitted').removeClass('hidden');
break;
case 'error':
$('.contact-error').removeClass('hidden');
break;
}
// Wait for a mouse to move, indicating they are human.
body.addEventListener('mousemove', () => activateForm());
// Wait for a touch move event, indicating that they are human.
body.addEventListener('touchmove', () => activateForm());
// A tab or enter key pressed can also indicate they are human.
body.addEventListener('keydown', function (e) {
if ((e.key === 'Tab') || (e.key === 'Enter')) {
activateForm();
}
});
})(u);
// Mark the form as submitted.
button.addEventListener('click', () => form.classList.add('js-submitted'));
// Display messages.
if (location.search.substring(1) !== '') {
switch (location.search.substring(1)) {
case 'submitted':
document.querySelector('.contact-submitted').classList.remove('hidden');
break;
case 'error':
document.querySelector('.contact-error').classList.remove('hidden');
break;
}
}
})();

View file

@ -11,13 +11,13 @@
const sheet = document.querySelector('.mobile-nav__sheet');
const toggle = document.querySelector('.mobile-nav__toggle');
function navopen () {
function navopen() {
body.classList.add('js-nav-open');
sheet.setAttribute('aria-hidden', 'false');
toggle.setAttribute('aria-expanded', 'true');
}
function navclose () {
function navclose() {
body.classList.remove('js-nav-open');
sheet.setAttribute('aria-hidden', 'true');
toggle.setAttribute('aria-expanded', 'false');
@ -29,10 +29,10 @@
toggle.addEventListener('click', function (e) {
e.preventDefault();
if (body.classList.contains('js-nav-open')) {
navclose ();
navclose();
}
else {
navopen ();
navopen();
}
});
});
@ -41,7 +41,7 @@
const links = document.querySelectorAll('.mobile-nav__sheet a');
links.forEach(function (link) {
link.addEventListener('click', function (e) {
navclose ();
navclose();
});
});