diff --git a/assets/js/contact.js b/assets/js/contact.js index b390368..2b4aaa1 100644 --- a/assets/js/contact.js +++ b/assets/js/contact.js @@ -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; + } + } + +})(); diff --git a/assets/js/mobile.js b/assets/js/mobile.js index d3dc93a..e0e5176 100644 --- a/assets/js/mobile.js +++ b/assets/js/mobile.js @@ -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(); }); }); diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index 095d27e..8f2d672 100644 --- a/assets/sass/_zen.scss +++ b/assets/sass/_zen.scss @@ -258,17 +258,18 @@ figure { // Form .content { + label:has(+ :required) { + &::after { + content: '*'; + color: var(--color-mark-highlight); + } + } + input, textarea { @include margin-bottom(.75); width: 92%; - &:required + span::after { - content: ' *'; - color: var(--color-mark-highlight); - vertical-align: top; - } - &:not(:placeholder-shown):valid { background-color: var(--color-status-bg); } diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss index 9327968..2b40881 100644 --- a/assets/sass/mobile.scss +++ b/assets/sass/mobile.scss @@ -78,7 +78,7 @@ display: inline-block; fill: var(--color-text); width: 1.6rem; - margin-left: 0.1rem; + margin-left: .1rem; rect { transform-origin: center; diff --git a/layouts/shortcodes/contact.html b/layouts/shortcodes/contact.html index 545fbe7..21e23f3 100644 --- a/layouts/shortcodes/contact.html +++ b/layouts/shortcodes/contact.html @@ -2,15 +2,15 @@
-