contact-mailer/client/index.js
2020-08-27 10:01:18 +02:00

86 lines
3.6 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

function jeanCloudContactMailerMessage (messageContainer, theme, level, text) {
/* This function displays a message on top of the form */
const messageElement = document.createElement('p')
const messageId = 'contact-mailer-' + theme + '-message-' + level
messageContainer.appendChild(messageElement)
messageElement.textContent = text
messageElement.classList.add('contact-mailer-message')
messageElement.classList.add(messageId)
messageElement.id = messageId
messageElement.title = 'Cliquer pour fermer'
messageElement.onclick = () => {
messageElement.parentNode.removeChild(messageElement)
}
/* Jump to message */
const url = location.href; //Save down the URL without hash.
location.href = "#"+messageId; //Go to the target element.
history.replaceState(null,null,url); //Don't like hashes. Changing it back.
setTimeout(() => {
try {
messageContainer.removeChild(messageElement)
} catch (e) {} /* Silently fail if message was already deleted by click */
}, 10000)
}
function jeanCloudContactFormIntercept (formId, theme) {
/*
* This function intercepts a form submission and send it via XHR.
* Param formId is the HTML id of the form
*/
const formElem = document.getElementById(formId)
if (!formElem) {
console.error('You tried to intercept form id:"' + formId + '" but it was not found.')
return
}
/* Create the message container */
const messageBox = document.createElement('div')
messageBox.classList.add('contact-mailer-message-container')
formElem.before(messageBox)
/* Intercept the submit event */
formElem.onsubmit = async (e) => {
e.preventDefault()
/* Add loading text */
const submitButton = formElem.querySelector('[type="submit"]')
const loadingText = document.createElement('span')
loadingText.classList.add(".contact-mailer-sending");
loadingText.textContent = ' Envoi en cours…'
submitButton.after(loadingText)
/* XHR */
fetch(formElem.action, {
method: formElem.method,
body: new FormData(formElem)
})
.then(data => {
loadingText.parentNode.removeChild(loadingText)
if (!data.ok || data.status == 500) {
jeanCloudContactMailerMessage (messageBox, theme, 'error', 'Erreur du service denvoi. Réessayez plus tard ou contactez https://jean-cloud.net')
} else if (data.ok || data.status == 200) {
jeanCloudContactMailerMessage (messageBox, theme, 'success', 'Le message a bien été envoyé !')
formElem.reset()
}
})
.catch((error) => {
loadingText.parentNode.removeChild(loadingText)
jeanCloudContactMailerMessage (messageBox, theme, 'error', 'Impossible denvoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.')
})
}
}
(function () {
/* Get the current js file location */
const path = (document.currentScript.src[-1] == '/' ? document.currentScript.src : document.currentScript.src.replace(/\/[^\/]*$/, ''))
/* Adding a css file */
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.crossOrigin = 'anonymous';
link.href = path + "/style.css";
link.integrity = 'sha384-8PWvFCRowSxssUyiGirvpq/Nh6TTzYrsbAmpC0cw/OUKkZibNdI5L1gFiHxfrTZT'
// cat style.css | openssl dgst -sha384 -binary | openssl base64 -A
document.head.appendChild(link);
})()